Contenido del Curso
Fundamentos del Desarrollo Web con IA
Fundamentos del Desarrollo Web con IA
CSS (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.
index
index
index
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.
index
index
index
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.
index
index
index
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:
index
index
index
Tutorial en Video
¡Gracias por tus comentarios!