CSS is an abbreviation for the term Cascading Style Sheets. It is a web development language used to define the visual presentation (styles) of documents written in a hypertext markup language (HTML).
The most accurate definition for CSS can be found on the W3C website and says:
“Cascading style sheet is a simple mechanism for adding styles (for example, fonts, colors, spacing) to web documents”.
This means that the web developer has full control over the visual characteristics of their web pages, that is, it is possible to change fonts, colors, spacing, sizes, positions, etc., of any HTML element inserted in their pages.
The style sheets are then a set of rules that define how a certain HTML element (tag) will be visually presented. And, among the countless advantages that we could mention in using the CSS language, the biggest one for sure is the possibility of completely separating the visual part (style) from the website content.
The simplest and most direct method of applying styles to an HTML element is through the style attribute , as shown in the following examples:
<html>
<head>
<title>Introduction to CSS</title>
</head>
<body>
<h1 style="color:red; font-size:32px;">Hiperbytes</h1>
<p style="color: blue; font-size:22px;">HTML course</p>
<p style="color: blue; font-size:22px;">CSS course</p>
</body>
</html>
This method, called inline style, is valid according to W3C standards. However, this type of practice is not recommended, as it is not possible to reuse code, makes it difficult to read for maintenance and one of the greatest powers of the CSS language is lost: separating the content from styling .
We call the CSS rule the basic unit of a style sheet, with the smallest portion capable of producing a styling effect. A rule is made up of a selector, a property and a value. The selector indicates which HTML element (tag) you want to manipulate, the property which characteristic you want to change, and the value the definition itself to be assumed by the selector. Let’s take an example for better understanding.
h1{
color: red;
}
To create a CSS rule, we must start with the selector that, in this first moment, will be the HTML tag of our page. Then, we must open a code block with a brace character ({) and, after inserting all the desired characteristics, we must close the code block with the brace character (}).
A CSS rule can contain more than one style declaration (property and value). This means that between the opening and closing of the braces ({}), we can insert as many styling declarations as necessary for that selector. Here are some examples:
h1{
color: red;
text-align: center;
}
p{
color: green;
text-align: center;
}
The above CSS rules could be written as follows:
h1{ color: red; text-align: center; }
p{ color: green; text-align: center; }
This is a much more compact way of writing CSS rules. However, readability is compromised and it is more difficult to find errors in the code.
The CSS (form of writing) syntax allows multiple blanks that are treated as a single space. In addition, the CSS language is not case sensitive , that is, it does not matter whether you write in uppercase or lowercase letters. See the following examples:
h1
{
COLOR: RED;
TEXT-ALIGN: CENTER;
}
p{
color: green;
text-align: center;
}
The definition of how to write CSS rules is at the discretion of the developer. It is recommended that a standard be adopted to make the code uniform, and you can choose any of the shapes shown above or even other variations. However, the form that is most widespread among developers and that I recommend is the second form of writing which is applied in the paragraph in the example above.
Various aspects of styles depend on the definition of a measure. Fonts size, spacing between elements and border thickness are some examples. There are several units of measurement that are used according to the specificity of your application, but for now we will only use the measurement in px (pixel).
The unit of measurement in px (pixel) is calculated in relation to the resolution of the device on which the page is displayed, which may be the screen of a monitor or a smartphone. The term “pixel” refers to the dots that make up the images on the screen and is very useful in most cases.
Examples:
font-size: 20px;
line-height: 30px;
Defining colors by name is very simple and we did that in the previous class. In the CSS rule just use the “color” property and in the value inform the name of the color that you want.
On the W3C website we find a list with the names of the main colors that we can use on our pages. They are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white and yellow.
Through the colors above we have already managed to give more “life” to our web pages. However, using names, we are limited to the variation of colors that are possible to be represented by names. For this and other reasons, it is more efficient to use hexadecimal notation.
A hexadecimal color is defined as follows: #RRGGBB, in which RR, GG and BB must vary from 00 to FF and represent the Red (red), Green (green) and Blue (blue) components of a color. See an example below:
#FA15B9
The possible alphanumeric values in hexadecimal notation are: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E and F. Only they are valid to define a color, the variation between the values of each element will produce a different shade of color.