HomeAdvanced Styles
So far we have only looked at basic text styles but there is more to style sheets than just formatting text.
We have seen how you can change current tags but what if we wanted to create our own style say table presentation or styles we can reuse?
For this part of the guide I will assume that you are using either embedded or external style sheets - all the syntax used here is the same whichever option you choose.
Time to set up our example. Take a look at the table below - not very pretty.
| heading | heading | heading |
| data | data | data |
The code
<table width="200" border="1" align="center"><tr>
<td>heading</td>
<td>heading</td>
<td>heading</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>
Now what we'll do is create 2 style classes, one for the heading and one for the data. We do this in exactly the same way as we done for the <b> tag in the previous examples. The difference this time is that we are going to define our own classes.
Lets say we want the headings to be bold yellow text in a verdana font on a teal background and we want the data to be red verdana text on an off-white background. We will give the class name for the headings as myheading and we'll call the data class mydata.
Our style sheet should look something like this.
.myheading {font-family : verdana,sans-serif;
font-weight : bold;
font-size : 9pt;
color : yellow;
background-color : teal;
}
.mydata {
font-family : verdana,sans-serif;
font-weight : normal;
font-size : 9pt;
color : red;
background-color : #FFFFF5;
}
Please note that we define our class names .myheading and .mydata you must have the . or they wont work.
Now we'll move on the next part.
Why not discuss this article in our forum?
]
[
]