Published on: 05 August, 2013

CSS Text Style

Tumblr Digg Google Plus

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

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.