How To >> Browse Articles >> HTML
Using CSS to spice up your HTML
Article Submitted by:
Eric Hoanshelt
If you do not know HTML, check out this introduction: www.artbistro.com/training/articles/203-getting-started-with-html. For the rest of you im assuming that you have beginners knowledge of HTML.
HTML is HyperText Markup Language, as the name says its only a Markup language. Its the bones and structure of the website. CSS (Cascading Styling Sheet) comes in as the skin and makeup. It makes your website look appealing. You can add background images, borders, change colors, rollover effects, layouts and much more! CSS is a very easy language to learn once you understand the basics. So lets get started!
They're 3 different types of CSS styles:
- Inline CSS: this is CSS written within the html tag itself. (Example:<p style="color:#000">This text is black</p>
- Internal CSS: this is CSS written within the <head> section of the document. (Example:<head><style>p{color:#000}</style></head><body><p>This text is black</p></body>
- External CSS:this is a .CSS file that is referenced in the head of the document and only contains your CSS code. We'll get into that example alittle later.
Its good practice to keep your CSS seperate from your HTML so the external CSS is the choice to go. That DOESN'T mean the other two are wrong practices. Some cases call for inline and internal CSS. So lets actually look at some CSS code.
Lets say....you want all your <p> tags to be a certain font-size and you want the text to be blue. Thats very easy to accomplish using CSS. The code would be:(This is showing in the form of internal CSS)
<head>
<style>
p{
font-size:10px;
color:#0000FF;
}
</style>
</head>
Thats it! Everything in the <p></p> will now be 10px font-size and blue. The "p" in the code can be replaced with h1, h2, img...etc. Another example, I want all <h1> tags to be underlined:
<head>
<style>
p{
font-size:10px;
color:#0000FF;
}
h1{
text-decoration:underline;
}
</style>
</head>
So you can see how you can transform tags with ease using CSS. You can also use ID's and classes to style certain elements of your website. Now what are ID's and classes? Simply, they are ways to identify certain tags so the CSS can effect only what YOU want to effect. ID's can only be assign to one and ONLY one thing. Classes can be assigned numerous amounts of times. Here is some HTML to show you how to assign ID's and classes:
<h1 id="header1>I want this to be different from everything!</h1>
<ul id="Navigation">
<li class="list-item1">1</li>
<li class="list-item1">2</li>
<li class="list-item1">3</li>
<li class="list-item1">4</li>
<ul>
<ol>
<li class="list-item2">5</li>
<li class="list-item2">6</li>
<li class="list-item2">7</li>
<li class="list-item2">8</li>
</ol>
As you see, no ID's are the same. I dont want anything to be styled the same way as my header1 or my navigation, but i do want my list-item1 to look alike and my list-item2 to look alike. So in my CSS i would write:
<head>
<style>
#header1{
Insert CSS Code
}
#Navigation{
Insert CSS Code
}
.list-item1{
Insert CSS Code
}
.list-item2{
Insert CSS Code
}
</style>
</head>
You see, to define an ID in CSS, you start the line with a # then the name of the ID. With the class you start it with a . then the name of the class.
So now with tha basics down lets talk about External Styling Sheets. These are very useful do to the fact that you will be using the same CSS alot on your websites. So instead of copying and pasting all the simliar CSS codes to all your pages, you can simply reference a .CSS file to all your pages. Lets take the example of all your <p>, <h1>, <h2>, <h3>, and <h4> on all your pages being a certain size and color. It would be a pain to have to copy and paste all that code into every page (especially when you have a website 100+ pages). So you reference all your pages to a .css file thats holding your style code. This is how you do that:
.css file named: master.CSS
in your head tag put this code: <link href="master.css" type="text/css" rel="stylesheet" />
With that tag there, anything in the master.css file will be applied to that page. Any page with that piece of code also will adopt all the code from that one .css file. This will cut your HTML code down alot and keep everything more organized.
So i hope this helps and i know there is alot of stuff i missed out on saying but if i see more interested in this ill go more in depth with the topic...maybe show how to create roll over effects and drop down menus :-O lol
Hope this helps!
