4.2 CSS semantics

There are a number of ways to specify the CSS selector, which determines the HTML elements that will be affected by a specific rule.

4.2.1 CSS selectors

Within a CSS rule, the selector specifies which HTML elements will be affected by the rule.

Element selectors:

 
The selector is just the name of an HTML element. All elements of this type in the linked HTML code will be affected by the rule. An example is shown below:

a {
    color: white;
}

This rule will apply to all anchor (a) elements within the linked HTML code.

The same rule may be applied to more than one type of element at once, by specifying several element names, separated by commas. For example, the following rule would apply to both a elements and p elements.

p, a {
    color: white;
}

Contextual selectors:

 
The selector is several element names, separated by spaces. This allows a CSS rule to be applied to an element only when the element is contained within another type of element. For example, the following rule will only apply to anchors that are within paragraphs (not, for example, to anchors that are within headings).

p a {
    color: white;
}

Contrast this to the previous CSS specifier where the element names are separated by a comma.

Class selectors:

 
The selector contains a full stop (.) and the part after the full stop describes the name of a class. All elements that have a class attribute with the appropriate value will be affected by the rule. An example is shown below:

p.footer {
    font-style: italic;
}

This rule will apply to any paragraph (p) element that has the attribute class="footer". It will not apply to other p elements. It will not apply to other HTML elements, even if they have the attribute class="footer".

If no HTML element name is specified, the rule will apply to all HTML elements with the appropriate class. An example is shown below:

.figure {
    margin-left: auto;
    margin-right: auto;
}

This rule will apply to any HTML element that has the attribute class="figure".

ID selectors:

 
The selector contains a hash character (#). The rule will apply to all elements that have an appropriate id attribute. This type of rule can be used to control the appearance of exactly one element. An example is shown below:

p#footer {
    font-style: italic;
}

This rule will apply to the paragraph (p) element that has the attribute id="footer". There can only be one such element within a piece of HTML code because the id attribute must be unique for all elements. This means that the HTML element name is redundant and can be left out. The rule below has the same effect as the previous rule:

#footer {
    font-style: italic;
}

It is possible for CSS rules to conflict, i.e., for there to be more than one rule for the same element.

In general, a more specific rule, e.g., a class selector, will override a less specific one. Otherwise, the rule that is specified last wins. For example, if two CSS files are linked in the header of an HTML document and they both contain rules with the same selector, then the rule in the second file will override the rule in the first file.

Rules are also usually inherited, except where it would not make sense. For example, if there is a rule that makes the text italic for the body of an HTML document, then all p elements within the body will have italic text, unless another rule specifies otherwise. However, a rule controlling the margins of the body would not be applied to the margins of the p elements (i.e., the body would be indented within the page, but the paragraphs would not be indented within the body as well, unless they specified margins themselves).

4.2.2 CSS properties

This section describes some of the common CSS properties, including the values that each property can take.

font-family:

 
This property controls the overall font family (the general style) for text within an element. The value can be a generic font type, for example, monospace or serif, or it can be a specific font family name, for example, Courier or Times. If a specific font is specified, it is usually a good idea to also include (after a comma) a generic font as well in case the person viewing the result does not have the specific font on their computer. An example is shown below:

font-family:  Times, serif

This means that a Times font will be used if it is available; otherwise, the browser will choose a serif font that is available.

font-style:, font-weight:, and font-size:

 
These properties control the detailed appearance of text. The style can be normal or italic, the weight can be normal or bold, and the size can be large or small.

There are a number of relative values for size (they go down to xx-small and up to xx-large), but it is also possible to specify an absolute size, such as 24pt.

color: and background-color:

 
These properties control the foreground color (e.g., for displaying text), and the background color for an element.

For specifying the color value, there are a few basic color names, e.g., black, white, red, green, and blue, but for anything else it is necessary to specify a red-green-blue (RGB) triplet. This consists of an amount of red, an amount of green, and an amount of blue. The amounts can be specified as percentages so that, for example, rgb(0%, 0%, 0%) is black and rgb(100%, 100%, 100%) is white, and Ferrari red is rgb(83%, 13%, 20%).

text-align:

 
This property controls the alignment of text within an element, with possible values left, right, center, or justify. This property only makes sense for block-level elements.

width: and height:

 
These properties provide explicit control of the width or height of an element. By default, these are the amount of space required for the element. For example, a paragraph of text expands to fill the width of the page and uses as many lines as necessary, while an image has an intrinsic size (number of pixels in each direction).

Explicit widths or heights can be either percentages (of the parent element) or an absolute value. Absolute values must include a unit, e.g., in for inches, cm for centimeters, or px for pixels. For example, within a web page that is 800 pixels wide on a screen that has a resolution of 100 dots-per-inch (dpi), to make a paragraph of text half the width of the page, the following three specifications are identical:

p { width: 50% }

p { width: 4in }

p { width: 400px }

border-width:, border-style:, and border-color:

 
These properties control the appearance of borders around an element. Borders are only drawn if the border-width is greater than zero. Valid border styles include solid, double, and inset (which produces a fake 3D effect).

These properties affect all borders, but there are other properties that affect only the top, left, right, or bottom border of an element. For example, it is possible to produce a horizontal line at the top of a paragraph by using just the border-top-width property.

margin:

 
This property controls the space around the outside of the element (between this element and neighboring elements). The size of margins can be expressed using units, as for the width and height properties.

This property affects all margins (top, left, right, and bottom). There are properties, e.g., margin-top, for controlling individual margins instead.

padding:

 
This property controls the space between the border of the element and the element's contents. Values are specified as they are for margins. There are also specific properties, e.g., padding-top, for individual control of the padding on each side of the element.

display:

 
This property controls how the element is arranged relative to other elements. A value of block means that the element is like a self-contained paragraph (typically, with an empty line before it and an empty line after it). A value of inline means that the element is just placed beside whatever was the previous element (like words in a sentence). The value none means that the element is not displayed at all.

Most HTML elements are either intrinsically block-level or inline, so some uses of this property will not make sense.

whitespace:

 
This property controls how whitespace in the content of an element is treated. By default, any amount of whitespace in HTML code collapses down to just a single space when displayed, and the browser decides when a new line is required. A value of pre for this property forces all whitespace within the content of an element to be displayed (especially all spaces and all new lines).

float:

 
This property can be used to allow text (or other inline elements) to wrap around another element (such as an image). The value right means that the element (e.g., image) “floats” to the right of the web page and other content (e.g., text) will fill in the gap to the left. The value left works analogously.

clear:

 
This property controls whether floating elements are allowed beside an element. The value both means that the element will be placed below any previous floating elements. This can be used to have the effect of turning off text wrapping.

Paul Murrell

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 New Zealand License.