To make your life alot easier you can define the common XHTML tags you use on your webpages within your Stylesheet, doing this can define a certain tag globally and you'll never have to modify it within your XHTML again! In this tutorial we will show you the XHTML tags you can define in CSS! If your just getting into CSS then this will be perfect knowledge for you later on, as you may already be coding stuff in your XHTML pages when infact you could simply define it in one stylesheet and be done with it!

Start by creating a CSS document called global.css (Note if you already have a stylesheet that's part of your website's design then you might as well add this code into it instead of creating a new stylesheet), this can be done in various text editors such as Notepad. Keep this document open while you read this tutorial! Now create a blank XHTML document add in those basic structure tags and call it index.html, also leave that open while you read the tutorial

The paragraph tag:

One of the (If not most) popular XHTML tags is the paragraph tag, using this in your XHTML document it also's you to create a paragraph like space between text that is within the tag, so lets get some example rolling, here's a pratical use of the paragraph tag:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tristique dui semper risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus at libero.</p>

<p>Ut libero metus, imperdiet nec, lacinia eu, egestas eu, arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

Go ahead and add that into your open XHTML document.

Using that would generate a nice paragraph spacing between paragraph one and two. But what if you want the gap to be slightly bigger than the standard? Here's the incorrect and correct method of creating the result:

Direct input into XHTML (Not recommend):

<p style="margin-bottom:10px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tristique dui semper risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus at libero.</p>

<p style="margin-bottom:10px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tristique dui semper risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus at libero.</p>

See how were applying the same code everytime to get the result we want, well with CSS you could define it in one line of code!

Defined in CSS Style Sheet: (Recommended)

p {margin-bottom:10px;}

One line of code in your CSS and thats it. You need not define anything into the XHTML the CSS is doing it globally. Add this into your global.css document and save it.

Defining header tags:

Another popular XHTML tag used alot is the header tags, ranging from h1 to h6 they are a simple piece of XHTML but can also be defined in CSS also. Before we do though let's include a header in previous code that now has the paragraph tag being defined in the CSS document:

<h3>Defining XHTML tags in CSS</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tristique dui semper risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus at libero.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tristique dui semper risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus at libero.</p>

Okay so now our XHTML document has a title, but wait! I want the text to be in the center. By default it's alignment is set to the left, but you can change it so it's in the center. Here's the not recommended and recommend way of doing it.

Direct input into XHTML (Not recommend):

<h3 align="center">Defining XHTML tags in CSS</h3>

So this method would mean everytime I inputted a header tag I would have to add in the align attribute to get it to center. Now in CSS you can do this by defining it globally.

Defined in CSS Style Sheet: (Recommended)

h3 {text-align:center;}

Another one line defining code. Basically by not adding the align attribute into your XHTML but instead defining it in CSS this will now display every header h3 tag in the center. And a even better time saver with header's is you can use CSS to define them all at once, if you want this cheeky bit of code then look below:

h1,h2,h3,h4,h5,h6 {text-align:center;}

We could of defined it by doing each header tag seperately and if you want some to be aligned to center and some not thats what you would have to do, but if you wanted all your tags centered then you can use the great grouping ability that CSS has!

Update your XHTML Document to this:

<h3>Defining XHTML tags in CSS</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tristique dui semper risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus at libero.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tristique dui semper risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus at libero.</p>

And your CSS Style Sheet to this:

p {margin-bottom:10px;}
h1,h2,h3,h4,h5,h6 {text-align:center;}

Defining the Anchor tag in CSS:

Our final tag that I will show you how to define in CSS today is the anchor tag (also known as a link) Every website on the internet will have links somewhere on it's site and because you'll tend to have lots of them defining them in CSS will be great help to you. But first let's add in the anchor tag into our current XHTML document so we can see how it can be used:

<h3>Defining XHTML tags in CSS</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tristique dui semper risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus at libero.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tristique dui semper risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus at libero.</p>
<a href="#">Go to next story</a>
<a href="#">Return to Homepage</a>

Okay so we can see that these are links, that can take us to various places on a website, another way of describing the anchor tag is simply by saying the word the Navigation bar. Okay so I've got the links in place, but say I wanted the links to be the colour red! Here's the not recommended and recommended way of doing it:

Direct input into XHTML (Not recommend):

<a href="#" style="color:#FF0000;">Go to next story</a>
<a href="#" style="color:#FF0000;">Return to Homepage</a>

See how we're having to define the same colour in each seperate link? Bring on the CSS!

Defined in CSS Style Sheet: (Recommended)

a {color:#FF0000;}

With yet another one line definition the CSS is now making all links the colour red, and whats even better the anchor tag doesn't stop there, ever wondered how you can make a link change colour as you put your mouse over it. With CSS you can also define it within the style sheet as well! Check it out:

a {color:#FF0000;}
a:hover {color:#000000;}

Now the CSS has globally defined that when someone's mouse roll's over the link it will turn black! But we can still expand on that and define the colour of link when you've clicked on it! Check it out:

a {color:#FF0000;}
a:hover {color:#000000;}
a:visited {color:#00FF00;}

With the addition of the a:visted attribute links will now globally change that colour when the user has clicked on that link!

Finally now after all this code you going to want to add it into your XHTML document and then attach the CSS stylesheet to it that we've also been working on:

Our XHTML document should look like this:

index.html:

<h3>Defining XHTML tags in CSS</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tristique dui semper risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus at libero.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tristique dui semper risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus at libero.</p>
<a href="#">Go to next story</a>
<a href="#">Return to Homepage</a>

Make sure you've only got the XHTML tags in there and not any incorrect defining methods,

And now add our XHTML tags that have been defined into our CSS:

global.css:

p {margin-bottom:10px;}
h1,h2,h3,h4,h5,h6 {text-align:center;}

a {color:#FF0000;}
a:hover {color:#000000;}
a:visited {color:#00FF00;}

There we go, some common XHTML tags defined in CSS making your life easier. I hope you've learnt something from this tutorial!