Overview of This Lesson

In this lesson you'll learn the syntax of CSS and begin learning some CSS selectors. Selectors are what you use to select and style one or more elements on your HTML page: you can use very basic selectors that style all occurrences of a specific element, and more complex selectors that select specific elements on the page. In this lesson you'll start with basic element selector, id and class selectors, and attribute selectors. In later lessons you'll learn more complex selectors.

Pre-Requisites

Before doing this lesson, it is assumed you already have a knowledge of HTML coding and that you've already gone through the Introduction to CSS lesson.

CSS Syntax: Rules

CSS is made up of rules or rule-sets. A rule defines how something should be formatted. A rule consists of one or more selectors and a declaration block. For example, in the picture below, there is a single CSS rule.

example CSS rule

Text version:

aside {
  border: 1px solid navy;
  margin: 5px;
  padding: 3px;
}
An example of a CSS rule: the selector is "aside"
and defines 3 declarations to format <aside> elements.

The selector defines which elements are being styled. In the example above, the rule is styling all of the <aside> elements.

The declaration block defines how those elements should be styled. It contains one or more declarations, each of which assigns a value to a specific CSS property. For example, in the picture above, the declaration block contains 3 declarations. The first one defines the thickness, style, and colour of the <aside> element's border. The other two declarations defines the amount of margin space around the outside of <aside> elements and the amount of padding space around the inside of the <aside> elements' borders.

The properties named in a declaration are part of the CSS standard. In the example above, we are assigning values to 3 properties: the border property, margin property, and padding property.

The values you're allowed to assign to each property are also part of the CSS standard. For example, a font-colour property can take any one of several pre-defined colour names.

As we learn CSS, we'll learn the different properties you can change and the values you can give them. MDN has a nice CSS Reference and so does W3Schools (W3Schools CSS Reference)

CSS Syntax: Selectors

There are several different kinds of selectors in CSS. You must already be familiar with HTML and the basic elements in order to understand CSS selectors. If you're not comfortable knowing your HTML elements, you might wish to pause and review HTML first.

A selector selects a set of elements to apply a rule (collection of declarations or styles) to. Basically, a selector tells the browser to go through a document and find all of the elements that match that selector. For example, a section selector will tell the browser to go and find all <section> elements in the document and style them according to the declarations inside that rule's declaraction block.

There are different categories of selectors, depending on how you want to select elements: do you want to select all of a certain type of element, or only elements with a certain attribute (or even a certain attribute value)? What if you wanted to style only some <section> elements but not others? What if you wanted to style one specific <img> element on the page, even though there are several <img> elements? What if you wanted to style just a single word, or the first line of a paragraph? You can do all of these things with selectors, although this lesson covers only basic element selectors. We'll cover other kinds of selectors later, and more advanced selectors in later lessons.

Element Selectors

An element selector (also called a type selector) is used when you want to define styles for specific elements in a document. The element selector has the same name as the element. For example, to style all <h1> elements, you use the h1 selector, and to style all <p> elements you use the p selector. 

section {
  background-color: grey;
  color: navy;
  margin: .2em;
  padding: .3em;
}

In the example above, we've defined a rule using the section selector. This tells the browser to find all <section> elements and give them a grey background, navy text, a margin around the outside of the section (.2em means it is set to be 20% of the section's font size), and some padding space around the inside border of the section (.3em means 30% of the section's font size). You'll learn more about those properties and their values later.

Here's a CodePen example you can play with: this example uses element selectors for the header and level-X heading elements to change the styling of those elements on the page.

See the Pen CSS Selectors: Element by Wendi Jollymore (@ProfWendi) on CodePen.

(direct link to the element selectors CodePen, opens in the pen tab)

There are other types of selectors: some of the upcoming examples will use these selectors, but they'll be covered in later lessons. However, if you would like to learn about these selectors now, here are the available lessons:

Exercises

Practice element/type selectors with the following CodePens: the instructions are in the CSS tab.

See the Pen Element Selectors Exercise by Wendi Jollymore (@ProfWendi) on CodePen.

(direct link to the element selectors exercise CodePen, opens in the pen tab)

You can check your solution to the element selectors exercise (opens in the pen tab).

See the Pen Basic Selectors Exercise 1 by Wendi Jollymore (@ProfWendi) on CodePen.

(direct link to the basic selectors exercise 1 CodePen, opens in the pen tab)

You can check your solution to the basic selectors exercise 1 CodePen (opens in the pen tab).

Declarations

As mentioned previously, a declaration assigns a value to a specific property. A declaration is a single statement inside a CSS rule that consists of a property, followed by a colon, followed by the value you want to assign to the property. For example: 

color: red;

This single declaration changes the value of the color property to "red".

How do we know what the property names are? How do we know what values each property is allowed to recieve? All of this is defined in the CSS specification on W3C, such as in the CSS Properties Index and the CSS Values Index. However, you can also find lots of other CSS reference pages online, such as:

The CSS properties are divided up into Modules, so it might be easier to learn CSS properties by module or category, instead. This is how the remaining CSS tutorials in this course will cover CSS properties.

The values each property receives depends on the property: Each property has a specific type of values it's allowed to accept. Some values are measurements, some properties take one of a set of pre-defined values. MDN's CSS Values and Data Types summarizes the values and units used by CSS.

We'll cover values and units of measurement in the next section on CSS Property Values.