Intro to CSS

Using Cascading Style Sheets (CSS) is a fancy way to describe the process of making a web site look pretty.  In the previous lesson, we learned how to put the raw black and white content on a page.  With CSS, we can now do things like add color, change the text font, and rearrange screen elements anywhere we want.  In addition, CSS allows us to make a change to just one file, and have those changes “cascade” down to every page in your website. Every modern webpage uses CSS, so let’s just jump right into this wonderful technology.

CSS in 4 easy steps:

Although there are several ways to include CSS in webpages, for this tutorial, we’ll only teach the most powerful and flexible method: The External Stylesheet. This separates all styling rules into a completely separate file from your content. You may think it would be difficult, but it actually only takes a few quick steps.

  1. Download this text file to your computer and rename it to “style.css“.  You can actually name it anything you want, but for now, just follow along.
  2. Upload your new CSS file to your server’s html directory. Again, this location is arbitrary, but let’s just all keep it the same for simplicity.
  3. In your home page’s index.html file, add the following line inside the <head> section (of course replacing yoursite.com with the access URL you’ve been using):

    <link rel="stylesheet" type="text/css" href="http://yoursite.com/style.css" />

  4. Go to your access URL in a browser, and see what happens! Your home page should now look significantly different.  Congratulations, you’ve just used CSS for the first time!

Whoa, what just happened?

No worries, let’s walk through it. To start, you may notice that we again started out with a simple text file. The extension “.css” lets us know it will be filled with style information, as opposed to an “.html” file, which is just a text file filled with html content. Anytime you want to see what’s in a web file you can simply drag it onto your text editor (which will assume it’s a txt file inside).

Next, notice we uploaded the file to our server, then immediately used the LINK tag to point to its URL.  When your web browser sees this tag, it thinks “A-ha! the styling instructions for this webpage are at this location! Let me take a peek there before showing you the page.”

Now, if you haven’t realized it yet, you can have ALL your html files point to the same CSS file.  Then any changes to your one CSS file will appear in ALL your html files!  You can now quickly and instantly change the look of your entire site! This is the advantage of the External Stylesheet Method of using CSS.  Cool, eh?

CSS Syntax

If you open the style.css file in your text editor, you’ll see it contains exactly 2 CSS rules. To be able to fully understand what’s going on, and ultimately create your own styles, yup, you guessed right: we’ll need a quick syntax lesson.

Rule Formatting:

A CSS Rule has 3 components:

  1. Selector : The tag you want to affect, eg. the h1 tag
  2. Property : What you would like to change about the selector, eg. its color
  3. Value : What you would like to change the property to, eg. purple.

The powerful concept behind CSS is that the rules “cascade” down. Meaning, you don’t have to set rules for every single tag. Tags without rules will simply absorb styles from the tags above them. You can see a few ways they can fit together below:

BASIC CSS RULE:SELECTOR {
PROPERTY: VALUE;
}
MULTIPLE PROPERTIES:SELECTOR {
PROPERTY1: VALUE1;
PROPERTY2: VALUE2;
PROPERTY3: VALUE3;
}
MULTIPLE SELECTORS:SELECTOR1, SELECTOR2, SELECTOR3 {
PROPERTY1: VALUE1;
PROPERTY2: VALUE2;
}
ACTUAL EXAMPLE:
2 CSS Rules
body {
color: #aabbff;
background-color: #660033;
}

h1, h2, h3 {
color: #7788ff;
}

Notes:

Prev Page: Lesson Goals:
Next Page: The magic of COLOR! Taste the Rainbow!