Lesson 08: Pounding an HTML Element With Style

	Pounding an Element With Style

Introduction

When studying inline styles, we saw that we could create a style in the start tag of an element. If such a style contains many parts, it can become difficult to read. An alternative is to create such a style in the head section and then apply it to the specific element it is meant for.

The problem with that technique is that, if the name of a style is the name of many sections (such as paragraphs created with the p tag) in the webpage, the style would apply to all sections that use that tag. Sometimes you want to apply a certain style to only a specific element you will identify.

Creating a Pounding Style

To create a style for a specific element, in the style section of the head portion of your HTML code, start the style with the # sign and give it a name. Here is an example:

<style>
#hydrogen {
    font-family: 'Times New Roman';
    font-size:   0.52cm; }
</style>

In the same way, you can create other styles for other elements. To apply the style to an element, add an identifier to it, which is done using the id attribute to the start tag. Specify the name of the attribute as the name of the style without the # symbol. Here are examples:

<html>
<head>
<title>Chemistry</title>

<style>
#hydrogen {
    font-family: 'Times New Roman';
    font-size:   0.52cm; }

#carbon {
    font-family: Tahoma;
    font-size:   0.22in; }
</style>

</head>
<body>

<p id="hydrogen">Hydrogen is the most widely available substance on earth.</p>

<p id="carbon">Carbon is the main component of most minerals such as 
diamond and graphite.</p>

</body>
</html>

This would produce:

Applying a Style

Pounding a Link

If you have a specific linking element that must use a specific, you can create a specific style for that link. To do this, in the style section, create each of the link pseudo-classes but its name must end with # and the name you will use for the id attribute. Here are examples:

<!DOCTYPE html>

<html>
<head>
<title>Biology</title>

<style type="text/css">
a:link {
    color:       Green;
    font-family: Arial;
}
a:active {
    color:       Olive;
    font-family: Arial;
}
a:visited {
    font-family: Arial;
    color:       Purple;
}
a:hover {
    font-family: Arial;
    color:       Orange;   
}
a:link#biotech {
    font-size:   14pt;
    color:       Maroon;
    font-family: Georgia;
}
a:active#biotech {
    font-size:   14pt;
    color:       Lime;
    font-family: Georgia;
}
a:visited#biotech {
    font-size:   14pt;
    color:       Blue;
    font-family: Georgia;
}
a:hover#biotech {
    color:       Red;
    font-size:   14pt;
    font-family: Garamond;
    
}
#bio-heading {
    font-size:   18pt;
    color:       Green;
    font-family: Elephant;
}
#description {
    color:       Navy;
    font-size:   12pt;
    font-family: Times New Roman, Garamond, serif;
}
</style>
</head>
<body>

<h3 id="bio-heading">Biology</h3>

<p id="description">Biology is the study of the existence of living 
organisms. Biology studies how the organisms start (such as how an organism 
is born), how they grow (or how they change from one state or phase to 
another), how they live, how they function, where they dwell, and how their 
existence ends (such as how they die). Biology can be divided in various 
fields of sudies. Examples are:</p>

<ul>
  <li>Biophysics
  <li><a href="biochemistry.htm">Biochemistry</a>
  <li><a href="biotechnology.htm" id="biotech">Biotechnology</a>
</ul>

</body>
</html>

This would produce:

Pounding a Link