Mistaken CSS

Dec 29th, 2008

This is a post for all the people that are new to css and are maybe having some troubles understanding it. One of the biggest things I had a problem with when I started css was understanding the difference between internal css, inline css, and a style sheet. Some of the things that I had a problem with consisted of.

What is the difference of the three?
Why would I use one over the others?
What is the format for each?

Well I want to touch on these topics a little. First what is the difference of the two? Well the biggest difference between the three is that two are in the HTML document and the other is a external document. The names of each kind should tell what they are the inline and internal are in the HTML document and the style sheet is not.

The second question is why would I use one over the others? The answer for this question is that you really don’t have to chose between the three choices. The only thing that will help is if you use a style sheet it makes your HTML document much more organized. I personally don’t use inline or internal css unless I absolutely have to.

The Third question is what is the format for each? This is a big question because the three do look different. When you are using the inline code it should look something like this-

<p style="color: red">text</p> this goes inside you tags like the paragraph(p) tag.

When you are using internal code it should look like this-
<style type="text/css">
	p {color: red;}
	a {color: blue;}
</style>

And last when you are using the style sheet form it gets a little tricky first you have to link a style sheet to the HTML page by using
this is saying that you have a css file named style.css in the root directory. Now you have to create a file called style.css in the root directory. Inside this document is where your code goes which will look something like this-

hr {color: sienna}
p {margin-left: 20px}
body {background-image: url(“images/back40.gif”)}

Now if you have something like you want a padding and a margin on your paragraph(p) tag all you have to do is p {margin-left: 20px; padding: 2px;}. A really good thing to practice is if you have something that has something like 5 or above attributes about it it is good to code them like this-
p {
margin-left: 20px;
padding: 2px;
width: 100px;
z-index: 2;
height: 75px;
}

With that last thing I believe that you are ready to start coding in CSS and you will have a better understanding of what the code should look like.

Shane Strong
Chosen Development