Add some style · Añade estilo
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Esta página necesita un navegador reciente (con soporte para SharedArrayBuffer). Por favor, actualiza Chrome, Edge, Firefox o Safari a la última versión.
English
Adding style
- HTML gives your page its content. CSS makes it look good.
- The easiest way to add CSS is a
<style>block near the top of your page. - Inside it, you write rules that change how things look.
Español
Añadir estilo
- HTML proporciona el contenido de tu página. CSS hace que se vea bien.
- La forma más sencilla de añadir CSS es mediante un bloque
<style>cerca del inicio de tu página. - Dentro de él, escribes reglas que modifican la apariencia de los elementos.
English
A CSS rule
- A rule has three parts:
p { color: blue; } pis the selector — which tags to change (here, every paragraph).coloris the property — what to change.blueis the value — what to change it to. (Together,color: blue;is one declaration.)
Español
Una regla CSS
- Una regla tiene tres partes:
p { color: blue; } pes el selector — indica qué etiquetas modificar (en este caso, todos los párrafos).colores la propiedad — lo que se va a cambiar.bluees el valor — a qué se va a cambiar. (Juntos,color: blue;constituyen una declaración.)
<style>
p { color: blue; }
</style>
<p>Now I am blue.</p>
<p>So am I!</p>
English
Common mistakes
- Link the CSS file, or put rules inside a
<style>block. - Each CSS rule ends with a semicolon
;.
Español
Errores comunes
- Vincula el archivo CSS o coloca las reglas dentro de un bloque
<style>. - Cada regla CSS termina con punto y coma
;.
English
Now you try
- Write your rules inside the
<style>block. - Colour your paragraphs, then your heading.
Español
Ahora te toca a ti
- Escribe tus reglas dentro del bloque
<style>. - Colorea tus párrafos y luego tu encabezado.
Make every paragraph blue · azul. Inside the <style> block, add the rule p { color: blue; }. · Haz que cada párrafo sea azul. Dentro del bloque <style>, añade la regla p { color: blue; }.
Now colour the heading too. Add a rule h1 { color: red; }. · Ahora colorea también el encabezado. Añade una regla h1 { color: red; }.