Coco Chanel una vez dijo: "La moda cambia, pero el estilo perdura".
Mientras que Coco hablaba principalmente de la ropa que colgamos en nuestros armarios, yo también diría que el estilo es más que solo moda.
Por ejemplo, ¿alguna vez has visitado un sitio web y pensado, "vaya, este es un sitio web bien diseñado"? Lo más probable es que ese sitio web con estilo se haya creado gracias a CSS.
¿Qué es CSS?
CSS significa Hojas de Estilo en Cascada y describe cómo deben mostrarse los elementos HTML en pantalla, ya que controla el diseño de varias páginas web a la vez.
Puedes sentir que CSS y la codificación pueden ser intimidantes, especialmente cuando te enfrentas a la construcción de sitios web en general. Créeme, yo también lo pensé en un momento. Sigue leyendo y apuesto a que estarás listo para agregar un estilo serio a tu sitio web antes de que te des cuenta.
¿Interesado en aprender algo específico sobre CSS? Salta a:
¿Qué es CSS?
Para entender qué es CSS, es mejor explicar cómo se usan juntos CSS y HTML. HTML fue creado para describir el contenido de las páginas web, como los encabezados y párrafos, y permitir la inserción de imágenes y videos. Por otro lado, CSS especifica el estilo del documento, que incluye diseños de página, colores y fuentes.
Si piensas en tu sitio web como una casa que estás construyendo, HTML es el panel de yeso y CSS es la pintura brillante y vívida que usas en nuestras paredes para agregar algo de estilo.
¿Cómo funciona CSS?
CSS interactúa con los elementos HTML en las páginas web para hacer que se vean de cierta manera. Por ejemplo, si quieres hacer que un párrafo sea negrita y de color púrpura, lo escribirías así:
p {color:purple; font-weight:bold;}
La p en este caso se alineará con el código HTML <p> y lo cambiará para que aparezca en negrita y púrpura.
Al igual que HTML, CSS se escribe en texto simple en un editor de texto o un documento de Word en una computadora. Puedes agregar este código a tus páginas HTML usando CSS externo, interno o en línea.
Externo
El CSS externo se guarda como archivos .css y se puede usar para determinar la apariencia de todo el sitio web con solo un archivo. Para usarlo, tus archivos .html deben incluir una sección de encabezado que enlace a la hoja de estilo externa. Se vería así:
<head>
<link rel=”stylesheet” type=”text/css” href=thestyleofmysite.css”>
</head>
En este caso, thestyleofmysite.css es la hoja de estilo externa. Externo es el método eficiente para implementar CSS en un sitio web, además es fácil de seguir e implementar estilo.
Interno
Interno son instrucciones CSS escritas directamente en el encabezado de la página .html. Quieres ir por esta ruta si una página de tu sitio web va a tener su propio aspecto único separado del resto de tu sitio.
<head>
<style>
body {background-color:orange;}
p {font-size:24px; color:white;}
</style>
</head>
Esta página tendrá un fondo naranja con párrafos de tamaño 24 puntos y fuente blanca.
En línea
Cuando usas en línea, fragmentos de CSS se escriben directamente en el código HTML y se aplican solo a una línea de código.
<h2 style=”font-size:22px;color:green;”>Este es un titular.</h2>
Esta línea de código hace que un titular específico en una página .html sea verde y de 22 puntos de tamaño de fuente.
| Relacionado: ¡Consulta estos consejos de codificación para principiantes! |
¿Quieres aprender más sobre Software de creación de sitios web? Explora los productos de Constructor de sitios web.
Sintaxis de CSS
El código real de CSS se llama Sintaxis de CSS, y consiste en un conjunto de reglas compuesto por un selector y un bloque de declaración.
Un selector apunta al elemento HTML que deseas estilizar. En el ejemplo anterior es el h1.
El bloque de declaración contiene una o más declaraciones que están separadas por punto y coma. Dentro del bloque hay una propiedad y un valor separados por dos puntos. Estos bloques están rodeados por llaves.
Una propiedad es lo que detalla cambios como el tamaño de la fuente o el color. El valor es la configuración para la propiedad, por lo que el tamaño de fuente y color específicos.
La sintaxis de CSS anterior establecerá tu título H1 para que sea de color rojo y tamaño de fuente 14.
También hay sintaxis llamadas selectores de agrupación. Usarías un selector de grupo cuando tienes múltiples elementos que deseas que tengan el mismo estilo. Entonces, si quieres que todos tus encabezados después de tu H1 estén centrados, sean azules y tengan un tamaño de fuente de 12 puntos, usarías un selector de grupo que se vea así:
h2, h3, h4 {text-align:center; color:blue; font-size:12px;}
Propiedades comunes de CSS
Hay una larga lista de propiedades CSS que puedes usar para agregar algo de estilo a las páginas web. A continuación se presentan las propiedades comunes de CSS que encontrarás usando repetidamente.
Agrega algo de estilo con CSS
Asegúrate de que tu sitio web sea cualquier cosa menos básico cuando agregues CSS a su formato. Desde cambiar el color de la fuente hasta agregar un borde, puedes hacer que tu página web se destaque de la multitud cuando utilices CSS. No tengas miedo de arremangarte y sumergirte para ver de qué hablaba Coco Chanel.
Ahora que has respondido algunas preguntas sobre CSS, responde otras preguntas que tengas en mente sobre la construcción de sitios web, como qué es JavaScript y por qué deberías aprender a programar.
Mara Calvello
Mara Calvello is a Content and Communications Manager at G2. She received her Bachelor of Arts degree from Elmhurst College (now Elmhurst University). Mara writes content highlighting G2 newsroom events and customer marketing case studies, while also focusing on social media and communications for G2. She previously wrote content to support our G2 Tea newsletter, as well as categories on artificial intelligence, natural language understanding (NLU), AI code generation, synthetic data, and more. In her spare time, she's out exploring with her rescue dog Zeke or enjoying a good book.
