Con CSS podemos dar el aspecto visual a nuestras páginas web, veamos cómo podemos aplicarlo:
Insertado directamente en el HTML
Podemos aplicarlo directamente dentro de las etiquetas HTML, ésta sería la forma más rudimentaria, un ejemplo dentro de una etiqueta div:
<div style="color: black; font-family: Arial;">Aquí un texto cualquiera.</div>
Como se puede apreciar metemos la palabra «style» seguida de un «=» y luego entre comillas el estilo a aplicar.
No es la forma más adecuada ya que no es reutilizable.
En la cabecera del la página
En éste caso se declaran los estilos dentro de la cabecera del HTML, o sea dentro de las etiquetas HEAD y luego dentro de la etiqueta STYLE, un ejemplo:
<head>
<style type="text/css">
p { color: black; font-family: Arial; }
</style>
</head>Para poco código puede valer éste sistema, pero sigue sin ser reutilizable.
En un archivo externo
Este método si que es reutilizable y el más aconsejable. En la cabecera del HTML declaramos la ruta del archivo o hoja de estilos, por ejemplo:
<head>
<link rel="stylesheet" type="text/css" href="/css/hoja-estilos.css" />
</head>Como se puede apreciar se usa una etiqueta LINK para enlazar la hoja de estilos externa. Veamos ahora como aplicar los estilos en el HTML.
Se aplica a través de los selectores:
Selector universal
Es para aplicar a todos los elementos del HTML, ejemplo:
* {
margin: 0;
padding: 0;
}Esto iría en la hoja de estilos y no hay que poner nada en HTML, se aplica a todo.
Selector de etiqueta
Para aplicar en etiquetas concretas del HTML, por ejemplo en un H2
h2 {
color: blue;
}Este código iría en la hoja de estilos y no hay que poner nada en el HTML.
Podemos agrupar varios selectores separados por comas:
h1, h2, h3 {
color: black;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}Es como si se les aplicaran por separado.
Cuando queramos aplicar un estilo a un selector dentro de otro:
p div {
color: green;
}Se le aplicará el estilo al div que esté dentro de un párrafo, se le denomina selector descendente.
Y pueden ser más de dos selectores, sin limite… creo.
Selector de clase
Este selector es ideal para aplicar a un determinado elemento del HTML, por ejemplo ponemos éstas reglas en la hoja de estilos:
.miclase1 {
color: black;
font-size: 12px;
} A las clases se les pone un punto delante del nombre para distinguirlos de otros tipos de selectores, también se pueden agrupar o hacerlos descendentes.
Ahora vemos como aplicarlo al HTML:
<p class="miclase1">Educasitio es una web estupenda...</p>
Para aplicar el estilo ponemos dentro de la etiqueta HTML la palabra class= seguida del nombre de la clase entre comillas.
Se puede usar en tantos elementos como se quiera.
Selector de ID
Se aplica igual que el de clase, la única diferencia es que solo se aplica a un solo elemento. En vez del punto delante del nombre se pone una almohadilla #:
#idprueba {
color: black;
font-size: 12px;
} Luego en el HTML se plica así:
<p id="idprueba">Educasitio es una web estupenda...</p>Temática: Programación
Nivel: Básico
