Regardless of the web page you visit, all of them, without exception, use CSS to style their elements. There is no denying that this tool is extremely important, especially for those who want to be a front-end developer. In this complete guide, you will see everything you need to know to understand how CSS works.
What is CSS?
The acronym CSS comes from “Cascading Style Sheets”, its literal translation is, “Cascading Style Sheets”. Its purpose is to style HTML elements . Therefore, CSS is responsible for controlling visual aspects, such as colors, text fonts, spacing and even element positioning.
CSS was proposed and developed by a working group called the World Wide Web Consortium (W3C) , led by Håkon Wium Lie and Bert Bos. The first version of CSS, called CSS1, was released in December 1996. Before CSS, styles and formatting were specified directly within HTML tags. This made HTML code more complex, difficult to maintain, and difficult to update.
However, the visual formatting of web pages did not have a chinese america data clear standardization. Over time, CSS has undergone several updates, becoming the powerful tool it is today.
Throughout this article, we will cover several points that will help you better understand how CSS works.
How and what are the ways to create styles with CSS?
There are several ways to create styles with CSS, such as using the stylesheet inline, inserting the CSS inside the tag style, or in a separate file. However, the most widely adopted option is the latter, as it allows a clear separation between the structure (HTML) and the style (CSS).
However, it is necessary to select the elements that we want to style. To do this, we use selectors, which are covered in detail in the article Basic CSS Selectors . In short, selectors allow us to indicate which element will receive the style. The most recommended and widely used way of selecting is through classes, but it is also possible to use idor even select by the name of the tag.
If you want to delve even deeper into this topic, we have the article Advanced CSS Selectors , which covers more advanced ways of selecting HTML elements.
Box model and styling with CSS
HTML5 + CSS3 - Advanced Properties and Selectors
Course
HTML5 + CSS3 - Advanced Properties and SelectorsKnow the course
The box model is a fundamental concept for creating styles with CSS. It is through this box model of elements that CSS defines the structure of an element. This allows for the modification of width and height measurements, spacing between elements and borders. All of this is done through the properties, width, height, padding, border, and margin. This concept is widely covered in the article Getting to know the box model . On our YouTube channel, we have open content that also explains how the box model works.
However, there are other possibilities. CSS has a huge variety of styling options. Below I will leave a list of the most common CSS properties.
background-color: used to change the background color of the element;
color: used to change the text color;
text-align: aligns the text to the center, left, right, or leaves the text justified;
width: we define the width of the elements;
height: defines the height of the elements;
border: used to change the shape, thickness and color of the borders;
padding: spacing between the element's boundary and its edge;
font-size: we change the text font size;
font-family: used to modify the font family.
HTML5 + CSS3 - Mastering Flexbox
Course
HTML5 + CSS3 - Mastering FlexboxKnow the course
Positioning elements with CSS
Additionally, CSS allows us to change the position of elements. For example, by default, browsers define all HTML elements with the position static. However, it is possible to modify this behavior using the property position, which accepts several values. In addition to static, we have the options absolute, relative, fixedand sticky, each with different positioning effects. In the article Position, styling elements with CSS , you can find details on how each of these values works.