Lesson 09: Combining Styles

	Combining Styles

Fundamentals of Combining Styles

Creating Many Section Styles for the Same Element

In previous sections, when an element had to use many styles, created the list of styles in the body of the class. Indeed, there is no strict rule to that. You can create different link sections for the same element, as long as you start each section with the name of the element. Here are examples:

<html>
<head>
<title>Energy</title>

<style>
p  { color: black }
li { color: Olive }

h3 {
    font-size:   x-large;
    font-family: Garamond; }
ul { list-style-position: inside; }

li {
    font-size:   0.18in;
    font-family: Georgia }

p { font-family: Times New Roman }

li:hover {
    font-size:   0.22in;
    font-family: Georgia;
    color:       fuchsia; }

h3 { color:       Purple; }

p:hover {
    font-size:   18px;
    color:       Blue;
    font-family: Times New Roman; }

li { color: Olive }

p  { font-size:       12pt }
ul { list-style-type: circle; }
</style>

</head>
<body>

<h3>Forms of Energy</h3>

<p>Energy is work that produces heat. Work is the effect of an object that moves 
from one point to another. It is this movement, or change in location, that 
produces energy. As a result, there are various ways to get energy: water, wind, 
heat (if it is moving from an autonomous source, such as the sun), coal, etc.</p>

<p>The two most common forms of energy are:</p>

<ul>
  <li>Potential Energy: This is energy that is stored in a substance or component. 
  For example, there is energy stored in water even when that water is not being 
  used or exploited</li>
  <li>Kinetic Energy: The energy is kinetic as a result of work. For example, the 
  movement of water in a river or in an ocean is work and that work can produce 
  energy</li>
</ul>

<p>For the potential energy to be usable, it must be transferred to kinetic 
energy.</p>

</body>
</html>

This would produce:

Creating Many Section Styles for the Same Element

This technique of creating different style portions is also available for pounding styles and classes. Here are examples:

<!DOCTYPE html>
<html>

<head>
<title>Linguistics</title>

<style type="text/css">

.description { font-family: Georgia }

.main-title {
    color:     Red;
    font-size: 0.86cm; }

#conclusion { font-family: Times New Roman }

.main-title { font-family: Bodoni MT Black }

.description { color: Blue   }
#conclusion  { color: Maroon }
.references  { color: Green  }

#conclusion  { font-size: 12pt }
</style>
</head>
<body>

<p class="main-title">Linguistics</p>

<p class="description">Linguistics is the study of one or a family of languages. 
Linguistics studies the science, the technology, the mechanical, and physical 
aspects that rule a language. Linguistics scientifically describes the sound (and 
justifies the creation of the sound) produced when a particular 
language is spoken, how, and usually why a certain sound is produced.</p>

<p id="conclusion">Linguistics studies all aspects of a language, from humans, from 
animals, or towards objects. When it comes to humans, linguistics studies the 
characteristics by which the people who speak a certain language speak, or 
speak it, that way. Linguistics is interested in any form of human communication, 
from one person to another person.</p>

<p class="references">About Us | Fields of Study | Research | Resources</p>
<p class="references">Copyright &copy; 2015</p>

</body>
</html>
<style>

This would produce:

Applying a Style

If you use this technique of creating different styles for the same element or class, you could end up applying the same style more than once to the same element. Since the browser reads the code from top to bottom, the value listed last would apply to the element. Consider the following example:

<html>
<head>
<title>Chemistry: Periodic Table</title>
<style>
ul {
    font-family: Arial;
    list-style-type: decimal-leading-zero
}
#introduction {
    color:       Olive;
    font-family: Tahoma;
}
ul {
    color: Black;
    font-family: Georgia;
}
#heading { font-size: 2em; }
ul {
    color: Blue;
    list-style-type: lower-greek
}
</style>
</head>
<body>

<h2 id="heading">Chemistry: Periodic Table</h2>

<p id="introduction">In chemistry, the periodic table is used to organize the 
chemical elements based on their atomic numbers, their electron arrangement, and 
other properties. Based on the atomic numbers, the first 12 elements are:</p>

