CSS (Hojas de Estilo en Cascada) es lo que otorga a tus páginas web su apariencia visual. Mientras que HTML proporciona la estructura, CSS controla los colores, las fuentes, el espaciado y el diseño, de manera similar a cómo la decoración y el diseño interior definen el aspecto de una casa.

Agregar CSS para estilizar HTML

CSS puede aplicarse de tres maneras principales.

Estilos en línea

Utilizar el atributo style para aplicar estilos rápidamente a un solo elemento.

index.html

Estilos internos

Agregar un bloque <style> dentro de <head> para aplicar estilos a los elementos de la misma página.

index.html

Hojas de estilo externas

Para proyectos más grandes, mantener el CSS en un archivo separado y enlazarlo con el HTML.

Consultar los archivos index.html y index.css en el ejemplo.

index.html

index.css

Selectores de CSS

Los selectores definen qué elementos deben recibir estilos específicos.

Selector de elemento

Selecciona todos los elementos de un tipo específico.

p {
  /* styles */
}

Selector de clase

Selecciona los elementos con un atributo de clase específico.

.highlight {
  /* styles */
}

Selector de ID

Selecciona un elemento específico con un atributo ID único.

#header {
  /* styles */
}

Propiedades de CSS

Las propiedades de CSS definen cómo deben ser estilizados los elementos seleccionados. Algunas propiedades comunes de CSS son:

color define el color del texto;
background-color define el color de fondo de un elemento;
font-size define el tamaño del texto;
margin agrega el espacio alrededor de un elemento.

Podemos personalizar la apariencia de la página web aplicando estilos CSS a los elementos HTML para crear experiencias visualmente atractivas y fáciles de usar.

Ejemplo:

index.html

index.css

Tutorial en video

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 2. Capítulo 3

Pregunte a AI

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Desliza para mostrar el menú

Agregar CSS para estilizar HTML

CSS puede aplicarse de tres maneras principales.

Estilos en línea

Utilizar el atributo style para aplicar estilos rápidamente a un solo elemento.

index.html

Estilos internos

Agregar un bloque <style> dentro de <head> para aplicar estilos a los elementos de la misma página.

index.html

Hojas de estilo externas

Para proyectos más grandes, mantener el CSS en un archivo separado y enlazarlo con el HTML.

Consultar los archivos index.html y index.css en el ejemplo.

index.html

index.css

Selectores de CSS

Los selectores definen qué elementos deben recibir estilos específicos.

Selector de elemento

Selecciona todos los elementos de un tipo específico.

p {
  /* styles */
}

Selector de clase

Selecciona los elementos con un atributo de clase específico.

.highlight {
  /* styles */
}

Selector de ID

Selecciona un elemento específico con un atributo ID único.

#header {
  /* styles */
}

Propiedades de CSS

Las propiedades de CSS definen cómo deben ser estilizados los elementos seleccionados. Algunas propiedades comunes de CSS son:

color define el color del texto;
background-color define el color de fondo de un elemento;
font-size define el tamaño del texto;
margin agrega el espacio alrededor de un elemento.

Podemos personalizar la apariencia de la página web aplicando estilos CSS a los elementos HTML para crear experiencias visualmente atractivas y fáciles de usar.

Ejemplo:

index.html

index.css

Tutorial en video

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 2. Capítulo 3

Introducción a CSS para el Diseño de Páginas Web

Agregar CSS para estilizar HTML

Estilos en línea

Estilos internos

Hojas de estilo externas

Selectores de CSS

Selector de elemento

Selector de clase

Selector de ID

Propiedades de CSS

Ejemplo:

Tutorial en video

Introducción a CSS para el Diseño de Páginas Web

Agregar CSS para estilizar HTML

Estilos en línea

Estilos internos

Hojas de estilo externas

Selectores de CSS

Selector de elemento

Selector de clase

Selector de ID

Propiedades de CSS

Ejemplo:

Tutorial en video