Jish.Lubaway.com
THE BASICS OF CSS
Hi. This is the first tutorial I've ever written. (Actually I've written a few, but they were for other websites) Anyways, bear with me as I'm a new tutorial writer.
Now, I'm not going to bore you with any technical definitions, if you're looking for those you've come to the wrong place. I'm just going to write this out of memory and how I understand the concepts, person to person.
Lastly, this tutorial is going to be for beginners. I'm going to assume at least a slight understanding of HTML. However, I'll assume you know nothing about css. That being said, let's get this started already!
INLINE CSS
If you haven't heard about web standards, I suggest you read up on the subject. I'm certianly not a web standards expert so I'll save you the senseless ramblings. I'll just simply say let's try to keep design separate from content.
Now let's write some content. Just normal standard markup. No design, no effects or anything.
<p>This is some paragraph text.</p>
<p>This is another paragraph with <a href="">a link</a>!</p>
I'm a visual learner, and I need to actually see things so I'll try to put an example after each piece of code, here is an exapmle of what two paragraphs and a link would look like.
Looks pretty basic, huh? Let's make it more interesting with some css! We'll use the most basic type, inline css. With this type you add css rules to an html tag using the style attribute. It is used just like any other attribute (ie the href attribue in an anchor <a> tag)
<p style="color:blue;">This is some paragraph text.</p>
<p>This is another paragraph with <a href="" style="background:green;">a link</a>!</p>
Now as you can see in Example 2, the color of the first paragraph has changed to blue and the background color of the link is green!
SEPARATING DESIGN FROM CONTENT
Ok, that's great. CSS Changed the color of the text and the background of the link, but isn't the design supposed to be separate from the content? The design aspects (the stuff that made the colors change) is mixed in there with the content! What's up with that?
Yes, the design is mixed with the content, so let's separate it. First we are going to use the class attribute. The class attribute tells the browser which css rules to apply. Sound confusing? Let's look at some more examples.
<p class="color">This is some paragraph text.</p>
<p>This is another paragraph with <a href="" class="color">a link</a>!</p>
Ok, now we have our original content, with two class attributes. Wait a minute. It looks plain and boring again!
Now we have to tell the browser what to do with these class attributes. Let's use some style sheets. Style Sheets go at the top of your html document in between the <head> and </head>tags. Let's look at some sample stylesheet code.
<style type="text/css">
.color {
color: red; }
</style>
This code tells the browser that everything with class color, should apply all of the rules inside the curly braces {}. In this case, the only rule is color:red;. So let's put the stylesheet code in the head section of our html document and see how it looks!
Now the design is truly separated from the content. We can change the colors just by changing the css rule in the stylesheet. The color of the text and the link change with a simple change to the rule. It can be green, or purple, or whatever you want!
USING SELECTORS
Ok. We understand colors, and we know how to use the class attribute to apply css rules to a group of elements, but what If I want to change the appearance of an entire page? Let's look at another example. Here is some more basic content.
<h1>This is a Headline</h1>
<p>This is a paragraph with <a href="">a link</a> in it.</p>
<p>This is another paragraph which doesn't have a link in it.</p>
<p>This is a third paragraph which does have <a href="">a link</a> in it.</p>
This is pretty basic stuff, and makes for a pretty basic looking page.
This time, we're not going to change the content of the page at all. We'll just leave the content alone and add our design (style sheet.) Instead of using classes, however, this time we're going to use selectors. Selectors apply to every element of a certain type on the page. So if I use the selector p it will apply to all <p> elements and so on. Let's look at an exapmle style sheet using selectors.
<style type="text/css">
h1 {
color: red;
font-family: Arial, Helvetica, sans-serif; }
p {
color: blue;
font-size: small; }
</style>
This style sheet says that every <h1> element should be red and use the font Arial. If the Arial font is not installed on the client's system, then use Helvetia. If that is not on the system, then use a default sans-serif font. The style rule for <p> says that all paragraph tags should be blue and have a small font size. Let's see how our page looks with our selector style sheet.
ID AND CLASS SELECTORS
With id and class selectors you can apply style sheet rules to specific elements in your html document. They give you much more control over specific elements, or specific groupings of elements.
First of all, lets take our second bit of example code and add some id and class attributes. Here is our code with the added attributes.
<h1 id="headline">This is a Headline</h1>
<p class="highlighted">This is a paragraph with <a href="">a link</a> in it.</p>
<p class="highlighted">This is another paragraph which doesn't have a link in it.</p>
<p>This is a third paragraph which does have <a href="">a link</a> in it.</p>
NOTE: Before we go any further, I want you to know that a class attribute can be applied to as many elements as you want on a page. An id attribute, however can only be applied to ONE specific element.
That being said, let's write our style sheet for our single headline element and our group of hilighted elements.
<style type="text/css">
h1#headline {
color: red;
font-family: Arial, Helvetica, sans-serif; }
p.highlighted {
color: blue;
font-size: small; }
</style>
You'll notice that it looks very similar to the style sheet rules that used only selectors. The only difference here is the addition of the # indicator for id selectors and the . indicator for class selectors.
Basically anything after the # or . is what the value of the id or class will be (ie id="headline", class="highlighted") Ok, now lets look at our document complete with id and class selectors.
Notice how no styles are applied to the third paragraph because it does not contain the class="highlighted" attribute. Also, the Headline 1 is the only element that contains the style rules defined with the id selector.
STYLE SHEETS IN EXTERNAL FILES
So far you've seen inline style (<p style="color:blue;">) and embedded style (<style type="text/css"> between the <head> and </head> tags.) Now, lets move onto css in external files.
Why would we want to put style rules in an external file? Let's say you run a website, and there are 200 pages on your website. Your boss comes in to your office and tells you that he wants the link color on every page to be orange. If you were using embedded style sheets, you would have to open, search through, edit, save, and close 200 documents. This is where an external css file would come in handy.
If you imported an external css file on all 200 of your pages, you could just change the style rule in that css file, and the links on all 200 pages would be changed simply by editing one file. Huge time saver. Enough talking, let's use some external css files.
Ok, remember the embedded stylesheet code we already have?
<style type="text/css">
h1#headline {
color: red;
font-family: Arial, Helvetica, sans-serif; }
p.highlighted {
color: blue;
font-size: small; }
</style>
We basically have everything we need. All we need to do is copy and paste all of the rules into an external file and add one line of code. Let's start out with the css file. Copy and paste all of the rules into a new blank document and save it with a .css extension.
Here is what the file, myStyle.css would look like.
h1#headline {
color: red;
font-family: Arial, Helvetica, sans-serif; }
p.highlighted {
color: blue;
font-size: small; }
The file is simply everything between the <style> and </style> tags. Now that we have our external file, we can import it into our html document.
<style type="text/css">
@import "myStyle.css";
</style>
Now we have a new file with an imported style sheet. It looks exactly the same in the browser because it is using all of the same style rules.
Next, if we want to we can make another separate file and import all of the same style rules into it. This way we maintain a uniform look throughout our website. After we have the two totally separate documents and the boss tells us to make orange links, we modify the css file and both of the pages have orange links!
