CSS Rules

Collapse Content Show Content

You've seen the following CSS rule:

p {color: red;}

This CSS rule sets every p (paragraph) element to a red color. Every CSS rule must have at least 3 parts:

selector {property: value;}

The selector is the type of items being selected. In this case it's all p items, and it could also be other HTML elements, such as <body> or <b>. On the next page we'll see other kinds of CSS selectors.

Next comes the property to set, such as color, size or font. See the CSS reference for a list of different CSS properties.

Finally, you specify the value to set the property to, such as red for color, 12px for size, or "Tahoma" for font-family.

Multiple declarations

CSS rules (or "rule sets") can contain more than declaration of properties and values. For example, the following CSS sets the color and font-size of the body:

body { 
  color: gray;
  font-size: small;
}

You can also combine multiple selectors together to apply the same CSS rules to them. For example, this CSS will set the color of 3 different HTML headings:

h1, h2, h3 { color: purple; }

Many CSS properties can also be bundled into single "shorthand properties". See Text styles for more info.

Create 2 statements for one CSS selector in the challenge below. You can then add the CSS you write to your store's stylesheet!

Challenge

Create a CSS rule for blockquote with these two declarations:

Set the color to gray
Set the font-style to italic

Please sign in or sign up to submit answers.

Alternatively, you can try out Learneroo before signing up.

Previous Next Node