CSS Basics

A basic CSS rule has the following format:

selector {
  property: value;
}

Selector: The selector is the HTML 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

A very basic snippet of CSS might look like the code below. Can you guess what it will do?

body {
  background-color: powderblue;
}

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
```
selector {
  property: value;
  property: value;
}
```
Properties and values are always separated by a colon
```
selector {
  property: value;
  property: value;
}
```

declarations always end with semicolons

selector {
  property: value;
  property: value;
}

In most cases, spacing does not matter. It does matter for:

Property names
- background-color ≠ background color
Measurements (no space between number and measurement)

selector {
  color: 			blue;        ← OK

  background- color: silver;     ← Incorrect
  background-color: silver;      ← OK

  width: 2 em;                   ← Incorrect
  width: 2em;                    ← OK
}

CSS Comments

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

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

Type Selectors

The most basic CSS selectors are Type Selectors, also often referred to as "element selectors".

That's a super secret fancy code word for, we're just using the HTML tag as a selector.

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

p {
  color: red;
}

Grouping Selectors

If we wanted to make our first three levels of headings red, we could use rules like this:

h1 {
  color: red;
}

h2 {
  color: red;
}

h3 {
  color: red;
}

That works just fine, but we're doing an awful lot of repeating and unnecessary typing.

We can combine these three rules, by listing the selectors, separated by commas.

h1, h2, h3 {
  color: red;
}

Back to Week 3 page »