¿Qué es CSS?

El nombre viene del inglés Cascading Style Sheets, significa Hojas de Estilo en Cascada y su función es cambiar el aspecto por
defecto de los elementos HTML que forman una web.

Los estilos CSS definen la apariencia de los elementos HTML a la hora de mostrarse en el navegador. Un solo cambio en la hoja de
estilos puede modificar multitud de elementos de una web. Básicamente CSS le dice a HTML con qué aspecto debe mostrar la página.

Sin utilizar CSS los elementos de una web se disponen unos debajo de otros (la imagen de abajo corresponde a este mismo artículo con
el CSS anulado). De tal forma sería muy poco atractivo e incluso incómodo navegar por ella, pero una vez apliquemos el
estilo CSS colocará todo en su sitio y le dará el aspecto deseado.

Añadir CSS: CSS en línea

La forma más sencilla de familiarizarse con el código CSS es practicando. Antes de seguir con el tutorial te recomiendo que hagas
unos ejercicios, en los que solo necesitas el archivo HTML que se te proporciono y el software Sublime Text para editarlo.

La forma de insertar el código en los ejemplos va a ser con CSS en línea, dentro de las propias etiquetas HTML, que en todos los
casos va a ser un párrafo representado con la etiqueta <p> </p>.

Para añadir la regla dentro de la etiqueta usaremos el atributo style=””.

Abre tu archivo y escribe el código que hay a continuación, o puedes copiarlo y pegarlo en el archivo.

<p>Párrafo de ejemplo para los ejercicios</p>

El archivo HTML con el nuevo párrafo al que aplicaremos estilos CSS te quedará así:

Para asignar el estilo CSS dentro del párrafo solo tendremos que añadir una propiedad y un valor. En los ejemplos tienes las
propiedades y valores, seguidos del código y el resultado.

Ejercicio 1: Cambiar el color de un texto con CSS

Los colores en CSS pueden asignarse con varios formatos:

  Nombre HTML del color: black, white, red, orange…
 Hexadecimal: #FFFFFF;
 RGB: rgb(1,223,58).
 RGBA: rgba(1,223,58,0.6), donde la última cifra corresponde al grado de transparencia del color y que acepta cifras entre 0 para
transparente y 1 para opaco.

Vamos a intentar acostumbrarnos al hexadecimal. En la página www.color-hex.com tienes algunos ejemplos de colores.

 Propiedad a modificar: color

 Valor de la propiedad: #7466ff;

<p style="color:#7466ff;">Párrafo de ejemplo coloreado para los ejercicios</p>

Para ejecutar el código en el navegador y verlo como una página web, en la parte superior del editor Notepad++ verás un menú con la
opción Ejecutar. Pulsa y selecciona tu navegador favorito.

El resultado que tendrá haber aplicado el estilo será el siguiente.

Párrafo de ejemplo coloreado para los ejercicios

Antes de seguir con la guía CSS practica con el resto de métodos para implementar los colores en distintos párrafos.
Ejercicio 2: Alinear un texto al centro

Para el segundo ejercicio no hace falta que añada imágenes de apoyo puesto que ya has visto donde debes escribir el código y cómo
ejecutarlo.

 Propiedad a modificar: text-align

 Valor de la propiedad: center

<p style="text-align:center">Este párrafo de ejemplo está centrado</p>

Este párrafo de ejemplo está centrado

Ejercicio 3: Background o color de fondo en un texto

 Propiedades a modificar: background | color

 Valores de las propiedades: #000000; | #FFFFFF;

<p style="background:#000000; color:#ffffff;">Este párrafo es blanco y tiene el fondo negro</p>

Este párrafo es blanco y tiene el fondo negro

Ejercicio 4: Añadir padding (relleno) a un texto con color de fondo

Como verás el ejemplo de arriba queda un poco feo. La solución es añadir un poco de relleno entre las letras y el límite coloreado que
es su padding.

 Propiedades a modificar: background | color | padding

 Valores de las propiedades: #99CCCC; | #FFFFFF; | 15px

<p style="background:#99CCCC; color:#FFFFFF; padding:15px;">Este párrafo tiene fondo, color y relleno de

15px</p>
Este párrafo tiene fondo, color y relleno de 15px

Ejercicio 5: Dar estilo de botón a un párrafo

Es el momento de atreverte a darle al párrafo el aspecto de un botón.

 Propiedades a modificar: background | color | padding | display | border-radius

 Valores de las propiedades: #3bcdfe; | #FFFFFF; | 15px | inline-block | 6px

<p style="background:#3bcdfe; color:#FFFFFF; padding:15px; display:inline-block; border-radius:6px;">TEXTO

DEL BOTÓN</p>

TEXTO DEL BOTÓN

Introducción a las propiedades CSS
En los ejemplos anteriores de la guía CSS hemos modificado el elemento párrafo. De igual forma que hemos hecho con este podemos
aplicar estilo a otro tipo de elementos HTML con las propiedades CSS.

A continuación en el modelo puedes ver las cajas que genera CSS alrededor del elemento. Desde dentro hacia afuera:

1. Elemento HTML con ancho y alto (width, height)

2. Relleno (padding o espacio alrededor del elemento)
3. Borde (border línea que delimita al elemento)
 4. Margen (margin o espacio que lo separa del siguiente elemento)

Dónde y cómo utilizar CSS. Personalizado web

¿Cómo utilizar CSS?

Existen varios lugares donde utilizar CSS. En el primero de los tutoriales ya aprendimos a añadir CSS en línea dentro de la propias
etiquetas HTML. En esta segunda parte vamos a revisar el resto de formas, aunque también insistiremos sobre el estilo en línea.

Podemos insertar CSS en el mismo documento o desde uno o varios documentos externos. Aunque los métodos no son igual de
óptimos en cuanto a los tiempos de carga, todos ofrecen los mismos resultados. Con la práctica sabremos decidir qué técnica usar
en cada momento.

Regla CSS: selector y declaración

Los archivos CSS están formados de REGLAS formadas por SELECTORES y DECLARACIONES.
En el selector se establecen los elementos HTML que se verán afectados por la regla y en la declaración se asigna una propiedad a la
que se le añade un valor determinado. La sentencia finaliza con punto y coma (;).

