CSS Selectors and Properties

Let's dive deeper into CSS selectors and properties.

CSS

CSS controls the appearance of HTML elements. CSS is made of rules that look like this:

p {
    color: red;
}

This CSS sets the color of the text within paragraphs to red. Here’s the result:

Try It: Change the Color

👉🏿 Your turn! Practice changing what shows up on the page by editing the CSS.

Set a timer for 10 minutes to experiment with HTML and CSS.

• Try changing the text in the paragraph.
• Try changing the CSS so that the color is blue.

If the embed below doesn’t load, use this link to open the page directly: https://codepen.io/rrcobb/pen/poKeopy

See the Pen Try it: Change the color by Rob Cobb (@rrcobb) on CodePen.

Linking CSS

We’ll put our styles in a CSS file, usually called style.css. We need to tell the browser that this file is "linked" to the content in our HTML file.

In the HTML file, we’ll link to style.css using the <link> tag:

<link href="style.css" rel="stylesheet" type="text/css" />

• The href attribute of the link says where to find the CSS file
• The rel attribute of the link says what the relationship is to the page — for us, always stylesheet.
• The type attribute of the link says that the kind of file it is — always text/css for us.

Practice: Link the stylesheet

Add the <link> tag to this HTML page so that the styles are connected.

👉🏿 Use the link below to attempt the practice exercise

CSS Syntax

Each rule has a selector and a list of declarations. The selector says which elements should get these styles.

The selector is p, so all the <p> elements get the styles.

A declaration is a property and a value.

The property is color and the value is red

CSS selectors

When you write CSS, the steps often go:

1. Pick what elements to style
2. Edit their styles in the DevTools
3. Write the style rules in your CSS file

Step 1 is “Pick what elements to style”.

Selectors determine which elements will get which styles.

See the Pen css selectors intro by Rob Cobb (@rrcobb) on CodePen.

The selectors in this example are p and a.

How selectors work

Selectors pick all the elements that match, and the style rule applies to all those elements.

There are lots of kinds of selectors. We’ll focus on the three most common selectors (Element Selectors, Class selectors, and id selectors) and how to combine selectors. Then, you can practice with more advanced selectors too!

Element Selectors

From the example above, p and a are Element Selectors. They select all the elements that are that type.

img {
	height: 100px;
}

Class selectors

When an element has a class attribute, there’s special syntax to select them.

See the Pen class selectors demo by Rob Cobb (@rrcobb) on CodePen.

The selector .cool-paragraph selected the second paragraph, because it had a matching class attribute. The syntax is . plus the name of the class, in this case cool-paragraph.

You can have lots of elements with the same class. There can be lots of cool-paragraphs.

id selectors

An id selector selects elements that have a matching id. It’s similar to a class selector, just a slightly different syntax.

See the Pen id selector demo by Rob Cobb (@rrcobb) on CodePen.

#paragraph-6 picks the paragraph with the id paragraph-6. The syntax is a # plus the id (like paragraph-6). There’s only supposed to be one element with any particular id.

Combining selectors

Matching either selector ('or')

You can select more than one element with a combined selector.

The easiest way is to list multiple selectors, separated by commas.

p, a, .cool-text {
	color: hotpink;
}

All paragraphs, links, and elements with the cool-text class will be selected.

Matching both Selectors ('and')

If you put two selectors together, you select elements that match both selectors. You can select “the paragraphs that also have the class cool-paragraph” by combining the p and .cool-paragraph selectors like p.cool-paragraph.

There are other CSS combinators that let you pick elements that have relations like “all the links inside of list items” or “paragraphs right after second-level headings”.

Combinator is a fancy word for “thing that combines things”.

Here’s some examples:

• .cool-paragraph strong selects all the <strong>elements inside elements with the cool-paragraph class.
• h2 + p selects the paragraphs that immediately follow a level 2 header

You don’t need to memorize all the combinators.

If you want to see them and browse more examples, check out the MDN page on CSS Selectors.

Practice: Select the Elements

👉🏿 Practice using selectors

In the CSS file, fill in the selectors for each of the rules so that the styles work.

See the Pen Try it: Select the Elements by Rob Cobb (@rrcobb) on CodePen.

Practice: CSS Diner

🍽️ For more practice with CSS selectors, try out CSS Diner.

There are 30 short exercises to practice selecting the plates, the food, or the table.

Try to get to at least Level 10!