Hilo oficial del CSS

Como veo que al parecer aquí no hay un hilo oficial de CSS, pues me ofrezco a abrir un hilo sobre este interesante lenguaje de programación web.

FAQ:

¿QUÉ ES EL CSS?
Son las siglas de "Cascading Stylesheet", es decir hojas de estilo en cascada
¿ES DIFÍCIL APRENDER CSS?
Pues no, es bastante fácil. Incluso más fácil que el HTML. Por ejemplo, para maquetar una web de varias columnas me cuesta menos programar en CSS que en HTML
PARECE INTERESANTE, ¿CÓMO SE PONE EL CÓDIGO CSS?
Bien, hay tres maneras de colocar el código CSS:
La primera es:
[PHP]




[/PHP]

Como bien veréis, en la primera manera colocas el código CSS SIEMPRE dentro de la etiqueta. Lo de type es para especificar qué es lo que vas a poner dentro del Style

Vayamos a la 2º manera y la más común:
[PHP]


[/PHP]

Como veréis esta vez no se utiliza el Style, se utiliza el Link Rel, que es un código del HTML/XHTML hecho para enlazar elementos del exterior. No sólo vale con CSS, sino que también es utilizado para poner un favicon como el que veréis arriba: el favicon de EOL y muchos usos más como enlazar hojas XML para el RSS.

Por fin acabamos la pregunta con la 3º manera y que se está poniendo de moda:
[PHP]

@import url("estilo.css");

[/PHP]
Bien, ahora voy a copiar una explicación porque no sé mucho del import:
El funcionamiento es el mismo que si escribiésemos todo el fichero a importar dentro de las etiquetas de los estilos, con la salvedad de que, si redefinimos dentro del código HTML (entre las etiquetas ) estilos que habían quedado definidos en el archivo externo, los que se aplicarán serán los que hayamos redefinido.

Así, en el ejemplo anterior, aunque hubiésemos definido en estilo.css un color de fondo para la página, el color que prevalecería sería el definido a continuación de la importación: #ffffcc

La diferencia entre este tipo de importación del tipo y la que hemos visto anteriormente:



Es que @import url ("estilo.css") se suele utilizar cuando hay unas pautas básicas en el trabajo con los estilos (que se definen en un archivo a importar) y unos estilos específicos para cada página, que se definen a continuación, dentro del código HTML entre las etiquetas , como es el caso del ejemplo visto anteriormente.
Bueno, con eso quedan explicadas las 3 formas de incluir un archivo CSS.
¿Y CÓMO ES LA SINTAXIS, ES IGUAL QUE EL HTML?
Pues no, la sintaxis del CSS es diferente y mucho más estricta.
Un ejemplo:
body {
background-color: #CC3300;
color: #FFFFFF;
font-family: Helvetica;
}
Bien, ésta es la sintaxis general de un archivo CSS. El background-color es un comando del CSS que permite colocar el color de fondo dentro de la web que esté entre las etiquetas Body.
El color es simplemente el color del texto y la font-family es la fuente del texto.
Pero no sólo se puede aplicar a etiquetas HTML, vamos a ver otras dos maneras:
.tuclase {
opacity: 0.5;
border: 1px solid #000;
}
Ésta es la etiqueta correspondiente a todo lo que esté dentro de la función class de una etiqueta HTML
Un ejemplo:

Bien, hemos insertado la clase. El CSS de arriba permite configurar todo lo que esté dentro. En nuestro caso, el div es semitransparente, es decir puedes ver el color de fondo ó otros elementos a través de él. Y tiene un borde de un píxel sólido con color negro (#000). Además esto se puede aplicar cuando quieras, ésta es la principal diferencia con la otra manera que voy a explicar más abajo:

#tuclase {
background-color: #cccccc;
border: 1px dotted #000;
}
Bueno, aquí va la última manera. Las dos diferencias son ésas:
En vez de class se utiliza el atributo id del HTML. Ejemplo:

. La otra diferencia es que es un atributo único, es decir sólo se puede aplicar una vez en todo el documento HTML.
Como habréis podido ver, en el atributo class se utiliza el punto en el CSS correspondiente al atributo. En cambio, en el atributo ID se utiliza la alhomadilla.

Antes de terminar os diré un aviso importante. Si se os olvida el punto o la alhomadilla, el CSS simplemente no funciona. Lo digo porque me ha pasado en la hora de la práctica. Cuando no se pone ningún punto ni alhomadilla es para configurar una etiqueta HTML como es el caso:
i {
....
}
Aquí configuramos la cursiva ^^U

Oh, muchas gracias
No es para tanto, el curso no está completo. Sólo he explicado algunas cosas básicas del CSS, ahora voy a poner algunos links de interés sobre CSS:

Links de interés sobre CSS escribió:http://www.cssya.com.ar/ Una web en español que es útil pues te pone algunos ejemplos bastantes buenos del CSS

http://www.glish.com/css/ Una web en inglés que te explica algunos ejemplos de posicionamiento de divs en el CSS

http://css.maxdesign.com.au/floatutorial/index.htm Un tutorial buenísimo sobre floats en el CSS. Muy importante para aprender a diseñar en el CSS. Eso sí, está en maravilloso inglés

http://www.w3schools.com/css/default.asp Un tutorial sobre CSS en inglés que dicen que está bastante bueno aunque no me he animado a probarlo.

http://www.cssplay.co.uk/index.html Otra web en inglés, esta vez de experimientos interesantes sobre CSS. Podréis ver algunos efectos muy buenos en CSS, hasta hay juegos programados EXCLUSIVAMENTE en CSS

Bueno, ya he terminado de escribir el tocho. Lo siento por mi forma de explicar los div, pero espero que se os quede algo .

¡¡Ah, se me olvidaba decir algunos consejos al programar sobre CSS!!

Cuando estéis dentro del CSS nunca debéis poner comillas porque esto no es el HTML.
Todo lo que vayáis a programar en CSS debe llevar esta estructura:
nombre {
tu código
}
ó
.nombre {
tu código
}
ó
#nombre {
tu código
}
Cuando programéis en CSS al final de cada etiqueta SIEMPRE DEBÉIS PONER PUNTO Y COMA:

Ej:
xxxx {
opacity: 0.5;
}

Y lo último: intentad evitar los espacios. En el apartado de la derecha funcionaría pero en este caso:
xxxx {
flo at: left;
}
NO FUNCIONARÍA

Bueno, he terminado. Espero que no se me olvide nada ^^U. Ojalá os sea de ayuda esta aportación, me ha tardado casi una hora escribirla