Una buena manera de entender (para los que empiezan) cómo se estructura un código CSS, es sabiendo los nombre y las partes del mismo.
Este post es más bien teórico (y por ser teórico, va a ser cortito), ya que vamos a explicar cómo se compone una línea de código CSS y los nombres de las partes.
Selector: es allí donde vamos a poner a una etiqueta, clase (ejemplo, .header) o una ID (ejemplo, #header) para poder darle estilo con las otras partes que vamos mencionando.
En el ejemplo vamos a darle estilo a la etiqueta <h1>.
Propiedades: es la función del estilo. Aquí debemos tipear la propiedad para dar estilo al Selector.
En el ejemplo que vemos en la imagen, font-family significa que al selector le va a dar la fuente arial, este último es el valor.
Valor: es el contenido de la propiedad y aquí es el lugar más personalizable ya que es aquí donde a las porpiedades se le puede dar color, fuente, decoración de texto, etcétera.
Declaración: es el conjunto de todo lo que abarcan las llaves.
Entonces, la fórmula sería:
Selector+Llave abierta+propiedad+valor de propiedad+llave cerrada
Un poco más...
La fórmula que dimos, es lo básico. Es decir, la fórmula que dimos es sólo para asignar la modificación con una sola propiedad.
Para asignar dos propiedades, debemos asignar un punto y coma (;) luego de la primer propiedad. De esta manera la fórmula sería la siguiente:
Selector+Llave abierta+Propiedad+Dos puntos (:)+valor de propiedad+punto y coma(;)+2ºPropiedad+Dos puntos (:)+Valor de 2º Propiedad+Llave cerrada
Ejemplo:
H1{font-family:arial; text-decoration: underline}
Puedes asignar muchas propiedades y sus respectivos valores, siempre que postpongan un punto y coma antes de tipear uno nuevo.
