CSS

What is CSS?

                                            .CSS is a language
                                              Documentation

How to use CSS?

If you like the world of web design or are curious to start in this area, you have probably heard the term CSS. It is a technology used to provide visual and aesthetic qualities to a web page. If you have never touched on this matter, you will see that it is an analytical, logical and almost mathematical way of creating web pages, but thanks to it we can simplify the creation of pages and get exactly what we are looking for.

What is really CSS?

Before you begin, you must be clear about a key concept: a web page is really a text document. In this document you write HTML code, with which you know that you create the content of a website. On the other hand, there is the CSS code, which together with the HTML code allows you to shape, color, position (and other visual characteristics) to a page.

In short, it is a language such as English or German, which web browsers like Chrome or Firefox know and can understand. Our goal as web designers and programmers is precisely that: learn the language.

Browsers understand HTML and CSS languages:

The acronym CSS (Cascading Style Sheets) means "Cascading Style Sheets" and starts from a simple but very powerful concept: applying styles (colors, shapes, margins, etc ...) to one or more documents (usually HTML documents, websites) in bulk.

It is called cascading styles because they are applied from top to bottom (following a pattern called inheritance that we will discuss later) and in the case of ambiguity, a series of rules are followed to resolve it.

The idea of ​​CSS is to use the concept of separation of presentation and content, trying that HTML documents include only information and data, relative to the meaning of the information to be transmitted (the content), and all aspects related to the style ( design, colors, shapes, etc ...) are in a separate CSS document (the presentation).

Everything related to visual design can be unified in a single CSS document.
If we need to make visual modifications we do it in one place and we don't have to edit all the HTML documents in question separately.Duplication of styles in different places is reduced, making it easier to organize and make changes. In addition, in the end the information to be transmitted is considerably smaller (pages are downloaded faster).

It is easier to create different presentation versions for other types of devices: tablets, smartphones or mobile devices, etc ...

CSS advantages

The difference between a website that implements CSS and one that does not, is huge and it definitely shows.

You may have seen a website that cannot be fully loaded and has a white background with most of the text in blue and black. That means that the CSS part of the site did not load correctly or does not exist.

This is what a site with just HTML looks like, and I think you'll agree with me that it doesn't look very good.

Before CSS, all style should be included in HTML markup. This means that all backgrounds, font colors, alignments, etc. had to be described separately.

CSS allows you to stylize everything in a different file, creating the style there and then integrating the CSS file over the HTML markup. This makes HTML markup much cleaner and easier to maintain.

CSS allows you to have multiple styles in an HTML page, and this makes the customization possibilities almost endless. Today, this is becoming a necessity rather than something basic.

Three CSS implementation styles:

1.Let's start talking about the Internal style. CSS styles made in this way are loaded every time a website is updated, which can increase the loading time. In addition, you will not be able to use the same CSS style on multiple pages, since it is contained on a single page. However, this also has its benefits. Having everything on one page makes it easy to share the template for a preview.

2.The External method could be the most convenient. Everything is done externally in a .css file. This means that you can do all the stylization in a separate file and apply the CSS to any page you want. External style can also improve loading times.

3.Finally, let's talk about the CSS Inline style. Inline works with specific elements that have the <style> tag. Each component has to be stylized, so it might not be the best or fastest way to handle CSS. But it can be useful, for example, if you want to change a single item, have a quick preview of the changes or you may not have access to CSS files.

In short, with CSS you don't have to repeatedly describe how individual elements look. This saves time, makes the code shorter and less prone to errors.