¿Qué es CSS? ¿Cómo usarlo? ¿donde colocar el CSS?

¿Qué es CSS? ¿Cómo usarlo? ¿donde colocar el CSS?

¿Será posible resumir todo lo que necesitamos saber sobre CSS en un par de líneas? Realmente no pero, voy a tratar de cumplir con un pedido y por lo menos dar una vaga, vaga, muy vaga idea, aún más que eso que alguna vez publiqué con el nombre de CSS Rápido

CSS (Cascading Style Sheets) es la "tecnología" desarrollada por el W3C (World Wide Web Consortium) con el fin de separar el contenido de la presentación en una página web; es decir, colocar el en HEAD las definiciones de cada etiqueta lo que nos permite hacer que las páginas sean más livianas ya que si no, deberíamos agregarles esas propiedades a cada etiqueta, repetirlas una y otra vez cada vez que las quisiéramos usar. De esta manera, definimos el estilo de un sitio completo de una sola vez y luego, si es necesario, agregamos estilos personales.

Algunos, lo consideran un "lenguaje" complicado pero, es bastante simple y no tiene demasiadas reglas aunque la cantidad de propiedades que pueden usarse es realmente enorme.

Para implementar estilos CSS, lo normal es que incrustemos las definiciones dentro del <head>, por medio de la etiqueta <style type="text/css"> pero, en Blogger, además de eso, ya de entrada nos encontramos con algo raro; ninguna plantilla original parece tener esa etiqueta.

Esto es así porque en esa parte, Blogger agrega sus códigos especiales de tal manera que podamos modificar ciertas cosas mediante la opción Fuentes y Colores de la solapa de Diseño. Lo que vemos es más o menos esto:

<b:skin><![CDATA[

/* -----------------------------------------------

Blogger Template Style

.......

----------------------------------------------- */

/* Variable definitions

====================

<Variable name="bgcolor" description="Page Background Color"

type="color" default="#FFF" value="#FFFFFF">

.......

y recién después de varias líneas logramos ver algo parecido al CSS:

body {

background:$bgcolor;

margin:0;

color:$textcolor;

font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;

font-size/* */:/**/small;

font-size: /**/small;

text-align: center;

}

----------------------------------------------------------------------------------------------------

y todo termina con un misterioso:

]]></b:skin>

Bien, eso es el CSS de la plantilla y si usa <b:skin> </b:skin> es sólo por una necesidad de Blogger, cuando se crea la página, si vemos el código fuente, leeremos:

Si vamos a definir otras propiedades, podemos agregarlas antes de ]]></b:skin> o encerrarlas entre etiquetas nuevas, en alguna parte del HEAD. Si decimos antes de </head> es porque ese es el lugar más sencillo de encontrar:

... aquí vendrán las propiedades ...

</style>

Pero, no es la única forma, también podemos vincular el documento HTML a la hoja de estilos por medio de una etiqueta especial llamada LINK y también colocarla dentro del <head>:

Pero, hay otra manera más que es útil cuando necesitamos usar muchas propiedades pero sólo en posts y no en todo el sitio. En ese caso, como el editor nos impide usar la etiqueta LINK, podemos importar una hoja de estilo externa colocando el siguiente código:

Sea cual sea el método empleado, el CSS consiste de dos parte, el nombre y las reglas. Al "nombre" se lo llama selector y las reglas son las propiedades es decir cómo será ese selector, de que color, de que tamaño, etc. La sintaxis general es esta:

selector {regla1: valor; ...; reglaN: valor;}

Es decir, los nombres van delante y las reglas entre llaves y separadas una de otra por un punto y coma.

Hay varios tipos de selectores posibles, pueden ser etiquetas:

