CSS Rules

CSS is, essentially, a language for defining and selectively applying a collection of formatting rules to a webpage. In CSS, a rule is a property followed by list of values for that property, and rules always follow a simple syntax. A property simply specifies which feature is being defined. There are many properties (more than can be covered in this book) which define visual features such as the font, color, size, positioning, shadow effects, 3d translations, etc. of elements on the webpage. The second part of the rule is a list of values, with each value separated by a space. Each value might be any type of information (color, size, rotation, etc.) and must be listed in a specific order (the exact values required and their order depends on the property being set).

Properties are separated from the values by a colon (:), values are separated from each other by a space (), and the rule is finished with a semicolon (;). The example below shows a rule which, if applied to an element, would give the element a 2-pixel-wide solid red border.

border: 2px solid #FF0000;

The property is “border”, and the values are the width, style, and color of the border. To view a list of the most common properties and notes regarding how they are used, view the Property Chart section at the end of this chapter.

CSS Selectors

Type Selector

There are a few different types of selectors. The simplest selector is the type selector. The type selector will select all HTML elements on a page that use the same tag. For example, the type selector is appropriate if you wanted to select all images on the page. To use the type selector, type the tag’s name in front of the CSS block.

Note: For more information on the type selector, view the official W3C Documentation.

Example: Making all Paragraphs use Blue Text

If your HTML contains the following code:

<p>Hello, world.</p>

<p>This is a paragraph.</p>

And is linked to a CSS file containing the following code:

p {
  color: #0000FF;
}

Then the webpage will appear like this:

Hello, world.

This is a paragraph.

ID Selector

Any HTML element can be given the ID attribute, the value of which can be any arbitrary string without spaces. In effect, this gives a “name” to an element, so that you can refer to it by name again later. For example, if you have an image at the top of your page, you might give it the ID “logo”. No two elements on a webpage can have the same ID.

The CSS ID Selector is used to select an item based on its assigned ID. This selector is appropriate for selecting one specific element on the page. To use the ID selector, type a hash sign (#) followed by the tag’s ID in front of the CSS block.

Note: For more information on the ID selector, view the official W3C Documentation.

Example: Adding a Background Color to a Table

If your HTML contains the following code:

<table id="mydata">
  <tr>
    <td>Chrysler</td>
    <td>Odyssey</td>
  </tr>
  <tr>
    <td>Dodge</td>
    <td>Ram</td>
  </tr>
</table>

And is linked to a CSS file containing the following code:

#mydata {
  background-color: #00FF00;
}

Then the webpage will appear like this:

Class Selector

Like the ID attribute discussed above, there is another attribute which can be used on any HTML element called the class attribute. This attribute is similar to the ID attribute, but instead of assigning a “name” for a single element, it is used to assign an element to a “family” of similar elements. Unlike the ID attribute, a value for the class attribute can be re-used as many times as desired on a given page.

The CSS Class Selector is used to select items based on their assigned class. This selector is appropriate for selecting a hand-picked collection of elements. To use the class selector, type a period (.) followed by the tag’s class in front of the CSS block.

Note: For more information on the class selector, view the official W3C Documentation.

Example: Making Certain Elements Bold

If your HTML contains the following code:

<p>
  This is a <span class="boldtext">paragraph</span>, and it contains a 
  <a href="http://ncsu.edu" class="boldtext">link</a>.
</p>

And is linked to a CSS file containing the following code:

.boldtext {
  font-weight: bold;
}

Then the webpage will appear like this:

This is a paragraph, and it contains a link.