What are the main CSS rules

Structure of the CSS rules

CSS 2.1 :: Basics

Basically, the structure of a CSS rule is very simple. A rule consists of the selector and the declaration block. The selector is made up of single selectors and combiners. The declaration block contains the individual declarations. These in turn contain the properties and their values.

Sounds too complicated? Well, let's see you first ...

Practical example

... a short example to illustrate this. The individual components of the CSS rule are explained in detail below. Here is a rule as it is noted in the stylesheet:

DIV.ref TH {font: 1em Georgia, serif; background-color: #fffcee; padding: 0.1em 0.5em; border: 1px solid # f0f1ec; }

Please compare the stylesheet with the following graphic, in which the names for the individual components of the rule are highlighted and labeled:

This rule was then divided according to its logical structure and is shown here again in list form:


The hardest part for many is to remember the names and functions of the individual components of the rule. As the saying goes, names are "smoke and mirrors" - but once you have internalized how the individual components of a stylesheet work together, you will be able to read even the most complicated stylesheet effortlessly in the future. That is why everything is explained in detail below:

In terms of CSS rules, the term 'selector' includes everything to the left of the first curly bracket. Such a selector consists of one or more single selectors, which are in a row one behind the other and connected to one another by combiners.
The declarations within the curly brackets are attached to certain elements in the HTML document. The selector determines which elements these are. The selector is the link between the HTML document and the declarations.
Each selector initially matches all elements of the document to which the last of its simple selectors matches. Then this target set is more or less restricted by the preceding other simple selectors.
Some examples of selectors:
The selector in the first example consists of a single selector that corresponds to every element, i.e. every paragraph, of the web document.
In the next example the single selectors and are connected by a combiner ''. This is why this selector acts on all elements that directly follow an element. The space between the single selector and the combiner is optional.
H4 + P
The selector in the following example corresponds to all elements and of the document.
H1, H2, H3
The following selector corresponds to elements in the document, but with restrictions:
1st restriction: they must be the first child element of their parent element.
2nd restriction: the parent must be a.
3rd restriction: this must have the attribute / value pair.
DIV # ident> H1: first-child
Simple selector
(English to select = choose) With the simple selector, individual elements of the web document are practically selected. A simple selector can be a type selector or a universal selector. It either stands alone or has attribute selectors, ID selectors or pseudo-classes attached to it in any order.
Combinators are the characters: '' (whitespace), '' and ''. They are used to link or combine the various single selectors of a selector.
The elements of the web document that match a particular selector will be Subjects called this selector.
Each declaration consists of one Property with the associated values. It is important that both components are always present, otherwise unpredictable results can occur. Declarations in which a value is missing or an unexpected syntax character occurs, have to ignored by the browser.
Each declaration is separated from the following by a semicolon, i. H. theoretically, the semicolon after the last declaration is superfluous. However, it is better to always note this semicolon as well. This avoids potential problems if the rules should be changed again at a later point in time.
Spaces or line breaks after the semicolon of a declaration are ignored. It is therefore irrelevant for the functionality of the stylesheets whether all declarations of a declaration block are in a row or whether they are notated one below the other.
Declaration block
The declaration block includes the entire part of a rule that lies behind the selectors: the curly braces and all the declarations noted in them. Empty declaration blocks that only consist of two brackets are permitted. This has the effect that no formatting is applied to the corresponding HTML elements.
A property allowed by the CSS specification, followed by a colon (). All possible properties in CSS 2.1 are discussed in the reference.
One or more values ​​as permitted for the corresponding property in accordance with CSS 2.1. The last value for a property is followed by a semicolon () to separate it from the next declaration.

Pattern matching

The purpose of pattern matching is to check the conditions defined by a selector to determine whether they match an element of the web document. These conditions consist of single selectors and combiners of the selector and their composition. So conditionally z. B. the pseudo-element restricting the first child element and a combination '' only applies to paragraphs that are descendant elements of a container. The associated declarations are only made on elements of the web document that meet these conditions.

© Copyright All Contents 2002-2018 K. Langenberg.
Commercial use prohibited.