CSS and Pseudo-Classes Fundamentals of CSS Classes
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. |
|
|||||||
|
|
||||||||
