Es un lenguaje desarrollado para seperar las limitaciones y reducir la complejidad de HTML.
Al comienzo, atributos dentro de las etiquetas HTML proveían estilos esenciales para cada elemento, pero a medida que el lenguaje evolucionó, la escritura de códigos se volvió más compleja y HTML por sí mismo no pudo más satisfacer las demandas de diseñadores, Desde entonces, CSS ha crecido y ganado importancia.
La especificación de HTML5 fue desarrollada considerando CSS a cargo del diseño. Debido a esta consideración, la integración entre HTML y CSS es ahora vital para el desarrollo web .
Las características incorporadas en CSS3 están siendo implementadas e incluidas junto al resto de la especificación en navegadores compatibles con HTML5.
¿PARA QUÉ SIRVE CSS?
CSS es un lenguaje que sirve para dotar de presentación y aspecto, de “estilo”, a páginas web (documentos HTML). CSS no es un lenguaje de programación. Podríamos decir que es un lenguaje que suele aparecer relacionado o próximo a un lenguaje de programación o que suele colaborar con un lenguaje de programación, pero no es un lenguaje de programación propiamente dicho.
CSS es un lenguaje que apareció para hacer más fáciles y con mejor aspecto los desarrollos web. Un desarrollo web comprende múltiples áreas de conocimiento.
¿Cómo funciona CSS?
Permite crear páginas web con un diseño agradable.
Cuando un navegador muestra un documento, debe combinar el contenido del documento con la información de su estilo. Se procesa el documento en dos etapas:
- El navegador convierte el lenguaje de marcado (
markup) y el CSS en el DOM(Document Object Model). El DOM representa el documento en la memoria del ordenador. Combina el contenido del documento con su estilo. - El navegador muestra el contenido de la DOM.
Un lenguaje de marcado utiliza elementospara definir la estructura del documento.
Elementos básicos en CSS
- Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de «selectores», un símbolo de «llave de apertura» (
{), otra parte denominada «declaración» y por último, un símbolo de «llave de cierre» (}). - Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.
- Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades CSS.
- Propiedad: característica que se modifica en el elemento seleccionado, como por ejemplo su tamaño de letra, su color de fondo, etc.
- Valor: establece el nuevo valor de la característica modificada en el elemento.
Aplicar CSS a nuestro HTML
1. CSS externo
Un CSS externo es cuando el CSS se encuentra en un archivo separado con una extensión. Css, y lo referenciamos desde HTML con un elemento <link>.
<!DOCTYPE html><html><head><meta charset="utf-8"><title>My CSS experiment</title><link rel="stylesheet" href="style.css"></head><body><h1>Hello World!</h1><p>This is my first CSS example</p></body></html>
Y el archivo CSS:h1 {color: blue;background-color: yellow;border: 1px solid black;}p {color: red;}
Este método es sin duda el mejor, pues podemos usar un único documento de estilos en múltiples documentos y, si queremos cambiarlo, solo necesitaremos actualizar el CSS desde un sitio.
2. CSS interno
En un CSS interno no tenemos un CSS externo, sino que lo ubicamos dentro de un elemento <style>, en el apartado HTML head.
<!DOCTYPE html><html><head><meta charset="utf-8"><title>My CSS experiment</title><style>h1 {color: blue;background-color: yellow;border: 1px solid black;}p {color: red;}</style></head><body><h1>Hello World!</h1><p>This is my first CSS example</p></body></html>
Este método puede ser práctico en algunas ocasiones.
3. Estilos en linea
Los estilos en una línea son declaraciones CSS que afectan solo a un elemento que está contenido dentro de un atributo style:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>My CSS experiment</title><link rel="stylesheet" href="style.css"></head><body><h1>Hello World!</h1><p>This is my first CSS example</p></body></html>
Su mantenimiento es verdaderamente complicado.
Moda 