CSS Lesson #2
"Rules and Regulations"
Before you get started on the path to CSS enlightenment, you need to learn a few more things. This won't be too long, I promise.

Cascade Rules - Stylesheet Usage - Formatting Rules - Types of Units

The Cascade Rules: This scripting language is called Cascading Style Sheets for a good reason.

1. CSS is read from left to right, top to bottom.

2. A declaration is only used if it can be matched with the element in question and the selector matches the type of element. Example: p {color:green;} The p is the selector. This declaration will make the font color of this paragraph green.

3. Usually the sort order of the declarations is as follows: the author's styles then the user's styles then the default browser stylesheet. This is what is known as the origin. The weight is the importance of the declaration. In !important declarations, user stylesheets override author stylesheets which then override the default browser stylesheet.

4. Secondary sorting is done by selector. More specific selectors come before general ones. More on this later.

5. Later rules for the same selector will override earlier ones if they come from the same place (origin) and have the same level of importance (weight). Example: Typing p {margin-top:10px} at the top of the stylesheet and then later typing p {margin-top:15px}. The second declaration of the selector p will override the first declaration.

back to the top

Stylesheet Usage:

How you want to use styles determines what method you use to do so. For people who want to use styles sparingly, what I term "on-the-spot" coding is the best way to go. If you only want to use the styles for a single page and also want to use a style repeatedly then embedding your styles in the header is the solution. If you want to use the same styles for multiple pages then an external stylesheet will save you a lot of hassle later on. Each method has its pros and cons. I use all three of these for various reasons, sometimes all three at once.

It's possible to use an ID, a class, and inline styles on a single tag. The ID would be the unique name of the element, the class would probably use a style you're using in multiple places, and the style attribute will probably either be an override or just special formatting.

The override order is as follows: external stylesheet -> embedded stylesheet -> inline style definition.

On-the-Spot (Inline) Programming: Place declarations as you need them on the selectors you want them attached to. Example: <p style="margin:5px;"> The HTML attribute "style" can be used with any HTML tag except <!DOCTYPE>, <html>, <head>, <title>, <meta> <b>, <strong>, <i>, <em>, <u>, and <style>.

DIFFICULTY: Beginner

PROS: CONS:

Embedded Header Stylesheets: Place declarations into the header of your webpage using the HTML tag <style>. Example: <head> <style type="text/css">p {margin:10px;}</style> </head>

DIFFICULTY: Intermediate

PROS: CONS:

External Stylesheets: Place your declarations into an external document that has the file extension (.css). I make use of this in the header of this very document. Example: <head><link rel="stylesheet" type="text/css" href="style.css" ></head> or @import url(style.css); The stylesheet declaration formatting for the external stylesheet is the same as the header stylesheet.

DIFFICULTY: Advanced

PROS: CONS:
back to the top

Formatting Rules:

These rules below explain the basic formatting of a CSS declaration. You are allowed to use as many declarations as you want for a selector. There are many more advanced tricks that go along with this, but only if you need to make use of them. I'll explain more about this topic later.

To add comments to your stylesheet, use /*...*/. Replace the periods with your text.

Basic CSS Formatting Rules For Embedded Stylesheets And External Stylesheets:
p {color:blue;}
p = the selector; color = declaration property; blue = declaration value;


For single declarations of a selector the curly brackets aren't required but they help make everything look consistent. The colon between property and value is required as is the semi-colon at the end of a declaration if you have more than one of them.


CSS Formatting Rules For On-the-Spot Styles:
padding:3px;
padding = declaration property; 3px = declaration value;


You don't use curly brackets for multiple declarations since you can only declare styles for one selector at a time this way, everything goes between the quotation marks of the style attribute. Again, the colon and semi-color are required if you have more than one declaration.


back to the top

Types of Units:

There are many different types of units that can be used with declaration values. Of course, some are better than others in certain situations. Units of "0" don't require a unit type.

em (height of the element font): This is a specialized unit.

ex (height of the letter "x"): This is a specialized unit.

px (pixel): The most basic (and the most used) CSS unit. Everything on a computer is made up of pixels: the larger your monitor resolution the more pixels per inch it will display and everything will appear to be smaller. This unit is the best for scaling your design onto different monitor resolutions.

in (inch): Basic unit of real measurement. 1in = 2.54cm.

cm (centimenter): Basic unit of real measurement in the Metric system. 1cm = 10mm.

mm (milimeter): Basic unit of real measurement in the Metric system.

pt (point): The unit for typeface in traditional print media. 1pt = 1/72in.

pc (pica): 1pc = 12pt.

% (percentage): Percentages are always relative to another value. This unit is second-best for scaling your design onto different monitor resolutions.


10em

10ex

10px

10in

10cm

10mm

10pt

10pc

10%


back to the top

This page was last updated on: