Grains Of Sand Web Design, CSS Demos & HTML5 Templates by tupence

Whilst you still might want or need to use Photoshop (or similar) to create text for headings and logos, it's getting easier and quicker to use CSS to style most text on your site. Not using images in the place of text is a good idea from a accessibility and usability standpoint, it also reduces the weight and load time of your code - making all your visitors far happier.

color
Defines the colour of the text, either in hex, rgb, rgba or a named colour.

• hex - color:#940000 = text coloured red
• rgb - color:rgb(29,44,135) = text coloured blue
• rgba - color:rgba(148,0,0,.6) = text coloured red with alpha opacity of 0.6
• named - color:purple = text coloured purple

:first-letter
Used to style the first letter of a selector, such as a paragraph

• First letter is larger, orange and bold
  p:first-letter{color:#ff5300; font-weight:bold; font-size:1.4em;}

:first-line
used to style the first line of a selector, such as a paragraph

• First line is larger, orange and bold. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mauris nisi, tristique eu aliquam in, ullamcorper quis ligula. Nulla bibendum elit est. Nullam purus ante, iaculis non fermentum a, malesuada sit amet mauris.
  p:first-line{color:#ff5300; font-weight:bold; font-size:1.4em;}

font-family
Determines which fonts the text should be displayed in, usually the preferred font followed by two or three fallbacks.

• font-family: Arial, Verdana, Helvetica, sans-serif; - here Arial is the preferred font, if this isn't installed on the user's computer the browser will try to use Verdana and then Helvetica. If none of these are installed, the browser will use the default sans-serif font.
• font-family: Georgia, "Times New Roman", Times, serif; - here Georgia is the preferred font, followed by Times New Roman and then Times. If these aren't installed on the user's computer, the browser will use the default serif font.

font-size
specifies the size of the text - can be defined in pixels (px), points (pt), ems (em) or a percentage (%).

• font-size:17px;
• font-size:14pt;
• font-size:2.1em;
• font-size:90%;

font-style
specifies whether the text is normal, italic or oblique.

• font-style:italic; Italic text
• font-style:normal; Normal text
• font-style:oblique; Oblique text
• font-style:inherit; Inherited from parent element

font-variant
Specifies whether to use small-caps.

• font-variant: small-caps; Small Caps
• font-variant:normal; Normal
• font-variant:inherit; Inherited from parent element

font-weight
Can be either bold, normal or a number between 100 and 900 (in hundreds); 400 is normal 700 is bold.

• font-weight: 100; 100 weight
• font-weight:bold; Bold
• font-weight:bolder; Bolder
• font-weight:lighter; Lighter
• font-weight:normal Normal weight for the text
• font-weight:inherit Inherited from parent element

letter-spacing
Increase or decrease the space between letters. Can be positive or negative and defined in pixels or ems.

• letter-spacing:2px; - 2px spacing
• letter-spacing:-2px; - negative spacing
• letter-spacing:0.2em; - using ems

line-height
As it says, it specifies the height of a line of text. Specified in pixels, ems or %. Can only be positive value.

• line-height:1.1em; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec mauris nisl. Aenean fringilla velit consequat ipsum rhoncus dignissim. Nam accumsan tempor congue. Aenean tincidunt pulvinar leo in elementum. Nulla tortor purus, tincidunt condimentum luctus eu, blandit pretium mi.
• line-height:2.0em; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec mauris nisl. Aenean fringilla velit consequat ipsum rhoncus dignissim. Nam accumsan tempor congue. Aenean tincidunt pulvinar leo in elementum. Nulla tortor purus, tincidunt condimentum luctus eu, blandit pretium mi.

text-align
Specifies the horizontal alignment of the text.

• Variables are: left, right, center, justify, inherit
• text-align:right;
• text-align:left;
• text-align:center;
• text-align:justify; (stretches the text so each line has equal width)
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec mauris nisl. Aenean fringilla velit consequat ipsum rhoncus dignissim. Nam accumsan tempor congue. Aenean tincidunt pulvinar leo in elementum. Nulla tortor purus, tincidunt condimentum luctus eu, blandit pretium mi. Cras bibendum hendrerit erat. Ut pharetra sollicitudin tortor, ornare pulvinar mi pulvinar quis.
• text-align:inherit; (inherits the alignment from the parent element)

text-decoration
As it says, specifies the decoration added to the text.

• text-decoration:underline; underline
• text-decoration:none; no decoration
• text-decoration:overline; overline
• text-decoration:line-through; line through
• text-decoration:blink; Really annoying blink
• text-decoration:inherit; inherited from parent element

text-indent
Specifies the distance of the first line of a block of text from the margin. Values can be positive or negative.

• text-indent: 50px;
• text-indent: 0;
• text-indent: -20px;

text-shadow
Applies a shadow to text
Defined using text-shadow: [x-offset] [y-offset] [blur] [color];

• text-shadow: 2px 2px 10px #000
• text-shadow:2px 3px 2px rgba(0,0,0,.7);

More details on text-shadow.

text-transform
Defines the capitalization of the text.

• none = the default for the text
• lowercase = all letters are lowercase
• uppercase = all letters are uppercase
• capitalize = the first letter of each word is capitalized
• inherit = inherits the state from the parent element

word-spacing
Defines the white space between words.

• word-spacing:20px; word spacing of 20px
• word-spacing:5px; word spacing of 5px