Tutorial CSS para principiantes



code editor colorLa salsa secreta de HTML

CSS significa "Hoja de estilo en cascada", y en resumen, CSS describe cómo se deben mostrar los elementos HTML en la pantalla, papel o en otros medios.

Aunque es un poco técnico, CSS es muy fácil de aprender.

Sintaxis CSS

Un conjunto de reglas CSS consta de un selector y un bloque de declaración, y cada declaración se compone de una propiedad y un valor:

CSS Tutorial for Beginners

Así es como funcionan:

  1. El selector apunta al elemento HTML que desea diseñar.
  2. El bloque de declaración contiene una o más declaraciones separadas por punto y coma.
  3. Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos.
  4. Una declaración CSS siempre termina con un punto y coma, y los bloques de declaración están rodeados por llaves.

Hay demasiadas combinaciones de selector y declaración para memorizar, por lo tanto, nos centraremos en aprender los conceptos básicos.

Comentarios CSS

Al igual que con HTML, puede "comentar" dentro del archivo CSS para hacer anotaciones. También los uso para "suspender" declaraciones o selectores completos.

Un comentario CSS comienza con / * y termina con * /. Los comentarios también pueden abarcar varias líneas, y así es como puede verse:

Selectores

Hay selectores para la mayoría de las etiquetas HTML, y cualquier sitio web bien diseñado hace uso de todas ellas.

No tiene que memorizar sus nombres, sino aprender su función y cómo implementarlos.

Podemos dividir los selectores CSS en cinco categorías:

  • Selectores simples (seleccione elementos basados en elemento, clase, id). También puede haber declaraciones universales o declaraciones para grupos de selectores.
  • Selectores de combinador (seleccione elementos basados en una relación específica entre ellos)
  • Selectores de pseudo-clase (seleccione elementos basados en un estado determinado)
  • Selectores de pseudoelementos (seleccionar y diseñar una parte de un elemento)
  • Selectores de atributos (seleccione elementos basados en un atributo o valor de atributo)

Esta sección se centrará en los selectores simples más utilizados.

  1. Selector universal
  2. Selector de agrupamiento
  3. Selector de elementos
  4. Selector de clase
  5. Selector de ID

1. Selector universal

El Selector universal (*) selecciona todos los elementos HTML en la página.

Como es un selector universal, no es necesario implementarlo en HTML.

Lo que esto significa es que cada elemento HTML estará alineado a la izquierda, y cualquier texto será azul.

2. Selector de agrupamiento

El selector de agrupación selecciona todos los elementos HTML con las mismas declaraciones de estilo.

En lugar de tener tantos selectores con las mismas declaraciones ...

Será mejor agruparlos para minimizar el código.

Para agrupar selectores, separe cada selector con una coma.

3. Selector de elementos

También denominado simplemente "selector de tipo", este selector debe coincidir con uno o más elementos HTML del mismo nombre. Por lo tanto, un selector de h1 coincidiría con todos los elementos HTML sin estilo h1.

La declaración del Selector de elementos se aplicará a cualquier elemento h1 y anulará los selectores universales.

En este ejemplo, cualquier elemento h1 se mostrará en rojo y centrado, en lugar de alineado a la izquierda y azul.

4. Selectores de clase

El selector de clase selecciona elementos HTML con un atributo de clase específico.

Para seleccionar elementos con una clase específica, escriba un carácter de punto (.), Seguido del nombre de la clase.

Puede usar uno o más selectores de clase por atributo de clase. A diferencia de los selectores de ID, puede usar el mismo selector de clase tantas veces como sea necesario en una sola página. Los selectores de clase también anularán los selectores universal y de elementos.

En este ejemplo, el elemento h1 se alineará a la derecha, medirá 50 px y se mostrará en amarillo.

5. Selectores de ID

Limitaciones:

  • El selector de id utiliza el atributo id de un elemento HTML para seleccionar un elemento específico.
  • ¡La identificación de un elemento es única dentro de una página, por lo que el selector de identificación se usa para seleccionar un elemento único!
  • Para seleccionar un elemento con una identificación específica, escriba un carácter hash (#), seguido de la identificación del elemento.

Así es como se ve un selector de ID:

Así es como se implementa:

Este tipo de selectores generalmente se combinan con una función de JavaScript.

CSS externo

Supongamos que tiene las siguientes etiquetas HTML que usan un archivo CSS externo:

Y estas son sus declaraciones CSS:

Puede agregar cualquier número de declaraciones a cualquier selector disponible.




Buscar