Previamente a ver dónde y cómo utilizar CSS es necesario saber crear una regla. Así que lo primero que haré es explicarte cómo se
programa.

Crear una regla CSS:

Vamos a crear nuestra primera regla CSS:

 En la primera línea el selector con una llave ( { ) abre la declaración.

 En la segunda línea asignamos una propiedad y un valor. Siempre serán unidades de medida legibles por los navegadores: px, em, %, etc.
Al estar en proceso de iniciación, nosotros usaremos píxeles (px).
 Terminamos la regla con una llave ( } ) de cierre.
Con esta regla de ejemplo vamos a dar a todos los títulos h1 de la web un tamaño de texto de 20px, por lo que siempre se mostrarán
con este valor mientras no le asignemos otro.

h1 {
font-size: 20px;
}

Ya sabes crear una regla CSS.

Durante el manual iremos descubriendo algunas propiedades y valores que podremos aplicar a los elementos HTML. No te preocupes
porque al final del curso tendrás la lista completa clasificada.

Ejercicio: Añadir regla CSS en el HEAD

Para realizar la práctica puedes usar el mismo documento HTML que descargaste en el artículo anterior y seguir unas sencillas
instrucciones.

Como el lugar donde vamos a añadir CSS es el <head> esta vez no podrás usar tu CMS (WordPress, PrestaShop…).

Para añadir la regla y empezar a familiarizarte con CSS, introduce el código en el <head> dentro de las etiquetas <style> </style>.

1. Abre el archivo HTML con el editor de código Notepad++ u otro similar.

2. Crea las etiquetas <style> </style>.
3. Escribe la regla CSS dentro de <style> </style>.
Has creado tu primera regla CSS.

Para ver el resultado haz click en Ejecutar > Launch in Chrome (o tu navegador favorito) en el menú de herramientas superior. Verás
que esta regla afectará a los párrafos de esa página.

Párrafo afectado por la primera regla CSS.

Prueba a escribir más párrafos y verás que siempre serán de color rojo. Recuerda que puede tener la longitud que necesites y que su
contenido está delimitado por las etiquetas <p> </p>.
¿Dónde y cómo utilizar CSS?
Ahora que ya sabemos crear reglas veamos desde dónde añadir CSS al documento HTML. Podemos utilizar CSS integrándolo desde
dos lugares y varios métodos diferentes:

 CSS en el HEAD del documento HTML.

o Importando CSS desde un documento externo.
o Enlazando CSS desde un documento externo.
o Creando las reglas CSS directamente como en el ejemplo anterior.
 CSS en el BODY del documento.
o Añadiendo estilo CSS en línea.

Aunque estos métodos son los más habituales, existen otras formas de incluir CSS en los archivos pero requieren de conocimientos
avanzados en programación.

Recordemos visualmente la estructura básica de un documento HTML que como ya habrás visto en la imagen anterior, está
estructurado en dos partes: <head> y <body>.

La etiqueta <!DOCTYPE html> es una instrucción para que el navegador sepa que versión de HTML se está usando, mientras
que <html> </html> abre y cierra el contenido del documento.
Antes de empezar a desarrollar con ejemplos prácticos las lista de métodos y lugares desde donde usar CSS, necesitamos crear un
documento CSS externo. Puedes hacerlo mediante el editor de código Notepad, o descargando un archivo CSS desde aquí.

Crear un archivo CSS externo

Para crear y editar el archivo debes usar el editor de código. Aunque te sirve Adobe Dreamweaver yo siempre recomiendo Notepad++
por su sencillez. Puedes descargarlo de forma gratuita desde su página oficial y tienes un tutorial enlazado al inicio de este mismo
artículo.

Si te atreves, vamos a crear un archivo CSS externo con Notepad++.

Abre un documento nuevo en el editor de código y guárdalo en blanco con la extensión .css desde la ruta Archivo > Guardar como. El
contenido del archivo irá creciendo en función de las necesidades de diseño del sitio web que tengas pensado.
Ahora que tenemos el documento creado vamos a ver dónde y cómo colocarlo para que se apliquen las reglas.

Estilo CSS en el HEAD

Como el HEAD es la primera parte del documento que leen tanto el navegador, como los motores de búsqueda, es ahí donde se coloca
la información importante que necesitan antes de recorrer nuestra página web.

Recordemos que desde el HEAD podemos añadir CSS de 3 formas diferentes:

 Importando CSS un documento externo.

 Enlazando CSS un documento externo.
 Creando las reglas CSS directamente.

Importar una hoja de estilo CSS

Con la sentencia @import y con el documento CSS podemos importar la hoja de estilos externa.

Esta sentencia debe ir al principio de la etiqueta <style> antes de cualquier otra regla si la hubiera. Esto permitirá realizar cambios
sobre la hoja importada sin tocarla.

Aunque se suele utilizar en algunas ocasiones, ya te he dicho que esta no es la mejor forma de insertar un archivo de estilo.

<head>
<style type="text/css">
@import url('http://tu-dominio.com/style-demo.css');
</style>
</head>
Ejercicio: ¿Cómo importar una hoja de estilo CSS?

Vamos a hacer una práctica de importación. Te hace faltan los archivos HTML y el CSS anteriores, que para estos ejemplos deben
estar dentro de la misma carpeta.

Escribe dentro del HEAD de tu archivo HTML esta instrucción:

<style type="text/css">
@import url('style-demo.css');
</style>

En la url debes usar el nombre de tu archivo CSS.

Ahora añade en ese archivo CSS esta regla:

p{
color: green;
}

Te dejo una imagen de cómo quedan tus archivos:

Has importado la primera regla CSS a tu documento HTML desde un archivo externo.

Cuando lo ejecutes en el navegador te dará un resultado como este:

Tu texto importado desde un archivo externo

Como para aprender CSS es necesario repetir, para practicar un poco añade otras reglas. Puedes probar con estas.

p{
font-size: 30px;
font-weight: bold;
letter-spacing: 4px;
text-transform: uppercase;
}

Enlazar un archivo CSS externo

El camino recomendado para incluir CSS es enlazándolo desde el HEAD.

<head>
<link rel="stylesheet" type="text/css" href="http://tudominio.es/style-demo.css"/>
</head>

Si tenemos más de un archivo externo los enlazaremos uno tras otro.

<head>
<link rel="stylesheet" type="text/css" href="http://tudominio.es/style-demo.css"/>
<link rel="stylesheet" type="text/css" href="http://tudominio.es/style-demo-2.css" />
</head>

Puedes enlazar todos los que necesites, aunque supondrá varias peticiones al servidor que afectarán negativamente a la velocidad de
carga de la web. Lo ideal es tener la menor cantidad de archivos posibles.

Dentro del archivo CSS implementaremos las reglas como ya sabemos, y según nos hagan falta. El archivo CSS estará vivo durante
todo el trabajo de desarrollo de una web.

Ejercicio: ¿Cómo enlazar una hoja de estilos CSS?

En el mismo archivo HTML con que hemos estado trabajando hasta ahora, copia este código dentro del HEAD. Elimina el código de
importación que has usado antes.

<link rel="stylesheet" type="text/css" href="style-demo.css"/>

Te tiene que quedar así:

Si recargas la página en el navegador (tecla F5) y no se produce ningún cambio es que lo has hecho bien. Ten en cuenta que el archivo
CSS utilizado es el mimo.

Para asegurarte aún más de que la hoja está bien enlazada, en el archivo CSS sustituye el valor de la propiedad color por otro, por
ejemplo el color púrpura (color:purple;).
Tu texto enlazado desde un archivo externo ahora es color púrpura

Incrustado del CSS

Para tu tranquilidad ya hemos pasado lo difícil en lo referente a desde dónde utilizar CSS. Ahora vienen las formas más sencillas de
usar CSS. Una de ellas la hemos visto en el primer ejemplo, pero vamos a repasarla y ampliarla.

Ya sabes que podemos incrustar reglas CSS directamente dentro del HEAD. Puedes hacerlo también aunque antes hayas enlazado un
documento externo. Solo debes tener en cuenta que las reglas posteriores sobrescribirán a las del archivo enlazado.

<head>
<link rel="stylesheet" type="text/css" href="style-demo.css" />
<style type="text/css">
p{
font-weight: bold;
color: orange;
}
</style>
</head>

Esto quiere decir que aunque en el último ejemplo hemos asignado a los párrafos el color púrpura mediante el archivo externo, la regla
posterior la sobrescribe y el color con que muestra es el naranja.

Ejercicio: Sobrescribir una regla CSS

Te reto a que hagas este ejercicio sin que yo te de tantas facilidades. Solo tienes que añadir el código de arriba a tu archivo. El
resultado será un texto naranja porque aunque en el archivo enlazado el texto era púrpura, la última regla que lea el navegador es la que
utilizará.

Tu texto enlazado desde un archivo externo ahora es color naranja

De la misma forma que sobrescribimos una regla de un archivo externo podemos sobrescribir las incrustadas, teniendo en cuenta que
siempre prioriza la regla que quede al final.

<style type="text/css">
p{
color: black;
}
... otras reglas ...
p{
color: green;
}
</style>

Ten cuidado porque si no tienes mucha práctica en utilizar CSS, al añadir una regla puede que sin querer sobrescribas a otras y te
provocará momentos de gran confusión.

Estilo CSS en el BODY

La forma más sencilla de insertar CSS en HTML es en línea. Este caso ya lo vimos en el primer capítulo del tutorial, pero como
todo es cuestión de práctica vamos a revisarlo.

CSS en línea

Mientras escribimos el texto podemos utilizar CSS añadiéndolo dentro de las etiquetas HTML del <body>. Las reglas se añaden dentro
del atributo style=”” y afectan solo al elemento que las contenga.

En este ejemplo, tanto si usas WordPress como otro gestor de contenidos, podrás hacerlo desde su editor.

<p style="letter-spacing: 5px;">Este párrafo tiene las letras separadas</p>

Este párrafo tiene las letras separadas

Ejercicio: Estilo en el HEAD y en línea

¿Te has detenido a pensar qué ocurre si tienes una hoja de estilo enlazada o reglas incrustadas en el HEAD y decides aplicar
otras diferentes en línea? ¿Cuáles surtirán efecto?

Borra el contenido anterior y añade esta regla a tu archivo CSS externo:

p{
font-size: 15px;
color: red;
letter-spacing: 3px;
}

y en el HEAD dentro de la etiqueta <style>:

p{
font-weight: bold;
}

Ahora en el archivo HTML con el método en línea añade nuevas reglas al párrafo:

<p style="font-size:20px; color:green; letter-spacing:0px; font-weight:normal;">¿Qué pasa con este

párrafo?</p>

En la siguiente imagen tienes una vista de los archivos.

El estilo CSS que priorizará será el que escribamos en linea. Puedes escribir otros párrafos sin ningún estilo en línea y verás lo que
ocurre.

¿Qué pasa con este párrafo?

Párrafo que tendrá el estilo de las reglas del HEAD

Este párrafo también tendrá el estilo asignado en el HEAD

La explicación está en que los documentos HTML se leen de arriba a abajo. El navegador primero hace un recorrido por el HEAD y
después lee el BODY con los párrafos. Si tienen una nueva instrucción, esta ultima regla será la que prevalezca.

Personalizado web. Los selectores CSS id y class

Selectores CSS para múltiples elementos

Recordemos que los selectores CSS indican el elemento o elementos HTML que van a ser afectados por la regla CSS. Por
tanto podemos seleccionar varios elementos dentro de la misma regla.

La sintaxis es similar a la que conocemos pero se diferencia en que los elementos del selector están separados por un coma ( , )

p, h2{
color: green;
margin-top: 15px;
}

Como es costumbre en esta serie de 4 tutoriales CSS puedes hacer prácticas mientras los lees. Para realizar los ejercicios necesitas un
archivo HTML y otro CSS, que ya tendrás de los artículos anteriores. Si no es así puedes descargar desde este enlace el archivo HTML
y desde este otro el archivo CSS.

Recuerda que editaremos el código usando el editor gratuito Notepad++, que también te servirá para crear tus propios archivos si no
quieres descargarlos.

Ejercicio: Seleccionar varios elementos con regla CSS

Para crear un selector CSS múltiple y hacer que una regla afecte a más de un elemento, escribe el código que se muestra a continuación
en tu documento CSS enlazado.

p, h2{
color: purple;
}

Y en tu archivo HTML este otro:

<h2>Título H2 de color púrpura</h2>

<p>Añade un texto largo</p>

El resultado será algo parecido a esto.

Título H2 de color púrpura

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.

Te recuerdo que los archivos deben estar dentro de la misma carpeta, con el archivo CSS enlazado desde el HEAD del HTML. La url
deberá ser el nombre del archivo CSS como en la imagen:
Prueba a añadir al selector CSS otras propiedades y valores de los que hemos usado hasta ahora, con la finalidad de que afecten tanto
al h2 como al párrafo.

Recibe nuevos artículos mensualmente

y aprende más sobre los temas que te interesan directamente desde la bandeja de entrada de tu correo
electrónico.
Los selectores CSS y los atributos HTML
Quiero hacer un alto en el camino indicando que hay que diferenciar estos dos términos porque los entremezclaremos durante la
lectura. Para identificar a un elemento especial o a varios de ellos en el código HTML les asignaremos un atributo que lo identifica, por
ejemplo id=”negro”. Para llamarlo desde la regla CSS usaremos un selector, que en este caso será #negro.

Aclarado esto veamos como funcionan los selectores más útiles de CSS, los selectores id y class.

Selectores CSS: selectores id y class

Hasta el momento hemos asignado estilo de forma general, pero durante el proceso de diseño de alguna página web surgirá que solo
queramos afectar a un elemento específico o a un grupo de ellos y no al resto. Para seleccionar con este criterio usaremos selectores id
y class que además nos ahorrarán escribir código en línea innecesario y mantener nuestros archivos CSS y HTML optimizados.
Selectores id

Los selectores id son elementos únicos y solo puede existir uno con el mismo nombre en cada página de un sitio web. Su selector en la
regla comienza por # y sirve para identificar un elemento determinado y poder modificarlo. Mediante los selectores id podremos tener
todos los párrafos en color negro y uno en concreto de color rojo.
¿Cómo usar los selectores id?

Si queremos asignar a un elemento HTML un selector id tenemos que aplicarle este atributo y haber creado su regla:

#rojofuerte{
color: red;
font-weight: bold;
}
#amarillo{
color: yellow;
}
<p id="rojofuerte">Este párrafo es de color rojo y en negrita</p>
<p id="amarillo">En cambio este párrafo es de color amarillo</p>

Podemos tener la cantidad de selectores id necesarios en la misma página siempre que tengan un nombre diferente. Por lo que una vez
asignamos un atributo id a un elemento no podremos asignárselo a otro en ese mismo archivo HTML.

Nomenclatura de los selectores id

El nombre de un atributo id no puede contener espacios en blanco, ni letras ñ, ni tildes, ni empezar por números. Podemos usar letras
mayúsculas, minúsculas y números (si no son al principio). También podemos utilizar guiones medios ( – ).

Para usar una palabra compuesta en el nombre del id, e identificarlo fácilmente podemos usar una estructura del tipo: parrafoEspecial,
parrafoEspecial2, o separar mediante guiones: parrafo-especial, parrafo-especial-2.

Ejercicio: Crea tu primer selector id

Si quieres en este caso puedes utilizar solo el archivo HTML. Crea una regla para un atributo dentro de la etiqueta <style> </style> y
escribe varios párrafos dentro del BODY. Asígnale a uno de ellos ese id.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título de tu página</title>
<style type="text/css">
p{
color: purple;
}
#rojo{
color: red;
}
</style>
</head>
<body>
<p>En un lugar de la Mancha, de cuyo nombre no quiero acordarme,</p>
<p id="rojo">no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero,</p>
<p>darga antigua, rocín flaco y galgo corredor.</p>
</body>
</html>

Como era de esperar el resultado serán párrafos de color púrpura y el de id=”rojo”, será de color rojo.

En un lugar de la Mancha, de cuyo nombre no quiero acordarme,

no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero,

darga antigua, rocín flaco y galgo corredor.

De momento todo coincide con lo que ya sabemos de otros tutoriales, la regla con selector id sobrescribe a la regla con selector párrafo
porque está después. Pero…

¿Qué pasa si reordenamos las reglas y colocamos la del id la primera? ¿debería ser sobrescrita por la regla global para los párrafos?

Prueba a hacer el siguiente cambio en el orden de las reglas.

<style type="text/css">
#rojo{
color: red;
}
p{
color: purple;
}
</style>

El resultado será exactamente el mismo porque el selector id prioriza en las reglas. Lo pongas donde lo pongas hace una selección
concreta para un elemento y le asigna el estilo de su regla obviando al resto.
Selectores class

Para facilitarnos la vida y poder agrupar elementos, CSS nos ofrece la posibilidad de usar clases mediante el selector class. Con ellas
podemos asignar un estilo a un grupo de elementos HTML. Este grupo puede estar formado por varios elementos iguales o diferentes.
Es decir, le podemos asignar por ejemplo el mismo color a un párrafo y aun titular que son de la misma class. Su representación en la
regla comienza por un punto ( . ).

¿Cómo usar los selectores class?

Si tenemos varios elementos en una misma página que van a compartir características a todos les asignaremos la misma class. En
cuanto a la nomenclatura de un selector class hay que seguir las mismas directrices que en el caso de los id.
Ejercicio: Crea tu primer selector class

En el ejemplo vamos a crear una clase naranja que vamos a aplicar a un h2 y a un párrafo. Como en el ejemplo anterior puedes usar
solo el archivo HTML, aunque si lo prefieres puedes trabajar también desde el archivo externo enlazado.

Asigna estilo a los párrafos y al título. Luego declara la regla para la clase naranja.

p, h2{
color: purple;
}
.naranja{
color: orange;
}

Dentro del BODY del HTML añade un h2 y varios párrafos. Asigna la clase naranja al título y a uno de los párrafos.

<h2 class="naranja">Don Quijote de la Mancha</h2>

<p>En un lugar de la Mancha, de cuyo nombre no quiero acordarme,</p>
<p class="naranja">no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero,</p>
<p>darga antigua, rocín flaco y galgo corredor.</p>

Si ya tienes el resultado y tanto el título como el párrafo se ven de color naranja, prueba a cambiar el orden de las reglas como en el
ejemplo de los id. Verás que sigue dando el mismo resultado. Las clases hacen una selección de un grupo y sus reglas priorizan
sobre el resto.

