Tutorial de CSS: De Cero a Estilizar tu Primera Página Web

1. ¿Qué es CSS?

CSS son las siglas de Cascading Style Sheets (Hojas de Estilo en Cascada). Es un lenguaje que usamos para describir la presentación de un documento escrito en HTML. Mientras que HTML se encarga de la estructura y el contenido (títulos, párrafos, imágenes), CSS se encarga de cómo se ve ese contenido (colores, fuentes, tamaños, posición).

2. ¿Cómo se integra CSS con HTML?

Hay tres formas principales de incluir CSS en tu proyecto:

  1. CSS en línea (Inline): Se aplica directamente a una etiqueta HTML usando el atributo style. Es el método menos recomendado porque mezcla contenido con presentación y es difícil de mantener.

    html
    <p style="color: blue; font-size: 18px;">Este es un párrafo azul.</p>

  2. CSS interno (Internal): Se escribe dentro de la etiqueta <style> en la sección <head> del documento HTML. Es útil para páginas individuales o para hacer pruebas rápidas.

    html
    <head>
  <style>
    p {
      color: red;
      font-family: Arial;
    }
  </style>
</head>

  3. CSS externo (External - El Mejor Método): Se escribe en un archivo separado con extensión .css y se enlaza desde el HTML. Esto mantiene tu código organizado y permite reutilizar los mismos estilos en múltiples páginas.

    • Archivo styles.css:

      css
      body {
  background-color: #f0f0f0;
}
h1 {
  color: navy;
}

    • Archivo index.html:

      html
      <head>
  <link rel="stylesheet" href="styles.css">
</head>

    • ¡Este será el método que usaremos en el tutorial!

3. La Sintaxis de CSS

La base de CSS son las reglas. Una regla se compone de:

  1. Selector: Indica a qué elemento(s) HTML se aplicará el estilo.

  2. Declaración: Se encierra entre llaves { } y contiene una o más propiedades con sus valores.

  3. Propiedad: El aspecto que quieres cambiar (ej: color, font-size).

  4. Valor: El nuevo estilo que quieres aplicar (ej: red, 16px).

Estructura:

css
selector {
  propiedad: valor;
  otra-propiedad: otro-valor;
}

Ejemplo práctico:

css
h1 {               /* Selector: Todos los elementos <h1> */
  color: blue;     /* Propiedad: color, Valor: blue */
  text-align: center; /* Propiedad: alineación, Valor: centrado */
}

4. Los Selectores (¡La Clave para Apuntar a los Elementos Correctos!)

Los selectores son fundamentales. Aquí los más importantes:

  • Selector de Etiqueta (Tipo): Selecciona todas las etiquetas de un tipo.

    css
    p {
  /* Estilos para todos los párrafos */
}

  • Selector de Clase (Class): Selecciona elementos con un atributo class específico. Es el más utilizado y reutilizable. En CSS se antepone un punto (.).

    css
    .destacado {
  background-color: yellow;
  font-weight: bold;
}
    html
    <p class="destacado">Este párrafo se ve destacado.</p>
<p>Este es un párrafo normal.</p>

  • Selector de ID: Selecciona un único elemento con un atributo id específico. En CSS se antepone una almohadilla (#). Debe ser único en la página.

    css
    #titulo-principal {
  font-size: 40px;
  border-bottom: 2px solid black;
}
    html
    <h1 id="titulo-principal">Este es el título único</h1>

  • Selector Universal (*): Selecciona todos los elementos de la página. Se usa a menudo para reiniciar los estilos por defecto del navegador.

    css
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* ¡Muy útil para maquetación! */
}

5. Propiedades Fundamentales de CSS

Vamos a ver las propiedades que usarás el 90% del tiempo.

a) Texto y Fuentes

  • color: Color del texto (puede ser nombre red, código hexadecimal #FF0000, rgb rgb(255,0,0), etc.).

  • font-family: Tipo de letra (ej: Arial, Helvetica, sans-serif).

  • font-size: Tamaño de la fuente (ej: 16px, 1.2em).

  • font-weight: Grosor de la fuente (normal, bold, lighter, 100-900).

  • text-align: Alineación del texto (left, center, right, justify).

  • text-decoration: Decoración (none para quitar subrayado de links, underline).

b) El Modelo de Caja (Box Model)

