Si no tiene idea de como escribir CSS es recomendable que lea el primer articulo para que los conceptos que se engloben a continuación no le sean extraños, tales como "declaracion", selector, atibuto, y valor, su definicion los puede encontrar aqui.
El CSS se escribe en texto plano (sin formato, el microsoft word agrega formato a lo que se escribe, por lo que no se recomienda para escribir CSS), se puede escribir con el bloc de notas y se guarda con la extensión .CSS.
En la interpretación de elementos CSS se omiten los espacios, es decir da lo mismo p{color:red;} que p { color : red; }, igualmente son omitidos los cambios de línea. Gracias a esta característica podemos ordenar el código que escribimos de la maneja que mas nos convenga para que nos sea mas fácil comprender nuestro propio código. Escribiendo una declaración por línea, y dejando un espacio al inicio para las declaraciones se vean subordinadas al selector es una buena practica.
En el CSS, al igual que en el HTML, no se distinguen mayúsculas de minúsculas, sin embargo es recomendado escribir todo en minúscula, esto para evitar complicaciones, pues CSS está en evolución, y existe la posibilidad de que futuros estándares si hagan esa distinción, por lo que es mejor mantener las reglas y sus elementos en minúscula.
Al ordenar el código mejoramos su comprensión, sin embargo también es importante, en algunas ocasiones, añadir una pequeña explicación de lo que hace alguna regla o declaración que no quede clara, así en un futuro si queremos modificar el código no nos será difícil descifrarlo. Esto se hace por medio de comentarios, un comentario es un texto dentro de los elementos /* */.
Ejemplo 2.0:
/* Esto es un comentario */
Los comentarios son ignorados por el explorador, por lo que podemos escribir en ellos lo que queramos para así orientarnos dentro de nuestro código.
CSS tiene una característica llamada herencia, esto quiere decir que cuando se aplica una regla a un elemento en concreto, esta regla será aplicada a su vez a todos lo que se encuentre dentro de este elemento.
Ejemplo 2.1:
table {
color: red;
}
En la regla anterior se le asigno al texto de todos los elementos de tabla el color rojo. Por lo que todo lo que se encuentre dentro de las tablas tendrá texto color rojo, pues cada elemento dentro de la tabla hereda la regla que se le aplica a esta.
En una hoja de estilo en cascada pueden aplicarse declaraciones aparentemente contradictorias que aplican sobre un mismo elemento.
Ejemplo 2.2:
table {
color: red;
color: blue;
}
En la regla anterior se definen dos reglas que modifican el mismo atributo con diferentes valores, para ello CSS tienen un mecanismo que elije cual será aplicada sobre la otra mediante un orden de prioridad.
LA PRIORIDAD DISMINULLE DE ESPECÍFICO A GENERICO
Si se tiene una regla que modifica todo el cuerpo de la pagina, y le asigna un valor al color del texto, esta declaración tiene menos prioridad que si se tiene una regla que modifica el color del texto solo de los párrafos, por lo que la declaración del párrafo al ser mas especifica “escribe sobre” la declaración del cuerpo, que es mas genérica.
Si no existe manera de determinar una prioridad mayor o menor en un par de declaraciones que colisionan, entonces se toma la que esté mas “abajo” como la que será aplicada;
Ejemplo 2.3:
p{
color: red;
color: blue;
}
Por lo que en el código anterior el texto aparecerá de color azul y no rojo.
Tipos de selectores:
Selector universal:
Este es único y su nombre es *, todas las declaraciones que se subordinen a este selector actúan sobre TODO el documento:
Ejemplo 2.4:
* {
color:red;
margin:20px;
text-align: left;
}
Con eso logramos definir esos valores para esos atributos en todo el documento HTML, este selector es el más genérico de todos.
Selector de tipo
Los selectores que hemos visto hasta ahora hacen referencia a elementos HTML como p, table, h1. Estos selectores se denominan selectores de tipo, y son bastante genéricos, se ponen solo con el nombre del elemento HTML (no la etiqueta sino el nombre):
Ejemolo 2.5:
p {
color:red;
margin:20px;
text-align: left;
}
table {
color:red;
margin:20px;
text-align: left;
}
span {
color:red;
margin:20px;
text-align: left;
}
ul {
color:red;
margin:20px;
text-align: left;
}
Selector de clase:
Estos son muy útiles, definen lo que llamamos una clase, y sus declaraciones se aplican sobre todos los elementos HTML que pertenezcan a esta clase. Sencillamente se elije un nombre arbitrario y se le antepone un punto:
.estaesmiclase { color:red; margin:20px; text-align: left; }
Con eso creamos la clase “estaesmiclase”.
Ahora se va al código HTML y en las etiquetas de los elementos que queramos que sean afectados por “estaesmiclase” les asignamos esa clase usando el atributo class=”nombre_de_clase”:
<body> <h1> esto es un titulo de nivel h1</> <p> esto es un parrafo</p> <p class=”estaesmiclase”> este es otro párrafo</p>
</body>
De esta manera mi clase modifica al segundo párrafo, esto se puede hacer con cualquier etiqueta HTML que acepte el atributo class, (o que tenga sentido ponérselo).
Selector de id: estos selectores son específicos para una parte del documento HTML, solo pueden ser usados en aquellos elementos que tengan el id igual al que se designa como selector de id, sin embargo en un documento HTML cada id debe ser único, por lo que generalmente un selector de este tipo solo afecta a un elemento, sin embargo si la hoja de estilo en cascada es usada en mas de una pagina Web puede modificar al elemento con un id especifico en cada pagina. Se pone colocando un # tras el id
#contenedor { background: blue; }
luego en el codigo HTML
<body> <div id=”contenedor”> <p> la regla aplica en este div, pues tiene id igual al nombre de esta</p> </div> </body>
La regla anterior aplica sobre el cuadro div que tiene el id “contenedor”.
