El selector de clase proporciona un mayor control y precisión sobre la apariencia de los elementos HTML.
Para utilizar el selector de clase, utilizaremos un punto (.) seguido del nombre que asignaremos a la clase, como por ejemplo:
.titulo .enfasis .importante
Crearemos en selector de clase para resaltar parrafos, y lo llamaremos .importante y escribiremos en la hoja de estilo o archivo CSS, de este modo:
.importante{color:red;}
Para relacionar un selector de clase al elemento(s) HTML añadiremos el atributo 'CLASS' , dentro de la etiqueta HTML de apertura y entre las comillas escribimos el nombre del selector de clase que escribimos en la hoja de estilo o archivo CSS, pero sin el punto de este modo:
<body>
<p class="importante"> ... </p>
</body>
Mediante un selector de clase no solo podemos aplicar estilos a un elemento HTML sino a muchos simultaneamete.
Una característica del selector de clase es que puede ser utilizado más de una vez, para controlar la apariencia de los elementos HTML.
.importante{color:red;}
<body> <p class="importante">Parrafo resaltado color rojo...</p> <p>Parrafo normal... </p> <p>Parrafo normal... </p> <p class="importante">Parrafo resaltado color rojo...</p> </body>
.importante{color:red;}
<body> <p class="importante"> ... </p> <div class="importante"> ... </div> <h3 class="importante"> ... </div> </h3>
.importante{color:red;}
.justificado{text-align:justify;}
<body>
<p class="importante justificado"> Este párrafo será
resaltado con texto de color rojo y tambien justificado</p>
<p class="importante"> Este párrafo será
resaltado con texto de color rojo </p>
</body>
Selector ID >>