Selectores CSS combinados: id+class, class+class…

A un mismo elemento HTML podemos aplicarle estilo proveniente de diferente tipo selectores. Podemos mezclar id y clase, clase y
clase, id y estilo en línea…
Como ya sabemos que todo se aprende con la práctica, vamos a ello. Lo primero es crearnos diferentes reglas para combinarlas en los
ejercicios. Esta vez para hacerlo más profesional vamos a utilizar el archivo HTML y el CSS externo que habremos enlazado.

h2{
font-size: 30px;
color: white;
padding: 10px;
background: black;
display: inline;
}
p, span{
color: black;
font-size: 18px;
}
#rojo{
color: red;
background: silver;
}
.naranja{
color: orange;
}
.cursiva{
font-style: oblique;
}
.destacado{
text-transform: uppercase;
font-size: 20px;
}

Desde las reglas hemos aplicado a los párrafos, título y span unas propiedades y valores generales desde distintas reglas. Si no conoces
la etiqueta <span> </span> de HTML enseguida descubrirás para qué se usa.

Vamos a seleccionar un texto largo para poder aplicar estas reglas tan variadas. Partimos de que todo el texto es negro.

<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<p>Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
<p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In
enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt...</p>

Primero comprueba el resultado ejecutando el archivo HTML en el navegador, que será algo así:
Vamos con los ejercicios.

Ejercicio: Selector id + class

En el primer ejemplo vamos a combinar una clase y un id para el titular H2. El texto del título pasará a ser rojo con el fondo en gris y
las letras en mayúsculas.

<h2 id="rojo" class="destacado">Lorem ipsum</h2>

Como ya hemos asignado el id a un elemento no podemos hacerlo para otro. No así con la clase que vamos a asignarla a tantos
elementos como queramos.

Ejecuta el archivo en el navegador para ir viendo los cambios que se irán produciendo.

Ejercicio: Selector class + class

Sin borrar el trabajo realizado en el ejemplo anterior, decide a qué párrafo vas a asignarle dos clases. El párrafo pasará a estar en
cursiva y será de color naranja.

<p class="cursiva naranja">Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
Fíjate que para añadir dos clases las hemos separado por un espacio en blanco dentro del mismo atributo class. Puedes asignar la
cantidad de clase que necesites siempre que respetes esta nomenclatura.

Ejercicio: Selector class + en línea

Como en el caso anterior no modifiques nada de lo que has hecho y usa otro párrafo para el ejemplo.

La siguiente práctica consistirá en añadir una clase a un párrafo y cambiar de color una parte sobrescribiendo la regla en línea.

<p class="cursiva naranja">Nulla consequat massa quis enim. <span style="color:green;">Donec pede
justo</span>, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
venenatis vitae, justo.</p>

A pesar de que las clases aplicadas al párrafo le obligan a un cierto comportamiento, la etiqueta HTML <span> crea otro elemento
dentro del párrafo al que no le afectará en nada y nos permitirá añadir nuevo estilo a un fragmento de este.

Si todo ha ido bien el resultado de tu personalización durante los ejercicios debe quedar así:

Selección de elementos anidados

Como sabemos casi todos los elementos HTML están contenidos unos dentro de otros. Por ejemplo un párrafo puede contener (entre
otros elementos) a un span (<span>) o un enlace (<a>) y serán los elementos anidados.
El objetivo de este tipo de selección es poder manipular elementos localizándolos sin necesidad de añadirles una clase específica. La
técnica es crear una ruta en el selector, desde el elemento principal hasta el elemento que debe ser modificado.

Selección de un elemento anidado en otro

Para los casos en que necesitemos seleccionar un elemento contenido en otro la sintaxis será:

p span{
color: silver;
}

Observa el espacio en blanco que separa un elemento de otro.

En el HTML tendremos el siguiente código:

<p>Este párrafo tiene anidado <span>un elemento span</span> en su interior</p>

Este párrafo tiene anidado un elemento span en su interior

En este caso hemos seleccionado a todos los span que están dentro de cualquier párrafo.

¿Pero qué pasa si no quieres seleccionarlos a todos y solo quieres seleccionar una parte de ellos?

Selección de un elemento anidado en otro de una clase determinada

Si pensabas que habíamos agotado las posibilidades de los selectores id y class, estabas equivocado. Veamos qué más cosas podemos
hacer con ellos.

Gracias a este tipo de selección tenemos acceso a elementos que se encuentran dentro de otros solo si tienen el atributo de una cierta
clase. Evitamos crear nuevas clases a esos elementos porque podemos seleccionarlos de otra manera.
Por ejemplo tenemos un párrafo de class=”rojo” y dentro un span de class=”amarillo”. En el código HTML sería:

<p class="rojo">Este párrafo es de clase rojo y tiene un <span class="amarillo">span de clase

amarillo</span></p>

Hasta ahora hubiéramos seleccionado al span por su clase:

.amarillo{
color: yellow;
}

pero nos ha costado crear una regla nueva y añadirle el atributo al span. Imagina que tienes decenas de span de esta clase entre el
código. La forma óptima de seleccionarlos sería no asignándoles una clase en el código HTML…

<p class="rojo">Este párrafo es de clase rojo y tiene un <span>span sin ninguna clase</span></p>

para luego seleccionarlos con la regla…

.rojo span{
color: yellow;
}

Vamos a entenderlo mejor con el ejemplo siguiente.

Ejercicio: Selección de elementos anidados en otros de una clase específica

Crea en tu HTML estos párrafos:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título de tu página</title>
<style type="text/css">
.destacado span{
color:red;
}
</style>
</head>
<body>
<h2>El ingenioso hidalgo Don Quijote de la Mancha</h2>
<p>En un lugar de la Mancha, de <span>cuyo nombre no quiero acordarme</span>, no ha mucho tiempo que
<span>vivía un hidalgo</span> de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.
</p>
<p class="destacado">Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los
<span>sábados</span>, lentejas los <span>viernes</span>, algún palomino de añadidura los
<span>domingos</span>, consumían las tres partes de su hacienda.</p>
<p>El resto della concluían sayo de velarte, <span>calzas de velludo</span> para las fiestas con sus
pantuflos de lo mismo, los días de entre semana se honraba con su vellori de lo más fino.</p>
</body>
</html>

