CSS Basic Selectors

Type Selectors

The most basic CSS selectors are Type Selectors (also sometimes called Element Selectors).

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

For example, if we wanted to make all paragraphs have red text, and our page to have an aqua background, we would use the following CSS rule:

p {
  color: red;
}

body {
  background: aqua;
}

Multiple Selectors

If we wanted to do the following

• Color all ordered lists red
• Color all unordered lists red
• Color all paragraphs red

ol {
  color: red;
}

ul {
  color: red;
}

p {
  color: red;
}

Combining Multiple Selectors

The previous example 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.

p, ol, ul {
  color: red;
}