Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
CSS (Hojas de Estilo en Cascada) | Anatomía del Sitio Web
Fundamentos del Desarrollo Web con IA
course content

Contenido del Curso

Fundamentos del Desarrollo Web con IA

Fundamentos del Desarrollo Web con IA

1. Descripción del Curso y la IA en la Codificación
2. Anatomía del Sitio Web
3. Introducción a ChatGPT
4. Construyendo el Sitio Web del Blog

bookCSS (Hojas de Estilo en Cascada)

CSS (Hojas de Estilo en Cascada) es un lenguaje utilizado para agregar estilo y mejorar el atractivo visual de los elementos HTML en una página web. Juega un papel crucial en mejorar la estética de un sitio web, al igual que la decoración, el color de las paredes, los muebles, el material del sofá y la forma de las ventanas y puertas contribuyen al aspecto general de una casa.

Añadiendo CSS para Estilizar HTML

CSS nos permite controlar la presentación y el diseño de los elementos HTML, incluyendo colores, fuentes, espaciado y más. Aquí está cómo podemos aplicar estilos CSS a nuestros elementos HTML:

Estilos en Línea

Usando el atributo style, podemos aplicar estilos CSS directamente a elementos HTML individuales. Este método es útil para agregar estilos rápidos y puntuales.

html

index

css

index

js

index

copy

Estilos Internos

También podemos incluir estilos CSS dentro de las etiquetas <style> en la sección <head> del documento HTML. Este método es útil para aplicar estilos a múltiples elementos dentro del mismo documento.

html

index

css

index

js

index

copy

Hojas de Estilo Externas

Para proyectos más grandes o cuando queremos reutilizar estilos en varias páginas, es común usar hojas de estilo externas. Crea un archivo CSS separado (por ejemplo, index.css) y enlázalo al documento HTML usando la etiqueta <link>.

Por favor, revisa los archivos index.html y index.css en el ejemplo.

html

index

css

index

js

index

copy

Selectores CSS

Los selectores CSS apuntan a elementos HTML basados en criterios como el tipo de elemento, clase o ID. Un selector especifica el elemento exacto al que se deben aplicar estilos específicos.

Selector de Elemento

Apunta a todos los elementos de un tipo específico.

Selector de Clase

Apunta a elementos con un atributo de clase específico.

Selector de ID

Apunta a un elemento específico con un atributo ID único.

Propiedades CSS

Las propiedades CSS definen cómo deben ser estilizados los elementos seleccionados. Aquí hay algunas propiedades CSS comunes:

  • color establece el color del texto;
  • background-color establece el color de fondo de un elemento;
  • font-size establece el tamaño del texto;
  • margin añade 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:

html

index

css

index

js

index

copy

Tutorial en Video

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 3
some-alt