Ahora ejecútalo en el navegador.

Si te fijas a pesar de existir otros span dentro de los párrafos, solo se han visto afectados por la regla los span que están dentro de un
elemento de class=”destacado”. Y nos da igual si son párrafos u otro tipo de elemento.

Prueba tu mismo a añadirle la class=”destacado” también al título h2 y ponle dentro un span. También será de color rojo.

Ahora la pregunta es la siguiente: ¿Cómo selecciono un elemento que está dentro de otro específico que tiene asignada una clase, y no
en todos los demás de esa misma clase?

Selección de un elemento anidado en otro específico y de una clase determinada

Podemos afinar aún más la selección de elementos. Con el mismo código usado en el ejemplo anterior, con la class=”destacado” en el
título h2 y en uno de los párrafos, vamos a seleccionar solo los span que estén dentro de un párrafo con el atributo class=”destacado” y
no al del título h2 de class=”destacado”.

El código HTML que debes tener en tu documento:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título de tu página</title>
<style type="text/css">
.destacado span{
color:red;
}
</style>
</head>
<body>
<h2 class="destacado">El ingenioso hidalgo <span>Don Quijote de la Mancha</span></h2>
<p>En un lugar de la Mancha, de <span>cuyo nombre no quiero acordarme</span>, no ha mucho tiempo que
<span>vivía un hidalgo</span> de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.
</p>
<p class="destacado">Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los
<span>sábados</span>, lentejas los <span>viernes</span>, algún palomino de añadidura los
<span>domingos</span>, consumían las tres partes de su hacienda.</p>
<p>El resto della concluían sayo de velarte, <span>calzas de velludo</span> para las fiestas con sus
pantuflos de lo mismo, los días de entre semana se honraba con su vellori de lo más fino.</p>
</body>
</html>

y la regla necesaria para acceder al elemento de forma aún más selectiva:

p.destacado span{
color: red;
}

Cuando ejecutes tu archivo en el navegador verás que al span de la título h2 ya no se ve afectado, y solo lo hacen los span que están
dentro del elemento class=”destacado” si es un párrafo.

Practica con este ejemplo afectando solo al span que está dentro del título h2.

Ejercicio: Selección de un elemento anidado de tercer nivel

Para finalizar al artículo te voy aponer a prueba y no te daré la solución a menos que la pidas, aunque no creo que a estas alturas haga
falta. Debes localizar el span que está en el primer párrafo y colorearlo de rojo. Te dejo el código HTML y una regla aplicada para que
añadas otra que la sobrescriba.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título de tu página</title>
<style type="text/css">
div p {
color:black;
}
CREA TU REGLA AQUÍ{
color:red;
}
</style>
</head>
<body>
<div id="principal">
<h2>Ejercicio final del capítulo</h2>
<p class="conSpan">En este ejercício debes localizar <span>este span</span> dentro de un párrafo</p>
<p>Pero no a <span>este otro span</span> dentro de este párrafo</p>
</div>
</body>
</html>

Todas estas selecciones discriminatorias que hemos hecho con las clases podemos hacerlas con los id.

Evidentemente solo existirá un elemento con el mismo nombre de atributo id en cada página. Pero si estamos usando un archivo
externo que afecte a varios documentos HTML la cosa cambia, ya que se puede repetir el nombre de id si está en páginas diferentes.
Por ejemplo en la home de la web, en la página de contacto, en la de servicios…

Personalizado web. Casi eres experto en CSS

¿Qué nos falta para terminar de aprender CSS?

En artículos anteriores hemos comenzado a aprender CSS desde cero, hemos creado reglas y usado selectores. Hemos aprendido a
incrustar CSS en línea, a enlazarlo desde un archivo externo y realizado algunas prácticas, pero ¿no notas que te falta algo? La
respuesta es si.

Te falta conocer la lista de propiedades CSS que permiten manipular elementos HTML. Es posible que no lo hayas pensado
porque te he ido guiando por los ejemplos, pero existen muchas más propiedades CSS que podemos usar durante el diseño de una
página web.
Aunque te recomiendo que dejes su lectura de momento, puedes descargar el archivo con la lista de propiedades CSS desde aquí en
formato PDF.

Propiedades CSS para HTML

Ahora que ya sabemos cómo aplicar estilo de diferentes formas, es importante aprender qué propiedades CSS básicas pueden
modificar a un elemento HTML.

Desde dentro y hacia afuera las propiedades CSS más comunes son las siguientes:

 Padding: Es el espacio de relleno que separa al elemento HTML de su borde.

 Border: Que enmarca al elemento.
 Margin: Indica el margen entre este elemento y el siguiente (hacia cualquiera de sus lados).
El elemento HTML puede ser un texto, una imagen, un enlace…

Podemos afectar a los elementos con las propiedades de forma general (para los 4 lados), o de forma individual para cada uno de los
lados asignando medidas diferentes. Incluso disponemos de un atajo.

 padding:15px; Afectará a los 4 lados del elemento.

 padding-left:15px; Solo afectara a la izquierda del elemento.
 padding:15px 3px 15px 5px; Separando las medidas con un espacio en blanco indica una medida para cada lado. El orden sigue el sentido
de las agujas del reloj: arriba, derecha, abajo, izquierda.
 padding:15px 10px; Atajo que indica que se asignen 15px arriba y abajo y 10px para derecha e izquierda.

Del mismo modo que tratamos el padding podemos implementar el margin y el border.

Como hacemos siempre vamos a aprender CSS desde cero practicando lo que acabamos de ver. Te hace falta utilizar los mismos
archivos HTML y CSS de anteriores tutoriales. Si has estado trabajando con ellos y quieres descargarlos de nuevo en su estado original
puedes descargar desde aquí el archivo HTML y desde aquí el archivo CSS.

Ejercicio: párrafo con el mismo padding en todos los lados

Puesto que el padding no se visualiza necesitamos poner color de fondo a nuestro elemento, que por tradición va a ser un párrafo.

En nuestro archivo CSS externo creamos una regla para aplicar color de fondo y padding al párrafo:

p{
background: #2E9AFE;
padding: 15px;}

Y en el archivo HTML escribimos un párrafo y como ya sabemos también añadimos color al texto en línea.

<p style="color:white;">Párrafo con color de fondo y padding</p>

El resultado será el siguiente:

