Bati2 de chocolate

A) ¿Qué es el CSS?

El CSS (Cascading Style Sheets o en español hojas de estilo en cascada) es un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML. El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirá de estándar para los agentes de usuario o navegadores.

La idea detrás del CSS es que se pueda separar la estructura del documento de su presentación, o sea se separa el contenido del estilo de este. Por lo que se puede cambiar la apariencia de un documento de una manera relativamente fácil sin afectar el contenido, lo cual es útil para cambiar el estilo y el formato de múltiples páginas Web al mismo tiempo.

Aquí tienen un par de ejemplos Ejemplo 1, Ejemplo 2


B) Familiarizarse en donde se ingresa el código CSS del usuario

Primero hay que saber donde se ingresa el código CSS del usuario, o sea, ¿Dónde esta la hoja CSS del usuario?, ya que allí vamos a trabajar la mayor parte del tiempo y vamos a hacer los cambios. Aunque por ahora sólo la visitaremos para saber en donde se encuentra.

La respuesta es sencilla, hay que ir a tu pagina (Obviamente hay que ingresar el usuario y contraseña), una vez en tu pagina hay que ir a las preferencias (“Preferences”) una vez allí en el menú hay que ir al “Web Page Layout” y finalmente ir a la hoja de estilo del usuario (“custom style sheet”), es un vinculo que aparece arriba de los temas.

Allí aparece un cuadro con el titulo “Enter CSS:” y a continuación un en donde se ingresa el código del CSS. Más abajo hay tres opciones la primera es para usar en conjunto el CSS del tema actual con el CSS personalizado del usuario (la opción es: “Use my custom style sheet together with the current theme”), esta es la opción que vamos a usar para realizar los cambios a la página.

Aunque no las usemos igual, les voy a explicar las otras 2, con la segunda “Only use my custom style sheet” lo que se hace es solo cargar el CSS personalizado del usuario sin el del tema que se este utilizando y 2 CSS que son account_white.css (solo se carga cuando ingresa el usuario y contiene estilos para la página de account) y el common.css (que contiene estilos usados para los ratings, spotlights, login, etc.). Por ultimo la opción “Do not use my custom style sheet” sirve para usar sólo el CSS del tema elegido sin cargar el CSS del ususario.


C) Sobre el tipo de letras y colores

Cuando se usen letras, traten de usar letras comunes, como Arial, Times New Roman, Verdana no sacan nada con usar una letra que solo la tengas tú y tu amigo, ya que el resto no la vera. En cuanto al texto se puede usar norma l(normal), negrita (bold), cursiva o itálica (italic) y oblicua (oblique) aunque la mayoria de las letras no diferencias la oblicua de la cursiva.

Cuando usen un color, si bien se puede usar los nombres (ejemplo: white, black, green, red, etc. ) no todos los browsers (navegadores) reconocen los nombres de colores, por lo que mejor asegúrense de usar la forma hexadecimal (Hex para los amigos) de este color que es de la forma # RRGGBB por ejemplo (véase esta página), a continuación algunos colores:

Blanco : codigo color #FFFFFF
Negro: codigo color #000000
Rojo : codigo color #FF0000
Verde : codigo color #00FF00
Azul : codigo color #0000FF
Amarillo : codigo color #FFFF00
Magenta : codigo color #FF00FF
Cian : codigo color #00FFFF

Pueden visitar la siguiente página para ver más colores
Y en esta página se puede generar el código hex de distintos colores

Nota: Se puede abreviar los colores de la forma hex como por ejemplo #666699 a #669 o #FFFFFF a #FFF

D) Sobre la hojas de estilo (The Stylesheet) de los temas.

Esta compuesto por el common.css (la misma para cada tema) y el main.css, el cual varia en cada tema y se encuentra en my.opera.com/community/css/users/NUMERO DEL TEMA/main.css, así la del tema 1 es http://my.opera.com/community/css/users/1/main.css, la del tema 2 es http://my.opera.com/community/css/users/2/main.css, la del tema 3 es http://my.opera.com/community/css/users/3/main.css y así sucesivamente. Es bueno que le den una mirada antes de comenzar

Los ejemplos que vendrán mas adelante se refieren en su mayoría al tema por defecto (tema 1) por lo que trabajan en un 100% en ese tema, pero por supuesto que se pueden aplicar a los demás temas con unos pocos cambios.

E) Sobre la Guia.

Cuando este citando una parte del CSS original del tema 
aparecerá en un cuadro como este.

En cambio si estoy modificando el código original (como es el caso de los ejemplos) aparecerá el texto de esta manera y probablemente se destacara con colores los cambios hechos

Hay un álbum de fotos (Este) en donde están las imágenes usadas en los ejemplos y otro con las capturas de como se ven los ejemplos(Este).


Fin de las Informaciones previas

---

Guía:
Previo: Informaciones previas
Paso 1: Elementos del cuerpo (Body)
Body, Font-Size, Font-Family, Color
Paso 2: Elementos del titulo
Title, Subtitle, Header picture, Menu background, etc.
Paso 3: Elementos del Blog
Post title, Sticky post, Post date
Paso 4: Barra lateral (Sidebar)
Sidebar, Album slideshow, Calendar, etc.
Paso 5: Otras cosas de My.Opera
Profile, Friends, Links, etc.
Paso 6: Las ultimas cosas que nos quedan
El fondo de la pagina, el menú superior y el vinculo de “Opera community”, los vínculos de cada página, comentarios, etc.
Las ultimas consideraciones (y despedida)

---

Algunos Vinculos interesantes:

Colores seguros en HTML
color schemer(Para ver y generar colores y su código, En Inglés)
Introducción al CSS
CSS in Action (En Inglés)
¡CSS en acción! y tutorial
Manual de Hojas de Estilo CSS
Manual de CSS, hojas de estilo
Definición del estándar CSS en W3C.org (En Inglés)
Traducción especificación CSS1 al castellano
Traducción especificación CSS2 al castellano y los cambios del CSS2 con respecto a CSS1
Servicio de Validación de CSS
Pimp My Blog: Reloaded! (En Inglés)
Redesigning My.Opera space tutorial(En Inglés)