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.
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
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.
ChatGPT Free
Ask questions on any topic
CITE ARTICLE
For homework, research, thesis, books, magazines, blogs or academic articles
APA Format Reference:
Delgado, Hugo. (2019).
CSS Fundamentals - Syntax and structure of an instruction.
Retrieved Dec 10, 2024, from
https://disenowebakus.net/en/css-instruction