[INDEX]

CSS, or cascading style sheets aren't that hard to learn.  What's difficult a lot of times is to get your CSS to implement the same, or nearly the same way in different browsers.  In fact many times it's impossible and you will have to adapt a 'coding down' philosophy when dealing with the Netscape 4.+ browsers and doing things differently for the Opera browser. I find both of these browsers subpar despite claims that Opera supports CSS better than any other browser.  I just have not seen evidence of this and it's support of Javascript stinks!

On the other hand if you are using the Internet Explorer browser you must take care in your coding because the IE browser will let you get away with things that are just not correct, or that work and look differently in all the other browsers.  In other words it will let you get away with bad coding and give you the result you want but that doesn't mean your coding is correct.

Unfortunately the only way to find this out is to check your work in other browsers and many times multiple browsers on the same computer just will not coexist.  If you have a friend that runs a different browser ask them to check it once you have the page(s) uploaded to your web site and to let you know how it looks.

That said let's move on and learn about CSS.

[INDEX]

Here is how the W3C (World Wide Web Consortium) defines CSS.
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.

And here is how Eric A. Meyer states it in his CSS Pocket Reference book published by O'Reilly.
Cascading Style Sheets (CSS) is the W3C standard for controlling the visual presentation of web pages.

And here is how I define CSS.
Making stuff on your web page look the way you want it to!

CSS is one of the leading factors in separating the Formating (or structure) of your web page(s) from the Presentation of that web page(s).  Which simply means you are going to use HTML/XHTML to layout your web page(s) and use CSS for what the things on your web page are going to look like!

Layout/formatting = HTML/XHTML
Presentation = CSS

Note: CSS is also one of the things that make up DHTML.  It goes hand in hand with Javascript and HTML/XHTML to make up what's called Dynamic HTML or simply DHTML.

[INDEX]

Like I said in Section #1 CSS, or cascading style sheets really aren't that hard to learn.

Cascading style sheets are broken down into one or more things called rules that are applied to different page elements.  Sometimes these page elements are a particular HTML tag and sometimes they are what I call a 'catch all' rule, meaning different elements (HTML or XHTML tags) can use the same rule.  These different 'page elements' will determine, or describe how these elements will look and sometimes where they will appear on your web page.

It's okay if you didn't understand the last paragraph just keep reading.

The rules I am speaking of in CSS are broken down into two (2) parts.  The selector and the declaration.  The selector is going to be an HTML/XHTML tag, either implied in your coding, or one of those catch all rules I was talking about which are called classes.

The declaration part of a CSS rule is further broken down into one or more property/value pairs which are applied to the selector.  These property/value pairs are what will give the selector a different look, such as setting a color value, font size, setting the background color, etc.

Confused yet?  Don't be!  A simple graphic will illustrate what I'm talking about.

In the graphic example I have choosen the paragraph <P> tag as the selector but as you can see you DO NOT use the angle ( < > ) brackets but just the letter P all by itself, (I use lowercase lettering myself but for these examples I have opted to use uppercase for easier readability) .  I have applied to the => P selector a property called color: and a value of #ff0000;, which is the color 'red'.

The color: property pertains to the color of TEXT and nothing else.  So that means everywhere I use the <p> tag in my document the color of any text I use between the opening <p> tag and the closing </p> tag will be in the color red, UNLESS I specify otherwise using another CSS rule.

Inportant Note: Unlike HTML you need to use closing tags or you will end up in trouble.  Like having all your text display in the color red because you left out a closing </p> tag.

Here is an inline style example.  I will get to what inline CSS is a little later.

CODE

<p style="color: #ff0000">Learning CSS by Example</p>

RESULT

Learning CSS by Example

Take a look at the image of our CSS rule again.

Note in the image the formatting for the CSS rule:

P { color: #ff0000; }

This is the formatting you will be using in both the embedded and external style sheet types, which I will get to in a minute.

• The declaration starts with a left curly brace {.
  
  
• There is a colon placed between the property and the value pair: property: value ( color: #ff0000 ).
  
  
• At the end of the 'value' there is a semicolon ( #ff0000; ).
  
  
• The declaration ends with a right curly brace }.
  
  
• The spacing I am using in the examples doesn't have to be the way I have it.  The following is equally acceptable it just looks 'jammed together' and is harder to read.
  
  P {color:#ff0000;}

Now look at what is referred to as an inline style definition.

<p style="color: #ff0000">Learning CSS by Example</p>

• Here you use the style=" " attribute.
  
  
• The property/value pairs MUST be inside quotes.
  
  
• No curly braces { } are used.
  
  
• And there is no semicolon ; at the end, although this is optional.  You can use a semicolon at the end if you wish.

As you can see this is called an inline style definition because the style=" " attribute is used, and because it goes right in the line of code along with the <p> tag in your document.

Note: These CSS style rules can, and are, also referred to as style definitons, or style redefinitions, since they are defining, or redefining a web page element, or elements.

[INDEX]

There are three (3) types of CSS styles you can use in your HTML/XHTML documents.  In other words three ways you can add CSS to your HTML or XHTML documents.  I have already mentioned all three but will now break them down for you and give you their order of precedence (meaning which will be acted upon and when).

Note: Your HTML or XHTML document(s) can use inline, embedded, and/or external style types or any combination of all three of these different types of CSS styles.  In the case of the external style sheet your document can call multiple external style sheets if needed.

[INDEX]

I will start with the external style sheet.  It has the least amount of precedence of the three types and what this means is that the other two (2) types (embedded and inline) will be acted upon BEFORE these external style sheet definitions depending on what tag is being used, and what property/value pairs are being used.

An external style sheet is just that.  It is a separate file that your HTML or XHTML document will call (or execute) in order to use the style definitions from this external file.

[INDEX]

The embedded type of CSS style takes precedence over the external style type(s) but takes a back seat to the inline CSS styles (normally, and depending at times on what tag it is used with, and what property/value pair(s) are being used).

[INDEX]

Inline styles normally will have the greatest precedence of the three (3) style types, meaning that the style you use to define a tag 'inline' will be the one that gets used when all is said and none, depending on the tag being used and the name/value pairs.  I have already given you one example of an inline style in Section #3 above but I will give you another here.  But first a couple of rules.

Example:

CODE

<h1 style="font-family: 'bookman old style' serif; font-size: 20pt; color: #ff0000">Learning CSS by Example</h1>

RESULT

Learning CSS by Example

Note the single quotes around the font name 'bookman old style'.  When using a multiple name font you should always enclose the font name with single quotes.

That's going to do it for Part #1 of the CSS tutorial.  Hope you learned something?