Style CSS

Posted on   |   In

#Style CSS

#Style text

##Fundamental text and font styling
Two categories:

  • Font styles: Properties that affect the font that is applied to the text, affecting what font is applied, how big it is, whether it is bold, italic, etc.
  • Text layout styles: Properties that affect the spacing and other layout features of the text, allowing manipulation of for example the space between lines and letters, and how the text is aligned within the content box.

###Fonts

####Color
The color property sets the color of the foreground content of the selected elements (which is usually the text, but can also include a couple of other things, such as an underline or overline placed on text using the text-decoration property).

1
2
3
p {
  color: red;
}

####Font families
To set a different font on your text, you use the font-family property — this allows you to specify a font (or list of fonts) for the browser to apply to the selected elements. The browser will only apply a font if it is available on the machine the website is being accessed on; if not, it will just use a browser default font. A simple example looks like so:

1
2
3
p {
  font-family: arial;
}