HTML and CSS
HTML Programming and Cascading Style Sheets (CSS)
By Aurelie A. Peralta
Cascading
Style Sheet makes webpage formatting easy. It allows web designers to effect formatting
changes to the entire website in just editing a single CSS file. Predefined formats
can be stored in the CSS file and can be called or used anywhere in the website. Because of this, web designing task is no longer tedious for web developers.
In this
example, I will create a simple HTML file HOME.HTM and a CSS file PSU.CSS. You can
create these files using your favorite editor like notepad. The source code for
the HOME.HTM is shown below:
—————————————————–
<html>
<head>
<title>HTML and CSS Demo</title>
<link href=”PSU.css” mce_href=”PSU.css” type=”text/css” rel=”stylesheet” />
</head>
<body>
<table width=”800″ border=”0″ cellspacing=”0″ cellpadding=”0″ align=”center”>
<tr>
<td height=”100″ align=”center” class=”title02″ bgcolor=”blue”>
WELCOME TO MY WEBPAGE!
</td>
</tr>
<tr>
<td bgcolor=”silver” height=”50″>
<div align=”center” class=”menu02″>
<a href=”#” mce_href=”#”>HOME</a> | <a href=”#” mce_href=”#”>SUPPORT</a>
| <a href=”#” mce_href=”#”>CONTACT US</a>
</div>
</td>
</tr>
<tr>
<td>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps
over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown
fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
brown fox jumps over the lazy dog.</p>
<ul>
<li>First Bullet</li>
<li>Second Bullet</li>
<li>Third Bullet</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
—————————————————–
Here is the source code for the PSU.CSS file:
—————————————————–
.title02
{
color : #ffffff;
margin-top : 0px;
padding-bottom : 0px;
margin-left : 5px;
margin-right : 5px;
font-size : 28px;
font-family : Tahoma,Verdana,Arial;
font-weight: bold;
}
.title02
a {
color : #000000;
text-decoration: none;
}
li {
color : #000000;
margin-top : -1px;
padding-bottom : -1px;
margin-bottom : -1px;
margin-right : 1px;
font-size : 11px;
font-family : Tahoma,Verdana,Arial;
}
ul, ol {
color : #000000;
margin-top : 0px;
padding-bottom : 0px;
margin-bottom : 0px;
margin-right : 0px;
font-size : 11px;
font-family : Tahoma,Verdana,Arial;
}
p {
color : #000000;
margin-top : 5px;
padding-bottom : 5px;
margin-bottom : 0px;
margin-left : 10px;
margin-right : 10px;
font-size : 14px;
font-family : Tahoma,Verdana,Arial;
}
p a {
color : #294A7B;
}
p a:hover
{
color : #000000;
}
.menu02
{
color : #000000;
font-size : 16px;
font-family : Tahoma,Verdana,Arial;
font-weight : bold
}
.menu02
a {
color : #000000;
text-decoration: none;
}
.menu02 a:hover {
color : #cc0000;
text-decoration: underline;
}
—————————————————–
In this example, the formatting style of .title02
and .menu02 were called
inside the html tags by using the class=” ”
argument and the rest of the tags automatically uses the corresponding
tag formatting style in the CSS file like the case of the <p>, <ul>
and <li> tags.