p {color:#990000;}

eso, hará que todos los párrafos del sitio tengan un texto de color rojo.

Pueden ser clases que van precedidas con un punto (.) y que no son otra cosa que una manera de darle un nombre a cierto tipo de etiquetas. Imaginemos que, siguiendo el ejemplo anterior, nuestro sitio tiene los párrafos de color rojo pero no todos, de tanto en tanto, queremos que algunos sean de color blanco. Podríamos crear una clase, darle un nombre y establecer la propiedad correspondiente:

p.blanco {color:#FFFFFF;}

entonces, cuando escribimos un código, usamos el atributo CLASS para indicar que esa etiqueta es diferente:

<p>Esto se verá rojo porque TODO es rojo.</p>

<p class="blanco">Pero esto se verá blanco.</p>

Si pusimos p.blanco es para indicar que esa reglas sólo afectará a esa etiqueta P y no a otras. Si quisiéramos usarla en otro tipo no funcionaría, para eso, deberíamos definirla distinto:

.blanco {color:#FFFFFF;}

Ahora, si escribimos:

<p>Esto se verá rojo porque TODO es rojo.</p>

<p class="blanco">Pero esto se verá blanco.</p>

<div class="blanco">Y esto también se verá en blanco.</div>

Así que, el atributo CLASS nos permite crear estilos que se pueden utilizar cuando queramos. Primero definimos una regla en el documento CSS (con el punto inicial obligatorio) y luego podemos aplicar la clase en cualquier etiqueta HTML.

Pero, hay un tipo que también vemos seguido y es similar al anterior excepto que en lugar de usar el punto, usamos el símbolo #:

#contenedor {font-weight: bold;}

que luego, se usará con el atributo ID de las etiquetas:

El atributo ID es igual que CLASS pero distinto verguenza ya que sólo puede usarse en un único elemento, no puede haber dos elementos con el mismo ID o, mejor dicho, no debería haberlos. Usamos el ID para identificar sectores importantes de nuestra página:

#header {...}

#outer-wrapper {...}

#sidebar-wrapper {...}

Así que, hasta aquí, tenemos ya definidas las reglas sintácticas más importantes de los estilos CSS:

siempre se empieza con el nombre del estilo: el selector

el selector va seguido de una llave abierta {

después, va la regla, seguida de dos puntos :

le sigue el valor y enseguida un punto y coma ;

todo termina con una llave de cierre }

Para definir estilos en una parte pequeña de una página se utiliza el atributo STYLE dentro de una etiqueta, por ejemplo, siguiendo con los ejemplos anteriores, ahora quiero poner un texto en color negro, pero sólo lo voy a usar una vez o muy eventualmente así que no quiero crear una clase, entonces:

<p>Esto se verá rojo porque TODO es rojo.</p>

<p class="blanco">Pero esto se verá blanco.</p>

<p style="color: #000000;">Este texto se verá de color negro.</p>

De esta manera sobrescribimos la regla ¿Y por qué obedece y se pone negro en lugar de rojo? Eso es lo que se llama jerarquía. Si hay varias reglas diferentes que afectan a un mismo elemento, sólo se aplicará una de ellas ¿Cuál?, en este orden:

la declaración de estilo de un archivo externo

la declaración de estilo de toda la página (la etiqueta style de la cabecera de la página)

los estilos definidos en alguna parte de la página (dentro del body)

los estilos definidos en una etiqueta en concreto (con el atributo style)

¿Más excentricidades? complice

Cuando hay varios elementos que tienen las mismas propiedades CSS, podemos agruparlos, colocando los selectores uno al lado del otro, separados por comas:

h1, h2, h3, h4, h5, h6 {color: #00FFFF;}

En muchos casos, también es posible agrupar las diferentes reglas que definen a un mismo elemento:

h1 {font: 20px Arial; color: #FF9900;}

h2 {border: 1px solid #CCCCCC;}

Y también agrupar algunas y definir otras por separado:

h1, h2, h3, h4, h5, h6 {color: #00FFFF;}

h1 {font-size: 32px;}

h2 {font-size: 24px;}

h1, h2, h3 {border: 2px solid #CC0000;}

No hace falta que las definiciones sean genéricas, podemos ser muy específicos y definir relaciones de contexto entre elementos. Por ejemplo, si queremos que los elementos en negrita dentro de un párrafo se vean de color azul podríamos poner esta regla:

p strong {color: #0000FF;}

Así que:

<p>Esto se verá rojo porque TODO es rojo.</p>

Fecha: 19/12/2016

Publicado por: