CSS

Cascading Style Sheet

 Applying CSS
• Inline example
• Inline example 2
 Applying CSS
• External example
 Selectors
Names of html tags
 Lengths and Percentages
• px (such as font-size: 12px) is the unit for pixels.
• em (such as font-size: 2em) is the unit for the
calculated size of a font. So “2em”, for example, is
two times the current font size.
• pt (such as font-size: 12pt) is the unit for points,
for measurements typically in printed media.
• % (such as width: 80%) is the unit for… wait for
it… percentages.
• Other units
include pc (picas), cm (centimeters), mm (millime
ters) and in (inches).
 Colors
• red
• rgb(255,0,0)
• rgb(100%,0%,0%)
• #ff0000
• #f00
aqua, black, blue, fuchsia, gray, green, lime, mar
oon, navy, olive, orange, purple,red, silver, teal
, white, and yellow.
 Colors
Color picker
Color Names
 Color and Background-color
h1 {
color: yellow;
background-color: blue;
}

example
body {
font-size: 14px;
color: navy;
}
h1 {
color: #ffc;
background-color: #009;
}
 Text
Font-family

font-family: arial, helvetica, serif;

 Text
Font-weight

font-weight: bold or font-weight: normal

Other values
bolder, lighter, 100, 200, 300, 400 (same
as normal), 500, 600, 700 (same
as bold), 800 or 900
 Text
Font-style

font-style: italic or font-style: normal

 Text
Text-decoration
• text-decoration: underline, does what you
would expect.
• text-decoration: overline places a line above
the text.
• text-decoration: line-through puts a line
through the text (“strike-through”).
Text-transform
This will change the case of the text.
• text-transform: capitalize turns the first letter of
every word into uppercase.
• text-transform: uppercase turns everything into
uppercase.
• text-transform: lowercase turns everything into
lowercase.
• text-transform: none I’ll leave for you to work
out.
 Text
Text-spacing
letter-spacing and word-spacing
a length or normal
 Text
line-height

a length, a percentage, or normal

 Text
text-align
left, right, center, or justify
 Text
text-indent
length or percentage
Margins and Padding
 Margins and Padding
margin-top,
margin-right,
margin-bottom,
margin-left,

padding-top,
padding-right,
padding-bottom and
padding-left
 Borders
border-style
solid, dotted, dashed,double, groove, ridge, inset
and outset.
border-width
border-top-width,
border-rightwidth,
borderbottom-width and
border-left-width
border-color
 Putting it all together
altogether
Intermediate CSS