History: Style with CSS

CSS is a language for giving color and shape to your website. As you've seen in the HTML lesson, we have already included Picnic CSS as a solid foundation to build the rest of the style. There are many libraries like this, including the famous but complex Bootstrap.

The CSS always modifies one or several of the HTML elements. Let's see how it works together:

Selec­tors and properties

To know which HTML element we are modifying, we'll use what is called a selector. Every one of the style definition that we make on this selector is called a property. For example, to give some margin to all of the paragraphs of a website:

p {
  margin: 5px;
}

The selector is the "p" that we find in the first line. What it does is selecting all the paragraph elements from the HTML.

After the selector we will always find braces "{}" that surround all the properties that we want to define for the elements selected.

Finally, the properties are pairs of name: value;. In this example we only have the margin as a name and 5px as a value. So we are saying that al of the paragraphs in the site have a margin of 5px.

We can add several properties to a single selector, for instance to add margin AND to change the background of all the paragraphs:

p {
  margin: 5px;
  background: rgb(200, 100, 100);
}

Classes

Hay varios tipos de selec­tores. Como re­cor­daréis de la lección an­terior, las clases in­dicamos que tenían un sig­nificado es­peci­al.

Por ejemplo, para este trozo de HTML:

<section class="row>
  <div class="hello">Hello</div>
  <div class="hello world">Hello world</div>
  <div class="bye">Bye</div>
</section>

Vamos a darle es­tilo con CSS (Cas­cade Style Sheet):

/* Estilo para todos los <div> */
div {
  background: red;
}

/* Estilo para todos los elementos con la clase "hello" */
.hello {
  background: green;
}

/* Estilo para todos los elementos con las clases "hello" y "world" */
.hello.world {
  background: blue;
}