CSS - Cascading Style Sheets
CSS es un lenguaje descriptivo que permite establecer la presentación de un documento HTML.
CSS no es un lenguaje de programación, es un lenguaje descriptivo compuesto por reglas que indican cómo presentar un documento html. Cuando se asocia una hoja de estilo a un documento html, el navegador interpreta tales reglas y las aplica al documento modificando su apariencia.
Reglas
Una regla css se compone de uno o más selectores seguidos de una declaración que consta de una o más parejas de propiedad y valor. Un archivo css puede contener múltiples reglas.
Selectores
Los selectores indican a cuáles elementos del documento se debe aplicar una regla. Una regla puede contener uno o más selectores, separados por coma.
Propiedades
Las propiedades son características visuales que tienen los elementos html. Una declaración puede contener una o más propiedades, cada una con su respectivo valor y separadas por punto y coma.
Tipos de selectores
Selector por etiqueta
Este selector corresponde a los nombres de etiqueta de los elementos html, por ejemplo
p,
a,
h1 o
div. Significa que la regla se aplicará a todos los elementos de ese tipo que aparezcan en el documento. Por ejemplo, si queremos que todos los párrafos tengan determinada alineación o que todos los enlaces tengan determinado color.
Selector por id
Los elementos html pueden tener un atributo llamado id que debe ser único y sirve para identificarlo dentro del documento. El selector debe comenzar con el símbolo # seguido del id del elemento y la regla se aplicará sólo a ese elemento. Es útil para dar estilo a elementos que queremos destacar.
Selector por clase
Los elementos html pueden tener un atributo llamado class, este sirve para agrupar diferentes elementos bajo un mismo identificador. El selector debe comenzar con el símbolo ( . ) seguido del nombre de la clase y la regla se aplicará a todos los elementos que la tengan. En el ejemplo a continuación, tenemos cinco clases, y cada una se aplica a cada vocal en el texto.
Selector por estado
Algunos elementos html pueden tener diferentes estados, un botón puede estar deshabilitado, un enlace puede haber sido ya visitado o sobre un texto podría estar el puntero del ratón. El selector de estado permite aplicar diferentes reglas según el estado de los elementos. Este selector se pone después de otro selector separado por el símbolo : En el ejemplo a continuación cambiamos el color del borde cuando se selecciona uno u otro campo de texto.
Selector por atributo
Los elementos html tienen diversos atributos, es posible aplicar reglas a los elementos según el valor particular de sus atributos. Este selector se indica entre los símbolos [] especificando el nombre y valor del atributo. Puede ir como único selector en la regla o después de otro selector. En el ejemplo aplicamos la regla a todas las imágenes cuyo archivo sea logo.png.
Selector por relación
En un documento html encontramos muchos elementos, unos están dentro de otros, como en el caso de la etiqueta div que vimos anteriormente. Otros aparecen primero o después en relación a los demás. Para seleccionar elementos según su relación con otros se usan los selectores por relación. Revisa los comentarios en el siguiente ejemplo.
Propiedades más comunes
La cantidad de propiedades de los elementos html es amplia, puedes consultar la referencia completa en sitios especializados, a continuación mencionamos sólo algunas para que te hagas a una idea.
Propiedades de formato de texto
- text-align: permite alinear textos a la izquierda, derecha, centrado o justificado.
- font-weight: permite ajustar la importancia (grosor) de la fuente.
- font-size: permite ajustar el tamaño de la fuente.
- font-family: permite elegir la tipografía de un texto.
Propiedades de posición
- top, left, right, bottom: indican respectivamente, la distancia del elemento a los bordes del documento o de los elementos cercanos a este.
- position: indica cómo se calcula la posición de un elemento en el documento, puede ser absoluta cuando se calcula respecto al elemento que lo contiene o relativa cuando se calcula respecto a su posición original.
- float: indica cómo se comporta un elemento si hay espacio libre en el documento, puede ser right o left indicando si el elemento ocupa los espacios libres a la derecha o izquierda respectivamente.
Propiedades de espaciado
- padding: indica el espacio libre entre un elemento y sus elementos internos.
- margin: indica el espacio libre entre un elemento y los elementos externos.
Propiedades de color
- color: indica el color del elemento.
- background-color: indica el color de fondo del elemento.
Efectos
- border-color, border-style, border-width, border-radius: indican si un elemento tiene borde o no y cuáles son sus propiedades.
- box-shadow: aplica un efecto de sombra a un elemento.
Diseño responsivo
Actualmente es posible aplicar diferentes reglas según las características del dispositivo donde se visualice el documento, a esto se le conoce como diseño responsivo. Esto es posible a través de media-queries que son condiciones en las hojas de estilo que al cumplirse permiten aplicar determinadas reglas.Un media-query comienza con el símbolo @ seguido de la palabra media, luego el tipo de dispositivo y luego las condiciones entre paréntesis (). Revisa los comentarios de código en el siguiente ejemplo.
Animaciones
En la actualidad es posible declarar animaciones para los elementos html. Las animaciones comienzan con el símbolo @ seguido de la palabra keyframes luego aparece el nombre de la animación y a continuación los estados de la animación y sus correspondientes propiedades. Debes además asignar la animación en las reglas del elemento a animar. Observa el siguiente ejemplo.
Múltiples reglas se especifican en una hoja de estilo que es un archivo de texto plano con extensión css. Debes asociar la hoja de estilo al documento html usando la etiqueta link.
