Las Clases en CSS son definiciones creadas y que se pueden aplicar en objetos a los que se les define la clase con la propiedad class, adicionalmente las clases se definen con un punto “.” al inicio, las clases en CSS solo contienen propiedades (atributos) y pueden ser asignadas a N controles .
<html>
<head>
<title>Mi Clase en CSS</title>
<style type='text/css'>
.Clase {
border: 1px solid red;
padding: 4 4 4 4;
background-color: black;
color: white;
}
</style>
</head>
<body>
<b>Elementos</b>
<div class="Clase">Esto es un DIV</div>
<span class="Clase">Esto es un SPAN</span>
<table>
<tr><td class="Clase">Esto es una celda</td></tr>
</table>
</body>
</html>
Adicionalmente puedo poner más de 1 clase a un elemento por tanto la siguiente sintaxis es valida
<div class="Clase otraclase unaterceraclase">Esto es un DIV con 3 clases CSS heredadas</div>
Cuando definimos una clase a un elemento, podemos definir la clase de los elementos que contiene sin necesidad de definirlos uno por uno, aquí un ejemplo
<html>
<head>
<title>Mi Clase CSS</title>
<style type='text/css'>
.Clase {
border: 1px solid red;
padding: 4 4 4 4;
background-color: black;
color: white;
}
.Clase span{
color: red;
}
</style>
</head>
<body>
<div class="Clase">Esto es un DIV <span>Esto es un SPAN con una clade definida por ser hijo de "CLASE"</span></div>
</body>
</html>
Para hacer esto es poner el nombre de la clase seguido por el tag, se puede hacer esto hasta N niveles
.Clase span ul li span
{
color:white;
}
Clases para ID
Otro tipo de clases son las CLASES sobre ID, que se caracterizan por que en su definición se emplea un numeral al inicio “#” y el control que lo utiliza no usa la propiedad CLASS sino que emplea el ID del control. una característica de este tipo de definición es que solo puede ser empleado en 1 control (un ID)
<html>
<head>
<title>Mi Clase CSS con ID</title>
<style type='text/css'>
#Clase {
border: 1px solid red;
padding: 4 4 4 4;
background-color: black;
color: white;
}
#Clase span{
color: red;
}
</style>
</head>
<body>
<div id="Clase">Esto es un DIV <span>Esto es un SPAN con una clase definida por ser hijo de "CLASE"</span></div>
</body>
</html>