Introduction to CSS

CSS (Cascading Style Sheets) is a style language used to define the appearance and layout of HTML documents. It lets you separate the document's content from its visual presentation, making code maintenance easier and more efficient.

CSS works by selecting HTML elements and applying style rules to those elements. Style rules can define properties such as color, font, size, spacing, position, and more.

To use CSS in an HTML document, it is necessary to create a separate file with a .css extension, which contains the style rules. This file must be referenced in the HTML document through the tag <link>.

Basic CSS syntax consists of a selector, which indicates the HTML element to be styled, followed by a block of style declarations, delimited by braces. Each style declaration consists of a property and a value, separated by a colon and terminated by a semicolon.

For example, to set the background color of a <div> element to red, the CSS code would be:

  
    div {
      background-color: red;
    }
  

There are several types of CSS selectors, which allow you to select elements based on their class, ID, type, hierarchy, and other criteria. In addition, you can use pseudo-classes and pseudo-elements to style elements based on their state or position.

CSS also supports the use of units of measurement, which can be fixed (like pixels) or relative (like percentage or em). Relative units are especially useful for creating responsive layouts that adapt to different screen sizes.

In short, CSS is a fundamental tool for creating well-structured, visually appealing web pages. With it, it is possible to separate the visual presentation from the document content, facilitating the maintenance and updating of the code. In addition, CSS offers several options for selectors, properties and units of measurement, allowing you to create flexible and responsive layouts.

Next page of the Free Ebook:

2CSS syntax

2 minutes