CSS comes from the initials of "Cascading Style Sheets", which we translate as "Cascading Style Sheets". It is the second most essential language for creating web pages. The first would be HTML, with which the content of the page is defined. The second CSS, with which the part of the presentation is defined, that is, how the elements of the page should be displayed, their position, shape, spacing, colors and, in short, all the aesthetic part.

CSS does not make any sense without HTML, just as today HTML without CSS would also be impossible, since the web has evolved in such a way that its appearance is essential and CSS is the only way to achieve customization.

To develop with CSS we have to work with a series of elements, through which the styles are declared, basically these are the most important:

• Selectors, through which we can specify which elements of the page we are referring to.


• Style attributes to define what things we want to style on the indicated selectors.


• An array of values, indicating which style should be applied to each attribute on each selector. The values are expressed with CSS units, which are used to quantify the values (pixels, points...).

Learning CSS is not difficult. Basically it is about understanding those main components and knowing the possible variants that exist to achieve the styles we need. Of course, it also has a good part of creativity, but most of the time the design is delivered previously before developing a website, so in reality what is most required is technical knowledge.

When using CSS professionally, many details and good practices must be taken into account, such as code organization, reuse, optimization, etc.

Cascading style sheets came to the world of the web much later than the HTML language. Although it was proposed in 1994, the first standard would not arrive until practically well into 1997. It would be CSS 1.

Obviously, CSS 1 was a great advance for the world of web development, but the truth is that by then designers had gotten used to mixing content with presentation, through the use of HTML tags that were present and still working. in browsers. In addition, CSS 1 had been presented with many deficiencies, which meant that a new standard had to be presented quickly. This is how CSS 2 would be released as a recommendation after just one year, in 1998.

From this point on, the world of open standards for the web came to a general standstill. Not just CSS, but HTML and other languages like Javascript. CSS 2 had a revision released as CSS 2.1 in which they added some new selectors, but it took years before a new version was released. However, we entered a dark stage in which CSS did not fully cover its objectives.

• CSS support was not the same in all browsers.


• Browsers were dedicated to incorporating functionality through prefixes, which made writing CSS more difficult and tedious.


• The standard did not cover all the needs of designers.

However, web designers and developers had to use the famous "CSS hacks", which were nothing more than tricks to achieve the desired results in unorthodox ways, which ended up in complex code and highly oriented to meet the needs of certain browsers. . To give a couple of examples, you had to use layers nested at various levels to get things like rounded edges, Javascript to get responsive font sizes, images with alpha channel transparency (PNG) to get shadows, etc. In the end, getting a moderately attractive and homogeneous design across browsers with only CSS was very complicated and you had to keep changing the HTML or Javascript to solve their shortcomings.

The appearance of CSS 3 only materialized in 2014 with the movement of HTML 5. It would come to provide solutions to most of the needs of designers and to finally cover the main objective of the language, the separation of the content from the presentation. However, it should be said that CSS 3 was presented through a large group of specifications, which have been improving and increasing to date, so it is not so much a one-off release, but a continuous improvement of the standard at various levels.

Today we can say that CSS meets the needs of designers, even more so after the appearance of CSS Flexbox, which makes it extremely easy to place elements on the page. Together of course with the latest contribution to the CSS Grid System specifications, which has finally brought a complete and versatile grid system to the web, through which web designers have truly powerful tools to position elements on the page, so regardless of how they appear in the HTML code.

The focus of CSS is to serve to define the presentation layer, that is, the part related to the appearance. It is something that any student is usually clear about when they are learning CSS, since when teaching HTML it has probably been insisted on, but it should always be reinforced.

In the HTML code we place the content, that is, what should be displayed, while with CSS we define the presentation, that is, how it should be displayed. This leads us to a series of uses of CSS that we must respect as good practices.

• The appropriate thing to do when we work with CSS is to write the code in independent files, which will have a .css extension. Each thing in its place!


• Therefore, it is not convenient to place CSS code inside HTML files. We must avoid placing styles in <style> tags within the HTML code itself.


• Of course, much less advisable is to place styles in the "style" attributes of HTML tags.

In order for a page of content to gain a certain look, we'll need a means to load or associate the CSS within an HTML. This operation can be done at various levels, but the most common is to link the CSS through the <link> tag.

                        
                            
                                
                                    <
                                    link
                                
                                rel
                                
                                    =
                                    "
                                    stylesheet
                                    "
                                
                                href
                                
                                    =
                                    "
                                    styles.css
                                    "
                                
                                
                                    >
                                
                            
                        
                    

That tag is usually placed in the <head>, so the CSS is loaded from the start and allows the HTML page to be rendered in the style defined in the linked CSS file.

Typically that same tag will be placed on all pages of the website, thus loading the same CSS file with the same style declaration. This will have two important effects:

• It allows all the content of the web to have a homogeneous appearance, defined by means of that centralized CSS file.


• It allows having a more optimized site and the same declarations are reused. Also usually the .css file will be cached in the browser, so the second or subsequent pages of the site the CSS file does not need to download the file again saving data transfer and improving loading speed.

There are other possible ways to be able to associate the CSS to an HTML document, not as recommended as the previous one, but they are useful if we need it.

