Ante todo, vamos a establecer el alcance del articulo, para evitar que nadie se llame a engaño. Estoy escribiendo un curso de HTML5, y para poderlo utilizar, necesitamos también controlar un poco la presentación, de forma que he pensado escribir una pequeña introducción al CSS, solo lo justo para que se pueda entender lo que vamos haciendo, y sirva como trampolín para empezar a estudiar CSS
Que es CSS
CSS son las siglas de (Cascade Style Sheet), en castellano: hojas de estilo en cascada. Y creo que con el nombre basta para entenderlo. La idea es que pueda aplicar estilo a un componente las veces que quiera, cambiando el mismo atributo o no, y al final, el componente tendrá lo definido por todos los atributos asignados, tomando el ULTIMO valor asignado. Esto es, supongamos que en algún sitio digo:
body {
background-color:green;
font-family: cursive;
}
Con eso he dicho que todo el cuerpo del documento,(todo el documento) tendrá de fondo el color verde, y la letra sera cursiva. Luego si en algún sitio que se lea con posterioridad (ya veremos que sitios), le digo:
body{
background-color: red;
font-weight: bold;
}
El nuevo background-color indicado, machacará el anterior, por lo que el documento quedara con fondo rojo, pero en cambio, el font-family, seguirá siendo cursive, ya que no se ha vuelto a definir, y el font-weigth, será bold, ya que lo acabamos de definir.
Quizás. si explico donde podemos escribir CSS, quede esto un poco mas claro.
Donde establecer estilos (CSS)
Para definir los estilos de una pagina web, puedo hacerlo en tres sitios:
Las hojas de estilo: Se trata de ficheros con la extensión css que contienen las reglas de estilo para toda la hoja, o todo el sitio web, ya que podemos escribir cualquier cantidad de reglas en una hoja. Después, en el fichero html, hacemos un link hacia la hoja de estilos con:
rel="stylesheet" href="estilo.css" />
Naturalmente, en un fichero HTML, podemos hacer tantos links a tantas hojas como queramos,….y ahí se empezaran a aplicar las mezclas
La etiqueta < style >: Aunque normalmente se acostumbra a utilizar en el Head, por motivos de claridad, la verdad es que en cualquier punto de mi hoja html puedo utilizar la etiqueta «style» para definir reglas CSS.
Esto no significa que ese estilo se empiece a aplicar en ese punto de la hoja, y las etiquetas anteriores queden a salvo. Los estilos se aplican sobre toda la hoja, sin importar en donde se cargo la regla, pero, si puede afectar el orden de carga, para decidir que valores son los definitivos
El atributo style: La mayoría de etiquetas aceptan el atributo style, y dentro, podemos indicar las reglas que consideremos conveniente…aunque solo para ese componente y sus descendientes. Por la misma estructura, las reglas indicadas en este punto tendrán la máxima prioridad y anularán cualquier otra indicada con anterioridad.
Como se crea una regla CSS
Excepto cuando se crea una regla dentro del atributo style, se le tiene que indicar el objeto al que se aplicara la regla
Cuando definimos un objeto, la regla se aplica a él mismo, y a todos los objetos contenidos dentro del mismo, entonces, antes hablábamos de «body«, naturalmente, si aplico una regla a «body«, la estoy aplicando a todos los objetos contenidos dentro…osea a todos.
Luego volveremos a ello, ahora vamos a ver como podemos indicar a que objeto queremos aplicar una regla:
Vamos a llamar «selector» al destino de la regla. En los ejemplos anteriores, el selector era la etiqueta body
- por etiqueta – Es como la hemos aplicado antes, si yo creo una regla y le indico como selector un nombre de etiqueta, esa regla se aplicará en cualquier sitio en que aparezca la etiqueta. Por ejemplo, si queremos que todoloquepresentemoscon «h1» tenga color rojo, puedo decir:
h1 { color:red; } - por id – En todos los ejemplos, hemos estado utilizando un atributo id, que ademas, indicábamos que deba ser único en la hoja, ahora lo podemos utilizar para asignar estilos, si el objeto a modificar es:
cabeceraEsp">Esto no es rojo
podemos añadirle un estilo con para que este «h1» en vez de rojo salga amarillo (fijaros que cuando el selector es un id, se antepone al nombre el símbolo #):
#cabeceraEsp{ color:yellow; } - por clase – El primer sistema, tiene el problema de ser demasiado genérico, ya que engloba a todas las etiquetas, y nosotros no podemos ir escogiendo las etiquetas en función del estilo…., el segundo es demasiado especifico ya que solo lo puedo aplicar a un objeto, porque ese id, no puede estar en mas de un objeto…todo se resuelve con la clase. La clase me permite crear una regla, y luego utilizar el atributo «class» aceptado por todas las etiquetas, para ir decidiendo en donde lo quiero utilizar y en donde no. Vamos a crear la clase en estilos (cuando el selector es un estilo, al nombre le anteponemos un . (punto))
.grande { font-size:40px; }y, cuando queramos que algo tenga fuentes grandes, podemos hacer:
class="grande">Esto es grande
y todo lo que contiene este párrafo también
Si tenemos en cuenta que al momento de aplicarse estilos, de las propiedades repetidas solo queda la ultima, y las no repetidas se van acumulando, podemos empezar a pensar en las posibilidades de decir en un objeto HTML: class=»grande destacado»> un texto que sera grande y destacado a la vez en esta linea se aplicaran cualquier estilo proveniente de sus contenedores (body), y ademas los estilos que establezcan las clases «grande» y la clase «destacado», (no esta definida, es solo un ejemplo) Antes hemos hecho que todos los h1 sean rojos, luego hemos utilizado un id, para que uno fuera amarillo, entonces:
<h1 class="grande">Esto es grande</a>
me genera un h1 rojo y grande, pero
cabeceraEsp" class="grande">Esto no es rojo
me genera uno igual de grande, pero…amarillo
Complicando los selectores
Para poder gestionar adecuadamente las cada vez mas complejas paginas HTML, CSS nos permite utilizar selectores mas precisos. Antes hemos aplicado un estilo genérico a los «h1», y luego hemos utilizado id, o clases para cambiar un h1, pero tenemos otras formas.
Supongamos que queremos aplicar un estilo al h1 de (1), y otro distinto al de (2). Ademas de poder asignar un ID, o una clase, también podríamos aplicar estilos en función de la ruta. En nuestro ejemplo, uno de los «h1» esta dentro de «form«(2), y el otro esta fuera (1)
Esto en estilos lo podemos explicar como:
h1 {
background-color:black;
color:white;
}
form h1{
background-color:blue;
}
En esta ocasión, aplico un estilo a una etiqueta que esta dentro de otra, y según este ejemplo, la etiqueta de fuera del form tendrá fondo negro, y letra blanca, y la que esta dentro, tendrá fondo azul,….y letra blanca, ya que nadie modifica el color de la letra…..
Y si quisiéramos que mas de un selector tuviera unas reglas iguales?, Supongamos que queremos que todas las h1,h2,h3 y h4 tengan fondo rojo y letra blanca, y que h3 y h4 queremos que la letra se azul….
h1, h2, h3, h4 {
background-color:red;
color: white;
}
h3, h4{
color: blue
}
Solo hemos definido el fondo y el color de letra para las 4 cabeceras (h1, h2, h3, y h4) y luego hemos machacado el color de la letra en h3 y h4. Con esto finalizamos la primera parte, en el siguiente articulo, veremos un poco mas de CSS, especialmente las llamadas pseudoclases.
