Box model

Todos los elementos en una página web son cajas rectangulares.

Las características de estas cajas podemos describirlas a través del box-model.

Hay varias propiedades CSS que controlan las dimensiones de cada elemento:

• width y height, que definen las dimensiones del elemento (aunque, como se aplican exactamente, dependerá de la propiedad display)
• padding, que determina el espacio entre el contenido y el borde exterior.
• El mismo border de la caja.
• margin, el espacio que separa el elemento del resto de elementos.

Area de contenido | Padding | Border | Margin

.box {
    width: 300px;
    height: 50px;
    border: 5px solid #d8cd00;
    margin: 50px;
    padding: 50px;
}

Por defecto el navegador añade los paddings y los bordes a las dimensiones del elemento

300px + 50px * 2 + 5px * 2 = 410px

.box {
    width: 300px;
    height: 50px;
    border: 5px solid #d8cd00;
    margin: 50px;
    padding: 50px;
}

Box-sizing

box-sizing tiene 3 valores posibles:

• content-box: el que se aplica por defecto y calcula el width y height teniendo en cuenta únicamente el contenido.
• border-box: Incluye padding y border dentro de las dimensiones.

Es una buena idea, sobre todo si trabajamos con una layout flexible (en porcentajes) declarar box-sizing: border-box para todos los elementos usando el selector universal (*).

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

“Inheriting box-sizing Probably Slightly Better Best-Practice” - Chris Coyier

Width y height

width y height son las propiedades que determinan el ancho y alto, respectivamente, del area de contenido de un elemento html.

Por defecto su valor es auto, es decir que se asignaran automaticamente dependiendo de si el elemento es inline o block.

• Si es inline, el width será tan largo como el contenido.
• Si es block, ocupará el 100% de su contenedor.

El height por su parte, dependerá del alto del contenido, por lo que, si se trata de texto estará ligado al line-height del mismo.

Display

La propiedad display es la encargada de controlar si un elemento se comportará como un elemento block o uno inline (entre otras opciones).

Display: block

Los elementos block ocupan el 100% de su contenedor desplazando al siguiente elemento a una nueva línea.

Aplican las propiedades del box-model de manera normal.

Display: inline

Los elementos inline mantienen el flow normal de texto.

Tienen algunas particularidades a la hora de interpretar el box-model.

• Ignoran el width y el height
• Si se le aplican paddings verticales no afectaran la posición de los elementos que les rodean.
• El background no cubrirá la altura total del alto de línea, sino que se ajustará al contenido.

Display: inline-block

El valor inline-block es una combinación de los dos anteriores.

Los elementos inline-block mantienen el flujo del texto como los elementos inline pero interpretan el box-model como un elemento block

Display: none

El valor none en la propiedad display removerá por completo el elemento de nuestra página web. Los elementos que le sigan en el HTML ocuparán su lugar en el flow del documento.

Un lector de voz ignorará nuestro contenido con display: none, lo cual tenemos que tener en cuenta si no queremos afectar la accesibilidad a la hora de ocultar algo.

Visibilty y opacity

Visibility

La propiedad visibility nos permite hacer invisible un objeto pero que este siga ocupando su lugar en el flow del documento, por lo que el resto de los elementos seguirán comportándose como si estuviera allí.

Los posibles valores para visibiliy son:visible | hidden | collapse

Opacity

Podemos controlar la opacidad de un elemento con la propiedad opacity, cuyo valor va de 0 (transparente) a 1 (opaco).

Hay que tener en cuenta que los elementos contenidos por el elemento al que apliquemos opacity también se verán afectados y su opacidad máxima siempre será la del elemento padre.

<p>El parrafo tiene una opacidad del 50% por eso, aunque el strong
tenga el 100%, <strong>sigue siendo semitransparente.</strong></p>

p { opacity: .5; }
strong { opacity: 1; }

El parrafo tiene una opacidad del 50% por eso, aunque el strong tenga el 100%, sigue siendo semitransparente.

Overflow

Cuando forzamos las dimensiones del elemento con width y height pueden darse dos casos:

• Si el contenido ocupa menos que las dimensiones del elemento, el resto de espacio quedará vacio.
• Si el contenido no cabe dentro de las dimensiones asignadas, se saldrá del elemento. Podemos controlar exactamente de que manera con la propiedad overflow.

p { height: 220px; }

p { height: 80px; }

La propiedad overflow controla lo que sucede con el contenido cuando excede el tamaño del elemento contenedor. Sus posibles valores son:

• visible
• hidden
• scroll
• auto

Overflow: visible

p {
    height: 80px;
    overflow: visible;
}

Overflow: hidden

p {
    height: 80px;
    overflow: hidden;
}

Overflow: scroll

