Cascading StyleSheet Information, pg. 1

Cascading StyleSheets is used to style HTML, XHTML, and XML webpages. It allows you greater control over page and text layout and gives you the ability to alter a design by only altering one file.

You can use as many declarations as you want on a single selector. To add comments to your stylesheet (.css) file, use /*...*/.

Formatting for inline styles (in the body of the webpage):

<p style="color:blue;">
p is the selector; color is the property; and blue is the declaration
color:blue; is the property of this paragraph tag (the text color is made blue)

Formatting for embedded styles and external stylesheets:

p {color:blue;}
Nearly the same as above, but the selector isn't written as an HTML tag.

The differences between style types:
  • Inline styles are used directly on HTML tags and usually when you only want to style a few things.
  • Embedded styles go in the header of an HTML document and are used to style a webpage. The CSS goes between <style> tags in the header.
  • External stylesheets (files with the .css extension) are used to style an entire website. The link to the stylesheet goes in the header. Example: <link rel="stylesheet" type=""text/css" src="style.css" />
The (important) cascade rules:
  1. CSS is interpreted by the browser from left to right, top to bottom.
  2. A declaration will only work if it's applicable to the selector it's being used with. You can't use font-weight:bold; on borders, for example.
  3. Declarations can override each other. If you declare p {margin-bottom:10px;} one place and then p {margin-bottom:15px;} later on, the paragraph will have a bottom margin of 15px.
  4. Stylesheets can override each other. The order is: default browser stylesheet -> user (visitor) stylesheet -> author stylesheet
  5. Author stylesheets override each other. An external stylesheet is overriden by an embedded stylesheet, which in overriden by inline styles. Basically, the closer the style is physically to what it's affecting, the higher precedence it has.
  6. The stylesheet cascade rules can be overriden by the use of the !important rule next the declaration you want to be used no matter what.
 Designing with CSS usually involves the use of <div> tags, which are referred to as layers. Layers can be arranged on the webpage just about any way you want. You can also arrange images, lists, and paragraphs similar to the way you arrange layers (the rules for paragraphs are nearly identical, except for the fact that you can't nest them). All of these are called elements. By default, layers span 100% of the webpage width.

The layout is controlled by the inline model (text) and the box model (everything else). Most of the time the inline model's rules can be ignored. Internet Explorer (especially versions before 7.0) doesn't obey the box model's rules.


The CSS Box Model

The content area is the space in the layer where text, images, etc. will go. The padding is beyond this area so it's separate from the height and width of the content area and can make things appear larger than you want them to look if not taken into account when setting these properties. The border surrounds the padding and the content area. The margin is the space outside of everything else that's between elements.

Elements that are controlled by the box model are called block-level elements. Text elements are called inline elements.

Commonly used units in CSS:
  • percentage (%) - percentages scale across platforms but the percentage must be based on a fixed unit such as a pixel
  • pixel (px) - pixels scale very well across platforms
  • point (pt) - points can differ across systems and are used only with text