Párrafo con color de fondo y padding

Recuerda que si no le asignas padding al párrafo te quedará así:

Párrafo con color de fondo sin padding

Te estarás preguntando por qué el fondo azul ocupa todo el ancho y no se ajusta al texto. Muchos elementos HTML llamados de
bloque se muestran ocupando líneas completas . Para que un elemento h1, h2, h3, h4, h5, h6 o párrafo se ajuste al texto deberás
aplicarle la propiedad display:inline-block.

Párrafo con color de fondo, padding y display: inline-block

Ejercicio: párrafo con padding diferente a cada lado

Para seguir practicando, al mismo párrafo asígnale a cada lado diferentes valores de padding.

p{
background: #2E9AFE;
padding-top: 25px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 30px;
display: inline-block;
}

O lo que es lo mismo:

p{
background: #2E9AFE;
padding: 25px 15px 20px 30px;
display: inline-block;
}
Párrafo con color de fondo y diferentes medidas de padding

Ejercicio: párrafo con borde

Los bordes por defecto son transparentes y delimitan el relleno (padding) de un elemento. Se les puede asignar grosor, color y tipo.
Veamos cómo:

p{
background: #FACC2E;
padding:15px;
display: inline-block;
border: 2px solid #FE9A2E;
}

Párrafo con fondo, padding y borde

Ejercicio: párrafo con estilo de borde personalizado

Además de el color y el borde podemos decidir el tipo que queremos. En el ejemplo anterior hemos aplicado al borde un estilo solid, y
ahora vamos a aplicar otros estilos.

p{
background: #FACC2E;
padding:15px;
display: inline-block;
border: 5px dashed #FE9A2E;
}
Párrafo con fondo, padding y borde

Sigue practicando y dale otros estilos al borde. Puedes descubrirlos tú mismo asignando los valores double, inset, outset y dotted.

Por ejemplo:

p{
background: #FACC2E;
padding:15px;
display: inline-block;
border: 5px outset #FE9A2E;
}

Párrafo con fondo, padding y borde outset

Ejercicio: párrafo con borde a solo uno de los lados

Como en el caso del margin y el padding, podemos asignar borde solo a uno de los lados por ejemplo para destacar un texto.

p{
background: #fcfcfc;
padding:15px;
display: inline-block;
border-left: 5px solid #FE9A2E;
font-weight: bold;
}

Párrafo con borde a uno de los lados

Practica con el resto de los lados. Cambia el color del background, del borde y del texto. No olvides que hay que practicar mucho para
aprender CSS.

Recibe nuevos artículos mensualmente

y aprende más sobre los temas que te interesan directamente desde la bandeja de entrada de tu correo
electrónico.

Comentado de una regla CSS

Si en algún momento del desarrollo web queremos desconectar temporalmente una regla o parte de ella, en vez de borrarla
usaremos los comentarios que vienen definidos con /* */.

Vamos a comentar la regla del ejercicio anterior haciendo que el elemento <p> no se vea afectado por ninguna regla.

/*
p{
background: #fcfcfc;
padding:15px;
display: inline-block;
border-left: 5px solid #FE9A2E;
font-weight: bold;
}
*/

También puedes ocultar una o varias de las sentencias. Te hubiera venido muy bien en el ejercicio anterior para ir conectando y
desconectando los diferentes tipos de bordes:

p{
background: #fcfcfc;
padding:15px;
display: inline-block;
/* border-left: 5px solid #FE9A2E; */
/* border-left: 5px double #FE9A2E; */
/* border-left: 5px inset #FE9A2E; */
/* border-left: 5px outset #FE9A2E; */
border-left: 5px dotted #FE9A2E;
font-weight: bold;
}

Haz la prueba de comentar reglas y sentencias tú mismo en el archivo CSS externo.

La sentencia !important
Nos encontraremos situaciones en que por diversas causas una regla no surta efecto. Bien porque hayamos asignado estilo con un
selector que priorice sobre la actual, o porque estemos manipulando código en que hayan usado la sentencia !important para evitar
un cambio sobre una propiedad CSS. En estos casos usaremos !important.

Cuidado no abuses, porque la sentencia !important solo se anula con otra sentencia !important.
Ejercicio: ¿cuándo y cómo usar !important?

Si estamos modificando código ya programado, por ejemplo en una web realizada con plantilla, los programadores quizá hayan
decidido que algún elemento se muestre de una forma especial mediante su selección con selectores anidados.

En el ejemplo, el autor a decidido que todos los elementos <span> contenidos en un <p> que estén dentro de un <div> de clase general
se muestren de color rojo:

.general p span{
color: red;
}

Para este código HTML:

<div class="general">
<p>Cum sociis natoque penatibus et magnis <span>dis parturient montes</span>, nascetur ridiculus mus.</p>
<p>Nulla consequat massa quis enim. <span>Donec pede justo</span>, fringilla vel, aliquet nec, vulputate
eget, arcu.</p>
<div>

Por mucho que nosotros añadamos una nueva regla posteriormente, los <span> no se verán afectados y seguirán siendo de color rojo.

.general p span{
color: red;
}
span{
color: green;
}

Compruébalo ejecutando tu archivo en el navegador.

Para que la regla inicial en la que se ha utilizado un selector con elementos anidados sea sobrescrita, deberemos utilizar !important.

.general p span{
color: red;
}
span{
color: green !important;
}

Aplica esta sentencia y vuelve a ejecutar tu archivo HTML.

Aquí la solución sería tan sencilla como eliminar la primera regla, pero puede ocurrir que las reglas estén en diferentes archivos y que
no sepas desde cuál se está enviando la orden. En vez de estar navegando por los archivos CSS de tu web en busca de la dichosa regla,
esta sería la solución.

Ejercicio: sobrescribir una sentencia !important

En este caso vamos a imaginar que en el archivo CSS externo hemos decidido que los párrafos de nuestro sitio web se muestren
siempre en color negro, haciendo un uso inadecuado de la sentencia !important, pero para una página en particular queremos que sean
gris.

Pega en tu archivo externo esta regla:

p{
color: black!important;
}

Esto hará que por mucho que asignemos otros colores a los párrafos siempre se muestren negros. Para anular al primero, tendremos
que añadir un segundo !important a la regla posterior.

