Back to Class Three page »

CSS Basics

A basic CSS rule has the following format:

selector {
  property: value;
}

Selector

The selector is the element that the rule will affect

Property

The property is the actual CSS rule

Value

The value is the value we want for the given property

Declarations and Declaration Blocks

Each property and value set are called a declaration.

selector {
  property: value;
}

You can list as many declarations as you want. A group of declarations are called a declaration block.

selector {
  property: value;
  property: value;
}

Things to note:

• Declaration blocks are always surrounded by curly braces
• Properties and values are always separated by a colon
• declarations always end with semicolons
• Spacing does not matter

CSS Comments

You type comments in to your CSS by using ( /* ) and ( */ ). Comments can span multiple lines.

/* A CSS comment */
	
/* A
Comment in 
multiple lines
*/

Element Type Selectors

The most basic CSS selectors are Element Type Selectors. These are really just HTML tags.

For example, if we wanted to make all paragraphs have red text, we would use the following CSS rule:

p {
  color: red;
}

Multiple Selectors

If we wanted to make all of the ordered lists and unordered lists red, in addition to the paragraphs, we could use three rules like this:

p {
  color: red;
}
ol {
  color: red;
}
ul {
  color: red;
}

Better yet, we can combine these three rules, by listing the selectors, separated by commas.

p, ol, ul {
  color: red;
}

Back to Class Three page »