p {
    height: 150px;
    overflow: scroll;
}

Overflow: auto

p {
    height: 150px;
    overflow: auto;
}

Padding y margin

Padding

El padding es el espacio interior que separa el contenido del borde de la caja.

Margin

El margin es el espacio exterior que separa el al elemento del resto de los elementos.

Hay que tener en cuenta que, al aplicar márgenes a dos elementos adyacentes el resultado puede no ser el deseado. Esto se debe a un comportamiento de los márgenes conocido como margin collapsing

Tanto el padding como el margin nos permiten controlar cada uno de sus lados individualmente con las siguientes propiedades:

• padding-top | padding-right | padding-bottom | padding-left
• margin-top | margin-right | margin-bottom | margin-left

.box {
    padding-top: 10px;
    padding-bottom: 30px;
    padding-left: 10%;
    padding-right: 4em;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 20px;
    margin-right: 20px;
}

También pueden declararse todos los lados en una sola propiedad (padding y margin respectivamente) separando los valores con un espacio y siguiendo el sentido de las agujas del reloj.

Si utilizamos esta abreviación, cuando el valor derecho es igual al izquierdo podemos omitir este último. Si además el valor superior e inferior también son iguales podemos omitir el inferior.

.box {
    padding-top:    10px;
    padding-right:  20px;
    padding-bottom: 10px;
    padding-left:   20px;

    /* es igual a: */
    padding: 10px 20px 10px 20px;

    /* e igual a: */
    padding: 10px 20px 10px;

    /* e igual a: */
    padding: 10px 20px;
}

Borders

border es la propiedad usada para controlar el borde que delimita un elemento y requiere tres valores: width, style y color separados por un espacio.

.box {
    border: 1px solid red;
}

Si queremos afectar estos valores de manera individual utilizaremos las propiedades: border-width, border-style y border-color, que pueden a su vez contener 4 valores, uno por lado, al igual que el padding o el margin.

.box {
    border-width: 1px 8px 6px 4px;
    border-style: solid;
    border-color: red blue;
}

Tambien podemos combinar las propiedades anteriores con los diferentes valores top, right, bottom, left para cambios muy precisos.

.box {
    border-right-style: solid;
    border-top-width: 4px;
    border-bottom-color: red;
}

Los posibles estilos de borde que nos ofrece CSS para la propiedad border-style son:

none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

border-radius

La propiedad border-radius nos permite redondear las esquinas de nuestras cajas.

En su forma más simple funciona similar al propiedad a otras propiedades, aceptando 4 valores separados por espacio que indicarán el radio de la circunferencia que aplicaremos a las esquinas, empezando el primer valor en la esquina superior izquierda y desplazandose en sentido horario.

.box { border-radius: 10px 40px 40px 10px; }

Selectores básicos

Una regla CSS se compone de dos partes:

• Un selector, que indica el elemento o elementos que queremos estilar.
• Una declaración o bloque de declaraciones, que son las reglas de estilo que se aplicaran a los elementos que hayamos seleccionado.

  p {
    color: red;
    font-weight: bold;
  }
    

Selector de tipo (type selector)

Selecciona todos los elementos de la página cuya etiqueta HTML (tag) coincide con el valor del selector.

...

p {
  color: red;
}
    

Selector de Clase (class selector)

• Podemos asignar el atributo class a cualquier elemento HTML.
• Pueden tener cualquier nombre.
• Se pueden aplicar a múltiples elementos en una misma página.
• Son sensibles a las mayúsculas.

...

...

...

...

...

.destacado {
  color: red;
}
    

Selector de ID (Id selector)

• Podemos asignar el atributo id a cualquier elemento HTML.
• Pueden tener cualquier nombre.
• Los ID han de ser únicos en una misma página.
• Son sensibles a las mayúsculas.

#header {
  color: red;
}
    

Herencia y Cascada

Herencia

Los elementos HTML heredarán algunos estilos de sus elementos contenedores (parent elements), mientras no declaremos otros más específicos.

No todas las propiedades CSS son hereditarias. A grandes rasgos podemos asumir que aquellas referentes a estilos de texto se heredarán pero las pertenecientes al box model no.

Lorem ipsum sit amet, consectetur adipisicing elit. Consequatur quidem unde vel ullam, tempora perferendis facilis.

p {
  color: red;
}

strong {
  color: blue;
}
    

Lorem ipsum sit amet, consectetur adipisicing elit. Consequatur quidem unde vel ullam, tempora perferendis facilis.

Cascada

La "cascada" a la que hace referencia la C de CSS explica la manera en la que el lenguaje resuelve los conflictos entre selectores.

