Sintaxis básica de CSS y preferencia de los estilos - Curso de CSS3 básico - Capítulo 2


En este capítulo vas a ver la sintaxis básica de CSS y lo que es la preferencia de estilos.

Etiquetas HTML

<!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>

Hoja de estilos CSS

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;
}

Resultado en el navegador

Estilos de CSS básicos

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.

¿Qué son los selectores en CSS?

Los selectores son las indicaciones del elemento que queremos manipular con css, por ejemplo, en la hoja css tengo dos selectores, h1 y h2.

Selectores de CSS

Puedes ver que estos selectores llevan consigo unas llaves que encierran todo el contenido.

Llaves de selectores de CSS

¿Qué son las declaraciones CSS?

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.

Propiedad y valor de CSS

Preferencia de estilos CSS

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.

Prioridades de estilos de CSS

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 desarollar 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.

Resultado en el navegador

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.

Preferencia de estilos de CSS

Ejercicios de CSS

4- Crea una página html y otra css (puedes copiar de los ejemplos o dejar la página html con un h1, h2 y un párrafo). En la hoja de estilos quiero que especifiques un tamaño de fuente de 25px para todos los elementos p.

5- En la página html anterior, crea un segundo párrafo. Este tendrá un tamaño de 15px, el otro mantendrá el tamaño de 25px.

6- Verdadero o falso. Del siguiente elemento, h6 {font-size:14px;}, font-size es el selector.

7- Verdadero o falso. Del siguiente elemento, h6 {font-size:14px;}, h6 es el selector.

8- Verdadero o falso. Del siguiente elemento, h6 {font-size:14px;}, font-size:14px; es la propiedad.

9- Encuentra el error o errores. Del siguiente elemento, p {font famili:7px;

La solución la encontrarás aquí: Haz click aquí.


Suscríbete a mi canal de YouTube para apoyarme

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.


Comentarios

Si te quedan dudas sobre el temario, sobre CSS, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.