CSS selectors

  • Selector: Defines which HTML tags are going to receive the CSS rules. To change the style of all your paragraphs you can write p {property:value}.
  • Property: This is the CSS style you wish to apply. To change the text color of all paragraphs you can write p {color:value}.
  • Value: The value of the property. To make all paragraph text red you can write p {color:red}

CSS statements can have more than one property:value pair by separating them with a semicolon ;.

Multiple property:value pairs:

selector {property1:value1; property2:value2; property3:value3}

Properties want you to provide at least one value but may sometimes accept more. Multiple values can either be space-separated which means that all values are used for the property. Or they can be comma-separated which means that a series of values is being suggested and the first applicable one is used.

Space-separated values:

p {border:5px solid red}

Above CSS statement uses all 3 values to render paragraphs with a 5 pixel wide red border.

Comma-separated values:

p {font-family:verdana,arial,sans-serif}

Above CSS statement suggests 3 fonts to be used for paragraphs, from left to right. In case Verdana is not available on the user's system it will try to use Arial and if that fails, too, it will resort to a generic sans-serif font.

Multiple selectors

Instead of writing the same CSS rule for every HTML tag you whish to apply it to, you can group selectors together and separate them by commas. This makes CSS code extremely compact & efficient.

Same style for each selector (bad):

h1 {color:black}
h2 {color:black}
h3 {color:black}
h4 {color:black}
h5 {color:black}
h6 {color:black}

Grouped selectors (good):

h1, h2, h3, h4, h5, h6 {color:black}

Contextual selectors

If you just apply styles to a paragraph selector, all paragraphs will be affected. What if you wish to only change the paragraphs inside list items? In that case you need contextual selectors which only apply a CSS rule if a tag occurs in a certain context. A contextual selector is created by listing the tags in the nested order in which they should appear in your document.

Contextual selectors:

li p {color:red}
h1 em {background:gray}

In above example only paragraph elements p inside list items li get red text and only emphasized text em in h1 headings gets a gray background.

Comments

Sometimes it can be helpful to put CSS comments next to some statements to explain what they're doing. These comments are ignored by web browsers but still add up to the final file size (unlike programming languages such as PHP, where comments aren't part of the final output).

CSS comment:

/* this is a comment starting with an opening slash and star and ending with a closing star and slash */
p {font-weight:bold} /* this makes all paragraphs bold */

Browser compatibility

All current major web browsers support both types of selectors so you can safely use them. There are some more advanced CSS selectors which are not supported by browsers such as Internet Explorer (see a pattern here?). They will be covered in the CSS advanced tutorial.