El cliente web lee los estilos desde la primera línea del documento de manera descendente. Por esta razón si un selector aplica una regla ya exisitente en ese selector esta sera sobreescrita (siempre y cuando la especificidad sea la misma).

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio accusamus laborum temporibus itaque quos, ipsum, est sit ipsa, soluta aliquam modi cum maiores neque facere nesciunt, sequi corrupti quam aspernatur.

p {
  color: red;
}

p {
  color: blue;
}
    

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio accusamus laborum temporibus itaque quos, ipsum, est sit ipsa, soluta aliquam modi cum maiores neque facere nesciunt, sequi corrupti quam aspernatur.

Combinando selectores

Selector Elemento-Específico

La combinación Elemento-específico aplica una clase o un ID exclusivamente al elemento que le precede.

Para ello concatenamos el selector de tipo al selector de clase omitiendo espacios entre ambos.

...

...

...

...

h1.destacado {
  color: red;
}
    

Selector Descendente (Descendant selectors)

Se consigue colocando dos (o más) selectores uno de tras de otro separados por un espacio.

El último selector de la cadena (key selector) es el que se aplica siempre y cuando esté contenido dentro de los selectores precedentes.

#sandwich .pan .queso {
  color: yellow;
}
    

No es necesario que los selectores descendentes sean hijos directos de sus elementos padre para que el selector se aplique.

#tupper .pan .queso {
  color: yellow;
}
    

Agrupar selectores

Podemos aplicar un mismo bloque de declaraciones a varios selectores al mismo tiempo separandolos con comas (,).

div,
h1,
.clase,
#identificador p {
  color: yellow;
}
    

Pseudo-clases (Pseudo-classes)

Una pseudo clase es una keyword que se añade a un selector para especificar un estado concreto del mismo.

Para escribirlas insertamos dos puntos (:) entre el selector y la pseudo clase.

selector:pseudo-clase

Algunas pseudo-clases

[ Listado completo ]

• :hover, :focus, :active, :visited

  Hacen referencia al estado de un enlace.

• :first-child, :last-child

  Seleccionan el primero y el último hijo de un elemente respectivamente.

• :nth-child(), :nth-last-child()

  Selecciona los elementos dados en la expresión de acuerdo a su posicion en el DOM.

• :checked, :required, :optional, :valid, :invalid

  Seleccionan elementos de formulario de acuerdo a los valores de sus atributos.

Especificidad (specificity)

En CSS, la especificidad, es lo que determina que estilo será el que acabará aplicandose a un elemento determinado.

Cuando a un elemento se le aplica más de un selector con reglas que actúan sobre la misma propiedad, es la especificidad la encargada de resolver este conflicto.

A grandes rasgos podemos ordenar los diferentes tipos de selectores de menor a mayor peso específico de la siguiente manera:

Calcular especificidad

0,0,0,0

p {
    color: red;
}

0,0,0,1

.text {
    color: red;
}

0,0,1,0

#main strong {
    color: red;
}

0,1,0,1

header ul#main-nav .sub-menu li.child a:hover {
    color: red;
}

0,1,3,4

<p style="color: red">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

1,0,0,0

p {
    color: red !important;
}

0,0,0,1 0,0,0,0

Pseudo-elementos (Pseudo-elements)

Los pseudo-elementos nos permiten estilar ciertas partes del DOM que no son accesibles mediante los selectores normales, como la primer linea de un párrafo de texto.

Al igual que las pseudo-clases, son keywords que se añaden a los selectores pero separadas por dos puntos (::)

selector::pseudo-elemento

[ Listado completo ]

::before / ::after

Nos permiten añadir un pseudo-elemento como hijo del selector designado. ::before lo insertará al comienzo mientras que ::after lo hará al final.

El contenido lo declararemos con la propiedad CSS content

Ambos se utilizan para añadir contenido cosmético sin carga semántica y que por eso debe quedar fuera del HTML.

¡Un gato!

/* Insertamos un gato AL COMIENZO del texto */

p::before {
    content: "(⁎˃ᆺ˂) ";
    color: #e14f24;
    font-size: .9em;
    margin-right: .5em;
}
        

¡Otro gato!

/* Insertamos un gato AL FINAL del texto */

p::after {
    content: " (≚ᄌ≚)ﾉ”";
    color: #e14f24;
    font-size: .9em;
    margin-right: .5em;
}
        

Los pseudo-elementos creados con ::after y ::before funcionan como si se tratara de un <span> por lo que podemos darles dimensiones, ponerles imágenes de fondo y posicionarlos normalmente.

p::after {
    content: "";
    background: url(../img/cat-watching.gif) no-repeat center center;
    background-size: cover;
    display: block;
    margin: 0 auto;
    width: 150px;
    height: 100px;
}
        

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, accusantium aspernatur reprehenderit in, doloribus nobis nisi quae tempora magni perspiciatis beatae!