CSS Fundamentals - Syntax and structure of an instruction

h3 {
font-family: Arial;
font-size: 1.3em;
color:  #454545;
}

Now this instruction is valid for all titles of level three

of the complete document. Thus, the HTML code is kept clean and clear.

<h3>Any text</h3>

In the following sections we will see how these rules are defined some variations of them and how they are integrated into the Web page.

Syntax

Style sheets usually consist of a series of style instructions that define how certain page elements are to be represented. Page elements are usually identified by HTML tags

Structure of the instructions

Every style instruction consists of two parts:

• The selector (the element to be modified)
• The statement, always goes between braces and consists, in turn, of two parts:

• The property (for example, color)
• The value corresponding to it

Property and value are written separated by a colon. The indicated value always depends on the property chosen. Some properties require a measure of length (for example 20px), others a color indication (for example # 000000). There is also a selection of previously defined keywords (for example left and right).

A valid style instruction could be, for example:

h1 {color: #000066;}

This instruction determines that all first level titles <h1> are assigned the dark blue color (# 000066). The color is defined here by a hexadecimal value like the ones you already know about the HTML language.

It is perfectly possible to include several statements in a single instruction (property / value pairs), in which case you will have to write each pair separated by a semicolon (;), for example:

h1 {
background-color: #c0c0c0;
color: #000066;
}

Now, each title is also assigned a light blue background.

In principle all statements could be written in a single line, but if we assign many statements to a selector we quickly lose clarity. That is why we have given preference to the type of writing shown here.

A questionable point is whether the instruction of a series, or a single isolated instruction, must be completed with a semicolon. Good practice tells us that it is quite clear and prevents possible errors in the case of an extension or a new arrangement of the style block.

Now we will expand the example to demonstrate the use of other properties and possible values:

h1 {
font-size: 200%;
font-style: italic;
background-color: #c0c0c0;
color: #000066;
}

With font-size: we determine the size of the font, for example by assigning a percentage value. In addition, through Font-style: itlalic the title will be written in italics.