Supongo que te habrás encontrado en más de una ocasión con el problema de que ciertos elementos de tu página web aparecen en un color que no deseas, en un tamaño o tipo de letra diferente al que esperabas o incluso alineados hacia donde no deberían.
La razón de estos cambios se debe a la hoja de estilos en cascada, o más comúnmente conocido, CSS. Al igual que meses atrás hice una pequeña introducción sobre los conceptos básicos de HTML, en esta ocasión quiero ayudarte a comprender qué es eso de CSS.
Así que voy a hacer un repaso por lo más primordial para que entiendas qué es una hoja de estilos, cómo está estructurada y cómo puedes aplicar cambios que te interesen en la misma.
¿Qué es CSS?
- CSS significa Cascading Style Sheets (Hoja de Estilos en Cascada).
- El lenguaje CSS describe cómo se mostrarán los elementos HTML en la pantalla.
- El lenguaje CSS ahorra mucho trabajo, ya que permite controlar el diseño de varias páginas web a la vez.
- Todas las hojas de estilo externas se almacenan en archivos CSS.
¿Por qué usar CSS?
El lenguaje CSS se utiliza para definir los estilos de tus páginas web, incluyendo el diseño, la disposición y las variaciones en la imagen para los diferentes dispositivos y tamaños de pantalla .
El lenguaje CSS facilita mucho las cosas
La intención del lenguaje HTML no es contener etiquetas para dar formato a una página web, sino describir el contenido, como por ejemplo aquí:
<h1> Esto es un encabezado </h1> <p> Esto es un parrafo . </p>
Pero si queremos que ese encabezado o párrafo tenga un color o un tipo de fuente concreto, deberíamos añadir estilos a cada una de las páginas que los contenga. Para ahorrar este costoso trabajo, el World Wide Web Consortium (W3C) decidió crear el lenguaje CSS.
Ahorro de trabajo
Las definiciones de estilo normalmente se guardan en archivos .css externos. De esta manera, con una hoja de estilos externa puedes cambiar el aspecto de un sitio web por completo simplemente cambiando un archivo.
Fácil, ¿eh? 😉
Tres formas de insertar CSS
Hay tres maneras de insertar una hoja de estilo:
- Hoja de estilos externa
- Hoja de estilos interna
- Estilo en línea
Hoja de estilos externa
Con una hoja de estilos externa, puedes cambiar el aspecto de un sitio web completo cambiando un sólo archivo.
Para ello cada página debe incluir una referencia al archivo de hoja de estilos externa dentro del elemento <link> que se encuentra dentro de la sección <head>:
<head> <link rel="stylesheet" type="text/css" href="miestilo.css"> </head>
Una hoja de estilo externa se puede escribir desde cualquier editor de texto, debe ser guardado con la extensión .css y no puede contener ninguna etiqueta HTML .
Hoja de estilos interna
Una hoja de estilo interna se puede usar en una sólo página con un estilo único. Los estilos internos se definen dentro del elemento <style> dentro de la propia página HTML:
<head>
<style>
body {
background-color: #FFFFFF;
}
h1 {
color: #000000;
text-align: center;
}
</style>
</head>
Estilos en línea
Un estilo en línea se puede utilizar aplicándolo al estilo de un solo elemento. Para ello tienes que añadir el atributo de estilo al elemento en cuestión, pudiendo contener cualquier propiedad CSS, como por ejemplo la siguiente:
<h1 style="color:red;margin-left:30px;">Esto es un estilo en linea</h1>
Orden en cascada
Supongo que si estás utilizando los tres tipos de CSS te preguntarás cuál prevalece, ¿no? Pues como bien indica su nombre siguen un orden en cascada con esta prioridad:
- Estilo en línea (dentro de un elemento HTML )
- Hojas de estilo externas e internas (en la sección de cabecera )
- Las que viene por defecto en el navegador
Por lo tanto, un estilo en línea (dentro de un elemento HTML específico) tiene la prioridad más alta, lo que significa que va a anular los estilos definidos dentro de la etiqueta <head>, aquellos recogidos en una hoja de estilos externa (archivo.css) o incluso los que trae por defecto el navegador .
Sintaxis CSS
Un conjunto de reglas CSS consta de un selector y de un bloque de declaración:
El selector hace referencia al elemento HTML al que le queremos aplicar el estilo, mientras que el bloque de declaración contiene una o más declaraciones separadas por punto y coma.
Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos.
Una declaración CSS siempre termina con un punto y coma, y los bloques de declaraciones están rodeados por llaves .
En el siguiente ejemplo todos los elementos de párrafo tendrán el texto azul y centrado:
p {
color: blue;
text-align: center;
}
Los selectores CSS
Los selectores CSS se utilizan para «encontrar» (o seleccionar) elementos HTML en función del nombre del elemento, del id , de la clase, del atributo, etc.
El selector de elementos
El selector de elementos elige elementos en función del nombre de los mismos. Por ejemplo, podríamos seleccionar todos los elementos <h2> en una página, alinearlos a la izquierda y ponerlos en color rojo de la siguiente manera:
h2 {
text-align: left;
color: red;
}
El selector de ID
El selector de ID utiliza el atributo id de un elemento HTML para seleccionar un elemento específico, esto quiere decir que será único dentro de una página.
Para ello debes utilizar el símbolo de la almohadilla (#) delante del atributo id. Si por ejemplo tenemos un id=parrafo1 que queremos centrar y poner en color azul, la regla de estilo sería la siguiente:
#parrafo1 {
text-align: center;
color: blue;
}
El selector de clase
El selector de clase elige los elementos con un atributo de clase específico. Para ello tienes que escribir un punto (.) delante del nombre de la clase .
Por ejemplo, podemos decidir que aquellos atributos con clase «newsletter» estén centrados y sean rojos:
.newsletter {
text-align: center;
color: red;
}
Otro caso posible sería que quisieras añadir la clase «newsletter» sólo a los elementos de párrafo, entonces quedaría de la siguiente forma:
p.newsletter {
text-align: center;
color: red;
}
¿Y si quieres que tus elementos HTML hagan referencia a más de una clase? Pues también es posible 😉
<p class="newsletter centrado">Este parrafo tiene en cuenta la clase newsletter y centrado</p>
La agrupación de selectores
Si tienes varios elementos a los que quieres aplicarles los mismos estilos también se puede hacer. Para ello tienes que separar cada selector con una coma como en el siguiente ejemplo:
h1, h2, p {
text-align: center;
color: red;
}
Comentarios CSS
Los comentarios se utilizan para explicar el código, de manera que si en un futuro quieres editarlo sea más sencillo entenderlo. Para que éstos sean ignorados por los navegadores tiene que ir entre estos símbolos: al inicio /* y al final */.
h2 {
color: blue;
/* Esto es un comentario */
text-align: center;
}
Conclusión
Podría extenderme bastante más, pero como acercamiento creo que es más que suficiente. Una vez asimiles toda la información aquí plasmada, te animo a que eches un vistazo al style.css de tu WordPress (Apariencia → Editor) y así puedas ver de primera mano los diferentes tipos de selectores.
Y como siempre si te quedan dudas o quieres añadir algo más, nos vemos en los comentarios 😉
Fuente de imagen: 1
Mi tiempo offline lo paso de camino a algún monte, inmortalizando algún momento con mi cámara de fotos, de visita a algún lugar recóndito del mundo o simplemente pasando un buen rato con mis amigos
- Tutorial DFP SM: Líneas de pedido – Configuración - 10 agosto, 2016
- Tutorial DFP SM: Líneas de pedido - 27 julio, 2016
- Tutorial DFP SM: Pedido y líneas de pedido - 13 julio, 2016
Estoy dando mis primeros pasos en diseño web y cuando te dan la información justa y precisa es cuando realmente te ayudan; no hay ningún problema en verse como un perfecto «dummy» para realmente comenzar a entender y aprender!!.
Gracias por esta pequeña ayuda.
Esa era la intención, así que me alegro de que haya dado sus frutos. Y a seguir aprendiendo poco a poco 😉