Aclaración, el código css va dentro del encabezado dentro de las etiquetas de style:
<style> código aquí</style>
El resto del código, va dentro de las etiquetas del body.
El selector de id:
#MiParrafo1 {
text-align: center;
color: red;
}
Se aplica por ejemplo a un párrafo en particular
<p id="MiParrafo1">
Este es un contenido
</p>
El selector de clase:
.centrado {
text-align: center;
color: blue;
}
Se aplica a diferentes elementos:
<h1 class="centrado">Encabezado centrado azul</h1>
<p class="centrado">Párrafo centrado azul.</p>
Una combinación de ambos puede ser la siguiente:
Se le aplica a todos los párrafos que contengan la clase "centrado"
p.center {
text-align: center;
color: blue;
}
Aplicado a estos dos elementos, uno es afectado y el otro no lo es.
<h1 class="center">Este encabezado no es afectado</h1>
<p class="center">Este párrafo es afectado</p>
Para aplicarlo a más de una clase veamos un ejemplo:
<style>
p.azulCentrado {
text-align: center;
color: blue;
}
p.al150 {
font-size: 150%;
}
</style>
Se aplica a estos dos párrafos:
<p class="azulCentrado">Este párrafo tiene aplicado un centrado y color azul</p>
<p class="azulCentrado al150">Este párrafo tiene aplicado lo mismo que al anterior, pero además un tamaño de letra del 150%</p>
Para varios elementos, de tal modo de reducir el código de programación:
Para los 3 tamaños de encabezado y para los párrafos:
h1, h2, h3, p {
text-align: center;
color: green;
}
Se aplica por ejemplo a estos elementos
<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<p>Párrafo</p>
