Este es un lenguaje que sirve para darle color y forma a tu página web. Como habéis visto en el html, ya hemos incluido Picnic CSS en la web para partir de una base sobre la que construir el resto del estilo.
El CSS siempre está relacionado al HTML, modificando a un elemento del mismo.
Selectores y propiedades
Para saber a qué elemento modifica, se utiliza lo que se llama un selector, y cada una de las definiciones de estilos que se hacen se llama una propiedad. Por ejemplo, para darle margen a todos los párrafos:
p {
margin: 5px;
}
El selector es la p
que se encuentra en la primera línea. Lo que hace es seleccionar todos los elementos del html. Después le indicamos las propiedades, que en este caso sólo es margin: 5px;
. Todas las propiedades de css van dentro de un selector por medio de las llaves, que indican el principio y fin.
También se pueden añadir varias propiedades para un mismo selector, por ejemplo cambiando el color de fondo:
p {
margin: 5px;
background: rgb(200, 100, 100);
}
Clases
Hay varios tipos de selectores. Como recordaréis de la lección anterior, las clases indicamos que tenían un significado especial.
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 estilo con CSS (Cascade 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;
}