Introducción a CSS.
CSS no es parte de HTML5 y nunca lo fue. Este lenguaje es, de hecho, un complemento desarrollado para superar 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. En consecuencia, CSS pronto fue adoptado como la forma de separar la estructura de la presentación.
La versión 3 de CSS sigue el mismo camino, pero esta vez con un mayor compromiso.
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 y esta es la razón por la que cada vez que mencionamos HTML5 también estamos haciendo referencia a CSS3
En
este momento las nuevas características incorporadas en CSS3 están
siendo implementadas e incluidas junto al resto de la especificación
en navegadores compatibles con HTML5.
Conceptos
básicos: CSS
es un lenguaje que trabaja junto con HTML para proveer estilos
visuales a los elementos del documento, como tamaño, color, fondo,
bordes, etc…
IMPORTANTE: En este momento las nuevas incorporaciones de CSS3 están siendo implementadas en las últimas versiones de los navegadores más populares, pero algunas de ellas se encuentran aún en estado experimental.
Aplicar CSS a nuestro HTML
- 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>. El archivo HTML se parecerá a lo siguiente:
<!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>
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. Así, el HTML se escribirá:
<!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 (puede que estemos trabajando con un gestor de contenido que no permite modificar el archivo CSS directamente), pero no es tan eficiente como el CSS externo — en una web, el CSS estará repetido en todas las páginas y si se necesita hacer cambios, estos deberán ser hechos en múltiples sitios diferentes.
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>
</head>
<body>
<h1 style=”color: blue;background-color: yellow;border: 1px solid black;”>Hello World!</h1>
<p style=”color:red;”>This is my first CSS example</p>
</body>
</html>
Por favor, no lo hagamos a menos que sea estrictamente necesario. Su mantenimiento es verdaderamente complicado (podríamos tener que actualizar la misma información muchas veces en cada documento), además de mezclar la información de estilo con la información estructural del HTML, haciendo el CSS difícil de leer y de entender. Manteniendo los distintos tipos de código separados y puros, facilitará la tarea a aquellos que vayan a trabajar posteriormente en el código.
Elementos básicos en CSS
Los elementos, se ven definidos
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.
Los
elementos básicos CSS: reglas, selectores y propiedades
El concepto fundamental de las hojas CSS son las reglas.
Con las reglas podemos definir cosas como éstas:
- “El título principal de cada página (<h1>) debe estar centrado, ser de color gris oscuro y usar la fuente “Montserrat” con un tamaño de 40 pixeles”
- “Los subtítulos de cada página de nivel dos (<h2>) deben estar alineados a la izquierda, color negro ligeramente más claro y usar también el tipo de letra “Montserrat”, pero con un tamaño de 32 pixeles.”
- “Las imágenes dentro de la columna principal deben expandirse siempre al ancho máximo de dicha columna.”
Si te fijas, es lo mismo que hacemos de manera visual con cualquier editor de texto, pero expresado de una manera literal y en un lenguaje que no es nuestro lenguaje natural, sino un lenguaje especial.
Estas reglas de arriba concretamente traducidas al lenguaje CSS real tendrían este aspecto:
Las reglas
En primer lugar fíjate cómo esta hoja de estilos se divide en tres bloques diferenciados, envueltos en llaves, “{…}”.
Los selectores
Para especificar a qué partes de la página HTML se aplica cada regla en cuestión, le precede un selector. Este selector especifica el ámbito de aplicación de la regla, es decir, a qué partes de la página aplica.
Si nos imaginamos un documento HTML como sus elementos como un árbol (recuerda que están organizados de manera jerárquica), este ámbito de aplicación van a ser una o varias ramas de ese árbol.
En las dos primeras reglas (selectores “h1” y “h2”) el ámbito de aplicación es muy amplio porque los selectores son elementos HTML. Es decir, estamos diciendo que la primera regla se aplique a todos los elementos <h1> y que la segunda se aplique a todos elementos <h2>.
El último selector hila un poco más fino: éste nos está diciendo que la tercera regla se aplica solamente a elementos <img> que sean hijos de un elemento <div>. Esto se hace con la posición de los elementos, es decir, al poner “img” a la derecha de “div” estamos diciendo que img tiene que tener un <div> como padre.
Pero, además, con el sufijo de “.contenido” estamos diciendo que ese “div” no puede ser cualquier div, sino que, a su vez, este <div> tiene que pertenecer a la clase “contenido”. Esto nos es útil para diferenciar distintos bloques <div> y en el ejemplo lo usaremos para diferenciar la columna principal de contenido de la columna de la barra lateral.
Las propiedades
Por último están las propiedades, esto es lo que vemos encerrado dentro de las llaves de una regla.
Las reglas siguen la sintaxis de [propiedad]:[valor].
Por ejemplo:
font-size: 40px;
Aquí estamos diciendo que a los elementos que entran dentro del ámbito de la regla se les aplique un tamaño de letra de 40 pixeles. Los elementos deben ser por tanto elementos tipo texto, es decir, elementos como <h1>, <h2>, <p>, etc. Pero aunque entre algún elemento dentro del ámbito de la regla que no sea tipo texto, no pasa nada. En ese caso, se ignora esa propiedad concreta y listo.
Pagina de Ariel Adrian Amezcua León. 