Skip to main content
Programador 2

In the programming language... What is CSS and what is it for?

CSS stands for Cascading Style Sheets, which translates to "Style Sheets in Cascade" in English. It refers to the type of language used in graphic design to present, in a structured way, a document written in a marked language. It describes elements, shapes, syntax, colors, texts, backgrounds, tables, and the box model that we visualize on a screen. In short, it defines, creates, and improves the presentation of a document based on HTML. For many designers, CSS has become one of the fundamental pillars of their daily work.

CSS was created by an international community that develops standards to ensure the growth of a web page. This community is called the World Wide Web Consortium (W3C), whose goal is to make web pages available to everyone.

CSS developed in different levels over time, with notable milestones:

  • CSS1: This is a cascading style sheet, level 1, launched in December 1996.
  • CSS2: It builds on CSS1 and defines over 100 properties, each with its list of allowed values.
  • CSS3: defines over 200 properties and does not have a specific creation date, as it represents the continuous evolution of the cascading style sheet language, which began with its first version, CSS1, and was followed by CSS2.

We can find CSS in different browsers. The World Wide Web Consortium works to ensure that web pages can be viewed on all browsers and for all people. This way, websites have a consistent, attractive, and responsive design depending on the device it is viewed on.

What is the syntax of CSS?

Selector, declaration (property and value), and comment

CSS is composed of a part called "Selector" and another called "Declaration". In some cases, there may also be a comment.

  • The Selector: refers to the elements to which CSS styles are applied and can be H1, H2, paragraph, form, etc. This translates to indicating "what to do". There are several types of selectors:
    • Selector universal: used to select all elements within a page and is shown with an asterisk (*).
    • Selector of type or tag: used to group rules with multiple tags. Selectors are separated by commas (,).
    • Selector descendant: increases the precision of the selector of type or tag. Selects elements that are inside other elements and is marked with a period (.).
    • Selector of class: used to highlight a phrase or word within a page and is represented as .highlighted.
    • Selector of ID: allows selecting an element on the page through the value of its id attribute and is shown as #highlighted.
  • Declaration: consists of the property that refers to the color, width, or font and the value that refers to the alignment left, right, or centered. In simpler terms, it indicates who to do.
  • The property or attribute: refers to the characteristic that is going to change.
  • The value: indicates the property that is desired to be modified.
  • The comment: is written between /* and */.

One of the main advantages of CSS is that it is possible to use the same template to format multiple websites, and if necessary, to make changes, it is enough to modify the element in the template and update the linked sites. This way, a significant amount of time is saved when writing CSS commands.

Additionally, it can be used for other tasks such as creating interactive elements, designing menus and lists, changing the color of a hyperlink to indicate that the user has already visited it, or modifying the color of the menu when the mouse is moved over it. Another advantage is that it separates, on the one hand, the content and, on the other hand, how it will appear visually in the document. It also helps to present the document in different styles and avoids having files with an excessively large weight. It simplifies the creation of a web page, making it flexible and giving more control over its different functionalities. If a modification is made in CSS, it will be visualized immediately on the web page.

A language that greatly facilitates the creation of style sheets and the development of web pages visible to everyone.

Add new comment

HTML Restringido

  • You can align images (data-align="center"), but also videos, blockquotes, and so on.
  • You can caption images (data-caption="Text"), but also videos, blockquotes, and so on.

Contact info

Global leader in consulting services, digital transformation, technology, and engineering.

  • Camino de las Ceudas 2 Bis
    28032 - Las Rozas de Madrid
  • (+34)647 555 222
  • info@aeioros.com