A Quick Guide To CSS3 - Border, Font and Text

CSS3 Border

CSS3 borders are used to set the borders of a container which can be div, span, paragraph etc. It includes for different properties left, right, top, bottom in the webpage.

Property	Value options
border-style	none | hidden | dotted | dashed | double | inset | outset | solid
border-width	thin | medium | thick | length
border-color	Any color value RGB, Hash etc.
border-radius	border-bottom-right-radius | border-top-right-radius | border-bottom-left-radius | border-top-left-radius

Example

.one {
 border-width: 3px 8px 4px 20px;
 border-style: dashed;
 border-color: yellow green red blue;
}

CSS3 Font

CSS3 Font properties are used to set the font used in different textual components of a webpage.

Property	Value options
font-size	xx-small | x-small | small | medium | large | x-large | xx-large and so on
font-family	family-name | generic family
font-style	normal | italic | oblique | inherit
font-weight	normal | bold | bolder | lighter | 100 | 200 | 300 and so on
font-variant	normal | small-caps | inherit

Example

p {
 font-style: italic;
 font-family: 'Arial';
 font-size: xx-large;
 font-weight: bolder;
 font-variant: small-caps;
}

CSS3 Text

CSS Text properties are used to set the general text properties like we used to do in any text editor like Word. Same textual decorations can be achieved in the webpage with the help of these properties.

Property	Value options
text-align	start | end | left | right | center | justify
direction	rtl | ltr | inherit
letter-spacing	normal | length | %
text-decoration	none | overline | underline | blink
text-justify	auto | inter-cluster | distribute etc
text-outline	none | color | length
text-indent	length | %
text-shadow	none | color | length
text-transform	none | uppercase | lowercase | capitalize

Example

p.example {
 text-align: center; 
 text-decoration: blink;
 text-transform: lowercase;
 text-outline: none;
 text-shadow: 2px 3px blue;
}

< Prev : Intro, Wordwrap and Background

Next : Box-model, Selector and Box layout>