LESSON 12 – BRIEF INTRO TO CSS

INTRO

CSS stands for Cascading Style Sheets.

It is a language that deals with the look of your site. It has now mostly replaced html as far as style coding goes.

Note that HTML is still required. CSS just provides more functionality.

ADVANTAGES

Here are the advantages of using CSS and HTML instead of using just HTML:

· More customization options (more functionality)

· Easier changes to entire websites

· Separation between content and styles.

The second point above should be discussed a little bit. CSS coding can be placed in a separate file. That file could be used for all html documents in a website. One can then make changes to that one file and effectively change the look and feel of the entire site.

Imagine, changing one document instead of hundreds!

TEMPLATE FOR CSS AND HTML

Below is the template for CSS and HTML in one document. To get the full benefits of CSS, it would be advantageous to place the two in different files. However, this single file setup is simpler for this short introduction.

CSS SYNTAX

We now need to know how to specify rules in CSS to make things happen on our site. The way that the words are written is called syntax. We will now learn basic CSS syntax.

The general syntax for a rule is the following:

selector.class

{

property:value;

}

You can repeat the property:value; line for different properties. Of course, you need to know some properties before you get started. Thankfully, this is easy to look up on the internet.

SELECTOR

The selector is simply the tag name for which you want to specify stylistic properties. For example, common selectors are img, p and div.

PROPERTIES

The properties allow you to change different stylistic areas for the tag/selector. For example, the following property would make the text colour inside paragraph tags blue:

p

{

color:blue;

}