1 - La siguiente Hoja de Estilo:
H1 {color: red}
P {color: blue}
P.invertido {color: white; background-color: black}
.colorido {color: green; background-color: yellow}
2 - Aplicada a la siguiente sección de una página:
<h1>Título rojo (selector de tipos)</h1>
<p>Los párrafos son azules. Se usa un selector de tipos
para individualizarlos..</p>
<p class="invertido">Una clase de párrafo especial. La clase se llama "invertido"
y el selector es un selector de clases. El texto es blanco sobre fondo negro.</p>
<p class="colorido">Este párrafo usa otra clase llamada "colorido".
El fondo es amarillo y el texto es verde. Esta es una clase que se puede aplicar
a cualquier elemento, no solamente a los párrafos. </p>
<p>Por ejemplo, una palabra en negrita (elemento B de HTML) se verá así:
<b>con negritas y texto azul,</b> pero un elemento B con el
atributo CLASS="colorido" se verá así: <b class="colorido">texto
en negrita, letras verdes y fondo amarillo</b>.</p>
<p>Otro ejemplo. Esta es una lista de la clase "colorido" que tiene</p>
<ul class="colorido">
<li>Texto en verde</li>
<li>Fondo amarillo</li>
</ul>
3 - Producirá estos efectos::
Los párrafos son azules. Se usa un selector de tipos para individualizarlos..
Una clase de párrafo especial. La clase se llama "invertido" y el selector es un selector de clases. El texto es blanco sobre fondo negro.
Este párrafo usa otra clase llamada "colorido". El fondo es amarillo y el texto es verde. Esta es una clase que se puede aplicar a cualquier elemento, no solamente a los párrafos.
Por ejemplo, una palabra en negrita (elemento B de HTML) se verá asi: con negritas y texto azul, pero un elemento B con el atributo CLASS="colorido" se verá así: texto en negrita, letras verdes y fondo amarillo.
Otro ejemplo. Esta es una lista de la clase "colorido" que tiene
Pero en el caso en que apliquemos la clase "invertido" a una lista: