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>