CSS. Significa hojas de estilo en cascada (Cascading Style Sheets). Y es lo que usarás para darle vida a tu sitio web y hacer que se vea bien (en lugar de solo el texto estándar en blanco y negro en una pantalla). Pero, ¿cómo funciona exactamente CSS? ¿Y cómo puedes usarlo en el diseño web? Eso es lo que vamos a abordar en este blog.
Si aún no lo has hecho, te recomendamos que leas nuestro artículo sobre HTML. Será útil tener algunos conocimientos básicos sobre eso antes de sumergirnos. Pero si ya conoces los conceptos básicos, sigamos adelante.
Piensa en los valores predeterminados
Cuando creas un documento de Word, sabes que puedes cambiar el estilo de un fragmento de texto. Podrías convertirlo en un título. O conviértelo en texto normal.
Los enlaces tienen automáticamente ese color azul habitual y están subrayados. Y puedes cambiar el formato a tu gusto, de modo que todo tu texto normal sea una fuente diferente, por ejemplo.
Lo mismo ocurre con los sitios web. Cada navegador tendrá una configuración predeterminada y, por lo general, es muy insípida. (Y, si lo decimos nosotros mismos, aburrida). Pero se asegura de que el contenido de la página sea legible.
CSS te permite darle vida a tus páginas
CSS es un lenguaje que se utiliza para cambiar la forma en que se presenta una página a su audiencia. Por lo tanto, puedes usar el código CSS para aplicar la marca de tus clientes a tu sitio web, como ejemplo. Y puedes diseñar prácticamente cualquier elemento de la página, incluidos:
- Títulos y encabezados
- Párrafo y cuerpo del texto
- Colores y fuentes
- Enlaces
- Tablas
- Fondo y opacidad
- Animación y efectos (aunque nada demasiado técnico)
- Y mucho más
Puedes implementar CSS de tres formas
Puedes incluir CSS en tu documento (es decir, página web), de tres formas diferentes:
- En línea: donde usarás el estilo del atributo dentro de los elementos HTML
- Interno: donde usarás un elemento de estilo en la sección del encabezado de tu documento
- Externo: donde usarás el elemento de enlace para vincular a un archivo CSS externo
¿Por qué utilizar el estilo en línea?
Lo usarás cuando necesites actualizar una sección específica de tu página. Algo que rompe las reglas habituales y que solo vas a hacer una vez. Es genial para cambiar rápidamente el aspecto de algo. Pero nunca debes usarlo si quieres que varios elementos sigan esta regla. (Es solo una pérdida de código).
De lo contrario, te estarás tirando de los pelos cuando desees hacer una actualización masiva en el futuro. Recuerda, un principio importante de la programación es condensar tu código y evitar repetirlo. Es lo mismo aquí.
¿Por qué utilizar un estilo interno?
Es para una página específica. Una página que no sigue las reglas del resto de tu sitio web, pero la página en sí debe ser coherente. Tal vez estés creando una página de destino y quieres que los párrafos en ella estén separados un poco más. Tal vez quieras usar un color diferente para enfatizar, en lugar del habitual.
Entonces, si alguna vez necesitas realizar un cambio masivo en la página, puedes hacerlo desde la parte superior de tu código.
¿Por qué utilizar un estilo externo?
Es un archivo completo dedicado a tu código de estilo y mantiene cada página consistente. Por lo general, lo usarás cuando estés diseñando un sitio web completo. Y significa que si alguna vez necesitas actualizar, por ejemplo, el estilo del título 1, solo necesitarás cambiarlo en el documento CSS.
Cada página se actualizará automáticamente. Entonces, tu estilo externo es tu documento maestro.
CSS sigue reglas
Deberás crear un conjunto de reglas que definan cómo deseas que se vea la página. Entonces, si deseas que el título 1 sea azul, en negrita y de tamaño de fuente 30, entonces debes escribir esto:
h1 {
color: blue;
font-size: 30;
font-weight: bold;
}
Es un estilo simple, y solo lo encontrarás en tu hoja de estilo externa (en línea e interna se verá diferente). Pero analicemos esto más a fondo.
Cómo funciona ese código
Notarás que el código comienza con h1. Este es el elemento HTML que vamos a diseñar. Así que estamos diseñando el encabezado 1 (que se verá como <h1> en tu html).
Luego tenemos las llaves. En el interior, encontrarás diferentes conjuntos de propiedades y luego los valores que los acompañan. (En realidad, no es necesario que estén en líneas separadas, pero es más fácil de leer. Lo importante es el punto y coma. Eso es lo que le dice al navegador que se ha movido a una propiedad diferente).
Puedes agregar tantas propiedades como quieras. Tenemos la propiedad antes de los dos puntos (color o tamaño de fuente). Y tenemos el valor después (azul o 30). Luego, el navegador los revisa y los aplica en orden.
Tu hoja de estilo externa tendrá muchas reglas
La forma en que deseas ordenar tus hojas de estilo depende de ti, pero normalmente tendrás varias reglas en una hoja de estilo. Entonces se verá algo así:
h1 {
color: blue;
font-size: 30;
font-weight: bold;
}
h2 {
color: red;
font-size: 20;
}
Pero obviamente más extenso. Puedes tener cientos de reglas en tu página, todas escritas una tras otra. Por lo tanto, asegúrate de agrupar elementos similares para ayudarte a clasificarlos más fácilmente.
Cómo escribir CSS interno
Crearás y agregarás tu CSS interno y lo definirás en la sección <head> de tu página HTML o documento. Estará dentro de un elemento <style>. Entonces, para darte un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color: blue;}
h2 {color: red;}
</style>
</head>
<body>
<h1>This is your heading 1</h1>
<h2>This is your heading 2</h2>
</body>
</html>
Así que aquí hemos establecido el estilo del título 1 en azul y el título 2 en rojo. Solo afectará a este documento o página y no se actualizará en ningún otro lugar de tu sitio (a menos que lo copies).
Cómo escribir CSS en línea
CSS en línea es donde le darías un estilo único a un elemento específico. Utilizará el atributo de estilo de un elemento HTML. Entonces, para mostrarte cómo se ve:
<h1 style=”color:blue;”>I’m a blue h1 heading</h1>
<h2 style=”color:red;”>I’m a red h2 heading</h2>
De manera similar a los ejemplos que hemos estado usando antes, ahora hemos actualizado cada encabezado específico con un nuevo color. Pero a menos que hayamos usado este estilo en línea en otra parte del documento, no habrá actualizado ninguno de los otros encabezados.
Únete a nuestro bootcamp
Esperamos que este blog haya respondido a todas tus preguntas urgentes sobre CSS. Puedes aprender mucho más en nuestros bootcamps de programación. Nuestros instructores y ayudantes te enseñarán todas las habilidades necesarias para comenzar a programar. Todo desde cero. Echa un vistazo y regístrate hoy.
Autor original: Jonathan Sandals