Todos los idiomas tienen un vocabulario básico que utilizan los hablantes nativos e incluso los turistas que quieren pedir comida o pedir direcciones. Los estudiantes avanzados o hablantes nativos poseen un vocabulario más amplio y rico que hace que su discurso sea más exquisito y elaborado. Del mismo modo, HTML es la parte simple de cualquier sitio web, mientras que CSS es su hermoso compañero.
CSS ( hojas de estilo en cascada ) es un lenguaje que los desarrolladores web utilizan para decorar los elementos HTML que se muestran en una pantalla. Los estilos generalmente se guardan en archivos CSS externos separados.
Como cualquier otro lenguaje, CSS tiene su propia sintaxis, y una de sus principales regulaciones son las llaves: { }
. Se familiarizará con la sintaxis más adelante en el curso, pero por ahora, recuerde: no olvide cerrar los corchetes curvos.
La palabra "en cascada" en CSS explica que las reglas de estilo "caen en cascada" desde diferentes niveles. En otras palabras, en CSS, el orden importa. Cuando las reglas de estilo tienen la misma especificidad, la última en un archivo tiene una prioridad más alta y prevalece sobre las enumeradas arriba.
Por ejemplo, imagina que eres un diseñador y el cliente te envía una tarea: "Haz el <h1>
rojo". En una hora, te envían una actualización: "Haz el <h1>
azul". ¿Qué color establecerás para el título? La última palabra tiene un peso mayor. El título debe ser azul. Sí, tiene menor precedencia, pero así es como funciona CSS.
No mezcle esta regla con la regla de orden en cascada que aplicamos a diferentes tipos de estilos de inserción; más de eso en la lección Métodos CSS
Digamos que compuso una hoja de estilo y está lista para funcionar. ¿Cómo puedes aplicar CSS a tu página HTML? Hay 3 formas:
Agrega un archivo CSS independiente desde un recurso externo. ¡Este archivo puede cambiar el aspecto de todo el sitio web!
Agrega el <style>
en la sección de encabezado de un archivo HTML y lo aplica solo a esta página web en particular.
El estilo en línea aplica reglas únicas a un solo componente que usa el atributo <style>
.
El estilo de página predeterminado es como el lienzo en blanco de un pintor (o desarrollador en nuestro caso) que aún no lo ha tocado. Cada navegador tiene su propio estilo predeterminado, también conocido como hoja de estilo de navegador o agente de usuario (UA), que existe para hacer que cualquier sitio web sea legible de forma predeterminada si aún no ha aplicado ningún estilo.