<ul>
  <li>Hydrogen</li>
  <li>Helium</li>
  <li>Lithium</li>
  <li>Beryllium</li>
  <li>Boron</li>
  <li>Carbon</li>
  <li>Nitrogen</li>
  <li>Oxygen</li>
  <li>Fluorine</li>
  <li>Neon</li>
  <li>Sodium</li>
  <li>Magnesium</li>
</ul>
</body>
</html>

This would produce:

Applying a Style

Overriding the Parent Style

If you want to apply a new style to a section inside an element, create that style and apply it. Such an element would not inherit the style of the parent element. Here is a example of a CSS file named definitions.css:

ul {
    font-family: Garamond;
    color:       blue;
    font-size:   12pt;
}
table {
    font-family: calibri;
    color:       green;
    font-size:   14px;
}
.alkali-metal { color: red    }
.earth-metal  { color: purple }
.noble-gas    { color: Maroon }
.halogen      { color: Olive  }
.metalloid    { color: orange }
.MainTitle    {
    font-family: Georgia;
    color:       red;
    font-size:   24pt; }

.presentation {
    font-family: Times;
    color:       black;
    font-size:   14px; }

Here is the content of a CSS file named collaboration.css:

h3 {
    font-family: Courier;
    font-size:   0.42cm; }

td {
    font-size:   14px;
    font-family: Georgia }

.significant {
    font-size: 14pt;
    font-family: Tahoma;
}

.bulletless { list-style-type: None }

Here is the main file:

<html>
<head>
<title>Chemistry: Periodic Table</title>

<link rel="stylesheet" href="collaboration.css">
<link rel="stylesheet" href="definitions.css">

<head>
<body>

<p class="MainTitle">Chemistry: Periodic Table</p>

<p class="presentation">In chemistry, the periodic table is used to organize the 
chemical elements based on their atomic numbers, their electron arrangement, and 
other properties. Based on the atomic numbers, the first 12 elements are:</p>

<ul>
  <li>Hydrogen</li>
  <li>Helium</li>
  <li class="alkali-metal">Lithium</li>
  <li class="earth-metal">Beryllium</li>
  <li class="metalloid">Boron</li>
  <li>Carbon</li>
  <li>Nitrogen</li>
  <li>Oxygen</li>
  <li class="halogen">Fluorine</li>
  <li class="noble-gas">Neon</li>
  <li class="alkali-metal">Sodium</li>
  <li class="earth-metal">Magnesium</li>
</ul>

<p class="presentation">Based on their properties, these 12 elements can be 
presented as follows:</p>

<div align="center">
  <table border=5>
    <tr>
      <td>Atomic Number</td>
      <td>Element</td>
      <td>Symbol</td>
      <td>Atomic Mass</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Hydrogen</td>
      <td>H</td>
      <td>1.0079</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Helium</td>
      <td>He</td>
      <td>4.002682</td>
    </tr>
    <tr>
      <td class="alkali-metal">3</td>
      <td class="alkali-metal">Lithium</td>
      <td class="alkali-metal">Li</td>
      <td class="alkali-metal">6.941</td>
    </tr>
    <tr>
      <td class="earth-metal">4</td>
      <td class="earth-metal">Berylium</td>
      <td class="earth-metal">Be</td>
      <td class="earth-metal">9.0122</td>
    </tr>
    <tr>
      <td class="metalloid">5</td>
      <td class="metalloid">Boron</td>
      <td class="metalloid">B</td>
      <td class="metalloid">10.811</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Carbon</td>
      <td>C</td>
      <td>12.011</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Nitrogen</td>
      <td>N</td>
      <td>14.0067</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Oxygen</td>
      <td>O</td>
      <td>15.9994</td>
    </tr>
    <tr>
      <td class="halogen">9</td>
      <td class="halogen">Fluorin</td>
      <td class="halogen">F</td>
      <td class="halogen">18.998403</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Neon</td>
      <td>Ne</td>
      <td>20.1797</td>
    </tr>
    <tr>
      <td class="alkali-metal">11</td>
      <td class="alkali-metal">Sodium</td>
      <td class="alkali-metal">Na</td>
      <td class="alkali-metal">22.989769</td>
    </tr>
    <tr>
      <td class="earth-metal">12</td>
      <td class="earth-metal">Magnesium</td>
      <td class="earth-metal">Mg</td>
      <td class="earth-metal">24.305</td>
    </tr>
  </table>
<div>

</body>
</html>

This would produce:

Overriding the Parent Style

Applying Many Styles to an Element

Instead of one, you can apply many styles to an element. You have many options. You can create the style in either the head section or in a separate file. To apply the styles, in the style attribute of an element, provide the list of styles separated by spaces. Here are examples:

<html>
<head>
<title>Chemistry: Periodic Table</title>

<link rel="stylesheet" href="collaboration.css">
<link rel="stylesheet" href="definitions.css">

<head>
<body>

<p class="MainTitle">Chemistry: Periodic Table</p>

<p class="presentation">In chemistry, the periodic table is used to organize the 
chemical elements based on their atomic numbers, their electron arrangement, and 
other properties. Based on the atomic numbers, the first 12 elements are:</p>

<ul>
  <li>Hydrogen</li>
  <li>Helium</li>
  <li class="alkali-metal significant">Lithium</li>
  <li class="earth-metal significant bulletless">Beryllium</li>
  <li class="metalloid significant">Boron</li>
  <li>Carbon</li>
  <li>Nitrogen</li>
  <li>Oxygen</li>
  <li class="halogen">Fluorine</li>
  <li class="noble-gas bulletless">Neon</li>
  <li class="alkali-metal">Sodium</li>
  <li class="earth-metalbulletless">Magnesium</li>
</ul>

<p class="presentation">Based on their properties, these 12 elements can be 
presented as follows:</p>

<div align="center">
  <table border=5>
    <tr>
      <td>Atomic Number</td>
      <td>Element</td>
      <td>Symbol</td>
      <td>Atomic Mass</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Hydrogen</td>
      <td>H</td>
      <td>1.0079</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Helium</td>
      <td>He</td>
      <td>4.002682</td>
    </tr>
    <tr>
      <td class="alkali-metal significant">3</td>
      <td class="alkali-metal significant">Lithium</td>
      <td class="alkali-metal">Li</td>
      <td class="alkali-metal">6.941</td>
    </tr>
    <tr>
      <td class="earth-metal">4</td>
      <td class="earth-metal significant">Berylium</td>
      <td class="earth-metal">Be</td>
      <td class="earth-metal significant">9.0122</td>
    </tr>
    <tr>
      <td class="metalloid">5</td>
      <td class="metalloid">Boron</td>
      <td class="metalloid">B</td>
      <td class="metalloid">10.811</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Carbon</td>
      <td>C</td>
      <td>12.011</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Nitrogen</td>
      <td>N</td>
      <td>14.0067</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Oxygen</td>
      <td>O</td>
      <td>15.9994</td>
    </tr>
    <tr>
      <td class="halogen">9</td>
      <td class="halogen">Fluorin</td>
      <td class="halogen">F</td>
      <td class="halogen">18.998403</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Neon</td>
      <td>Ne</td>
      <td>20.1797</td>
    </tr>
    <tr>
      <td class="alkali-metal">11</td>
      <td class="alkali-metal">Sodium</td>
      <td class="alkali-metal">Na</td>
      <td class="alkali-metal">22.989769</td>
    </tr>
    <tr>
      <td class="earth-metal">12</td>
      <td class="earth-metal">Magnesium</td>
      <td class="earth-metal">Mg</td>
      <td class="earth-metal">24.305</td>
    </tr>
  </table>
<div>

</body>
</html>

This would produce:

Applying Many Styles to an Element

Grouping Styles

Applying the Same Style to Various Elements

Consider the following styles:

<html>
<head>
<title>Chemistry: Carbon</title>

<style>
p {
    font-family: Times New Roman;
    font-size: 12pt; }
li {
    font-family: Times New Roman;
    font-size: 12pt; }
</style>

</head>
<body>

<h1>Chemistry: Carbon</h1>

<p>Carbon is one of the most commonly found chemical components on earth. It 
can be found inside the earth, on the human body, and in many organic compounds. 
Carbon is the 6th most abundant chemical element on earth. The order of 
abundance is:</p>

<ol>
  <li>Hydrogen
  <li>Helium
  <li>Oxygen
  <li>Neon
  <li>Nitrogen
