Screen Printing

TUTORIALS » HTML / JavaScript » HTML essentials (guided tutorials)

CSS Style Sheets

Page 1 of 5


Introduction

Until now we have discussed how to build all the contents of a web page using tags to define paragraphs, links, images, lists, and tables. We also discussed the need to create a well formed code structure using XHTML.

Now we are ready to take the next big step and add real formatting to our code. Using CSS (Cascade Style Sheets) you will be able to change completely the appearance of your site by changing the default colors, fonts, sizes, borders, margins, and even the behavior of some tags.

Look at the examples: Both examples above have the exact same HTML code, but only the second one has a linked CSS Style Sheet. Big difference, don't you think?

There are two main ways to apply styles to HTML code.
  • Applying the style attribute directly to each single element (tag) of a web page (inline style).
  • Creating a separate style section (or file) with all the formatting you are going to use in your web page.
The second approach is the most recommended, since it keeps the HTML code cleaner and allows search engines to index web pages easier by focusing on contents instead of formatting.

Applying style to a single element (inline style)

Take a look at the style attribute of the
<body>
tag in the following example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>CSS Example</title>
</head>
<body style="margin: 20px; background-color: #242; font-family: verdana, helvetica; font-size: 12px; color: #F4F6D0;">

  <p>Aliquam erat volutpat. Aenean scelerisque nulla id tortor.</p>
  <p>Etiam libero turpis, sollicitudin ut, aliquam at, elementum vel, mi.</p>
  <p>Praesent id quam. Vivamus vitae mi. Maecenas id tellus. Morbi consequat accumsan enim.</p> 
</body>

</html>
The code will render:
Now take a look at the three
<p>
elements in the following example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>CSS Example</title>
</head>

<body>
  <p style="font-size: 12px; color: #1A928C; font-family: arial, helvetica;">Aliquam erat volutpat. Aenean scelerisque nulla id tortor.</p>
  <p style="text-align: center; color: #8E7A22; font-weight: bold;">Etiam libero turpis, sollicitudin ut, aliquam at, elementum vel, mi.</p>
  <p>Praesent id quam. Vivamus vitae mi. Maecenas id tellus. Morbi consequat accumsan enim.</p>
</body>

</html>
This will render:
In the first example we applied a style modifier to the
<body>
tag, so everything within this element is affected (in this case, the entire page).

In the second example we only applied different styles to the first and second
<p>
's , but we left the third one unmodified.

See? You can use the style attribute to add formatting to the contents of a single element.


During the following pages of this tutorials (as well as in following tutorials) you will learn all the major style modifiers you can use to change the color, fonts, and overall appearance of each element of your pages (body, paragraphs, lists, tables, etc). But right now, let's move on to the next page where you will learn how to create a
<style>
section to apply styles to a page without having to do it tag by tag.

More pages of this tutorial → CSS Style Sheets  12345>

Comments & Questions