CSS
CSS
Siglas de "Cascading Style Sheets" (Hojas de Estilo en Cascada), es una tecnología desarrollada con el fin de separar la presentacion de la estructura del HTML. Funciona aplicando reglas de estilo a los elementos HTML, entre las que incluyen, tamaño, color de fondo, color del texto, posicion de los elementos, margenes, tipos de letra, etc... quedando de esta manera toda lo que tiene que ver con la parte gráfica de la web, separada completamente de la estructura del HTML.
Este lenguaje desarrollado por la W3C, ha venido haciendose cada vez mas importante entre los diseñadores, gracias a la facilidad de uso y a los optimos y flexibles resultados.
Aprender a conocer CSS nos dará como resultado un mejor flujo de trabajo, mayor organización de nuestro codigo, menos peso en las paginas, y mas flexibilidad a los cambios. Ademas una vez familiarizados con sus capacidades, nos daremos cuenta de que es mas fácil y rápido diseñar con CSS que de la manera antigua.
Bien, empecemos por el principio. Aqui intentare enseñar como hacer documentos validos y que sean bien interpretados por la mayoría de los navegadores actuales. Lograremos esto conociendo los tres principales elementos en el desarrollo de CSS:
Atributos
Valores
Selectores
Atributos
Son las palabras que usaremos para indicar cual estilo queremos modificar, por ejemplo, si queremos cambiar el tipo de letra, usamos el atributo "font", si es el fondo, el atributo "background", etc.
Valores
Son para definir como vamos a modificar el atributo, o la propiedad que le daremos. Por ejemplo, si queremos que un tipo de letra sea rojo, usamos el atributo "font" y el valor "red".
Selectores
Se usan para definir sobre cuales elementos HTML vamos a aplicar los estilos, si queremos definir un estilo para toda la pagina, debemos usar el selector "body" que se refiere a la etiqueta <body> del documento HTML.
Hay tres tipos de selectores:
- Los selectores de etiquetas HTML, se utilizan escribiendo el nombre de la etiqueta a la que le aplicaremos el estilo.
- Los selectores de identificador, se usan para aplicar estilos solo a las etiquetas identificadas con un nombre.
- El tercer selector es el de clase, se escribe en el documento CSS comenzando con un punto "." seguido del nombre que le queramos poner a la clase, de esta forma:
.mi_clase.
La sintaxis:
Es muy simple, primero se coloca el selector, luego se abre una llave "{" y se empiezan a colocar los atributos, seguidos de dos puntos ":" y luego el valor seguido de punto y coma ";", al final de todo se cierra el estilo para el selector con el cierre de llave "}". Se pueden definir tantos atributos con sus respectivos valores como se desee, separandolos con un espacio o un salto de linea. En CSS se deben escribir los atributos y valores con minusculas y los comentarios se encierran con "/*" para abrir y "*/" para cerrar, como veremos en el siguiente ejemplo:
/*CSS sobre selector de etiquetas*/
body {
font-family: arial;
font-size: 12px;
color: black;
background-color: #cccccc;
}
Este tipode selector no requiere de aplicación en el documento HTML, las etiquetas a las que se les defina un estilo de esta forma automáticamente heredarán los estilos.
/*CSS sobre selector de identificador*/
#header {
background-color: #ff0000;
color: #ffffff;
font-size: 26px;
}
En este caso, se lo aplicamos a la etiqueta con solo colocarle el identificador, como en este ejemplo:
<div id="header">Aqui el contenido</div>
/*CSS sobre selector de clase*/
.mi_clase {
margin: 5px;
height: 100px;
width: 200px;
}
En los selectores de clase, usamos el atributo "class" en las etiquetas HTML para darles el estilo. Ejemplo:
<div class="mi_clase">Aqui el contenido</div>
Ademas de esto, existen tres formas de aplicar estilos CSS a una pagina, la que recomiendo en primer lugar, haciendo un archivo de texto plano guardado como archivo.css, separado del archivo HTML, y vinculando la hoja HTML a el. Esto se hace colocando en la sección head de la página:
<link href="archivo.css" rel="stylesheet" type="text/css">
Para mi esta forma es la mas recomendable porque asi se puede vincular el archivo.css a todas las páginas del sitio, es mucho mas liviano al ver la pagina y ademas a la hora de modificar algo se hace solo una vez.
La segunda forma es aplicando los estilos directamente en la sección <head> del documento HTML. Se hace de la siguiente forma
<head>
<title>Pagina</title>
<style type="text/css">
<!--
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#333333;
}
-->
</style>
</head>
Es buena idea colocarlos de esta forma si son estilos exclusivos para la pagina a la que se le aplica.
El tercer método no lo recomiendo, aunque algunas veces puede ser necesario. Consiste en aplicar el estilo directamente sobre el elemento HTML, de esta forma:
<table style="background-color:#333333; padding:2px; width:300px; height;100px;></table>
Como puede verse en algunos casos, los atributos pueden ser compuestos, como el atributo "font-family" o "background-color", puede llevar adicionalmente caracteristicas mas especificas, que van separadas por un guion "-" como vimos en los ejemplos.
Los valores tambien pueden ser de diferentes tipos, en los de medida, se pueden usar pixeles "px" centimetros "cm" o relativos como "em", en los colores se puede usar la notacion hexadecimal (#FF3300) o directamente el nombre del color en ingles.
De esta forma podemos aplicar estilos a todos y cada uno de los elementos HTML que constituyen una página web, y poco a poco ir separando el contenido de la presentación, ademas de lograr en un documento completamente válido cosas que solo el poder de CSS puede lograr, como cambiar completamente la apariencia de una página sin tocar el archivo HTML.
Unicamente con el uso, se va uno acostumbrando a lo que se puede hacer con CSS, al principio, seguramente , les pasará (como a mí) que solo lo usan para dar formato a los textos, tablas etc, pero luego uno va conociendo como trabaja y va añadiendo elementos a los archivos CSS.
El punto ideal sera cuando logremos separar completamente el diseño del contenido, dominando las técnicas de posicionamiento con CSS, y eliminando el uso de tablas para diagramar el contenido.
En un proximo tutorial, analizaremos las técnicas de posicionamiento o CSS-P, el valor "float", "position" y las listas <ul> y <li>, como funcionan las medidas, y la forma correcta de formatear las etiquetas, pero no se preocupen mucho, ya trabajo en el.