</ol>
</body>
</html>

This would produce:

Grouping Styles

Notice that both styles are exactly the same: same font and same text size. If you have various elements that use the same style, instead of creating the styles separately, you can create the list of tags separated by commas and followed by the style definition. Here is an example:

<html>
<head>
<title>Chemistry: Carbon</title>

<style>
p, li {
    font-family: Times New Roman;
    font-size: 12pt; }
</style>

</head>
<body>

<h1>Chemistry: Carbon</h1>

<p>Carbon is one of the most commonly found chemical components on earth. It 
can be found inside the earth, on the human body, and in many organic compounds. 
Carbon is the 6th most abundant chemical element on earth. The order of 
abundance is:</p>

<ol>
  <li>Hydrogen
  <li>Helium
  <li>Oxygen
  <li>Neon
  <li>Nitrogen
</ol>
</body>
</html>

In the same way, you can create a group of as many styles as you want. Here is an example:

<html>
<head>
<title>Chemistry: Hydrogen</title>

<style>
#main-title
{
    color:       red;
    font-size:   24pt;
    font-family: Rockwell;
}
#introduction, #molecule, #hydrogen, li, #carbon, .description
{
    color: blue;
}
</style>
</head>
<body>

<p id="main-title">Chemistry: Hydrogen</p>

<p id="introduction">Introduction</p>

<p id="hydrogen">Hydrogen is the most widely available chemical element on earth. 
It is primarily presented as a gas. Hydrogen has no odor and no color.</p>

<p class="description">Hydrogen has the simplest atom with one electron, one proton, 
and (the only element with) zero neutron. The fundametal characteristics of hydrogen 
are as follows:</p>

<ul>
  <li>Chemical Symbol: H
  <li>Atomic Number: 1
  <li>Atomic Weight: 1.008
  <li>Phase: Gas
  <li>Appearance: Colorless
</ul>

<p id="molecule">Hydrogen Molecule</p>

<p id="hydrogen">Hydrogen is revealed as a molecule of two atoms as H<sub>2</sub>. 
The atom easily combines with many types of elements to form various categories of 
liquids, gases, and solids. That's how 

it is found in water as it combines with oxygen (O) to produce H<sub>2</sub>O 
(water).</p>

<p id="carbon">While hydrogen is the dominant substance in the universe, carbon is 
the main component of most minerals such as diamond and graphite. Combining 
hydrogen and carbon results in many types of organic compounds.</p>

</body>
</html>

This would produce:

Applying the Same Style to Various Elements

Grouping Styles by Type

Consider the following styles:

<html>
<head>
<title>Chemistry: Hydrogen</title>

<style>
#main-title
{
    color:       Red;
    font-size:   24pt;
    font-family: Rockwell;
}
li
{
    color:       Black;
    font-size:   Medium;
    font-family: Times New Roman;
}
#sub-title
{
    color:       Blue;
    font-size:   x-large;
    font-family: Rockwell;
}
.description
{
    color:       Blue;
    font-size:   Medium;
    font-family: Times New Roman;
}
#introduction
{
    color:       Green;
    font-family: Times New Roman; 
}
#carbon
{
    color:       Green;
    font-family: Garamond;
}
#copyright
{
    color:       Gray;
    font-size:   12px;
    font-family: Comic Sans MS;
}
</style>
</head>
<body>

<p id="main-title">Chemistry: Hydrogen</p>

<p id="sub-title">Introduction</p>

<p id="introduction">Hydrogen is the most widely available chemical element on 
earth. It is primarily presented as a gas. Hydrogen has no odor and no color.</p>

<p class="description">Hydrogen has the simplest atom with one electron, one proton, 
and (the only element with) zero neutron. The fundametal characteristics of 
hydrogen are as follows:</p>

<ul>
  <li>Chemical Symbol: H
  <li>Atomic Number: 1
  <li>Atomic Weight: 1.008
  <li>Phase: Gas
  <li>Appearance: Colorless
</ul>

<p id="sub-title">Hydrogen Molecule</p>

<p id="description">Hydrogen is revealed as a molecule of two atoms as H<sub>2</sub>. 
The atom easily combines with many types of elements to form various categories of 
liquids, gases, and solids. That's how it is found in water as it combines with 
oxygen (O) to produce H<sub>2</sub>O (water).</p>

