Que es CSS, y con que se come ?

 

  Que es CSS?

Siglas de "Cascading Style Sheets" (Hojas de Estilo en Cascada), es una tecnología desarrollada con el fin de separar la presentación de la estructura del HTML, es un conjunto de reglas por las que podemos dar estilo a cualquier elemento de nuestro HTML.

Funciona aplicando estilo a los elementos HTML, entre las que incluyen, tipos de letra, color de fondo, tamaño, color del texto, márgenes, etc... Quedando de esta manera todo 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, se esta haciendo cada vez mas importante entre los diseñadores y desarrolladores, gracias a la facilidad de uso y a los óptimos y flexibles resultados.

CSS tiene 3 elementos principales que son:

1.  Atributos: Son los que usaremos para indicar cual estilo queremos modificar, por ejemplo: si queremos cambiar el color de la letra, usamos el atributo "font-color", si es el fondo, el atributo "background", etc.
2.   Valores: Se utiliza para definir como queremos  modificar el atributo, o la propiedad que le daremos.
     Por ejemplo, si queremos que un tipo de letra sea blanca, usamos el atributo "font" y el valor  "white".
3.   Selectores: Se utilizan  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 del documento.

Hay tres tipos de selectores:

1.  Los selectores de etiquetas HTML, se utilizan escribiendo el nombre de la etiqueta a la que le aplicaremos el estilo.
2.     Los selectores de identificador, se usan para aplicar estilos solo a las etiquetas identificadas con un id: Ej:
   .
3.     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, separándolos con un espacio o un salto de línea. En CSS se deben escribir los atributos y valores con minúsculas y los comentarios se encierran con "/*" para abrir y "*/" para cerrar. A continuación les mostrare ejemplos de esto:

 

/*CSS sobre selector de etiquetas*/

body {
       font-family: arial;
       font-size: 12px;
       color: black;
       background-color: #cccccc;
}

 

/*CSS sobre selector de identificador:

En este caso, se lo aplicamos a la etiqueta con solo colocarle el identificador, como en este ejemplo:

 

Aqui el contenido
*/

#header {
       background-color: #ff0000;
       color: #ffffff;
       font-size: 26px;
}


/*CSS sobre selector de clase.

En los selectores de clase, usamos el atributo "class" en las etiquetas HTML para darles el estilo. Ejemplo:

 -- 


Aqui el contenido
*/

.mi_clase {
       margin: 5px;
       height: 100px;
       width: 200px;
}

Aqui les dejo un libro que encontre de CSS el cual es muy bueno:
introduccion_css.pdf 

Tambien este tutorial online: http://es.html.net/tutorials/css/