Currículo: esta unidad cubre parte de los saberes básicos del Bloque C – Desarrollo web (PRYC.2.C.1.3 y PRYC.2.C.1.4) correspondiente a 2º Bachillerato. Además, se evalúan los criterios que puedes encontrar al final de esta página.
Tabla de contenidos
CSS es el lenguaje utilizado para describir la presentación visual de las páginas web, incluyendo colores, márgenes y fuentes. Mientras que HTML se encarga de la estructura, CSS define el estilo y la apariencia de esa estructura.
7.1. Introducción a CSS
Puedes pensar en CSS como la ropa que viste al esqueleto proporcionado por HTML, dándole color, forma y estilo.
CSS permite a los desarrolladores aplicar estilos a elementos HTML seleccionándolos mediante selectores y luego definiendo propiedades y valores específicos.
Por ejemplo, podemos cambiar el color de fondo de todos los párrafos (<p>) a azul con una simple regla de CSS:
p { background-color: blue; } CSS puede ser incorporado directamente en el HTML, enlazado como un archivo externo, o incluso insertado en línea en los propios elementos.
7.2. Frameworks CSS
Dentro del ecosistema de CSS, los frameworks han surgido como herramientas muy potentes que simplifican y aceleran el desarrollo de interfaces de usuario atractivas.
Entre estos, Tailwind CSS destaca como un framework que permite a los desarrolladores construir diseños personalizados sin salirse de su HTML, lo que elimina la necesidad de escribir CSS desde cero.
El uso de CSS mejora notablemente la experiencia del usuario al permitir la creación de páginas web visualmente atractivas con aspecto profesional. Además, CSS juega un papel muy importante en el diseño web adaptable, asegurando que las páginas se vean bien en una amplia variedad de dispositivos y tamaños de pantalla.
Dominar CSS significa tener el control sobre la apariencia de un sitio web, pudiendo ajustar el diseño para mejorar la usabilidad y la estética.
Ejercicio 7.1 – CSS básico
Crea los archivos .html y/o .css que necesites para resolver cada uno de estas 10 tareas básicas de CSS.
- Crea un párrafo cuyo texto aparezca en color rojo usando el atributo style.
- Crea una página donde todos los párrafos aparezcan en color azul usando la etiqueta style.
- Crea un archivo estilos.css que ponga los párrafos en verde y enlázalo desde HTML.
- Haz que un título h1 tenga un tamaño de 40 píxeles.
- Cambia el color de fondo de toda la página a gris claro.
- Crea una clase llamada “destacado” que ponga el texto en rojo y aplícala a un párrafo.
- Crea un elemento con id “titulo” y haz que su texto sea azul.
- Centra el texto de todos los párrafos.
- Añade un borde negro y un margen de 20px a un párrafo.
- Crea una página que tenga:
- Fondo de color claro.
- Título centrado.
- Párrafos con margen.
- Un elemento destacado en rojo.