Atom
Increíble editor web, uno de mis favoritos.
Gratis, multiplataforma, de código abierto, ligero y personalizable. No se le puede pedir más.
En este capítulo vas a ver la sintaxis básica de CSS y lo que es la preferencia de estilos.
Empecemos con esta página html y hoja css:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sintaxis básica de CSS</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Programación fácil</h1>
<h2>Curso de CSS desde cero</h2>
<p>Os doy la bienvenida al curso de CSS.</p>
</body>
</html>
He añadido unos estilos para todas las etiquetas <h1>
y <h2>
. En las <h1>
, se especifica un tamaño de fuente de 50px
, 25px
para las <h2>
. En la familia de fuentes que sea impact y por último, que las h2 tengan estilo de fuente oblique (cursiva).
h1 {
font-size:50px;
font-family:impact;
}
h2 {
font-size:25px;
font-family:impact;
font-style:oblique;
}
No solo quiero que te aprendas estas propiedades CSS, también quiero que prestes atención a esta terminología de CSS, ya que la vamos a utilizar de ahora en adelante.
Los selectores son las indicaciones del elemento que queremos manipular con css, por ejemplo, en la hoja css tengo dos selectores, <h1>
y <h2>
.
Puedes ver que estos selectores llevan consigo unas llaves que encierran todo el contenido.
Las declaraciones css son cada una de las líneas que ves que finalizan siempre con punto y coma. Las declaraciones tienen dos partes, la propiedad CSS y el valor separados por dos puntos.
En CSS tenemos preferencia o prioridad de unos estilos sobre otros dependiendo de la zona donde se declaren. Me refiero a las tres partes donde puedes colocar las propiedades CSS, directamente sobre una etiqueta html, en el head o en una hoja de estilos externa.
En la imagen puedes ver tres prioridades, si tenemos especificado un estilo directamente sobre una etiqueta html, este es el más prioritario, si hay algún estilo repetido, en el head o en una hoja externa enlazada, los ignora.
La prioridad 2 ignora los estilos repetidos en la hoja css externa y por último, la mínima prioridad es la 3, la de la hoja externa.
En resumen, especifico un font-size de 50px
para <h1>
en una hoja externa, después especifico la misma propiedad en el head con un valor diferente. Esto hace que se ignore solo la propiedad font-size:50px;
por un valor de 200px
. Finalmente, especifico sobre una etiqueta <h1>
un valor diferente de font-size
, que es el que queda finalmente.
En el caso de que añadiese más elementos <h1>
, el resto, si no le especifico un estilo directamente sobre la etiqueta, quedaría el valor del <head>
.
Esto se utiliza porque al desarrollar un sitio web, creamos una o varias hojas css con todos los estilos comunes para todo el sitio web, pero en alguna página en concreto podemos querer que algún elemento se vea diferente que en resto de páginas, así, podemos sobrescribir estilos de la hoja externa.
Como puedes ver, el resultado en el navegador es un título <h1>
de 15px
de tamaño de fuente, pese a tener especificado un 200px
en el <head>
o un 50px
en la hoja de estilos css.
<h1>
, <h2>
y un <p>
). En la hoja de estilos quiero que especifiques un tamaño de fuente de 25px
para todos los elementos <p>
.15px
, el otro mantendrá el tamaño de 25px
.h6 {font-size:14px;}
, font-size
es el selector.h6 {font-size:14px;}
, h6
es el selector.h6 {font-size:14px;}
, font-size:14px;
es la propiedad.p {font famili:7px;
La solución la encontrarás aquí: Haz click aquí.
Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.
Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.
No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.