html

FONT PROPERTIES
Property
font-family font-style font-variant

Values font name generic font normal italic oblique normal small-caps font-weight

normal bold bolder lighter 100-900

font-size

normal length length absolute absolute absolute absolute absolute absolute absolute relative relative percentage

CHANGE CASE

Example font-family:arial font-family:arial, helvetica font-style:normal font-style:italic font-style:oblique font-variant:normal font-variant:small-caps font-weight:normal font-weight:bold font-weight:bolder font-weight:lighter font-weight:250

font-size:normal font-size:14px font-size:14pt font-size:xx-small font-size:x-small font-size:small font-size:medium font-size:large font-size:x-large font-size:xx-large font-size:smaller font-size:larger font-size:75%

TEXT DECORATION

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

This is some text.
This is some text.
This is some text.

h1 h2 h3 h4 {text-decoration:overline}
{text-decoration:line-through}
{text-decoration:underline}
{text-decoration:blink}

TEXT INDENT
50px
100px
1cm
10%
50%
p { text-indent:100px; }

[ HTML & CSS ] MR. ZERNIE R. PUGAO

1

BACKGROUND COLOR:

POSITION

h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}

left top left center left bottom right top right center right bottom center top center center center bottom

BACKGROUND IMAGE SIZE background-image:url('smiley.gif'); background-repeat:no-repeat; background-size:100% 100%;
100px 100px
75px 75px
10px 150px
200px
50%
100% 100% cover contain

CSS background-color example!

This is a text inside a div element.
This paragraph has its own background color.
We are still in the div element.

h1 {background-color:#6495ed;}
p