Published on: 05 August, 2013

CSS Text Style

Posted by andy | 932 views 0 likes 0 favourites 0 comments
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 {
color: blue;
h1 (Heading 1)

Heading 1

font-size: 13px;
p (paragraph)

This is a sample text

/* This apply to span that has a class green */ {
font-family: Verdana;
color: rgb(20, 100, 16);
span Sample Text

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Related Articles
Published on: 20 May, 2016
Do you need to create a beautiful, simple and elegant pagination links with css? Simply follow our easy and quick tutorial on how to create the pagination links easily with CSS.
Published on: 31 January, 2016
The easy way to optimize your site for printing is to create a separated external css targeting a media to print only. When a printing action is being executed, the browser will send over the information from your page to the printer. It will also check if there is any specific style sheet that will be used for printing mode only. If there is, it will then render the page content using the media print css file. Therefore the page you see in the printer paper may completely looks different with the one you see in a page. The idea of optimizing in here is to hide unnecessary content.