Introduction to Style sheet:
CSS "Cascading Style Sheets" is not a programming language but a style
sheet language which enables a programmer to format the look and the feel of
web pages written in HTML, XHTML, and can also be applied to any XML document.
Advantage of using Css:
CSS allows the programmer to have better control over the design of a web page
by separating the contents of the page from its presentation. The designer can
save time by controlling multiple HTML pages with a single CSS page.
Furthermore, the designer has the option of modifying particular aspects of a
pages presentation (font, color, layout, etc.) or the entire site by editing
the CSS page. Now that we have discussed the advantages of CSS, let's go ahead
and explore its style sheet rules.Explanation:
Example:1 The html page
|
<span class="heading" > My favorite sites:</span>
<a class="home" href="http://www.Google.com">Google</a>
<a class="home" href="http://www.yahoo.com">Yahoo</a>
<a class="home" href="http://www.java.com">Java</a>
<a class="home" href="http://www.html.com">Html</a>
|
This is the css page
|
.home a:link
{
color: brown;
font-family:Times New Roman;
font-size:X-small;
text-decoration:none
}
.home a:active
{
color: Green;
}
.home a:visited
{
color: gray;
text-decoration:none
}
.home a:hover
{
background:gray;
color: white;
text-decoration: underline;
}
|
Explanation:
Prior to creating a CSS page, a "class will have to be added to the link tag.
The class allows the user to display links within the CSS page in various ways.
In the figure above a class was added to the link tag by typing, class="home",
it does not matter what class name is.
In order to create the CSS page and the following elements were added to
it:
-
.home a: link
-
.home a:visited
-
.home a:active
-
.home a:hover
Notice that the class is named home" and placed between parentheses"{}. The
use of parenthesis is to link the inside content with its class. For example,
when the mouse is placed over one of the links below, the ".home a:hover" code
specifies that the link will be underlined, highlighted gray, and the text
color will be while. The parameters used to create the CSS page are self
explanatory. It is easy to determine the relationship between each parameter.
Below is a demonstration of how the links will look like:
Google
Yahoo
Java
Html
|