Cada elemento HTML es una caja rectangular. El modelo de caja define cómo se calcula el espacio que ocupa.

  • width: Ancho del contenido.

  • height: Alto del contenido.

  • padding: Espacio interno entre el contenido y el borde.

  • border: El borde alrededor del padding (o del contenido si no hay padding).

  • margin: Espacio externo que separa el elemento de otros elementos.

    Visualmente (de adentro hacia afuera):
    Contenido <- Padding <- Borde <- Margen

    css
    .mi-caja {
  width: 300px;
  padding: 20px;      /* Espacio interno de 20px por todos lados */
  border: 5px solid black; /* Borde sólido negro de 5px */
  margin: 10px;        /* Espacio externo de 10px */
}

c) Colores y Fondos

  • background-color: Color de fondo de un elemento.

  • background-image: Imagen de fondo (url('imagen.jpg')).

  • background-size: Controla el tamaño de la imagen (cover, contain).

7. ¿Y ahora qué? (Próximos Pasos)

Este tutorial es solo la punta del iceberg. CSS es un mundo enorme y divertido. Aquí tienes los siguientes temas que te recomendamos explorar:

  • Flexbox: Un sistema de maquetación unidimensional (filas o columnas) para crear diseños complejos y alineaciones de forma sencilla. (Ideal para menús de navegación, galerías, etc.).

  • CSS Grid: Un sistema de maquetación bidimensional (filas y columnas a la vez) para crear layouts de página completos de manera muy intuitiva.

  • Posicionamiento (position): Aprende a controlar la posición exacta de los elementos (relative, absolute, fixed, sticky).

  • Media Queries: La base del Diseño Web Responsive. Permiten aplicar estilos diferentes según el tamaño de la pantalla (móvil, tablet, escritorio).

  • Animaciones y Transiciones: Dale vida a tus páginas con movimientos sutiles y efectos visuales.

¡Esperamos que este tutorial te haya sido de ayuda y te animes a seguir explorando el fantástico mundo del diseño web!



¿Qué es display: block; en CSS?

display: block; es una propiedad de CSS que define cómo se muestra un elemento en la página web. Cuando un elemento tiene display: block, se comporta como un "bloque" que ocupa todo el ancho disponible de su contenedor.

Características principales:

  1. Ocupa todo el ancho disponible - El elemento se expande para llenar el espacio horizontal de su contenedor

  2. Crea un salto de línea - Comienza en una nueva línea y el contenido siguiente también comienza en una nueva línea

  3. Permite modificar dimensiones - Se pueden establecer width, height, padding y margin libremente

  4. Apila elementos verticalmente - Los elementos block se colocan uno encima del otro

Elementos HTML que son block por defecto:

  • <div>

  • <p> (párrafos)

  • <h1> a <h6> (encabezados)

  • <section>

  • <article>

  • <header>

  • <footer>

  • <ul>, <ol>, <li>

Ejemplo práctico:

css
/* Convertir un elemento en bloque */
.mi-elemento {
    display: block;
    width: 300px;      /* Podemos establecer un ancho específico */
    height: 100px;      /* Podemos establecer una altura */
    margin: 20px;       /* Los márgenes funcionan en todas direcciones */
    padding: 15px;       /* El padding también funciona correctamente */
    background-color: lightblue;
}

Comparación con otros valores de display:

  • display: inline; - Solo ocupa el espacio necesario, no permite width/height

  • display: inline-block; - Como inline pero permite width/height

  • display: none; - Oculta completamente el elemento

Ejemplo visual:

html
<div style="display: block; background: red;">Bloque 1</div>
<div style="display: block; background: blue;">Bloque 2</div>
<!-- Los bloques aparecerán uno debajo del otro -->

¿Te gustaría que profundice en algún aspecto específico de los elementos block?


Cada elemento HTML tiene un valor de visualización predeterminado, dependiendo del tipo de elemento que sea.

Los dos valores de visualización más comunes son bloque y en línea.
Elementos a nivel de bloque

Un elemento a nivel de bloque siempre comienza en una nueva línea y los navegadores agregan automáticamente algún espacio (un margen) antes y después del elemento.

Un elemento a nivel de bloque siempre ocupa todo el ancho disponible (se extiende hacia la izquierda y la derecha tanto como puede).

Dos elementos de bloque comúnmente utilizados son: <p> y <div>.

El <p>elemento define un párrafo en un documento HTML.

El <div>elemento define una división o una sección en un documento HTML.

El elemento <p> es un elemento de nivel de bloque.

El elemento <div> es un elemento de nivel de bloque.

Ejemplo

<p>Hello World</p>
<div>Hello World</div>

Aquí están los elementos a nivel de bloque en HTML:

< dirección >
< artículo >
< aparte >
< cita en bloque >
< lienzo >
<dd>​​
<div>​​
< dl >
<dt>​​
< conjunto de campos >
< figcaption >
< figura >
< pie de página >
< formulario >
< h1 > - < h6 >
< encabezado >
< hora >
< li >
< principal >
< navegación >
< sin guión >
< ol >
< p >
< pre >
< sección >
< tabla >
< tfoot >
<ul>​​
< vídeo >

