Estilos CSS en hoja externa
Ya hemos ido escribiendo que los estilos CSS se pueden declarar en tres niveles diferentes. De lo más concreto a lo más general:
- Estilos en línea
- Estilos internos
- Estilos en archivo externo
Por ejemplo, puedo hacer que el elemento <p> (párrafo) tenga un borde de 3 píxeles de tipo continuado (solid) y de color casi blanco, en concreto #f2f2f2. Lo coloco en este mismo párrafo.
Esto es un CSS en línea. Se aplica al elemento HTML como un atributo de la etiqueta.
<p style="border:3px solid #f2f2f2"> Por ejemplo, puedo hacer que el elemento <p> (párrafo) tenga un borde de 3 píxeles de tipo continuado (solid) y de color casi blanco, en concreto #f2f2f2. Lo coloco en este mismo párrafo. </p>
Este efecto afecta solo al párrafo en el que se ha declarado. Si lo que quiero es que afecte a todos los párrafos que haya en el documento, entonces lo haría dentro del <head> y sería un CSS interno La sintaxis sería:
<style>
p {
border: 3px solid #f2f2f2;
}
</style>
Y, finalmente, si quiero producir este mismo efecto desde la hoja externa, estaríamos en el tercer nivel de aplicación del CSS, el más recomendable, pues desde un único archivo se controla el estilo, no solo de ese documento, sino de todo un sitio web.
1º.- Tengo que crear la hoja css. Con este mismo editor, con el Sublime Text, Archivo > Nuevo archivo y lo guardo con el nombre que quiera pero con la extensión .css. Por ejemplo, puedo llamarlo miestilo.css.
2º.- Lo vinculo con mi página HTML. Si este archivo se encuentra en el mismo directorio que el de la página desde la que lo llamo, escribiría (dentro del <head> del documento):
<link rel="stylesheet" href="miestilo.css">
<link rel="stylesheet" type="text/css" href="miestilo.css">
3º.- Luego, en la hoja de estilos, en miestilo.css escribo directamente:
p {
border:3px solid #f2f2f2;
}
Observa que, en la hoja css, no tenemos que hacer ningún tipo de declaración de documento, cosa que sí que hay que hacer en el documento html. Aquí escribimos directamente.
- Lo que se llama el selector. En este caso el elemento sin paréntesis angulares.
- En segundo lugar la apertura de llaves
- En tercer lugar, la propiedad y su valor, o valores, acabando con ;
- Y, finalizamos cerrando las llaves
Los seis tipos de selectores
- Elemento html
- Clase de un elemento
- ID de un elemento
- El elemento con su clase
- Varios elementos
- El selector general
1.- El elemento html
Ya lo hemos visto con el elemento <p> (párrafo).
Se escribe el nombre del elemento sin los paréntesis angulares.
Por ejemplo, modificamos el elemento <div>
div {
background-color:#ffff00;
}
2.- La selección a través de la clase del elemento
En el html hemos tenido que declarar al elemento con una clase. Con esta sintaxis:
<elementohtml class="nombredelaclase">
Por ejemplo, al elemento <h1> le declaramos la clase centrado
<h1 class="centrado">
Escribiríamos un punto. seguido del nombre de la clase:
.centrado {
text-align:center;
color:darkblue;
}
3.- Selección a través del ID de un elemento
El ID es un identificador de un elemento HTML. Es muy parecido a la clase, la diferencia principal es que el identificador se suele referir a un único elemento en toda la página, mientras que podemos declarar la clase a varios y diferentes elementos html.
Por ejemplo, identificamos un <p> con el id especial.
<p id="especial">
En el CSS escribimos el id precedido del signo #
#especial {
font-weight:bold;
}
4.- El elemento con su clase
Podemos emplear el nombre del elemento seguido con un punto . y el nombre de la clase para referirnos a ese elemento en concreto que tiene esa clase pero no a los otros elementos que puedan tener esa misma clase.
p.centrado {
text-decoration:underline;
}
5.- Varios elementos a la vez
Podemos también seleccionar varios elementos a la vez para declarar un estilo común a todos ellos. Se hace escribiendo el nombre de cada elemento separado por una coma ,
h2, h3, h6 {
border:4px solid #00ff00;
}
6.- Seleccionar todos los elementos de la página
Podemos declarar un estilo que afecte a todos los elementos de la página.
Esto se hace con el carácter asterisco *
* {
font-family:monospace;
}
Hemos creado una página web con estos elementos html y vinculada a la hoja de estilos miestilo.css. Puedes abrirla pulsando en este enlace y visualizar el código pulsando el botón derecho del ratón y eligiendo "Ver código fuente" o similar.
Acceso al documento pdf con el código de la página html
Acceso al documento pdf con el código de la hoja de estilos
Acabamos este documento insertando el tercer vídeo de apoyo al curso
