CSS Fundamentals - Syntax and structure of an instruction

Style sheets consist of a series of instructions that define how certain page elements with HTML tags are to be represented.

CSS Fundamentals - Syntax and structure of an instruction | Learn CSS | Style sheets consist of a series of instructions that define how certain page elements with HTML tags are to be represented

Separating the structure of the style

Let's see a small example of the elegance and effectiveness of CSS. Until now you had to assign indications about the font using HTML attributes, for example:

<h3><font face=”Arial” size=”5” color=”#454545”>Un texto cualquiera</font></h3>

There are even editors that do the following with that instruction:

<h3><font face=”Arial”><font size=”5”><font color=”#454545”>Un texto cualquiera</font></font></h3>

As if it were not enough, the instruction had to be repeated x times to include all the lines of text. In the future you will no longer have to use the tag. Instead, it will be enough to assign the base format using CSS.

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
Structure of a CSS instruction

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

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.

Did you like it or was it useful?

Help us share it in Social Networks

Professor at the University of Guadalajara

Hugo Delgado Desarrollador y Diseñador Web en Puerto Vallarta

Professional in Web Development and SEO Positioning for more than 10 continuous years.
We have more than 200 certificates and recognitions in the Academic and Professional trajectory, including diploma certificates certified by Google.

IT ALSO DESERVES TO PAY TO VISIT:

Not finding what you need?

Use our internal search to discover more information
Sponsored content:
 

Leave your Comment

SPONSOR

Your business can also appear here. More information

Recommended: