So far throughout our
XHTML tutorials we have learnt the basics of how to structure our XHTML files. This article will introduce CSS so that you can start applying designs to your websites.
We will use the code from the
XHTML div example and expand upon it adding the CSS code.
If you have no prior knowledge of CSS then you may wish to consult the
CSS tutorials section and then come back to this guide for implementing XHTML and CSS.
There are various ways to apply CSS to your XHTML, a simple way is to add the code directly to the tags with the style attribute, this is useful when drafting work but can make your code look extremely messy when you start to add more complicated code. Keeping all of the CSS in one place allows us to see it more clearly and know which part needs editing in the future to make changes easy.
The method we shall be using will be applying the CSS straight to the tag names, if we have two of the same tags but only wish to apply the CSS to one of those tags then we can add an id attribute to the tag as such:
HTML Code:
<div id="header"></div>
...