Damián De Luca - Capacitación & Desarrollo Web

Primeros pasos para comenzar con CSS

Damián De Luca
CSS
Web Design CSS

A la hora de comenzar a armar una página web, debemos comenzar aprendiendo HTML y CSS. El maquetado se basa en estos dos lenguajes y permite

Desde lo conceptual debemos saber que CSS significa Cascading Style Sheets o Hojas de Estilo en Cascada. Es un lenguaje que describe cómo se presentan los elementos HTML en un medio, generalmente una pantalla (pero también podría ser en medios de impresión).

Primeros pasos

Mientras que HTML estructura el contenido (como títulos, párrafos, imágenes), CSS se encarga del aspecto visual: colores, tamaños, márgenes, posiciones y más.

Veamos un ejemplo simple de una página HTML, en la cual se incorporan los estilos en el encabezado.

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>Este texto se verá en azul y con tamaño de 18px.</p>
</body>
</html>

En este ejemplo se define un único párrafo con un texto, en el cuerpo del documento. En la cabecera están definidos los estilos en los cuales se especifica que todos los párrafos del documentos tendrán un color de texto azul y un tamaño de fuente de 18 píxeles.

¿Qué es la sintaxis en CSS?

En el apartado anterior mostraba en un ejemplo en el cual podíamos apreciar la sintaxis de HTML con CSS incorporado dentro de la etiqueta <style>. Pero … ¿qué es la sintaxis?

Cuando hablamos de sintaxis, nos referimos a la forma en que escribimos las instrucciones para que el navegador las entienda. En CSS, cada regla tiene esta estructura básica:

selector {
  propiedad: valor;
}

Ejemplo práctico en el que aplicamos un color a los títulos principales:

h1 {
  color: red;
}

Esto indica que todos los <h1> deben mostrarse en color rojo.

¿Cómo se integra CSS con HTML?

A la hora de integrar nuestros estilos con los documentos de nuestro sitio, podemos pensar que existen tres formas básicas de aplicar CSS a un documento HTML:

CSS en línea o inline(no recomendado, pero útil para cambios rápidos o, en algunos casos, para Newsletters):

    <p style="color: green;">Texto verde</p>

    CSS interno (usando la etiqueta <style> dentro del <head>):

      <head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>

      CSS externo (en líneas generales, la mejor práctica):

        <!-- En tu archivo HTML -->
<link rel="stylesheet" href="estilos.css">

        /* En el archivo estilos.css */
body {
  background-color: #f5f5f5;
}

        Es importante tener claro que la manera de escribir las reglas de CSS es igual si trabajamos con CSS en un archivo externo o dentro de la etiqueta <style> de un documento HTML. La diferencia principal es el alcance. Mientras que en el archivo externo podemos usar la hoja estilos para varias páginas de nuestro sitio, optar por incluir los estilos dentro de un documento lo limita a ese archivo.

        La opción de estilos inline sigue cumpliendo la lógica propiedad: valor , pero en ese caso no se especifica el selector, ya que se aplica al elemento en el que declaremos las reglas.

        Alcance y capacidades de CSS

        CSS es muy versátil y no se limita solo a estilos. Desde sus primeras versiones hasta la actualidad ha madurado y evolucionado en gran medida. A continuación detallo algunas de las capacidades que ofrece:

        Este breve listado solo detalla algunas características de CSS. Es importante saber que sus propiedades son muchas para abarcarlas en un solo artículo. Además, se complementan con el dominio de técnicas de diseño web y maquetado, para lograr resultados profesionales.

        Limitaciones de CSS

        Aunque CSS es muy versátil, tiene algunas limitaciones:

        Buenas prácticas y organización del código

        Para aprender CSS de forma clara y escalable existen diversas guías. Aquí comparto algunas recomendaciones básicas:

        Comenzar con CSS: conclusión

        CSS es un lenguaje fundamental para dar estilo y apariencia visual a nuestros proyectos web. Gracias a él podemos cambiar colores, tamaños, posiciones y muchas otras cosas que hacen que un sitio tenga impacto y, a su vez, mantenga un ordenado y unidad visual. Aunque al principio parezca complicado, con algo de práctica se vuelve más claro y hasta divertido.

        Aprender CSS es como aprender a decorar un espacio: primero comprendemos las reglas básicas, como qué elementos puedes cambiar y cómo hacerlo, y luego podemos experimentar y a encontrar el estilo adecuado. Lo importante es no bajar los brazos si algo no sale bien al comienzo, porque equivocarse es parte del proceso de aprendizaje.

        Una buena forma de mejorar es probar pequeños ejemplos, ver cómo cambian las cosas en pantalla y usar herramientas del navegador para observar cómo está hecho un sitio. También ayuda mucho escribir código con orden y usar comentarios, para entenderlo mejor y no perdernos. Todo esto es clave, especialmente, cuando damos los primeros pasos en el aprendizaje de este lenguaje.

        Con el tiempo, CSS se convierte en una herramienta natural y fundamental en nuestro flujo de trabajo con páginas web. Todo requiere tiempo y práctica.

        Si te interesa saber más sobre CSS déjame un comentario o escríbeme un mensaje.

        Salir de la versión móvil