Elementos en línea

Un elemento en línea no comienza en una nueva línea.

Un elemento en línea solo ocupa el ancho necesario.

Este es un elemento <span> dentro de un párrafo.

Ejemplo

<span>Hello World</span>

Aquí están los elementos en línea en HTML:

< a >
< abr . >
< acrónimo >
< b >
< bdo >
< grande >
< br >
< botón >
< citar >
< código >
<dfn>​​
< em >
< yo >
< imagen >
< entrada >
< kbd >
< etiqueta >
< mapa >
< objeto >
< salida >
< q >
< muestra >
< script >
< seleccionar >
< pequeño >
< span >
< fuerte >
< sub >
< sup >
< área de texto >
< tiempo >
<tt>​​
<var>​​

Nota: ¡Un elemento en línea no puede contener un elemento a nivel de bloque!

ss

El elemento <div>

El <div>elemento se utiliza a menudo como contenedor para otros elementos HTML.

El <div>elemento no tiene atributos obligatorios, pero y styleson comunes.classid

Cuando se utiliza junto con CSS, el <div>elemento se puede utilizar para dar estilo a bloques de contenido:

Ejemplo

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

Aprenderás más sobre el <div>elemento en el próximo capítulo .

El elemento <span>

El <span>elemento es un contenedor en línea que se utiliza para marcar una parte de un texto o una parte de un documento.

El <span>elemento no tiene atributos obligatorios, pero y styleson comunes.classid

Cuando se utiliza junto con CSS, el <span>elemento se puede utilizar para dar estilo a partes del texto:

Ejemplo

<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold;">dark green</span> eyes.</p>

o


Resumen del capítulo

  • Un elemento a nivel de bloque siempre comienza en una nueva línea y ocupa todo el ancho disponible
  • Un elemento en línea no comienza en una nueva línea y solo ocupa el ancho necesario.
  • El <div>elemento es un elemento de nivel de bloque y a menudo se utiliza como contenedor para otros elementos HTML.
  • El <span>elemento es un contenedor en línea que se utiliza para marcar una parte de un texto o una parte de un documento.





jjjj

 centrar cajas. Son como "recetas" que puedes usar una y otra vez.

Método 1: El más fácil de todos (con Flexbox)

Este es el método que uso el 90% del tiempo. Es el más simple de recordar:

css
.padre {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente */
}

Ejemplo práctico:

HTML:

html
<div class="contenedor">
    <div class="caja">
        ¡Esta caja está centrada!
    </div>
</div>

CSS:

css
.contenedor {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;   /* Importante: darle una altura */
    border: 2px solid blue;
}

.caja {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    border: 2px solid navy;
}

¿Solo horizontalmente?

css
.contenedor {
    display: flex;
    justify-content: center; /* Centra solo horizontal */
    /* align-items: center;  (opcional, lo quitas si no quieres centrado vertical) */
}

Método 2: Con margin: auto (para centrar horizontalmente)

Este es el método más clásico y funciona siempre:

css
.caja {
    margin-left: auto;
    margin-right: auto;
    /* O más corto: */
    margin: 0 auto;
}

Ejemplo:

css
.contenedor {
    border: 2px solid red;
    padding: 10px;
}

.caja {
    width: 300px;           /* Necesita un ancho definido */
    margin: 0 auto;         /* ¡Centrado mágico! */
    background-color: yellow;
}

Método 3: Con text-align: center (para centrar elementos inline)

Este método funciona para centrar texto, imágenes o cajas que se comportan como texto:

css
.contenedor {
    text-align: center;
}

Ejemplo:

css
.contenedor {
    text-align: center;
    border: 2px solid green;
    padding: 20px;
}

.caja {
    display: inline-block;  /* Importante: la caja debe ser inline-block */
    width: 200px;
    background-color: lightgreen;
}

🚀 TRUCO: La "Regla de Oro" para centrar

Si te olvidas de todo, recuerda esto:

Qué quieres centrarMétodo más fácil
Textotext-align: center
Una caja dentro de otraFlexbox: display: flex; justify-content: center;
Una caja sola horizontalmentemargin: 0 auto;

Ejemplos rápidos para copiar y pegar

Ejemplo 1: Centrar una tarjeta en toda la pantalla

css
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;  /* 100% del alto de la pantalla */
    margin: 0;
}

.tarjeta {
    width: 300px;
    padding: 20px;
    background-color: white;
    box-shadow: 0 0 10px gray;
}

