Classes
Steps to Success
- In Notepad, open a new file.
- Add the following code:
<html>
<head>
<title>advanced styles</title>
<link rel="stylesheet" type="text/css" href="advcss.css">
</head>
<body>
<table border="0" cellspacing="0" cellpadding="1">
<tr>
<td>Advanced stylesheet example!</td>
</tr>
</table>
<br/>
<table border="0" cellspacing="0" cellpadding="1" class="alttable">
<tr>
<td>Advanced stylesheet example!</td>
</tr>
</table>
</body>
</html> -
Save as classes.html in the steps folder
- In Notepad, open a new file and copy the following style rules into it:
body {
font-size: 1em;
background: #FFFFFF;
color: #000000;
font-family: verdana, arial, ms sans serif;
}
table {
border-right: #000000 1px solid;
padding-right: 1px;
border-TOP: #000000 1px solid;
padding-left: 1px;
margin: 0px;
border-left: #000000 1px solid;
color: #000000;
border-bottom: #000000 1px solid;
background-color: #c0c0c0;
}
.alttable {
border-right: #FF0000 2px dashed;
border-TOP: #FF0000 2px dashed;
padding-left: 3px; FONT-SIZE: 8pt;
border-left: #FF0000 2px dashed;
color: #FFFF00;
border-bottom: #FF0000 2px dashed;
background-color: #000000;
} - Save as classes.css in the stepsscripts folder
- Preview in a browser.
This example brings "classes" into the equation. If you create a set of rules for the <table> tag - what happens if you want to create two tables with different appearance?
The answer is to use a class. Classes are prefixed with a full period (.) and the name of the class can be whatever you decide. .alttable is the class used in the above example. When the browser reads the "class=classname" part of the table tag, it will break away from the standard table style declarations. It will jump to the .alttable rules and use those.
Classes mean that elements can be individualized, yet still use the formatting from an external css file. Thus, they are very useful and important.