Decorative Flower
Her Realm, Personal website and blog of Cole
If you’ve just recently begun to use CSS or have been following tutorials from sites which provide “quick” fixes, then you may have HTML documents riddled with CSS, resulting in very messy code. If you move all your css between the head and /head tags, not only will your code appear neater, but it will be easier to keep your CSS uniform and update it. Your HTML documents may contain things like this:
 
If you move all of your CSS into the head, your codes will look more like
 
CSS will go in the head along with the title, javascript, etc.

 
All your CSS will go between those two tags. For starters, I’ll give you a sample CSS sheet.



<style type="text/css">
body
{
background-color: #ffffff;
background-image: url('bg.gif');
font-size: 10px;
font-family: arial, verdana;
color: #000000;
}
a:link {
text-decoration: none;
color: #0000EE;
font-size: 10px;
font-family: arial, verdana;
}
a:hover {
border: 1px solid #EE0000;
background-color: #ffffff;
color: #EE0000;
font-size: 10px;
font-family: arial, verdana;
}
a:visited {
text-decoration: none;
color: #0000EE;
font-size: 10px;
font-family: arial, verdana;
}
a:active {
text-decoration: none;
color: #0000EE;
font-size: 10px;
font-family: arial, verdana;
}
table, td, td
{
font-size: 10px;
font-family: arial, verdana;
color: #000000;
}
div
{
font-size: 10px;
font-family: arial, verdana;
color: #000000;

}
</style>
 
 
 
This basic stylesheet would produce a white page with black text and blue links which are red with a red border on hover. Assuming we want all text uniform, I went ahead and adjusted so that tables and div layers would have the same text properties as the body. In order to arrive at this as a result, you must find everywhere you are using CSS. For instance, if you have a common style you’re using for all divs such as below:
The easiest way to move this to the CSS is simply to create a selector. The selector is generally thr HTML tag which is being modified.



<style style="text/css">div
{
}
</style>
 
 
 
Then, copy everything between the quotations of your div tag and paste it in.
<style="text/css">div
{
font-family: arial, verdana;
font-size: 10px;
color: #000000;
}
</style>
 
 
 
Dividing the lines is not necessary but helps keep things neat. Then, you could delete style attributes from each individual div tag. If you are not using divs, you could simply put this code in the body selector, p selector or table selector. Additionally, you can use two or more of these elements in your CSS to make sure that your tables, divs, paragraphs and body all look uniform.



<style type="text/css">body
{
background-color: #ffffff;
background-image: url('bg.gif');
font-size: 10px;
font-family: arial, verdana;
color: #000000;
}
table, td, td
{
font-size: 10px;
font-family: arial, verdana;
color: #000000;
}
div
{
font-size: 10px;
font-family: arial, verdana;
color: #000000;
}
p
{
font-size: 10px;
font-family: arial, verdana;
color: #000000;
}
</style>
 
 
 
If you have any links specified with CSS, they certainly will look messy, perhaps something like this:
Link
Or, maybe you already have a “stylesheet” which modifies the bahaviour of your links, but it might not be in the head. Perhaps you have something like this, which we can add into our new stylesheet.



<style type="text/css">
</style>
 
 
 
Code like this, can be found on many sites and can be helpful, but if you want to have a good grasp on CSS and have a neat stylesheet, it can hold you back. Often, as in this example, the CSS is show in comment tags (the “arrows”) which are not needed but might help you to figure out where this ends and that begins. We’ll remove the comments tags and add this to our stylesheet.



<style type="text/css">body
{
background-color: #ffffff;
background-image: url('bg.gif');
font-size: 10px;
font-family: arial, verdana;
color: #000000;
}
table, td, td
{
font-size: 10px;
font-family: arial, verdana;
color: #000000;
}
div
{
font-size: 10px;
font-family: arial, verdana;
color: #000000;
}
p
{
font-size: 10px;
font-family: arial, verdana;
color: #000000;
}
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover {text-decoration: none; }
a:active {text-decoration: none; }
</style>
 
 
 
Since we will no longer be specifying the link colours in the body tag, we will add that to our CSS, along with font attributes, so that they will be uniform with the text. Additionally, I will add a background and border to the link hover (when the mouse is placed over the link, but not clicking on it).



<style type="text/css">body
{
background-color: #ffffff;
background-image: url('bg.gif');
font-size: 10px;
font-family: arial, verdana;
color: #000000;
}
a:link {
text-decoration: none;
color: #0000EE;
font-size: 10px;
font-family: arial, verdana;
}
a:hover {
border: 1px solid #EE0000;
background-color: #ffffff;
color: #EE0000;
font-size: 10px;
font-family: arial, verdana;
}
a:visited {
text-decoration: none;
color: #0000EE;
font-size: 10px;
font-family: arial, verdana;
}
a:active {
text-decoration: none;
color: #0000EE;
font-size: 10px;
font-family: arial, verdana;
}
table, td, td
{
font-size: 10px;
font-family: arial, verdana;
color: #000000;
}
div
{
font-size: 10px;
font-family: arial, verdana;
color: #000000;
}
p
{
font-size: 10px;
font-family: arial, verdana;
color: #000000;
}
</style>
 
 
 
If you feel you absolutely must use coloured scrollbars, which only work in certain browswers, then click here. Assuming that, that is all the CSS you have lying around in your coding, your stylesheet is complete and your pages should appear cleaner.
  • To learn about a few more useful selectors, click here.
  • To learn about using IDs and classes, click hereCSS Classes.
  • For a very useful and complete CSS guide click here.
  • For a list of CSS properties and values, click here.
Skip to toolbar