Using the <style> tag

Alternatively the CSS can also be loaded via a <style> tag on the page where that CSS is needed.

                        
                        
                            
                                <
                                style
                                >
                            
                            
                                
                                    body {
                                        background-color: #eee;
                                        color: #303050;
                                    }
                                    
                                    p {
                                        margin-top: 0.2rem;
                                    }
                                
                            
                            
                                <
                                /
                                style
                                >
                            
                        
                    

These style declarations will be applied only to the HTML file that contains them, being able to create styles that affect a single page.

However, it is preferable to use the <link> tag, since this causes the CSS code to be cached and, since it is located in a single file, if it is changed, it will affect the entire website, improving maintenance.

Defining a style attribute in HTML tags

The last alternative for CSS placement is the so-called "CSS inline" which consists of applying the style rules to the labels that you want to affect, with the style attribute of the label itself.

                        
                            
                                
                                    <
                                    div
                                
                                
                                    style
                                    =
                                    "
                                    
                                        margin-bottom:
                                        2rem;
                                        border:
                                        1px
                                        solid
                                        red;
                                        padding:
                                        1rem;
                                    
                                    "
                                
                            
                                Division content...
                            
                                <
                                /
                                div
                                >
                            
                        
                    

Inline CSS should be avoided whenever possible, as it results in unnecessary mixing of the content layer with the presentation layer, losing many of the benefits of separating the layers and making it difficult to maintain and optimize the CSS. website.

CSS selectors allow us to access any element or group of elements, to apply styles to it/them in a single declaration. As their name indicates, they allow you to select those elements on which the style rules are going to be applied.

Within the CSS code we can use selectors and apply a certain set of styles to them. To do this we write the selector and place the style attributes enclosed in braces:

                        
                            selector {
                                color: red;
                                width: auto;
                            }
                        
                    

There are selectors of the most varied, which allow you to adjust in a very precise way which elements you want to select. The most important are the following:

• Label: they are used to select all the elements of the same label or HTML tag.

                        
                            h1 {
                                font-size: 26px;
                            }
                        
                    

• Class: Selects all elements of a given class. (CSS class).

                        
                            .featured {
                                font-width: bold;
                                color: orange;
                            }
                        
                    

• Identifier: Allows you to select individual tags by the tag's Id attribute.

                        
                            #formularioAlfa {
                                border: 1px solid #99c;
                            }
                        
                    

• Attribute: They allow you to select all the labels that have a given attribute, or an attribute with a certain value.

                        
                            
                                [
                                title
                                ]{
                            
                                text-decoration: none;
                            }

                            
                                [
                                align="center"
                                ]{
                            
                                border: 1px solid red;
                            }
                        
                    

CSS properties are all those characteristics of the elements to which we can apply style. From a background color to a width. The given style is applied by defining a value on that property.

Therefore, CSS is written by defining selectors, on which properties with their values are applied. The syntax is as follows:

                        
                            selector {
                                property-name: valor;
                            }
                        
                    

In order to master CSS we must know a large number of properties, which will allow us to define style values on each particular aspect of an element. However, it is not necessary to become obsessed with learning all the properties and their possible values, because it is something that little by little we will internalize with practice throughout our work.

Preprocessors are essential tools for today's frontend development. They allow you to develop CSS in a more agile way but above all create a more maintainable code.

For this, the preprocessors extend the characteristics of the CSS language, allowing the use of variables, functions (mixins) and various other ways to shorten the writing of the code.

Preprocessors do not run in the browser environment. Instead they are processed, compiling your code into standard CSS code that any browser can understand. A number of CSS enhancements such as minification are often included in that build process as well.

The most common preprocessors are Less and Sass. Sass being the most widespread in the frontend community by far.

CSS frameworks, sometimes also called design frameworks, are tools that allow us to implement a solid framework on which to develop the aesthetic part of web projects. They offer several advantages, among which two main ones stand out:

• The agility for the generation of CSS styles and the aesthetic appearance of web sites and applications.


• The creation of a graphic theme, which can be maintained throughout an entire site or application, generating greater consistency in the design.

CSS frameworks therefore allow optimized development, which is also very useful in business projects, where it is necessary to follow the same line of design by several developers.

Within the world of CSS frameworks we find two main types:

Component-based frameworks: they offer a CSS code base that allows you to easily create, through classes, a multitude of components such as buttons, lists, tabs, drop-down menus, stylized forms, etc. Within this classification, the most relevant framework is Bootstrap.

Frameworks based on utility classes: also called "utility first frameworks", which offer a huge number of atomic utility classes, designed to apply a specific value to a specific CSS property. A utility class on its own rather little (could just be a 1 rem margin at the bottom), but by combining various utility classes you can generate all sorts of totally custom user interfaces. Within this classification we find Tailwind CSS.

The advantage of component-based frameworks is that they give you a lot of pre-built styling work, with well-defined design themes. However, component-based frameworks sometimes also have some disadvantages, such as greater rigidity when developing and difficulty in making the design of several projects that use the same framework stand out from each other.

The advantage of utility class-based frameworks is that the design achieved with them is completely unique for each website, but the disadvantage is that they use many classes to style page elements.