[INDEX]

So far the only selector type I have talked about is the Element type, which uses HTML/XHTML elements (tags) as a selector (see Part #1). This is a fairly easy and straight forward selector type to deal with.

Element selectors can be grouped together and separated with a comma so that all the selectors, (tags in this case), can share the same property/value pairs.

Example

H1, H2, P { color: #000000; }

When used in your HTML or XHTML document all three of the tags (elements) H1, H2, and P will display their text lettering in the color purple which has the Hexadecimal value of: #800080.

[INDEX]

Contextual Selectors are harder to get a handle on and chances are you might never use them. 

[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.
  
  
• 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?