Ejemplo 2: Centrar botones en un menú

css
.menu {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.boton {
    padding: 10px 20px;
    background-color: blue;
    color: white;
}

Ejemplo 3: Centrar una imagen

css
.contenedor-imagen {
    text-align: center;
}

.contenedor-imagen img {
    max-width: 100%;
}

🆘 Mi recomendación para ti (principiante)

  1. Aprende Flexbox primero - Es el más versátil

  2. Usa margin: 0 auto - Cuando solo necesites centrar horizontalmente

  3. No te compliques - Cualquiera de estos métodos funciona perfectamente

¿Quieres que te muestre algún ejemplo más específico? Por ejemplo, ¿necesitas centrar algo en particular?


g


 centrar cajas. Son como "recetas" que puedes usar una y otra vez.

Método 1: El más fácil de todos (con Flexbox)

Este es el método que uso el 90% del tiempo. Es el más simple de recordar:

css
.padre {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente */
}

Ejemplo práctico:

HTML:

html
<div class="contenedor">
    <div class="caja">
        ¡Esta caja está centrada!
    </div>
</div>

CSS:

css
.contenedor {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;   /* Importante: darle una altura */
    border: 2px solid blue;
}

.caja {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    border: 2px solid navy;
}

¿Solo horizontalmente?

css
.contenedor {
    display: flex;
    justify-content: center; /* Centra solo horizontal */
    /* align-items: center;  (opcional, lo quitas si no quieres centrado vertical) */
}

Método 2: Con margin: auto (para centrar horizontalmente)

Este es el método más clásico y funciona siempre:

css
.caja {
    margin-left: auto;
    margin-right: auto;
    /* O más corto: */
    margin: 0 auto;
}

Ejemplo:

css
.contenedor {
    border: 2px solid red;
    padding: 10px;
}

.caja {
    width: 300px;           /* Necesita un ancho definido */
    margin: 0 auto;         /* ¡Centrado mágico! */
    background-color: yellow;
}

Método 3: Con text-align: center (para centrar elementos inline)

Este método funciona para centrar texto, imágenes o cajas que se comportan como texto:

css
.contenedor {
    text-align: center;
}

Ejemplo:

css
.contenedor {
    text-align: center;
    border: 2px solid green;
    padding: 20px;
}

.caja {
    display: inline-block;  /* Importante: la caja debe ser inline-block */
    width: 200px;
    background-color: lightgreen;
}

🚀 TRUCO: La "Regla de Oro" para centrar

Si te olvidas de todo, recuerda esto:

Qué quieres centrarMétodo más fácil
Textotext-align: center
Una caja dentro de otraFlexbox: display: flex; justify-content: center;
Una caja sola horizontalmentemargin: 0 auto;

Ejemplos rápidos para copiar y pegar

Ejemplo 1: Centrar una tarjeta en toda la pantalla

css
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;  /* 100% del alto de la pantalla */
    margin: 0;
}

.tarjeta {
    width: 300px;
    padding: 20px;
    background-color: white;
    box-shadow: 0 0 10px gray;
}

Ejemplo 2: Centrar botones en un menú

css
.menu {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.boton {
    padding: 10px 20px;
    background-color: blue;
    color: white;
}

Ejemplo 3: Centrar una imagen

css
.contenedor-imagen {
    text-align: center;
}

.contenedor-imagen img {
    max-width: 100%;
}

🆘 Mi recomendación para ti (principiante)

  1. Aprende Flexbox primero - Es el más versátil

  2. Usa margin: 0 auto - Cuando solo necesites centrar horizontalmente

  3. No te compliques - Cualquiera de estos métodos funciona perfectamente

¿Quieres que te muestre algún ejemplo más específico? Por ejemplo, ¿necesitas centrar algo en particular?


}


Comentarios

Publicar un comentario

Entradas más populares de este blog

layouts

   "Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos). f Tutorial: Creando una Plantilla de Registro HTML/CSS Objetivo del Proyecto Vamos a crear la estructura básica de una página web que contiene: Un menú de navegación con 4 opciones. Un formulario de registro de usuario. Estilos CSS para que todo se vea ordenado y profesional. Paso 1: Entendiendo la Estructura...
Leer más

Proyecto Práctico: Tarjeta de Perfil

"Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos).    Creando una Tarjeta de Perfil con HTML y CSS Descripción del Proyecto Vamos a crear una tarjeta de perfil profesional que contiene: Foto de perfil circular Nombre de la persona Descripción breve Ubicación Botón interactivo con efectos Al final, tendremos una tarjeta moderna y responsive que se centra en la pa...
Leer más