In this chapter, you will learn how you can style text using CSS. For this particular chapter, we will use the font properties, in the next coming chapters, you will learn how to use color properties as well.
Please see the following table summary.
| Property Name | Available Values | Examples |
| font-family | example values: Arial, Tahoma |
p {font-family: Arial, Tahoma}
|
| font-size | example values: 12px, 1em, 12pt, small, medium, large |
p {font-size: 12px; }
span {font-size: small; }
|
| font-weight | example values: bold, bolder, light, normal, or you can specify the number range from 100 to 900 |
p {font-weight:bold;}
div {font-weight:200;}
|
| font-style | example values: normal, italic, oblique |
p {font-size: normal; }
span {font-size: italic; }
|
| font-variant | example values: inherit, normal, small-caps |
h1 {font-variant: small-caps; }
span {font-variant: normal; }
|
Using Alternative fonts, if the first font is not available.
You can include additional fonts if the first font you specify is not available by specifying a comma.
p {font-family: Arial, Helvetica, Tahoma;}
CSS Text Style Examples
You have now learnt the basic of styling the text, in the following examples, you will see how it is going to work.
| CSS Style | Apply to | Result |
h1 {
font-family:Tahoma;
font-size:25px;
color: blue;
text-decoration:underline;
}
|
h1 (Heading 1) |
Heading 1 |
p{
font-style:italic;
color:#bc5531;
font-size: 13px;
}
|
p (paragraph) |
This is a sample text |
/* This apply to span that has a class green */
span.green {
font-family: Verdana;
font-size:12px;
color: rgb(20, 100, 16);
font-weight:bold;
}
|
span | Sample Text |