Taller de Adobe Dreamweaver: ¡Más estilos CSS!

Hola muchachos y muchachas ¿cómo están? ¡Me alegro! (espero que hayan respondido “bieeeen”).
Ya estaba extrañándolos. No sé si se habrán dado cuenta, pero la clase pasada, fue una división de la clase de la otra semana anterior, así que la semana pasada no escribí el artículo literalmente.

Pero bueno, ya volví y con ¡buenas noticias! Conseguimos espacio para poner una miniclase guía sobre CSS. No vamos a lograr avanzar profundamente en este tema, porque CSS daría para un taller entero. Si bien no es muy difícil, hay muchos tips y ayudas que sólo podría dar una persona con experiencia en el tema.

Estilos CSS

Para encarar este tema vamos a poner un par de ejemplos, y de ahí iremos viendo cómo funcionan los estilos con CSS, de paso pueden darse una idea sobre cómo se puede ir insertándolo dentro de un código HTML.

Vamos a un ejemplo similar al de las clases pasadas, el div de la “nota uno”.

Armemos un código de cómo podría ser un div de una nota X, para tomar de ejemplo:

<div>

<h2>Articulo de explicacion: manejo de CSS</h2>

<p>El CSS no es muy dificil de aprender, pero requiere

paciencia a la hora de usarlo.</p>

<h2>Articulos relacionados: </h2>

<p>Dw/html taller elwebmaster.com</p>

<p>w3c y maquetado correcto del html</p>

</div>

Bueno, aquí tendríamos un maquetado de una nota (cortita por cierto jeje), con un pie de página que contendría artículos relacionados.

Bien, el problema aquí es que los artículos relacionados tendrían el mismo estilo que la nota en sí.

Si recuerdan de la clase pasada, nosotros armamos unos estilos en una clase “pieNota” que nos daba algunos parámetros para nuestro div.

El tema es que en esa clase, .pieNota (recuerden que el punto referenciaba a una clase), afectaba a todos los h2 y todos los p (relean las dos clases anteriores si tienen dudas).
Por lo tanto, seguiríamos teniendo el mismo problema, todos los p y los h2 seguirían siendo iguales.

Hagamos un corte acá y miremos otro código, para ver cómo se podría maquetar. No se asusten si ven cosas que no entienden, se van a explicar más abajo :p

<div id="nota-uno">

<h2>Articulo de explicacion: manejo de CSS</h2>

<p>El CSS no es muy dificil de aprender,
   pero requiere paciencia a la hora de usarlo.</p>

<div class="pieNota">

<h2>Articulos relacionados: </h2>

<p>Dw/html taller elwebmaster.com</p>

<p>w3c y maquetado correcto del html</p>

</div>

</div>

Bien ¿qué tenemos acá?

Vemos que aparece una nueva etiqueta “id”.

La etiqueta “id” es otra manera de referenciar a un estilo, al igual que la etiqueta “class”.
Ésta, en vez de con un “.” se referencia con un “#”.

Una aclaración importante, las “id” a diferencia de las “class” solo pueden existir UNA SOLA VEZ en todo el documento HTML.

Es decir, podemos tener muchas referencias a .pieNota, pero solo una etiqueta puede ser #nota-uno.

Para este caso, no creo que podamos tener más de una nota número uno, jeje.

Volviendo a los estilos

De esta manera, podemos marcar un estilo general para #nota-uno y luego a los artículos relacionados, cambiarles el estilo con .pieNota.

Entonces nuestros estilos quedarían así:

<style type="text/css" media="screen">

#nota-uno h2, p {

color: red;

font-size: 16px;

}

#nota-uno .pieNota h2, p {

color:yellow;

font-size: 12px;

}

</style>

De esta manera, nuestra caja con la nota anterior toma, para toda la caja (div id=”nota-uno”), los h2 y los p van a estar en letra roja y con un tamaño de 16 píxeles.
Pero, para la clase .pieNota dentro de la id #nota-uno, los h2 y los p van a tener la letra color amarilla y el tamaño de 12 píxeles.

Ahora, si están bien “chispitas” y siguen todas las explicaciones sin trabarse en ningún lado, podrán preguntarse:
“Por qué es necesario poner en los estilos, a .pieNota dentro de #nota-uno (#nota-uno .pieNota) y no poner a .pieNota solo como un elemento individual“.

Bueno, la respuesta sería esta:
De esta manera podemos tener varios tipos de .pieNota, uno para cada lugar del sitio en que este ubicado.

Entonces podríamos tener en nuestro HTML varias clases .pieNota, y dependiendo de la “id” en la que se encuentren actuarían diferente.
De esta manera nuestro código queda bien maquetado y podemos ordenar semánticamente nuestro sitio.
Piensen que para cada cosa que tenga un titulo podríamos tener la clase .titulo y para cada pie podríamos tener la clase .pie, y así dependiendo en qué id (única) está, tendría un estilo diferente.

Nuestro sitio quedará así resumido a un par de divs con contenido, y a otro par de ids, que van a compartir clases.

Ya van a ver cuando maqueten un sitio ustedes, si siguen los consejos y los temas que vamos viendo día a día acá, que simple y fácil de entender les va a quedar el código, y cuando lo comparen con cosas que hayan hecho antes, les va a causar gracia (o pena :P).

Bueno, no tengo mucho más espacio para seguir escribiendo por hoy, pero en las próximas clases trataré de “ir mechando” algo de CSS a medida que explico los siguientes temas.

No duden en preguntar vía comentario cualquier problema que puedan tener, así se sacan las dudas e inclusive puedan haber otros usuarios que los ayuden. Y nos ayudamos entre todos, jeje.

Conclusión

Si bien CSS da para mucho más, esta clase pretendió ser una guía de su funcionamiento.
Faltaron muchas cosas que me hubiesen gustado tocar, pero por cuestiones de espacio no se puede (no quiero tener una clase cortada de nuevo).
Los espero la semana que viene con más taller para todos.
Espero que les haya gustado y que sigan leyendo semana a semana las clases que hago exclusivamente para ustedes.

¡Un saludo!