Custom CSS (Classes) Selectors
Custom CSS (Classes) Selectors
Embedded Files
Empowering Today’s Learners to Become Tomorrow’s Leaders
Classes
Classes
Procedures to Practice
Procedures to Practice
In Notepad, open a new file.
Add the following code:
<html>
<head>
<title>advanced styles</title>
<link href="prostyles/classes.css" rel="stylesheet" type="text/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>
3. Save as classes.html in the procedures folder
4. In Notepad, open a new file and copy the following style rules into it:
/* CSS Document */
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;
}
5. Save as classes.css in the prostyles folder
6. 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.
Page updated
Report abuse