CSS: Learn how to create attractive designs

What is CSS?

CSS or Cascading Style Sheets is a cascading style sheet language that is used to style elements written in a markup language such as HTML. CSS separates the content from the visual representation of the site. Before you begin, you must be clear about one key concept: a web page is essentially a text document. In this document, HTML code is written, through which the content of a website is created. On the other hand, there is the CSS code, which, together with the HTML code, allows you to give shape, color, position (and other visual characteristics) to a page. In short, it is a language that web browsers like Chrome know and can understand. Our goal as web designers and programmers is precisely that: to learn the language. 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 (generally HTML documents, web pages ) at scale. It is called cascading styles because they are applied from top to bottom (following a pattern called inheritance that we will discuss at a later time). If there is 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. HTML documents include only information and data regarding the meaning of the information to be transmitted (the content), and all aspects related to style (design, colors, shapes, etc …) are in a separate CSS document (the presentation).

How does CSS work?

CSS uses a simple English-based syntax with a set of rules that control it. As we mentioned earlier, HTML was not made with the intention of using style elements, but only for page markup. It was created simply to describe the content. For example: <p> is a paragraph. </p>. But how do you apply a style to the said paragraph? The CSS syntax structure is quite simple. It has a selector and a declaration block. First, you select an element and then you declare what you want to do with it. Pretty straightforward, right?

Let’s take a look at an example:

All <p> elements will appear in blue and bold.

1. <style>
2. p {
3. color: blue;
4. text-weight: bold;
5. }
6. <style>