Selectores de ID y clase CSS

Con CSS, hay muchas maneras de aplicar estilos en una página web, pero desea utilizar un estilo en algunos de los elementos de una página web, pero no en todas las instancias del mismo elemento.

O bien, es posible que desee crear un estilo que pueda aplicar a través de varios elementos en un documento, sin configurar cada estilo de forma independiente.

En algunos casos, es posible que desee aplicar un estilo a un elemento único solo una vez en una página. Para ello, utiliza los atributos HTML class e id. Class y id son atributos globales que se puede aplicar a casi todos los elementos HTML.

Clase

El class El selector le permite configurar varios estilos hacia mismo elemento en una página web. Por ejemplo, es posible que desee que ciertas secciones de su texto tengan un color diferente o un tamaño diferente al resto del texto de la página.

Aquí hay un ejemplo en el que necesita formatear sus párrafos diferentemente (CSS aplicado usando estilo interno):

p.blue {
    color: blue;
}

p.red {
    color: red;
}

Ejemplo

<style type="text/css">
    p.blue {
        color: blue;
    }
    p.red {
        color: red;
    }
</style> 

<p class="blue">Blue text in this paragraph</p>
<p class="red">Red text in this paragraph</p>

Si desea aplicar el estilo azul o rojo a otros elementos, no solo a los párrafos, utilice el selectores de clase sin anteponer la clase (asegúrese de dejar el punto . en su lugar). Aquí hay un ejemplo.

.blue {
    color: blue;
}
.red {
    color: red;
}

Ejemplo

<h3 class="blue">Blue text in this heading</h3>
<div class="red">Red text in this div</div>

IDENTIFICACIÓN

El id selector se utiliza para especificar un estilo para un soltero, elemento único. Si bien puede lograr esto con un class seleccionador, el id selector es más apropiado para este escenario.

El id selector utiliza el atributo id del elemento HTML y se define prefijando el id con un # símbolo. En este ejemplo, queremos apuntar a un párrafo único en un documento.

<style type="text/css">
    #centerText {
        text-align: center;
        color:red;
    }
</style> 

<p id="centerText">
    This text will be centered and formatted as red text.
</p>
<p>
    This text will not be centered and no color will be applied.
</p>