Ya has visto cómo se establece una hoja de estilo. Y sabes que si configuras un selector de HTML, todas las etiquetas HTML tendrán sus valores restablecidos con los nuevos valores que especificaste. Por ejemplo, si tuvieras esto:

Cómo usar los selectores de clase e ID de CSS

Entonces todos los encabezados H1 que usaste entre las dos etiquetas de BODY tendrían el texto entre las dos etiquetas de color rojo.

En otras palabras, para usar tu nuevo selector de HTML, no tienes que añadir nada más a tu código HTML. Sólo usa la etiqueta de la manera normal.

Sin embargo, los selectores de clase e identificación son ligeramente diferentes.

Usando los selectores de clase

Para configurar un selector de clase, el código era éste:

.ClassSelector {Propiedad: Valor}

Primero, escribes una parada completa (punto). Luego escribes el nombre de tu Selector de Clase (que puede ser cualquier cosa que quieras). La Propiedad y el Valor son entonces como de costumbre. Un ejemplo es este:

Cómo usar los selectores de clase e ID de CSS

El .FontOne es el Selector de Clase, un nombre que nos inventamos nosotros mismos. Entre los corchetes, decimos: "Cada vez que se aplique esta regla, el color del texto será rojo".

Puedes usar esta nueva Regla dentro de una etiqueta HTML normal. Como esta:

<H1 Class = "FontOne"> My Heading </H1>

Al aplicar su nueva regla de selección de clase, se utiliza la palabra "clase". Luego se escribe un signo de igualdad ( = ), seguido del nombre que le dio a su Selector de Clase. En nuestro caso, este era FontOne . Pero tenga en cuenta que ahora falta el punto (punto) al comienzo del nombre del selector. Si pones el punto completo, tu regla no funcionará. Tengan en cuenta que aunque hemos utilizado comillas alrededor del nombre de la Clase, esto no es estrictamente necesario. Sin embargo, es recomendable.

Uso de selectores de identificación

Usas un selector de identificación exactamente de la misma manera que usas los selectores de clase. La única diferencia está en la palabra utilizada al aplicar la Regla. En lugar de la Clase se utiliza ID:

Cómo usar los selectores de clase e ID de CSS

Así es como se vería el código anterior en una página web:

Cómo usar los selectores de clase e ID de CSS

Pero eso es suficiente de la teoría por ahora. Hagamos un poco de trabajo práctico. Repasaremos las diferentes formas en que puedes añadir un ESTILO a tus páginas web usando tu editor de texto. El primer código que vamos a escribir centrará un encabezado en una página. Luego puedes usar el mismo código para centrar cualquier cosa en tu página. Haz clic abajo para empezar.

| Estilos en línea e incrustados