En esta lección aprenderás a darle forma, color y orden al contenido que hemos escrito previamente usando CSS. También aprenderás los conceptos básicos de diseño y estructura de páginas 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. Hay muchas librerías parecidas, incluyendo la famosa pero compleja Bootstrap.
El CSS siempre modifica al HTML, no puede existir de forma independiente al 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 de tipo párrafo del html.
Después del selector encontramos las llaves {}
que rodean todas las propiedades que queramos definir para los elementos seleccionados.
Las propiedades son parejas de nombre: valor;
, que en este caso sólo es margin: 5px;
. Aquí lo que estamos indicando es que todos los párrafos de la web tienen un margen de 5px.
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 HTML:
<section class="flex three">
<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). Para darles estilos a las clases usaremos el nombre de una de las clases del HTML precedido por un punto .
:
/* 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;
}
Con esto obtendremos lo siguiente:
Resumen: podemos seleccionar un elemento tipo <p> ... </p>
con el selector p
, sin embargo para seleccionar un elemento con una clase como <a class="important"> ... </a>
tendrás que usar el nombre de la clase precedido por un punto como en .important
.
Ejercicio: para el siguiente bloque de HTML, haz que todos los links <a> ... </a>
parezcan botones. Pista: usa Google para buscar "CSS Button":
<p>Should you <a href="#clickme">click it</a>? asked Alice, incredulous.</p>
<p>At least push the <a href="#redbutton">red button</a>! She demanded.</p>
Ejercicio: para el siguiente HTML, darle algún estilo sólo a los párrafos con la clase "quote":
<p>This is a plain paragraph</p>
<p class="quote">This is a styled quote</p>
<a class="quote">this should have no style (;</a>
<div>Good luck!</div>
Box Model
Antes de empezar deberías de entender el concepto de Box Model de CSS. Cualquier tipo de elemento de HTML puede estar rodeado por 3 cosas diferentes: padding, borde y margen. Una pequeña representación:
Empezamos por el más fácil, el borde. Este es, como su nombre indica, un elemento visual que rodea al elemento. En estos <input>
puedes ver varios bordes grises:
Si el elemento tuviera un color de fondo, este iría de borde a borde incluidos ya que el borde puede tener transparencia y en ese caso se vería el fondo.
El margen es el espacio que separa diferentes elementos. En el ejemplo anterior sería el espacio entre un input y el siguiente, y en el siguiente ejemplo el espacio entre los botones:
Por último, el padding representa el espacio entre el borde y el contenido en sí. En estos botones hemos cambiado únicamente el padding:
El
line-height
también afecta la altura y por eso parece que el primero tiene padding superior e inferior, pero no es padding en sí.
Layouts
Las páginas web se suelen diseñar de las estructuras más generales (layouts) a los detalles específicos. Algo básico que tenéis que saber hacer es crear y probar varios layouts de forma rápida. Un ejemplo de layout:
Estructura externa
Cuando lo queremos hacer en HTML+CSS, primero tenemos que tener en cuenta las partes más generales, por lo que resulta mucho más sencillo:
Veamos cómo hacer este sencillo layout. Ya que es genérico, usaremos el elemento <div>
y clases para hacer la estructura al no disponer de un mejor tipo de elemento en HTML. Primero la línea que lo rodea todo:
<div class="gallery">
<!-- todo lo demás viene aquí -->
</div>
Como vemos, le asignamos la clase gallery para el contenedor. El nombre de la clase es importante ya que la usaremos más tarde para darle estilo en CSS. Cada uno de los componentes internos tendrá la clase element:
<div class="gallery">
<div class="element">A</div>
<div class="element">B</div>
<div class="element">C</div>
</div>
Ahora nuestros elementos no tienen estilo ni contenido. Vamos a usar el sistema de grids de Picnic CSS para hacernos la vida más fácil. También tendremos que añadir algunos <div>
extra (por limitaciones de CSS):
<div class="gallery">
<div class="flex three">
<div>
<div class="element">A</div>
</div>
<div>
<div class="element">B</div>
</div>
<div>
<div class="element">C</div>
</div>
</div>
</div>
Si ponemos el código en jsfiddle podemos ver las letras separadas. Para verlo más claramente vamos a darle un estilo básico a los elementos:
.element {
background: #eee;
padding: 10px 15px;
height: 120px;
}
Ahora sí, míralo en este jsfiddle. Se parece mucho más a nuestro objetivo:
Pero la galería empieza desde (0, 0), así que vamos a darle un pequeño margen para que respire con css usando la clase gallery. Acuérdate que a las clases en CSS se les añade un punto:
.gallery {
margin: 10px;
}
Obtenemos una separación con el cuadrante entero como ves en este jsfiddle:
Elementos específicos
Next, we will focus on building the elements. For this, we will also be using HTML, but we will focus on the first one and then we'll continue with to the rest.
So what is inside our element? It seems that we want one image and two buttons. So let's do it:
<div class="element">
<img src="http://placekitten.com/320/240">
<button>Like</button>
<button>Dislike</button>
</div>
But we have a problem, now we have two buttons but no way of giving style to only one and not the other. To solve this, we will add them different classes:
<div class="element">
<img src="http://placekitten.com/320/240">
<button class="like">Like</button>
<button class="dislike">Dislike</button>
</div>
And here you go:
Oops. Not so quick. What is the matter? Well, there are two issues so far:
- The image loads with the original size of the image. We were even lucky because we chose one similar to the displaying size, but it could be thousands of pixels. So we will set the width of the image.
- The height of the
.element
is forced to 120px because of the propertyheight: 120px
that we specified before. Normally, in CSS we won't specify heights and we will allow for the elements to size themselves. So we just remove this property.
Sizing things
Setting the width of objects is not so easy. Many times you want it to be 100%, so that the objects like images adjust to the width of the container. In this way, if a screen is larger it will become larger, not leaving empty spaces.
However, some times we want the elements to size themselves such as the buttons or the heights of the objects, so we will not set them. Lastly, some times you want an object to be of an specified size in pixels. This is useful for things like icons.
When we set the width of an image to 100%, the height will be automatically set so that it keeps the proportions. After fixing both of the mistakes explained above, we have this CSS:
.gallery {
margin: 10px;
}
.element {
background: #eee;
padding: 10px 15px;
}
img {
width: 100%;
}
Which makes the HTML to look like this:
The last thing that we need is to make sure that the Dislike button is on the right. Probably we also want it to be red, so we will do so with CSS:
.dislike {
float: right;
background: red;
}
Then we copy/paste* our element in the three of them so we get the expected layout. We used a small sizing trick to keep the kitten images different:
*we will learn later on how to do this properly
Enjoy the cats. Here you have the full code:
<div class="gallery">
<div class="flex three">
<div>
<div class="element">
<img src="http://placekitten.com/320/240">
<button class="like">Like</button>
<button class="dislike">Dislike</button>
</div>
</div>
<div>
<div class="element">
<img src="http://placekitten.com/480/360">
<button class="like">Like</button>
<button class="dislike">Dislike</button>
</div>
</div>
<div>
<div class="element">
<img src="http://placekitten.com/640/480">
<button class="like">Like</button>
<button class="dislike">Dislike</button>
</div>
</div>
</div>
</div>
The CSS:
.gallery {
margin: 10px;
}
.element {
background: #eee;
padding: 10px 15px;
}
img {
width: 100%;
}
.dislike {
float: right;
background: red;
}
Now that you know the basics about layouts with HTML and CSS, you can begin to create your own layouts.
Exercise: create these layouts in HTML+CSS in a similar way to the cats layout: