Contenido actualizado a fecha: 9 febrero 2021
Si no has llegado hasta aquí desde la primera parte del curso; donde descubrimos qué es el estilo CSS y para qué sirve, quizá te interese empezar por esa sección que explica desde cero cómo utilizar CSS.
A lo largo de este artículo tendrás la oportunidad de realizar una serie de ejercicios prácticos en los que necesitarás un par de archivos. Tienes dos opciones: descargar los que te he preparado o crearlos por ti mismo, que es lo que te recomiendo.
➡ Solo podrás utilizar WordPress o tu gestor de contenidos en uno de los casos.
En esta parte de los tutoriales vamos a aprender a cómo usar CSS y desde dónde, para que tengas las armas suficientes con las que personalizar cualquier página web.
¿Cómo utilizar CSS?
Existen varios lugares donde utilizar CSS.
En el primer tutorial aprendimos a añadir en línea el CSS (dentro de la propias etiquetas HTML). Y aunque en esta segunda parte aprenderás otras formas, también insistiré en esa técnica.
Es posible insertar CSS desde:
- El mismo documento.
- Un documento externo.
- Varios documentos externos.
😀 Con la práctica sabremos decidir qué técnica utilizar en cada momento.
Artículos de interés
Regla CSS: Selector y Declaración
Los archivos CSS están formados por «reglas», formadas a su vez por «selectores» y «declaraciones».
- En el selector se establecen los elementos que se verán afectados por la regla.
- 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 que sepas cómo crear una regla CSS, así que lo primero que haré es explicarte cómo se programa.
Crear una regla CSS
Vamos a crear nuestra primera regla CSS:
- El selector abre la declaración con una llave ( { ).
- Luego asignamos una propiedad y un valor; con unidades de medida legibles por los navegadores (px, em, %…). 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 40px, por lo que siempre se mostrarán con este valor mientras no le asignemos otro.
h1 {
font-size: 40px;
}
🙂 Ya sabes crear una regla CSS.
Mediante los ejercicios iremos descubriendo algunas propiedades y valores que podremos aplicar a los elementos. Y no te preocupes que al final del curso tendrás la lista completa clasificada.
Añadir una regla CSS en el HEAD del HTML
Para realizar la práctica puedes usar el mismo documento HTML que descargaste en el artículo anterior y seguir unas sencillas instrucciones.
Vamos a añadir la regla CSS en el <head>, dentro de las etiquetas <style> </style>, con lo que esta vez no podrás usar un gestor de contenidos 🙁
- Abre el archivo HTML con el editor de código.
- Crea las etiquetas <style> </style>.
- Escribe la regla CSS entre <style> y </style>.
<head>
<style>
p {
color: red;
}
</style>
<head>
😉 Has creado tu primera regla CSS en el head del documento.
Para ver el resultado haz click en Ejecutar > Launch in Chrome (o tu navegador favorito) desde el menú de herramientas superior.
Párrafo afectado por la primera regla CSS.
➡ Esta regla afectará a todos los párrafos de esa página que siempre serán rojos.
Para confirmarlo introduce otros párrafos, recordando que pueden tener la longitud que quieras pero que su contenido hay que delimitarlo con las etiquetas <p> </p>.
¿Dónde y cómo utilizar CSS?
Ahora que ya sabemos crear reglas, veamos desde dónde añadir el CSS al documento HTML.
Podemos utilizar CSS integrándolo desde dos lugares y varios métodos diferentes:
- CSS en el HEAD del documento HTML.
- Importando CSS desde un documento externo.
- Enlazando CSS desde un documento externo.
- Creando las reglas CSS incrustadas como en el ejemplo anterior.
- CSS en el BODY del documento.
- Añadiendo estilos en línea como vimos en el primer tutorial.
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.
¿Tiene lógica no?
Para entender dónde vamos a introducir el CSS recordemos la estructura básica del documento HTML que está estructurado en dos partes:
- Head: con información importante para el navegador.
- Body: el contenido web en sí.
Pero antes de desarrollar con ejemplos prácticos la 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 documento CSS externo
Para crear y editar el archivo ya sabes que hay que usar un editor de código.
Puedes complicarte la vida con Adobe Dreamweaver, pero te recomiendo Notepad por su sencillez.
😉 Si te atreves, vamos a crear un archivo «style-demo.css» externo con Notepad++.
Abre un documento nuevo en el editor de código, llámalo style-demo y guárdalo en blanco con la extensión .css desde la ruta Archivo > Guardar como.
Ya lo irás rellenando según las necesidades de diseño del sitio web que tengas pensado.
Ahora que tenemos el documento veamos dónde ubicarlo para que se apliquen las reglas CSS.
Estilo CSS en el HEAD
Como el HEAD es lo primero que leen tanto los navegadores 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 incluir CSS de 3 formas diferentes:
- Desde un documento externo importado.
- Desde un archivo externo enlazado.
- Incrustando las reglas dentro de la etiqueta style.
Importación de una hoja de estilo CSS
Con la sentencia @import importamos la hoja de estilos CSS externa.
➡ Esto permitirá realizar cambios sobre la hoja importada sin tocarla.
Aunque se suele utilizar en algunas ocasiones, 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>
¿Cómo importar una hoja de estilos CSS?
➡ Vamos a hacer una práctica de importación.
Lo más cómodo por el momento es que los archivos HTML y CSS estén dentro de una 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 si es diferente al mío.
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
😉 Practica un poco añadiendo otras reglas.
Puedes probar con estas para cambiar el tamaño del texto, el grosor de la fuente, el espacio entre letras y la transformación automática a mayúsculas respectivamente.
p{
font-size: 30px;
font-weight: bold;
letter-spacing: 4px;
text-transform: uppercase;
}
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.
Enlazar un archivo CSS externo
El camino recomendado para incluir CSS es enlazándolo desde el HEAD.
Simplemente hay que insertar el link al documento CSS obviando las etiquetas <style> </style>, que en este casi no son necesarias.
<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>
➡ Lo ideal es tener la menor cantidad de archivos posibles.
Dentro del archivo CSS implementaremos las reglas como ya sabemos, según nos hagan falta.
😀 El archivo CSS estará vivo durante todo el desarrollo de una web.
¿Cómo se enlaza una hoja de estilos CSS?
Copia este código dentro del HEAD.
<link rel="stylesheet" type="text/css" href="style-demo.css"/>
➡ Recuerda que en este caso NO usamos la etiqueta <style>.
Tu texto enlazado desde un archivo externo ahora es color púrpura
Incrustar estilos CSS
😉 Para tu tranquilidad ya hemos pasado lo difícil en lo referente a «dónde utilizar CSS».
Ahora vienen otras formas más sencillas de usar CSS. Una de ellas la hemos visto en el primer ejemplo pero vamos a repasarla y a ampliarla.
Ya sabes que es posible incrustar reglas CSS directamente dentro del HEAD. Y lo mejor es que puedes hacerlo aunque antes hayas enlazado un documento externo.
<head>
<link rel="stylesheet" type="text/css" href="style-demo.css" />
<style type="text/css">
p{
font-weight: bold;
color: orange;
}
</style>
</head>
Esto se traduce en que aunque hayas pintado los párrafos de color púrpura mediante las reglas de un archivo externo, la regla incrustada posteriormente la sobrescribe y el color con que se mostrará será el indicado por esta última. Es decir, naranja.
Cómo sobrescribir una regla CSS
Prueba con el código de arriba en tu archivo.
El resultado será un párrafo naranja, porque ya sabes que aunque en el archivo enlazado era púrpura, la última regla que lea el navegador es la que va a 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 reglas 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 otras». Lo que provocará un momento de confusión 🙁
Artículos de interés
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 y a ampliarlo un poquito.
Estilo en línea
Mientras redactamos el texto podemos insertar CSS dentro de las etiquetas HTML del <body>.
En este ejemplo SI puedes recurrir al editor de código de tu gestor de contenidos.
<p style="letter-spacing: 5px;">Este párrafo tiene las letras separadas</p>
Este párrafo tiene las letras separadas
Usar CSS en el HEAD y en el BODY de forma simultá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?
Desde el documento enlazado aplica estilo al párrafo para que tenga un tamaño de fuente, color y espacio entre letras (interletrado) determinados.
p{
font-size: 15px;
color: red;
letter-spacing: 3px;
}
Ahora desde el HEAD, dentro de la etiqueta <style>, dale grosor a las letras:
p{
font-weight: bold;
}
Mediante el método en línea, desde el HTML, añade nuevas reglas al párrafo que sobrescriban a todas las anteriores:
<p style="font-size:20px; color:green; letter-spacing:0px; font-weight:normal;">¿Qué pasa con este párrafo?</p>
En la imagen tienes una vista de los archivos.
Evidentemente el estilo CSS que priorizará será el que escribamos en linea, puesto que será el último que lea el navegador.
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 será la que prevalezca.
Aprende a utilizar CSS más profundamente
En esta lección hemos visto dónde y cómo utilizar CSS.
En el siguiente tutorial describiremos cómo seleccionar grupos de elementos para no escribir tanto código y descubriremos los id y las clases CSS.
Mientras tanto vuelve a los ejercicios anteriores y practica sobre ellos.
Ya sabes que solo se aprende a utilizar CSS usando CSS 😉
Parte 3. Selectores CSSGuía básica CSS. Parte 1
Si te ha gustado comparte
About the Author