<p id="carbon">While hydrogen is the dominant substance in the universe, carbon is 
the main component of most minerals such as diamond and graphite. Combining hydrogen 
and carbon results in many types of organic compounds.</p>

<p id="copyright">- - - - -Copyright &copy; 2015- - - - -</p>
</body>
</html>

Notice that many tags use the same styles. For example, the p and the td elements use the same font but different text colors. The h1 and the li elements use the same font but apply different colors. The above code would produce:

Grouping Styles

If different tags or classes share some styles, you can create a list of tags and/or classes separated by commas and followed by the style(s) they share. This means that you will have to create different style sections for the same tag(s) or class(es). Here are examples:

#main-title
{
    color:     Red;
    font-size: 24pt;
}
li
{
    color:     Black;
    font-size: Medium;
}
#sub-title
{
    font-size: x-large;
}
#main-title, #sub-title
{
    font-family: Rockwell
}
.description
{
    font-size: Medium;
}
#sub-title, .description
{
    color: Blue
}
#carbon, #introduction
{
    color: Green;
}
#introduction, li, .description
{
    font-family: Times New Roman;
}
#carbon
{
    font-family: Garamond;
}
#copyright
{
    color:       Gray;
    font-size:   12px;
    font-family: Comic Sans MS;
}

Style Grouping and Links

Style Pounding

Remember that you can create a style for a link using the # symbol for the style and an identifier for the tag in the HTML code. Here are examples:

<html>
<head>
<title>Anthropology</title>

<style>
.main-title {
    color:       red;
    font-size:   24pt;
    font-family: Bodoni MT Black; }

li.presentation {
    color:       black;
    font-size:   12pt;
    font-family: Times New Roman; }

p.presentation {
    font-size:   1.15em;
    font-family: Garamond; }

a:link#copyright {
    font-size:   1.15em;
    font-family: Georgia;
    color:       DeepPink; }

a:active#copyright {
    color:       Gold;
    font-size:   1.15em;
    font-family: Georgia; }

a:visited#copyright {
    font-size:   1.15em;
    font-family: Georgia; 
    color:       SeaGreen;}

a:hover#copyright {
    color:       Peru;
    font-size:   1.15em;
    font-family: Georgia; }
</style>

<head>
<body>

<p class="main-title">Anthropology</p>

<p class="presentation">Anthropology is the study of the origins as well as the 
contemporary aspects of humans. The study includes:</p>

<ul>
  <li class="presentation">Human Body: The study of anthropology includes the 
  physical traits of the <a href="body.htm">human body</a>. This includes such 
  information as what might have created the shapes on the human body and how that 
  body currently appears</li>
  <li class="presentation">Environment: Anthropology must establish the culture in 
  which the human lives, how the <a href="environment.htm">environment</a> 
  influences the human over time, and how the human influences the environment as 
  time passes by</li>
  <li class="presentation">Age: This is the part of anthropology that studies the 
  origins of the human body and its evolution over the years</li>
</ul>

<p><a href="index.htm" class="title">Social Sciences</a> | <a href="resources.htm" 
class="title">Resources</a> | <a href="services.htm" class="title">Services</a></p>

<p><a href="scopy.htm" id="copyright">Copyright &copy; 2015</a></p>
</body>
</html>

This would produce:

Style Grouping and Links

When it comes to the identified elements, you can first create the pounding part and put the list of common styles in its body. This can be done as follows:

#copyright {
    font-size:   1.15em;
    font-family: Georgia; }

Each pseudo-class and the pounding name can then be used for its unique style(s). This can be done as follows:

#copyright {
    font-size:   1.15em;
    font-family: Georgia; }

a:link#copyright    { color: DeepPink; }
a:active#copyright  { color: Gold;     }
a:visited#copyright { color: SeaGreen; }
a:hover#copyright   { color: Peru;     }

Everything else stays the same; that is, assign the name of the pound part to the id attribute of the link element that will use it.

Class Style Grouping and Links

Imagine you have links that don't use a pounding style. Here are examples:

a:link {
    font-size:   1.15em;
    font-family: Cambria;
    color:       DarkMagenta; }

