Avanzada CSS

¿Cómo se crea en realidad una hoja de estilo?

Hay tres partes de una hoja de estilos:

  • Selector

el elemento o categoría y título de id a la que el estilo se aplicará

  • La propiedad

la información sobre cómo dar formato a la selección

  • Valor

el estilo concreto que debe aplicarse a la propiedad en el selector

Por ejemplo, si deseamos que todos los párrafos usen misma fuente, se utiliza el siguiente CSS:

p {
font-family : arial;
}

  • P

el selector. Todo el texto en el <p> / p> se ve afectado por este estilo

  • Font-family

la propiedad. Todos los textos tendrán la font-family cambiada

  • Arial

el valor. La fuente de la familia será “Arial”

Como se puede ver arriba, el formato de una declaración de estilo es:

selector {
property : value ;
property2 : value ;
}

Agrupe sus estilos para cada selector, juntos en llaves

{}

Luego separar la propiedad de los valores por dos puntos

:

Por último, al final de cada declaración de estilo con un punto y coma

;

(Nota: el punto y coma sólo se requiere para separar múltiples estilos, pero es una buena idea incluirlo en todo momento. A continuación podemos agregar más estilos.)

La selección es por lo general una etiqueta HTML, pero también podemos crear identificadores y clases. Estos tipos de selectores se utilizan cuando no se está seguro del estilo que vamos a utilizar. Por ejemplo, puede que quiera una clase de estilo  para “resaltar” el color de fondo a amarillo. No importará qué etiqueta se puso de relieve.

.highlight {
background-color : #ffff00;
}

Entonces, para usar ese estilo, establezeremos la clase en las etiquetas de HTML:

<h2> Este título se pone en relieve </ h2>

O simplemente podemos usar el

<span> </ span>

etiqueta para definir el texto exacto que se destacó.

Dejar un comentario

*