CS 100 (Learn) — CS 100 (Web) — Module 08

CSS :: Syntax

Before we go any further, we should learn more about the CSS syntax.

Let's revisit our original example that used a style attribute:

According to the book <cite style="color: green;">Wild Birds</cite>...

According to the book Wild Birds...

A style declaration is the combination of a property (color) and a value (green) as a pair. The syntax for a style attribute declaration is:

  style="property: value;"

Multiple Declarations

We can specify more than one declaration:

  style="property1: value1; property2: value2;"

According to the book
<cite style="color: green; background-color: yellow; font-size: 150%;">Wild Birds</cite>...

According to the book Wild Birds...

For the style attribute, the context is clear and obvious: the element with the style attribute is being styled.

In a style sheet, we need to specify the context (for example, the tagname).

The syntax is:

  tagname { property1: value1; property2: value2; }

When there are multiple declaration, good practice is to use indentation and place them on separate lines. If there are multiple entries, place a blank line between them.

cite { 
  color: green;
  background-color: yellow;
  font-size: 150%;
}

strong {
  color: red;
  font-size 200%;
}

According to the book <cite>Wild Birds</cite>, you should <strong>not approach geese!</strong>

According to the book Wild Birds, you should not approach geese!

Classes

We have already seen that in addition to tags, we can also specify style for classes.

The syntax is:

  .classname { property1: value1; property2: value2; }

.movie { color: green; }
.tvshow { color: red; }
.book { color: blue; }

Maisie Williams was on <cite class="tvshow">Meet the Actor</cite>...

Maisie Williams was on Meet the Actor...

This is an example of a universal class that can be applied to any tag.

.movie { color: green; }

The movie class can be applied to <strong class="movie">any tag</strong> (not just the cite tag).

The movie class can be applied to any tag (not just the cite tag)

If you wish, you can specify a class that only applies to specific tags:

  tagname.classname { property1: value1; property2: value2; }

IDs

Finally, you can even specify style that only applies to elements with a special ID.

Earlier, we learned how the id attribute can be useful to link to an element within the same web page.

<h2 id="intro">Introduction</h2>`
...
<a href="#intro">return to the introduction</a>

Like class, you can add an id attribute to any tag, but unlike classes, you should not assign the same id to multiple tags in the same HTML page.

To style by id, use:

  #idname { property1: value1; property2: value2; }

Shorthands

You may come across what are known as shorthands in CSS, which allow you to combine multiple declarations into a single declaration. Each shorthand property has syntax rules for specifying the extra values.

.traditional { 
  border-width: 2px;
  border-style: dashed;
  border-color: blue;
}

.shorthanded {
  border: 2px dashed blue;
}

There is no difference between a <b class="traditional">traditional</b>
example with multiple declarations and a <b class="shorthand">shorthand</b>
example with a single declaration.

There is no difference between a traditional example with multiple declarations and a shorthand example with a single declaration.

Beginners should avoid shorthands, but you may see examples in CSS guides online. They can be quite confusing and magical the first time you see one.