Conferencia 1: Introducción a CSS

Bienvenido a la primera conferencia de "De lo básico a la brillantez": ¡tu viaje hacia el dominio de CSS comienza aquí!

¿Qué es CSS?

CSS, u hojas de estilo en cascada, es el lenguaje utilizado para describir la presentación de una página web. Mientras que HTML proporciona la estructura y el contenido, CSS es lo que hace que las páginas web parezcan atractivas y fáciles de usar. Controla el diseño, los colores, las fuentes, el espaciado y mucho más.

¿Por qué es importante CSS?

• Separación de preocupaciones: CSS le permite separar el contenido (HTML) de la presentación (CSS), lo que hace que su código sea más limpio y más fácil de mantener.
• Consistencia: Puedes aplicar estilos consistentes en varias páginas web vinculando un único archivo CSS.
• Diseño responsivo: CSS es esencial para crear sitios web que se vean bien en todos los dispositivos, desde computadoras de escritorio hasta teléfonos inteligentes.

Sintaxis CSS básica

CSS se compone de reglas que apuntan a elementos HTML. Cada regla consta de un selector y un bloque de declaración.

selector {
  property: value;
}

• Selector: Apunta al elemento HTML al que deseas aplicar estilo.
• Propiedad: El aspecto del elemento que desea cambiar (por ejemplo, color, tamaño de fuente).
• Valor: El valor específico que desea aplicar a la propiedad.

Ejemplo:

Digamos que desea cambiar el color de todos los elementos

a azul.

HTML:

Hello, World!

CSS:

h1 {
  color: blue;
}

Esta sencilla regla convertirá el texto de todos los elementos

en azul.

Agregar CSS a HTML

Hay tres formas principales de agregar CSS a su documento HTML:

1. CSS en línea: Directamente en el elemento HTML.

   
Hello, World!

1. CSS interno: Dentro de una etiqueta

1. CSS externo: Vinculación a un archivo CSS externo desde su documento HTML.

estilos.css:

   h1 {
     color: blue;
   }

Ejercicio de práctica

• Crea un archivo HTML con algunos elementos diferentes como

  ,

  y

  .
• Aplica diferentes colores, tamaños de fuente y colores de fondo a estos elementos usando los tres métodos: CSS en línea, interno y externo.
• Experimenta con diferentes propiedades para ver cómo afectan la apariencia de tus elementos.

---

Siguiente: En la próxima conferencia, profundizaremos en Selectores y propiedades y aprenderemos cómo orientar y diseñar diferentes elementos en su página web. ¡Manténganse al tanto!

---

Esta primera conferencia presenta los conceptos básicos de CSS, explica qué es, por qué es importante y cómo escribir reglas CSS simples. El ejemplo proporcionado es fácil de seguir y el ejercicio anima a los estudiantes a practicar y explorar por su cuenta.

sígueme en LinkedIn

Ridoy Hasán