212 CSS Syntax

You style HTML elements via CSS properties. Different HTML elements may have different CSS properties you can set. CSS properties can be organized into CSS rules. A CSS rule groups a set of CSS properties together, and applies all properties to the HTML elements matched by the CSS rule. Both CSS properties and CSS rules will be covered in detail in this text.

 

CSS Properties

A CSS property styles an aspect of an HTML element. Here are a few examples:

<div style="border: 1px solid black;
            font-size: 18px; "> Style This </div>

In this example two CSS properties are applied to the div element: The border and the font-size properties.

A CSS property declaration consists of a property name and a property value. The property name comes first, then a colon, and then the value. Here is the general pattern a CSS property declaration follows:

property-name : property-value

If you specify more than one CSS property, the each name - value pair is separated by a semicolon, like this:

property1 : property-value1;
property2 : property-value2;

The last property declaration does not have to end with a semicolon, but it makes it easier to add more CSS properties without forgetting to put in that extra semicolon.

There are many CSS properties you can specify for different HTML elements. These CSS properties are covered in their own texts.

 

CSS Rules

A CSS rule is a grouping of one or more CSS properties which are to be applied to one or more target HTML elements.

A CSS rule consists of a CSS selector and a set of CSS properties. The CSS selector determines what HTML elements to target with the CSS rule. The CSS properties specifies what to style of the targeted HTML elements.

Here is a CSS rule example:

 div {
    border    : 1px solid black;
    font-size : 18px;
 }

This example creates a CSS rule that targets all div elements, and the set the CSS properties border and font-size for the targeted elements.

The CSS selector part a CSS rule is the part before the first {. In the example above it is the div part of the CSS rule. The CSS properties are listed inside the { ... } block.

CSS rules have to be specified inside either a style element or inside an external CSS file.