Home
HTML and CSS
Tutorials
Defining HTML Tags in CSS
Level: Beginner Software:
Dreamweaver
HTML and CSS go hand in hand. They are the two most basic code you will ever come across, but although HTML is completly different to CSS did you know CSS can define certain HTML tags? Although you can't put HTML in CSS you can put CSS into HTML and this is what gives CSS the power to define HTML. So CSS isn't so different after all eh?
Anyway in this tutorial I'll show you some common html tags that are defined in CSS in many website stylesheets:
Body
A very common tag to define in CSS here's how it's defined:
| body {
line-height: 1.166; background-color:#000000; margin: 0px; padding: 0px; } |
Having your body defined in your CSS is a excellent trick to be able to easily change the body of your webpage. Imagine you found a great background-color for your new website but have to go through all your pages and changing it because you defined it like so:
| <body style="background-color:#FF4533;"> |
The valid and recommended way of doing it is this:
| body{background-color:#FF4533;} |
Of course you can define much more than I have shown you in your body tag, but notice how convient it is have the body tag defined in your CSS
Defining the body tag in your CSS doesn't mean you don't include it in your HTML. You must have the <body> and </body> tags in your html. Defining html tags in CSS means you don't have to add the style="" bit onto your body tag in HTML and mean you can change it easily.
Links
You can define the a tag in your CSS and change your link colours effortlessly without making your html invalid. Here's how it goes:
| a:link {text-decoration: none; color:#000000;}
a:visited {text-decoration: none; color:#000000;} a:active {text-decoration: none; color:#000000;} a:hover {text-decoration: underline; color:#000000;} |
Woah! A few more attributes there, lets break it down!
a:link: Is the colour of your link when it displayed
a:visited is the colour of link when you have clicked on it
a:active is simular to the attribute a:link
a:hover is the colour of your link when your mouse hovers over it
You may of been defining the colour of your links like so:
| <a href="http://pulsegfx.net/" style="color:FF5453;">My Link</a> |
Although I've but this as wrong it actually is a correct way of doing it but consider this. Sometimes the quicker you do something don't always mean it's the best way. In CSS taking shortcuts is the best way! CSS isn't a cheat, it's a nice little coding language you should be used at every oppurtunity! But think about it defining the color of your links each time by using the code above, when you can simply paste in 4 lines into your sites CSS and change them in seconds like in the example below:
| a:link {color:#000000;}
a:visited { color:#FF0000;} a:active { color:#0000FF;} a:hover { color:#000000;} |
Tables
And finally we come to our last common html tag defined in CSS in this tutorial. Now people now think that tables aren't used much anymore, and in actual fact there pretty much right, tables used to be part of a website design before the coding language of CSS, infact I'd go far as to say that webmaster were forced to because there was no alternative, now however CSS is the alternative and many people use it. Tables are however still used in such factors like data presentation and even in some login form on various websites, although tables are pretty much over, they can still be designed in CSS like so:
| table { background: #009900; }
tr { background: #ffff00; } td { background: #FFFFFF; } |
Infact I think defining tables in CSS is the biggest time saver if you use them alot. Because you have to define a table in the structure of:
| <table>
<tr> <td>Row 1</td> <td>Row 2</td> </tr> </table> |
So think about it. You have 3 seperate tags you have to define if you did it the long way like so:
| <table style="background color:#009900;" >
<tr style="background-color:#FFFF00;"> <td style="background-color:#FFFFFF;">Row 1</td> <td style="background-color:#FFFFFF;">Row 2</td> </tr> </table> |
Your basically doing extra work where you don't need to and in CSS you simply define the colour in 3 lines:
| table { background: #009900; }
tr { background: #ffff00; } td { background: #FFFFFF; } |
Well I hope you have learnt how you can save time defining some of your HTML elements in your CSS Stylesheets and style tags. For a little extra credit work you might want to research some more tags you can define. I didn't include all of them because I think it's good when you find them out for yourself, but here's some more to research: The <p>, <h1> (Header tags) and the <ul> and <li> (lists) tags in CSS have fun!
More HTML and CSS: Most Popular Materials | Fresh Materials
| More HTML Tutorials at Markuptutorials.com