a:active {
    font-size:   1.15em;
    font-family: Cambria;
    color:       Green; }

a:visited {
    font-size:   1.15em;
    font-family: Cambria;
    color:       Teal; }

a:hover {
    font-size:   1.15em;
    font-family: Cambria;
    color:       DarkOrange; }

If, or since, the pseudo-classes share some styles, you can combine those styles in one section where you would provide the a name, the colon, and each pseudo-class where they would be separated with commas. The group is followed by curly brackets. In those brackets, create the common style(s). Here is an example:

a:link, a:active, a:visited, a:hover
{
    font-size:   1.15em;
    font-family: Cambria;
}

Somewhere else in the file, each pseudo-class would provide its unique style(s) in its own section. This can be done as follows:

a:link, a:active, a:visited, a:hover
{
    font-size:   1.15em;
    font-family: Cambria;
}
a:link    { color: DarkMagenta }
a:active  { color: Green       }
a:visited { color: Teal        }
a:hover   { color: DarkOrange  }

In the same way, you might want to use a class for the links. Here is an example:

a.title:link {
    color:       Gray;
    font-size:   1.15em;
    font-family: Comic Sans MS; }

a.title:active {
    color:       Brown;
    font-size:   1.15em;
    font-family: Comic Sans MS; }

a.title:visited {
    color:       Blue;
    font-size:   1.15em;
    font-family: Comic Sans MS; }

a.title:hover {
    color:       Red;
    font-size:   1.15em;
    font-family: Comic Sans MS; }

This time too, create a common section that has the a name, the period and the name of the class, followed by a colon and the name of the pseudo class where they are separated by commas, followed by curly brackets. In the brackets, define the desired style(s). This can be done as follows:

a.title:link, a.title:active, a.title:visited, a.title:hover
{
    font-size:   1.15em;
    font-family: Comic Sans MS;
}

In separate sections, each pseudo-class can define its unique style(s). Here are examples:

<html>
<head>
<title>Anthropology</title>

<style>
.main-title {
    color:       red;
    font-size:   24pt;
    font-family: Bodoni MT Black; }

li.presentation {
    color:       black;
    font-size:   12pt;
    font-family: Times New Roman; }

p.presentation {
    font-size:   1.15em;
    font-family: Garamond; }

a:link, a:active, a:visited, a:hover
{
    font-size:   1.15em;
    font-family: Cambria;
}
a:link    { color: DarkMagenta }
a:active  { color: Green       }
a:visited { color: Teal        }
a:hover   { color: DarkOrange  }

#copyright {
    font-size:   1.15em;
    font-family: Georgia; }

a:link#copyright    { color: DeepPink; }
a:active#copyright  { color: Gold;     }
a:visited#copyright { color: SeaGreen; }
a:hover#copyright   { color: Peru;     }

a.title:link,
a.title:active,
a.title:visited,
a.title:hover
{
    font-size:   1.15em;
    font-family: Comic Sans MS;
}
a.title:link    { color: Gray;  }
a.title:active  { color: Brown; }
a.title:visited { color: Blue;  }
a.title:hover   { color: Red;   }
</style>

<head>
<body>

<p class="main-title">Anthropology</p>

<p class="presentation">Anthropology is the study of the origins as well as the 
contemporary aspects of humans. The study includes:</p>

<ul>
  <li class="presentation">Human Body: The study of anthropology includes the 
  physical traits of the <a href="body.htm">human body</a>. This includes such 
  information as what might have created the shapes on the human body and how that 
  body currently appears</li>
  <li class="presentation">Environment: Anthropology must establish the culture in 
  which the human lives, how the <a href="environment.htm">environment</a> 
  influences the human over time, and how the human influences the environment as 
  time passes by</li>
  <li class="presentation">Age: This is the part of anthropology that studies the 
  origins of the human body and its evolution over the years</li>
</ul>

<p><a href="index.htm" class="title">Social Sciences</a> | <a href="resources.htm" 
class="title">Resources</a> | <a href="services.htm" class="title">Services</a></p>

<p><a href="scopy.htm" id="copyright">Copyright &copy; 2015</a></p>
</body>
</html>

This would produce:

Class Style Grouping and Links