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.

Empecemos con esta página html y hoja css:

Página 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>

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

CSS

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

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 200pxen el <head> o un 50px en la hoja de estilos css.

Preferencia de estilos de CSS

Ejercicios de CSS

  1. 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>). En la hoja de estilos quiero que especifiques un tamaño de fuente de 25px para todos los elementos <p>.
  2. 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.
  3. Verdadero o falso. Del siguiente elemento, h6 {font-size:14px;}, font-size es el selector.
  4. Verdadero o falso. Del siguiente elemento, h6 {font-size:14px;}, h6 es el selector.
  5. Verdadero o falso. Del siguiente elemento, h6 {font-size:14px;}, font-size:14px; es la propiedad.
  6. Encuentra el error o errores. Del siguiente elemento, p {font famili:7px;

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


Capítulos

    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.