Una etiqueta <style> dentro del <head>, con los estilos escritos ahí mismo:
<head> <style> p { color: #333; } </style></head>
Sirve para una página suelta, pero esos estilos no valen para las demás vistas.
En línea
El atributo style sobre la propia etiqueta:
<p style="color: #333">Hola</p>
Nunca uses estilos en línea
Mezclan estructura y presentación, que es justo lo que HTML y CSS existen para
separar. Además hay que repetirlos en cada etiqueta, y ganan por encima de
todo lo demás, así que cuando quieras cambiar algo desde la hoja de estilos no te
va a hacer caso y no vas a entender por qué.
Un solo estilos.css para todo el sitio
Se escribe una vez y sirve para las tres vistas. Cambias un color en un lugar
y cambia en todo el sitio. Y el HTML queda limpio, con puro contenido.
El href del <link> es una ruta, como las del HTML
Si el CSS está al lado del HTML, href="estilos.css". Si lo guardas en una
carpeta, href="css/estilos.css". Valen las mismas reglas de
rutas, y el mismo error: una mayúscula de más y la
página se ve sin estilos.
Anatomía de una regla
h1 { color: blue;}
Parte
Cómo se llama
Qué hace
h1
Selector
A qué elementos apunta
color
Propiedad
Qué se cambia
blue
Valor
A qué valor
color: blue;
Declaración
La propiedad y su valor, juntos
Dentro de las llaves va una declaración por línea, y cada una termina en punto y
coma.
Es el error más común de CSS, y es traicionero: la declaración a la que le falta
y la siguiente dejan de aplicarse, pero el resto de la regla sigue funcionando.
Ves que un estilo no se aplica y el problema está una línea más arriba.
Los comentarios en CSS van entre /* y */
/* Estilos de la navbar */nav { background: #1b1a19;}
No existe el // de otros lenguajes: en CSS no funciona.
El orden de las declaraciones no importa
Dentro de una misma regla da igual escribir primero color o primero
font-size. Lo que sí importa es el orden entre reglas distintas, y eso se ve
en la página siguiente.
Checkpoint
Intenta responder antes de desplegar cada pregunta.
¿Qué hace CSS y por qué se separa del HTML?
Le dice al navegador cómo se ve cada elemento: colores, tipografía, tamaños y
posición. Se separa porque así el mismo contenido puede cambiar de aspecto por
completo sin reescribirlo, y porque deja el HTML legible.
¿Cuáles son las tres formas de enlazar CSS y cuál se usa?
Externo (un archivo .css enlazado con <link> desde el <head>). Es la
que se usa.
Interno (una etiqueta <style> dentro del <head>; solo vale para esa página).
En línea (el atributo style en la etiqueta; mezcla estructura y estilo).
¿Por qué conviene un solo archivo externo para todo el sitio?
Porque se escribe una vez y sirve para las tres vistas: cambias un color en un
lugar y cambia en todas. Con estilos internos tendrías que repetirlos y mantenerlos
sincronizados página por página.
¿Qué partes tiene una regla de CSS?
El selector (a qué apunta), y dentro de las llaves una o más declaraciones.
Cada declaración es una propiedad, dos puntos, un valor y un punto y coma.
h1 { color: blue;}
¿Qué pasa si olvidas un punto y coma?
La declaración a la que le falta y la siguiente dejan de aplicarse; el resto de
la regla sigue funcionando. Por eso despista: ves un estilo que no se aplica y el
error está una línea más arriba.
¿Cómo se escribe un comentario en CSS?
Entre /* y */. El // de otros lenguajes no funciona en CSS.