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

CSS Style Sheets

Page 2 of 5

You are in page:

1. Introducing Style Sheets

» 2. The <style> tag

3. Classes

4. Setting styles by ID

5. CSS in a separate file

The `<style>` tag

A more practical way to apply styles to a web page is by using the

<style>

tag in the

<header>

section. This tag allows us to assign, from the beginning, all the styles we are going to use in our page, thus presenting the following advantages:

All the style formatting is contained in one only place, making it easier to modify and correct.
The HTML code of the document remains cleaner, making it easier for search engines to read and index the actual content of the page.

The basic syntax to write the

<style>

section is:

<style>
selector1 {property1: value; property2: value;}
selector2 {property1: value; property2: value;}
</style>

For purposes of clarity, you can write the same code using line breaks to separate each property:

<style>
selector1 {
  property1: value;
  property2: value;
  }

selector2 {
  property1: value; 
  property2: value;
  }
</style>

Now, check out this real 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>

<style>
body {
  background-color: #F0E68C;
  font-family: arial, helvetica;
  color: #B22222; 
}
h1 {
  color: #9932CC;
  font-size: 25px;
}
p {
  font-style: italic;
}
</style>


</head>
<body>
  <h1>This page has style!</h1>
  <p>This is a paragraph</p>
  <p>This is another paragraph</p>
</body>
</html>

To render:
Here is the explanation for the above example:

The first style selector is body, this means it will affect only the
```
<body>
```
tag. So everything within the
```
<body>
```
element (yes, the entire page) will have a yellowish background color, and an Arial (or Helvetica) font type with a maroon color;
The second selector is h1, so every
```
<h1>
```
element will display a purple, 25 pixels sized font.
The third selector is p, so every
```
<p>
```
element will be displayed using an italic font.

Thanks to this

<style>

section, if we ever want to change the way our paragraphs look we just have to change the p selector instead of going through our entire HTML code modifying each

<p>

element, one by one. This is the magic of CSS styles!

Actually, you can set the style of several elements at once just by separating them with comas in the selector section like:

<!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>

<style>
h1 {
  color: #AA0000;
}
h2, p {
  color: #00AA00;
}
</style>


</head>
<body>
  <h1>This is a h1 header</h1>
  <h2>This is a h2 header</h2>
  <p>This is a paragraph</p>
</body>
</html>

To render: In the example above we set the color of our

<h1>

elements to maroon, and the color of our

<h2>

and

<p>

elements to green (both at the same time).

But what if you want to have more than one style for your

<p>

paragraphs (or whatever other element). In this case we can use style classes. Continue to the next page to learn more about them.

More pages of this tutorial → CSS Style Sheets <123 4 5 >

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

CSS Style Sheets

You are in page:

The <style> tag

Comments & Questions

The `<style>` tag