CSS and Pseudo-Classes Fundamentals of CSS Classes In computer languages, a class is a list of the characteristics of an object. This means that a class describes an object. Such a class is created with a name and a body. The name starts with an underscore or a letter followed by letters, digits, and underscores in any combination. In most (not all) languages (especially in C-based languages), the body of a language starts with { and ends with }. An example would be: vehicle {}
CSS follows the same logic, not necessarily the same rules, as classes in other computer languages. Remember that the area between { and } is the body of the class and that's where the characteristics of the class are listed. Like almost every computer language, there are two categories of classes used in CSS: built-in and custom classes. A built-in class is a class that is already created and you can simply use it. A custom class is one you must create yourself (we will study them in a later section). A pseudo-class is a built-in class but that must be used alongside another class or an object. CSS provides only pseudo-classes. The name of a CSS pseudo-class starts with a colon followed by the actual name of the class, as in :pseudo-class. To enhance the functionalities of links, CSS provides two pseudo-classes. Those pseudo-classes must be used with the HTML a element where the pseudo-class would be preceded with a. This would be done as follows: a:pseudo-class {}
In the body of the class, you can create one or more styles. The Link Pseudo-Class The pseudo-class used for a link is a:link. The :link pseudo-class is used when the target page of the link has not previously been visited from the page where the link is located. Here is an example: <html>
<head>
<title>Social Science Studies</title>
<style>
a:link {
color: Blue;
}
</style>
</head>
<body>
<h1>Social Science Studies</h1>
<p>Social sciences cover a wide range of studies that address all
types of topics about human beings, their behaviors, their history, their societies,
and their environments. Regular social science topics include
<a href="sociology.htm">sociology</a>, <a href="psychology.htm">psychology</a>,
<a href="philosophy.htm">philosoply</a>, and <a href="geography.htm">geography</a>,
just to name a few.</p>
</body>
</html>
This would produce:
Remember that you can define one or more styles in the body of the pseudo-class. Here is an example: a:link {
color: Blue;
font-size: 0.92em;
}
This would produce:
Having Visited a Webpage To let you indicate that a link has been clicked already, CSS provides the :visited pseudo-class. It shows its behavior if the target page of the link has previously been visited. Here is an example: <html>
<head>
<title>Social Science Studies</title>
<style>
a:link {
color: Blue;
font-size: 0.92em;
}
a:visited {
font-size: 14pt;
color: Orange;
font-family: Comic Sans MS;
}
</style>
</head>
<body>
<h1>Social Science Studies</h1>
<p>Social sciences cover a wide range of studies that address all
types of topics about human beings, their behaviors, their history, their societies,
and their environments. Regular social science topics include
<a href="sociology.htm">sociology</a>, <a href="psychology.htm">psychology</a>,
<a href="philosophy.htm">philosoply</a>, and <a href="geography.htm">geography</a>,
just to name a few.</p>
</body>
</html>
This would produce:
The Active Pseudo-Class To let you indicate that an element is currently active, CSS provides the :active pseudo-class. The behavior of this pseudo-class shows up when an element is being activated (different browsers use this pseudo-class differently). In Internet Explorer, the effect can be seen at the exact time a link is being clicked. Here is an example: a:active { color: Aqua }
Here is an example of making a link active (the mouse is currently clicking the link; to see the effect, you would click and hold the mouse on the link):
Hovering an Element When the mouse is passing over an HTML element, you can take some action. This is done using the :hover pseudo-class. This pseudo-class is activated when the mouse is positioned on top of the object whose style uses the pseudo-class. Here is an example: <html>
<head>
<title>Energy</title>
<style>
p {
font-size: 12pt;
color: black;
font-family: Times New Roman; }
h3 {
color: Purple;
font-size: x-large;
font-family: Garamond; }
li {
color: Olive;
font-size: 0.18in;
font-family: Georgia; }
h3:hover {
color: red;
font-size: 1.62em;
font-family: Bodoni MT Black; }
li:hover {
font-size: 0.22in;
font-family: Georgia;
color: fuchsia; }
p:hover {
font-size: 18px;
color: Blue;
font-family: Times New Roman; }
</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>
Here are examples of using the webpage:
There is no rule that says that you must use all these pseudo-classes at the same time but it is suggested that if you decide to define a style for a link, you should define all of the link-related styles, namely a:link, a:active, a:vidited, and a:hover. Custom Classes Creating a Class Obviously the pseudo-classes available from CSS are not enough. Fortunately, you can create your own classes. A custom CSS class is one that holds one or more definitions of styles. To create a class, in the style section of the head code of a webpage or in a CSS file, start with a period and a name for the class. The name must start with a letter, followed by letters, digits, underscores, and/or dashes in any order of your choice. Here is an example: .presentation
{
}
If the name is in more than one word, you can combine them into one. Here are example: <html>
<head>
<style>
.maintitle {
}
An alternative is to use a dash between two words. Here are example: .main-title {
}
Remember that you can use uppercase letters in the name. They can be helpful to show the portions of a multi-part name. Here is an example: .MainTitle
{
}
Othewise, you can adopt a naming convension of your choice. In the same way, you can create other classes and as many styles as you want. Inside the curly brackets of a class, create the desired styles. Here is an example: .main-title
{
font-family: Georgia;
color: maroon;
font-size: 24pt
}
Applying a Style to an Element After creating a style, you can apply it to an HTML tag on the page. To do this, in the start tag, add an attribute named class and assign the name, without the period, of the created style to it. Here are examples: <!DOCTYPE html>
<html>
<head>
<title>Energy</title>
<style>
li {
font-family: Garamond;
color: blue;
font-size: 12pt; }
.MainTitle {
font-family: Georgia;
color: red;
font-size: 24pt; }
.presentation {
font-family: Times;
color: black;
font-size: 14px; }
</style>
<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>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>
<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>3</td>
<td>Lithium</td>
<td>Li</td>
<td>6.941</td>
</tr>
<tr>
<td>4</td>
<td>Berylium</td>
<td>Be</td>
<td>9.0122</td>
</tr>
<tr>
<td>5</td>
<td>Boron</td>
<td>B</td>
<td>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>9</td>
<td>Fluorin</td>
<td>F</td>
<td>18.998403</td>
</tr>
<tr>
<td>10</td>
<td>Neon</td>
<td>Ne</td>
<td>20.1797</td>
</tr>
<tr>
<td>11</td>
<td>Sodium</td>
<td>Na</td>
<td>22.989769</td>
</tr>
<tr>
<td>12</td>
<td>Magnesium</td>
<td>Mg</td>
<td>24.305</td>
</tr>
</table>
<div>
</body>
</html>
This would produce:
Classes and Links You can create a special class for all links or specific links in your webpage. To do this, after a and the name of the pseudo-class, add a period and the name of the custom class (no space). Then define the characteristics of the class. Here is an example: a:link.references {
color: Red;
font-size: 10pt;
font-family: Courier New; }
To apply the link, in the start tag of the a element, assign only the name of the class to the class attribute. Here is an example: <!DOCTYPE html>
<html>
<head>
<title>Energy</title>
<style>
li {
font-family: Garamond;
color: blue;
font-size: 12pt; }
.MainTitle {
font-family: Georgia;
color: red;
font-size: 24pt; }
.presentation {
font-family: Times;
color: black;
font-size: 14px; }
a:link {
color: Brown;
font-size: 10pt;
font-family: Verdana; }
a:active {
color: Cyan;
font-size: 10pt;
font-family: Verdana; }
a:visited {
color: DarkBlue;
font-size: 10pt;
font-family: Verdana; }
a:hover {
font-size: 10pt;
color: DeepPink;
font-family: Verdana; }
a:link.references {
color: Red;
font-size: 10pt;
font-family: Courier New; }
a:active.references {
color: Bisque;
font-size: 10pt;
font-family: Courier New; }
a:visited.references {
color: Blue;
font-size: 10pt;
font-family: Courier New; }
a:hover.references {
color: Maroon;
font-size: 10pt;
font-family: Courier New; }
</style>
<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><a href="hydrogen.htm">Hydrogen</a></li>
<li><a href="helium.htm">Helium</a></li>
<li><a href="lithium.htm">Lithium</a></li>
<li><a href="berylium.htm">Beryllium</a></li>
<li><a href="boron.htm">Boron</a></li>
<li><a href="carbon.htm">Carbon</a></li>
<li><a href="nitrogen.htm">Nitrogen</a></li>
<li><a href="oxygen.htm">Oxygen</a></li>
<li><a href="fluorine.htm">Fluorine</a></li>
<li><a href="neon.htm">Neon</a></li>
<li><a href="sodium.htm">Sodium</a></li>
<li><a href="magnesium.htm">Magnesium</a></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>3</td>
<td>Lithium</td>
<td>Li</td>
<td>6.941</td>
</tr>
<tr>
<td>4</td>
<td>Berylium</td>
<td>Be</td>
<td>9.0122</td>
</tr>
<tr>
<td>5</td>
<td>Boron</td>
<td>B</td>
<td>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>9</td>
<td>Fluorin</td>
<td>F</td>
<td>18.998403</td>
</tr>
<tr>
<td>10</td>
<td>Neon</td>
<td>Ne</td>
<td>20.1797</td>
</tr>
<tr>
<td>11</td>
<td>Sodium</td>
<td>Na</td>
<td>22.989769</td>
</tr>
<tr>
<td>12</td>
<td>Magnesium</td>
<td>Mg</td>
<td>24.305</td>
</tr>
</table>
<div>
<p><a class="references" href="aboutus.htm">About Us</a> | <a href="resources.htm" class="references">Resources</a> | <a href="forum.htm" class="references">Forum</a></p>
</body>
</html>
This would produce:
In the same way, you can create different classes for different link portions. | ||||
