CSS desde cero

Introducción al diseño web: Estilización de páginas

CSS (Cascading Style Sheets) es un lenguaje fundamental en el desarrollo web, que permite estilizar y dar formato a las páginas HTML. Con CSS, puedes controlar la apariencia de los elementos y crear diseños atractivos y coherentes en tu sitio web. En este tutorial, te proporcionaremos una introducción sólida a los fundamentos de CSS y te mostraremos cómo empezar a estilizar tus propias páginas web.

Antes de proceder, es necesario que poseas conocimientos en HTML5. Te recomendamos visualizar un tutorial que abarque desde conceptos básicos hasta avanzados en el siguiente enlace:

HTML5: Construyendo la Base de la Web Moderna

¿Qué es CSS?

CSS es un lenguaje de hojas de estilo que describe cómo se debe presentar un documento HTML. Con CSS, puedes controlar aspectos como el color, la fuente, el tamaño y la posición de los elementos en una página web. Utilizando selectores y propiedades, puedes aplicar estilos a elementos específicos o a grupos de elementos, lo que brinda un alto nivel de flexibilidad y control sobre el diseño.

Sintaxis básica de CSS

Antes de comenzar a aplicar estilos, es importante entender la sintaxis básica de CSS. Un bloque de estilo CSS consta de un selector y un conjunto de propiedades y valores. Por ejemplo:

selector {
  propiedad: valor;
  propiedad: valor;
}

El selector indica a qué elementos se aplicarán los estilos, mientras que las propiedades definen qué aspecto se modificará y los valores especifican cómo se modificará ese aspecto. Veamos un ejemplo práctico:

h1 {
  color: blue;
  font-size: 24px;
}

En este caso, el selector h1 selecciona todos los elementos de encabezado <h1> en la página y les aplica un color azul y un tamaño de fuente de 24 píxeles.

Incorporando CSS en HTML

Para utilizar CSS en una página web, se puede incluir directamente en el documento HTML mediante etiquetas <style>. Sin embargo, es una práctica más común y recomendada separar el CSS en un archivo externo y vincularlo al documento HTML utilizando la etiqueta <link>. Por ejemplo:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="estilos.css">
</head>
<body>
  <!-- Contenido HTML de la página -->
</body>
</html>

En este caso, el archivo estilos.css contiene las reglas de estilo CSS que se aplicarán a la página.

Ejemplo práctico

Supongamos que tenemos un documento HTML con un encabezado <h1> y un párrafo <p>:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="estilos.css">
</head>
<body>
  <h1>Título de la página</h1>
  <p>Este es un párrafo de ejemplo.</p>
</body>
</html>

Ahora, crearemos un archivo estilos.css y aplicaremos algunos estilos básicos:

h1 {
  color: blue;
  font-size: 24px;
}

p {
  color: red;
  font-style: italic;
}

En este ejemplo, hemos aplicado un color azul y un tamaño de fuente de 24 píxeles al encabezado <h1>, y un color rojo y estilo cursiva al párrafo <p>. Al cargar la página en el navegador, verás los estilos aplicados a los elementos correspondientes.

Conclusiones

En este tutorial, hemos abordado los fundamentos de CSS y cómo se puede utilizar para estilizar páginas web. Hemos explorado la sintaxis básica de CSS, cómo incorporar CSS en documentos HTML y hemos creado un ejemplo práctico para ilustrar su aplicación.

Recuerda que CSS es un lenguaje muy versátil y poderoso, y este artículo solo ha cubierto los conceptos básicos. A medida que progreses, podrás explorar selectores más avanzados, propiedades adicionales y técnicas más complejas para crear diseños web sorprendentes.

¡Continúa aprendiendo y experimentando con CSS para llevar tus habilidades de estilización de páginas web al siguiente nivel!