Stewart Adam's Website Tutorial

General Guidelines: The basics of CSS

Internal vs. External

CSS definitions can be created internally inside a page, meaning that your definitions are only accessable to that page and no other page, or externally meaning your CSS is placed inside a file and this file can be linked to many pages so your entire website can share your stylesheet.

One of these methods has a huge advantage over the other. Can you guess? It's external. External is a much better choice when coding CSS because since internal styles cannot be used outside your one page - the one .html file - if you wanted your different pages to look the same as the others, you would have to copy the CSS accross to each file. Imagine now you suddently decide that the green background didn't work out as well as you had liked, and you want to change it to a blue one. Well, you would have to edit each file since and change every green background to blue!

Now, think of the external sheet. You have one file with your definitions, and it's linked to each of your pages. So, you decide to change the green to blue. Make the change in your external CSS file, and suddenly - It's done! Because your page was linked, it means that this one external file is used on every page. You changed that file once, and all your pages changed at once! This becomes a major advantage when you want to change your font let's say: No more editing tags everywhere; Change the one line in your CSS file and watch how your every piece of text changed font instantly on your website!

Here are two representations of internal and external sheets:

Internal: Each page to itself

    page1.html        page2.html         page3.html
        |                  |                 |     
        |                  |                 |     
        |                  |                 |     
Internal Styles    Internal Styles    Internal Styles

External: Change once, change it all

    page1.html        page2.html         page3.html
         ^                 ^                  ^
           /               |               \
              /            |            \
                 /         |         \
                    /      |      \
                      /    |    \
                      MyStyles.css
                  (External Stylesheet)

Creating a external CSS file

Starting a site with your own external CSS stylesheet or even adding one to an existing site is matter of two simple steps:

If you page does not have a <head> section, add one and end it with </head> before your body tag. Below's an example, with the added code in bold:
```
<html>
<head>
</head>
<body>
 This is example text...
```
Now that there is the head section, add a link tag to it:
```
<link rel="stylesheet" href="default.css" type="text/css">
```
Don't forget to replace default.css with the filename of your CSS file! The name doesn't really matter though, so if you don't care just leave it as default.css as long as you remember that when you want to change a style, you have to open default.css.

So, once again, here's an example of the added link tag, what was added marked in bold:
```
<html>
<head>
 <link rel="stylesheet" href="default.css" type="text/css">
</head>
<body>
 This is example text...
```

Once you've added the link tags, all that's left is to create a default.css file (or whatever you chose to use in the link tag) and start adding your definitions!

Link, not hyperlink!

From my experience, the thing that people get the most confused about when using CSS is understanding the power of linking. Remember that the link created with <link> tag used with CSS isn't the same as the <a href="http://site-here"> tag hyperlink, which is the little blue text that you use browse around different sites around the net.

Selectors vs. Classes

When creating a website style with CSS, you must create your CSS definitions (what creates your website's styles) using a selector definition or a class definition.

Selectors are used for a specific tag - all paragraphs, all images, all headings, etc. For example you want all paragraphs, or , to appear green. Use a selector definition and it will apply to every paragraph you make. So, want all your paragraphs green? Orange? Blue? It's as easy as making one of these styles.

A class for only targeted objects. Basically you give your class a name, and then you have to specifically tell HTML tags to be use that class as their style. So in other words, it is a style that applied to only what you tell it to. For example if only paragraphs containing important text should be bolded, then a class could be created that would define bold text. Now your paragraphs would use the style defined in your selector definition, but when you tell a paragraph to use this class, it will additionally have bold text.

A little summary:

Use selector definitions when: You want ALL of [tag] to look the same.
Use class definitions when: You want only certain content to look this way.

The Syntax

The general structure (syntax) of CSS is the class or tag name, followed by the opening curley brace: "{". In between the command to define how the tag or class should look, then to close your style definition use the other curley brace: "}". It is also vital to remember to include a semicolon (a ";") after each command. You don't want to know how many time I've spent an hour looking at my code trying to figure out what is wrong when infact it was because I forgot to add that little ; at the end (CSS tends to ignore what's after the missing ; when you forget it).

Selectors

Creating selector definitions are straight-forward: Simply use the name of the tag then open with the curley brace. For example:

tag {
attribute1: value;
attribute2: value;
}

Just change tag for the real tag name. On this site the font is Verdana, 9pt. Since all paragraphs on the site should look the same, (you wouldn't want the font or size to change between pages, right?) the code would look like:

p {
font-size: 9pt;
font-face: Verdana;
}

Classes

Classes are a little more complicated. To create a class, start with a dot, then give your class a name. That name can be anything at all, so give it a name that means something to you. Here, as always, is the abstract example:

.ClassName {
attribute1: value;
attribute2: value;
}

Here the name of the class created is "ClassName" - the dot is not included in the class name. The dot is used to tell CSS that you're not creating a selector definition, but a class definition. Apart from that, forget that starting dot ever existed.

To use your class in HTML, simply add the attribute:

class="ClassName"

To the tag that will use that style. For instance, if I wanted my link (the <a> tag) to use a class I created like this:

.GreenLink {
font-color: green;
}

(this class makes the link green) then I would create my HTML like this:

<a href="http://www.mysite.com" class="GreenLink">Visit mysite.com!</a>

Main Menu