Aunque crearemos la Web con WordPress y un editor visual como Elementor que hace el trabajo duro por nosotros, es decir nos evita tener que programar. Es muy importante tener unas nociones del lenguaje lo que nos permitirá entender la importancia de usar una etiqueta u otra en el editor.
Te recomiendo ver primero si no lo hiciste ya el artículo dedicado a los fundamentos de HTML.
Este artículo será una guía con los fundamentos, y luego iré enlazando en cada parte nuevos artículos más detallados para ir ampliando los conocimientos, con más detalle y ejemplos prácticos así como videos para que sea más fácil de entender.
El objetivo del lenguaje CSS es dar un estilo a un documento HTML, indicando a los navegadores como tienen que mostrar o que comportamiento visual tiene que tener cada uno de los elementos HTML.
CSS, son las siglas de Cascading Style Sheets, es decir hojas de estilo en cascada, recibe ese nombre porque normalmente se colocan en un fichero independiente para separar la parte visual de la lógica, lo que sería la llamada hoja de estilos (extensión .css) y además se aplican siguiendo una jerarquía en cascada lo que le termina de dar el nombre.
¿Dónde colocar el contenido de los estilos?
El contenido de estilo CSS, se podrá ubicar en 3 lugares:
- Dentro de un elemento HTML, usando el atributo style en una etiqueta de html.
- Dentro del documento de HTML, usando un bloque <style>…</style>, generalmente cuando se usa este sistema se ubica en el head de la página.
- En una hoja de estilos externa
El objetivo de las hojas de estilo como había indicado anteriormente es independizar la parte de código (lógica) de la visual, por lo tanto la ventaja es ponerlo en un lugar independiente, de tal forma que si queremos hacer un cambio del tipo de letra, de colores o cualquier otro elemento visual, no tengamos que ir página a página cambiándolo.
En determinadas ocasiones, en las que solo tengamos una página html o que sea un cambio totalmente aislado tendrá sentido usar la primera y segunda opción, pero lo habitual en cualquier proyecto será la tercera opción, ya sea con una o con varias hojas de estilo.
Sistema de prioridades <cascada>
Como hemos comentado a un elemento se le pueden asignar estilos desde varios puntos del documento, e incluso en varias hojas css diferentes.
CSS aplica un sistema de prioridades, que va siempre desde lo más específico a lo más genérico y en caso de existir varias reglas del mismo nivel de prioridad aplicarán en cascada, aplicando siempre la última.
Esto es muy importante tenerlo claro, ya que a veces veremos que tenemos una regla y no se aplica, ya sea porque desde varias hojas se han indicado una determinada regla y se está quedando la última referencia, o porque hemos asignado desde un elemento menos específico que otro.
A continuación veremos la regla de prioridad (de mayor prioridad a menor)
- Asignación con style en el propio elemento html
- En función del media type
- Definido por el usuario en el navegador (accesibilidad)
- Asignación mediante ID #
- Asignación a elemento HTML especificando la clase
- Asignación mediante clase
- Asignación a elementos HTML
- Predefinido por el navegador
Existen algunos matices y excepciones, además del uso de !important que hará que tenga un peso mayor en determinadas circunstancias al sobreescribir la prioridad anterior.
Selectores
Permiten asignar los atributos visuales a los elementos html, por eso se llaman selectores, ya que son las reglas para seleccionar el elemento.
Podemos dividirlo en 3 tipos
- Elementos de tipo (nombre de la etiqueta html) y aplican a las etiquetas html del mismo nombre, se usan para reglas generales en función del tipo, por ejemplo para los títulos, etc.
- Clase, en el elemento html se indica el atributo class=»nombre_clase» y al usarlo en css se hace con .nombre_clase (con un punto delante) se usan para aplicar una regla común a varios elementos diferentes, por ejemplo aplicar un color, independientemente de si es un parrafo, un H1, etc.
- ID, en el elemento html se indica el atributo id=»nombre_id» y al usarlo en css haremos referencia con almohadilla #nombre_id pensado para determinados elementos concretos que no siguen criterios generales
Pseudoclases y Pseudoelementos
Se usan en los selectores, para aplicar estilos en determinadas condiciones (no propias del lenguaje html, sino de estados y eventos en el caso de las pseudoclases o de condiciones de los elementos), se indican con el uso de : para las pseudoclases y :: para los pseudoelementos
Ejemplo,
:hover aplica cuando se pasa el ratón por encima del elemento
:link y :visited para los enlaces
::after y ::before para asignar antes o detrás el elemento
