Jake Selvidio
Art & Design Instructor

mm205 « Web Scripting » CSS & Type

CSS&
  Type

CSS Font Properties


color
Set your font color using a variety of formats. I'll cover most of these in class.
See Example » 
h1{
color: #CCC;
}
font-family
Declare a "font stack" to provide browsers with some fallback fonts
See Example » 
p{
font-family: Helvetica, Arial, san-serif;
}
font-size
Font-size can be set a few different ways. The most common units are px, em, and %
See Example » 
h1{
font-size: 18px;
}
font-style
There are three possible values: normal, italic, or bold
See Example » 
blockquote{
font-style: italic;
}
font-variant
Specifies whether or not a text should be displayed in a small-caps font
See Example » 
h3{
font-variant: small-caps;
}
line-height
Sets the line height
See Example » 
h1{
font-size: 18px;
line-height: 24px;
}
letter-spacing
Sets the space between text characters
See Example » 
h1{
letter-spacing: 2px;
}
text-indent
Indents the first line of a text block
See Example » 
p{
text-indent: 2em;
}
text-decoration
Adds or removes decoration - used mostly for underlines
See Example » 
a:hover{
text-decoration: none;
text-decoration: underline;
text-decoration: line-through;
}
text-align
Sets text alignment
See Example » 
p.news{
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
}
text-transform
Specifies uppercase, lowercase or capitalized text
See Example » 
h3{
text-transform: uppercase;
}

Font Shorthand

Several properties can be condensed into one font property using shorthand.

Diagram of font shorthand
*line-height is also optional with this method

Setting a base-font

It is common practice to use the body rule to set our font base. What we set here will become our fall-back or default text styling.
We will be making additional font declarations for other elements as we go.

resources

Copyright © 2014 Jake Selvidio. All rights reserved.