History: Style with CSS

Revision made 8 years ago by Francisco Presencia. Go to the last revision.

Este es un len­guaje que sirve para darle color y forma a tu página web. Como habéis visto en el html, ya hemos in­cluido Pic­nic CSS en la web para par­tir de una base sobre la que con­struir el resto del es­tilo.

El CSS siempre está re­lacionado al HTML, modifican­do a un elemen­to del mismo.

Selec­tores y pro­piedades

Para saber a qué elemen­to modifica, se utiliza lo que se llama un selec­tor, y cada una de las de­finiciones de es­tilos que se hacen se llama una pro­piedad. Por ejemplo, para darle marg­en a todos los pár­rafos:

p {
  margin: 5px;
}

El selec­tor es la p que se en­cuentra en la primera línea. Lo que hace es selec­cionar todos los elemen­tos del html. Después le in­dicamos las pro­piedades, que en este caso sólo es margin: 5px;. Todas las pro­piedades de css van de­ntro de un selec­tor por medio de las llaves, que in­dican el prin­cipio y fin.

También se pued­en añadir varias pro­piedades para un mismo selec­tor, por ejemplo cam­bian­do el color de fondo:

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

Clases

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;
}