Introducción a CSS

CSS (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación y el diseño de una página web. Se utiliza junto con HTML para aplicar estilos como colores, fuentes, márgenes y disposición del contenido. Si deseas que tu sitio web luzca atractivo y profesional, aprender CSS es un paso esencial.

En este tutorial, aprenderás cómo utilizar la etiqueta <style> o cómo vincular un archivo externo con <link> para aplicar estilos a tus páginas web. CSS permite separar el contenido (HTML) del diseño, facilitando el mantenimiento y mejorando la experiencia del usuario.

¿Por qué usamos CSS?

CSS nos permite controlar la apariencia visual de una página web. Gracias a CSS, puedes cambiar colores, ajustar tamaños de texto, alinear elementos, crear diseños responsivos y mucho más. Separar el contenido del estilo también mejora la organización del código y hace más fácil reutilizar estilos en diferentes páginas.

En resumen, CSS es lo que le da estilo y presentación a tu sitio web, complementando la estructura proporcionada por HTML.

¿Qué es la hoja de estilo en cascada?

CSS se basa en un sistema de "cascada", lo que significa que los estilos se aplican en un orden específico dependiendo de su ubicación (en línea, interno o externo) y su especificidad. Esto permite gran flexibilidad y control sobre el diseño del sitio web.

Una hoja de estilo puede estar incluida directamente en el archivo HTML (estilo interno), en cada etiqueta HTML (estilo en línea) o en un archivo externo enlazado (lo más recomendable).

Formas de incluir CSS en un documento HTML

Existen tres formas principales de aplicar CSS a un documento HTML:

  1. En línea: usando el atributo style directamente en las etiquetas HTML.
  2. Interno: usando la etiqueta <style> dentro del <head>.
  3. Externo: enlazando un archivo .css con la etiqueta <link>.

Ejemplo básico de código CSS:

A continuación te mostramos un ejemplo simple de cómo aplicar estilos con CSS:


<html lang="es">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Página con Estilos</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            color: #333;
            text-align: center;
        }
        h1 {
            color: #0066cc;
        }
    </style>
    </head>

    <body>
        <h1>Bienvenido con estilo</h1>
        <p>Este es un ejemplo de cómo aplicar estilos con CSS.</p>
    </body>
    </html>

¿Qué son las propiedades en CSS?

Las propiedades en CSS determinan el estilo de los elementos HTML. Cada propiedad se acompaña de un valor y juntas forman una regla CSS. Por ejemplo:


p {
    color: blue;
    font-size: 16px;
}
            
img {
    width: 100px;
    border-radius: 10px;
}

¿Cómo usar el archivo externo .css?

Para aplicar estilos desde un archivo externo, primero creas un archivo con extensión .css (por ejemplo, estilos.css), y luego lo enlazas en tu documento HTML usando la etiqueta <link> dentro del <head>:


<link rel="stylesheet" href="estilos.css">

Esta es la forma más eficiente y ordenada de usar CSS, especialmente en sitios web con múltiples páginas.

Conclusión

CSS es una herramienta poderosa que te permite transformar una página web simple en una experiencia visual atractiva. Aprender a usar CSS correctamente te permitirá personalizar cada aspecto del diseño de tu sitio y lograr una apariencia profesional.

Ahora que comprendes los fundamentos de CSS, puedes seguir explorando propiedades más avanzadas como flexbox, grid, animaciones y mucho más.

Anterior Siguiente