Esta es la primera parte de una sucesión de tutorials de CSS. Esta primera parte es una introducción al conecpto base de CSS y como este, fundamentalmente, se utiliza.
Antes de empezar este tutorial quiero dejar dicho que es bueno que por lo menos tengan un nivel intermedio en cuanto a HTML se refiere. Este tutorial servirá incluso para quienes no saben, pero aquellos que tiene conocimiento de HTML son los que mayor provecho obtendrán.
¿Qué significa CSS?
- CSS son las siglas de Cascading Style Sheet (Hojas de Estilo en Cascada).
- Los Estilos definen la forma en que los elementos de HTML son desplegados.
- Los Estilos son almacenados en Hojas de Estilo.
- Los Estilo fueron introducidos con el HTML 4.0 para resolver un problema.
- Los Estilos de Hojas externos ahorran mucho trabajo.
- Los Estilos de Hojas externos son almacenados en archivos CSS.
- Diversas definiciones de estilo hacen cascada uno con otro (se mezclan como uno solo).
Los Estilos Solucionan Un Problema Común
Los elementos de HTML fueron creados para, de alguna forma, presentar información a través del Internet. Se supone que se utiliza para decir "Esto es un encabezado", "Esto es un párrafo", "Esto es una tabla", etc. La estructuración de la información es responsabilidad de los exploradores de Internet, sin utilización alguna de elementos de HTML.
A medida que los exploradores añaden sus propios elementos, se hace cada vez más difícil crear una página Web con un diseño atractivo en el cual el contenido HTML estaba claramente separado de la presentación del documento.
Los Estilos En Cascada Ahorran Mucho Trabajo
Los Estilos en HTML 4.0 definen como los elementos de HTML con desplegados, tal y como nos permitía hacer el elemento <font> en HTML 3.2. Los Estilos son normalmente grabados en un archivo exterior, para de esta manera facilitar el uso del mismo. El CSS es muy útil, ya que sin tener que editar el código de la página Web podemos fácilmente cambiar el color de algún texto, o cambiar la manera en que se despliega una tabla.
CSS es un gran adelanto en cuanto a diseño Web se refiere, ya que le permite al diseñador un control total de como se despliega una página Web. Cuando sepas utilizar apropiadamente los Estilos te darás cuenta de lo que te decimos.
Diversas Definiciones De Estilo Hacen Cascada Uno Con Otro
¿Qué estilo aplicado será utilizado si existe más de una definición para un dicho elemento?
Como se especifico anteriormente, todos los estilos aplicados a un elemento que provengan de diferentes partes serán unidos en un sólo estilo. Sin embargo, existe una jerarquía en cuanto al cumplimiento de los estilos, cada uno con mayor u inferior prioridad que los demás. He aquí la lista de prioridades (en orden ascendente):
1 - Estilo por defecto del explorador.
2 - Estilo definido en una Hoja de Estilo externa.
3 - Estilo definido interiormente en el código de la página Web (entre el elemento <head>, usando el elementp <style>).
4 - Estilo definido dentro de un elemento HTML. (<p style="">).
De modo que, un estilo definido dentro de un elemento HTML es el de mayor prioridad.
Sintaxis de CSS
La sintaxis de CSS consiste de tres partes: un selector, una propiedad y un valor.
Code:
| selector { propiedad:valor; } |
El selector es normalmente el elemento HTML que quieres definir, la propiedad es el atributo que deseas modificar y cada propiedad debe de ser asignada un valor. la propiedad y el valor esta separados por dos puntos y a su vez encerrado entre llaves.
Code:
Si el valor posee más de una palabra debes de poner la frase entre comillas.
Code:
| p { font-family: "sans serif"; } |
Si deseas especificar mas de una propiedad recuerda separarlas por un punto y coma
Code:
| p { text-align:center; color:red; } |
Si quieres que tu código de estilos sea más entendible, puedes hacerlo de esta manera:
Code:
p {
text-align:center;
color:black;
font-family:arial;
} |
Agrupamiento
Esto es muy útil, ya que si quieres que varios elementos de HTML tengan los mismos estilos, pues no tienes que re-escribirlo todo de nuevo, lo único que tienes que hacer es separar los elementos que vas a definir con una coma:
Code:
h1, h2, h3, h4, h5, h6 {
color:green;
} |
El Selector De Elemento De HTML
A este le prefiero decir redefinición de elemento HTML, ya que eso es precisamente lo que se hace. Cada uno de los ejemplos que han visto es esto mismo. Se usa el elemento de HTML en si como el selector, y luego de le definen los estilos. Otro ejemplo es este:
Code:
div {
width:50%;
text-align:justify;
color:blue;
} |
| div { width:50%; text-align:justify; color:blue; } |
El Selector De Clase
Con una clase puedes definir el mismo estilo para diferentes elementos de HTML, a la vez que puedes aplicar diferentes estilos a los mismos elementos de HTML (ya verán si es algo confuso ahora). Digamos que quieres dos párrafos con diferentes alineaciones. Lo que haces es esto:
Code:
p.derecha { text-align:right; }
p.izquierda { text-align:left; } |
Entonces, en tu código HTML tendrás algo parecido a:
Code:
<p class="derecha">
Este párrafo estará alineado hacia la derecha.
</p>
<p class="izquierda">
Este párrafo estará alineado hacia la izquierda.
</p> |
Sólo puedes asignar una clase por elemento, así que si nombras más de una clase estarás codeando mal, además de que no obtendrás resultado alguno.
También puedes omitir el elemento de HTML del selector, para que puedas utilizar dicha clase con cualquier elemento de HTML que desees.
Code:
| .centrar { text-align:center; } |
De modo que puedas utilizar la clase cuantas veces y con cualquier elemento de HTML que desees.
Code:
<h1 class="centrar">
Este encabezado estará centrado.
</h1>
<p class="centrar">
Este párrafo estará centrado.
</p> |
Aunque no se hayan percatado, existe una diferencia entre incluir u omitir el elemento de HTML cuando se defina el estilo de una clase. Si usamos "p.derecha" en ves de ".derecha", le estamos especificando al explorador que solo le aplique el estilo de la clase ".derecha" a los elementos de HTML iguales a <p>, o los párrafos. Si omitimos el elemento de HTML ('.derecha'), entonces podemos utilizar la clase ".derecha" con cualquier elemento de HTML que queramos, y que no tan sólo se limite a el elemento <p>.
El Selector de Id
A diferencia del selector de clase, el selector de id se limita a un solo elemento porque este selector es único. Es decir, cuando definimos un id, lo definimos porque solo lo vamos a utilizar una vez.
Un atributo de ID debe de ser único en un documento.
La siguiente definición de id encajara con un elemento <p> que tenga el valor de id "texto":
Code:
p#texto {
text-align:center;
color:red;
} |
La siguiente definición de id encajara con el primer elemento que tenga el valor de id "prueba":
Code:
| *#prueba { color:green; } |
La definición anterior encajaría con:
Code:
<h1 id="prueba">
Algún texto de prueba.
</h1> |
Si definimos:
Code:
El siguiente elemento no encajaría, aunque tiene el valor de id igual que el selector definido:
Code:
<h1 id="casa">
Texto.
</h1> |
Esto ocurre por lo mismo que definimos anteriormente, al incluir el elemento <p> en la definición del selector, dicho estilo sólo se le aplicará al primer elemento <p> que contenga el valor de id "casa".
Comentarios en CSS
Al igual que cualquier lenguaje de programación, en CSS podemos incluir comentarios dentro de nuestro código. Los comentarios van encerrados entre "/*" y "*/", se abre el comentario con "/*" y se cierra con "*/" cuando deseemos que termine el comentario. Ejemplo:
Code:
/*Esto es un comentario*/
p {
text-align:center;
color: "light blue";
/*Otro comentario*/
font-family:arial;
font-style:italic;
} |