Custom Style es-419 Explainer

Explicador de Estilo personalizado

Objetivo de este acertijo: Usar una id para definir el estilo de un elemento HTML específico

Tutorial de la solución: En este acertijo, agregarás una id, b, al tercer elemento h1. Luego, agregarás un nuevo conjunto de reglas CSS para #b y define su color como azul.

El atributo de id asigna una id a un elemento específico. Por ejemplo, el código debajo asigna la id r a un elemento h1 específico:

<h1 id='r'>red</h1>

Una vez que hayas asignado una id a un elemento específico, esa id no se puede usar en cualquier otro elemento. Una id solo se puede usar una vez en un documento HTML.

Una vez que un elemento tiene una id, se puede seleccionar en CSS usando el símbolo #seguido por el nombre de la id. Por ejemplo:

`'r'`
  color: red;
}

El código anterior selecciona el elemento con la id r y define su color como rojo.

Para completar el acertijo, dentro de HTML, agrega la id 'b' dentro de la etiqueta <h1> inicial en la línea<h1>blue</h1>. Luego, dentro de CSS, agrega un nuevo conjunto de reglas con el selector #b. Define su color como rgb(0, 0, 255).

Solución del código de ejemplo:
(Pulsa a continuación para revelar)

HTML

<html>
    <body>
        <h1 id='r'>red</h1>
        <h1 id='g'>green</h1>
        <h1 id='b'>blue</h1>
    </body>
</html>

CSS

body {
    background-color: snow;
}

h1 {
    color: black;
}

`'r'`
    color: rgb(255, 0, 0);
}

#g {
    color: rgb(0, 255, 0);
}

#b {
    color: rgb(0, 0, 255);
}

Conceptos de HTML: <html>, <body>,<h1>, elemento HTML, atributo de id
Conceptos de CSS: selectores CSS, conjunto de reglas, reglas

1 Like