Haz una copia de tu archivo HTML y cámbiale el nombre para tener dos archivos. Los dos documentos estarán enlazados con el
archivo CSS externo que tienen la sentencia !important que has pegado hace un momento.

Pega en el HEAD de los dos la siguiente regla:

p{
color: silver;
}

Ahora añade la sentencia !important a uno de los archivos HTML. Al que quieras que sea de color gris.

p{
color: silver!important;
}

Los párrafos serán de color gris solo en esa página y no en la otra.

Selector HOVER
No podemos aprender CSS sin conocer los efectos que genera el selector hover ¿Te has fijado que al ir a clicar sobre un botón suele
cambiar de color? Recurriendo al efecto hover podrás crear sencillas animaciones que cambian temporalmente una regla CSS por
otra.

Un enlace que por defecto se muestra en azul, en el ejemplo vamos a hacer que se muestre verde.

a{
color: green;
}
<a href="http://undominio.com/url-a-la-que-apunta-el-enlace">Texto del enlace</a>

la regla para que cambie de color al situar el cursos encima será:

a:hover{
color: red;
}

Texto en color verde que será rojo si te pones encima

En el archivo CSS tendrás que añadir las dos reglas, una para su comportamiento normal y otra para su comportamiento con hover, que
siempre irá en segundo lugar.

a{
color: green;
}
a:hover{
color: red;
}

El selector hover puede afectar a cualquier elemento HTML cambiando su estilo de forma temporal, siendo capaz de crear
animaciones más complejas con la propiedad transition.

Como el objetivo para estudiar y aprender CSS es practicar lo aprendido y aplicarlo a nuestra web, esta es la sección del tutorial que
más te va a gustar. Es la parte donde aplicando lo aprendido vas a ver los resultados de tanto esfuerzo.

Ejercicio: crea tu primer botón usando propiedades CSS

Vamos a crear nuestro primer botón aplicando técnicas que hemos aprendido durante el manual.
Como sabes nos hacen falta dos reglas, una para el enlace estándar y otra para el enlace con selector hover. El resultado que queremos
es este.

BOTÓN QUE CAMBIA DE COLOR

Las reglas que debes aplicar desde el HEAD o tu documento CSS externo son:

#ejemploHover1{
padding: 15px 20px;
display: inline-block;
background: #91b4c0;
color: white;
border-radius: 6px;
}
#ejemploHover1:hover{
background: #66cdaa;
}

El código HTML para el botón será un enlace:

<a id="ejemploHover1" href="http://undominio.com">BOTÓN QUE CAMBIA DE COLOR</a>

Ahora por tu cuenta haz que cambie también el color del texto, añadiendo una nueva sentencia al selector. Después crea otros botones
con diferente id y prueba con otros estilos.

Ejercicio: crea tu primer botón animado

Es el momento de ir un poco más allá y hacer una animación suave en el botón. Pega este código en tu archivo.

#ejemploHover2{
padding: 15px 20px;
display: inline-block;
background: #ff0081;
color: white;
-webkit-transition: background 1s;/* PARA VERSIONES 3.1 A 6.0 DE SAFARI */
transition: background 1s;
}
#ejemploHover2:hover{
background: #524d9c;
}

El HTML del botón:

<a id="ejemploHover2" href="http://undominio.com">BOTÓN QUE CAMBIA DE COLOR</a>

BOTÓN QUE CAMBIA DE COLOR

En el caso de que quieras que la transición afecte también al texto…

#ejemploHover3{
padding: 15px 20px;
display: inline-block;
background: #464646;
color: white;
-webkit-transition: background 0.8s, color 0.8s;
transition: background 0.8s, color 0.8s;
}
#ejemploHover3:hover{
background: silver;
color: #464646;
}
<a id="ejemploHover3" href="http://undominio.com">BOTÓN QUE CAMBIA DE COLOR</a>

BOTÓN QUE CAMBIA DE COLOR

Ejemplos de elementos con estilo CSS

Ahora es cuando debes echar un vistazo al archivo de ayuda con las propiedades CSS que has descargado al principio. Vas a descubrir
muchas propiedades CSS que podrás utilizar para la personalización de una página web.

Como orientación vamos a ver algunos ejemplos con código incluido que te serán de ayuda y seguro incluirás en tu web.

¿Cómo darle sombra al texto de un botón?

a{
padding: 15px 20px;
display: inline-block;
background: #91b4c0;
color: white;
font-weight: bold;
text-shadow: 1px 1px 2px #464646;
}

BOTÓN CON SOMBRA EN TEXTO

¿Cómo hacer un texto con sombra?

p{
color: #e54444;
font-size: 30px;
font-weight: bold;
text-shadow: 2px 2px 1px #464646;
}

Este texto tiene sombra

¿Cómo hacer un contenedor con sombra externa?
p{
background: #3cb0fd;
-webkit-box-shadow: 5px 5px 3px 0px rgba(0,0,0,0.40);
-moz-box-shadow: 5px 5px 3px 0px rgba(0,0,0,0.40);
box-shadow: 5px 5px 3px 0px rgba(0,0,0,0.40);
}

Este párrafo tiene una sombra en su conedor

Observa que algunas veces hay que aplicar estilos adaptados a los diferentes navegadores. No todos entenderán este tipo de sentencias
CSS genéricas.

¿Cómo añadir una línea a un texto?

p{
font-size: 20px;
font-weight: bold;
text-decoration: underline;
}

Este párrafo está remarcado con una línea

De la misma forma que la añadimos podemos quitar la línea que viene por defecto en los enlaces con text-decoration:none;.

¿Cómo hacer una caja con esquinas redondeadas diferentes?

p{
background: #e0c72d;
color:white;
-webkit-border-radius: 60px 4px 40px 10px;
border-radius: 60px 4px 40px 10px;
}
Este párrafo tiene diferentes esquinas

¿Cómo cambiar el tamaño de un elemento al poner encima el cursor?

div{
width: 150px;
height: 93px;
background: #3cb0fd;
-webkit-transition: width 1s;
transition: width 1s;}
div: hover{
width: 100%;
}
.

¿Cómo hacer que un elemento gire al poner el cursor encima?

div{
width: 93px;
height: 93px;
background: #b0fd3c;
transition: transform 2s;
}
div:hover{
transform: rotate(1080deg);
}
.