Tema 1Formato de CSS

El formato de un archivo CSS es bastante simple: está compuesto por selectores y declaraciones. El selector se utiliza para identificar el elemento HTML al que se aplica un estilo. El selector puede ser el nombre del tipo de elemento como "body". Después del selector se abren y cierran llaves "{ }". Dentro de las llaves, se encierran las declaraciones, que se componen del nombre de la propiedad que se quiere modificar y el valor que se asigna a la propiedad. Cada declaración termina con un ";":

Algunos ejemplos de las propiedades que puedes modificar son color, background y font-size las cuales modifican el color del contenido, el color de fondo, y el tamaño de letra respectivamente. También podemos aplicar el mismo estilo a diferentes elementos. Para esto solo se necesita colocar los selectores de todos los elementos que quieres modificar (en lugar de uno solo) separados por comas.

Algunos de los siguientes ejemplos los mostraremos en Codepen, una herramienta que nos permite mostrar código HTML, CSS y JavaScript de páginas de ejemplo. Haz clic en las diferentes pestañas ("HTML" y "CSS") para ver los diferentes tipos de código de la página y su resultado.

See the Pen yLaggPP by Luis Yerik Arambula (@luis-yerik-arambula) on CodePen.

CodePen. Software utilizado para el desarrollo de ejercicio dinámico de programación. In CodePen. https://codepen.io

Para cada propiedad existe algún dominio de valores válidos. Para background-color sus valores deben ser colores o códigos de colores ya sea a partir de un nombre, códigos hexadecimales o usando el código RGB del color. Para font-size debe ser algún tamaño en una unidad válida. En la página de ejemplo se utilizaron pixeles, que se utilizan colocando px después de la cantidad. Más adelante veremos otras formas de designar valores para la propiedad de color.

Si colocamos un valor inválido o fuera de los límites para una propiedad, el elemento seleccionado no se modificará.