Para utilizar CSS tenemos tres alternativas:
• Dentro de las etiquetas mediante el atributo "Style" [En Línea]
• En el encabezado del documento HTML, es decir, dentro de "<head>" utilizando la etiqueta "<style>"
• En un documento externo vinculándolo a nuestro HTML mediante el tag "<link>"
La primera opción es la menos recomendable, puesto que "ensucia" todo el código HTML y lo hace menos legible para la modificación, se denomina popularmente diseño en línea.
La segunda opción es un poco mejor que la primera, sin embargo, a pesar que el código está enmarcado y separado del cuerpo de la página, al ser, muchas veces, extenso, aumenta en gran medida el tamaño del documento HTML en cuestión.
La tercera opción es, por así decirlo, la mejor de todas por varios motivos, principalmente no "ensucia" el código HTML y por ser un archivo externo tampoco aumenta el tamaño del documento. Al margen de esto, al tener separados los estilos del maquetado puro de HTML permite que dos personas estén trabajando en simultaneo, una editando HTML y otra el CSS.
Dicho esto, comencemos con CSS.
Básicamente la sintaxis de un "estilo" es la siguiente:
selector {atributo: valor;}
Esto se lee de la siguiente manera:
• Selector - Puede ser el nombre de una etiqueta, el valor de un ID o el nombre de una Clase.
• { - Comienzo de estilos.
• Atributo - Propiedad de CSS que modificaremos.
• : - Separador de Atributo y Valor (podría considerarse como signo de asignación).
• (espacio) – No es obligatorio, se deja para mejorar la legibilidad de la instrucción.
• Valor - Valor que le asignamos a la propiedad inmediatamente anterior a los dos puntos (:).
• ; - Fin de la modificación del atributo que acabamos de alterar.
Esto quedará más claro con el siguiente ejemplo:
h3 {color: red;}
El estilo que acabamos de escribir funciona para la etiqueta <h3> de HTML y el atributo que alteramos fue el que determina su color y lo colocamos en rojo.
Visualmente queda así:
 |
| Encabezado <h3> en rojo mediante CSS |
En "selector" que utilizamos fue h3, esto significa que para cualquier h3 que este en nuestro documento HTML se le aplicara el color rojo, veamos el ejemplo:
 |
| Varios <h3> en rojo mediante CSS |
Ahora bien, pero ¿Dónde escribir las reglas de estilo del CSS?
Como mencioné al principio hay 3 lugares donde escribir las reglas de estilo, veamos dos de ellas y más adelante veremos la tercera.
Para el primer caso, es decir, estilos en línea la sintaxis es la siguiente:
<h3 style="color: red;">Texto</h3>
Visualmente queda así:
 |
| Utilización de estilos en línea |
Sin embargo, pueden notar que otros <h3> no han sido alterados, esto se debe a que solo se altera la etiqueta a la que se le aplica el estilo.
Como puede verse, para que esto funcione utilizamos el atributo de HTML "style" y en la asignación de valor, escribimos el atributo de CSS (color), dos puntos (:) y finalmente el valor que le asignamos al atributo (red), luego de esto punto y como (;) esto nos permite tanto finalizar la redacción de estilos como para escribir nuevos atributos.
La segunda forma de hacerlo mediante estilos en el <head>, veamos un ejemplo visual similar al anterior:
 |
| CSS en el <head> del documento |
El código de la imagen es el siguiente:
<head>
<style type="text/css">
h3 {color: red;}
</style>
</head>
Este código que se acabamos de escribir dentro del "<head>" del documento HTML aplica la regla de estilo a todos los "<h3>" que conformen nuestro documento.
En caso de quererlo aplicar a algunos <h3> específicos debemos comenzar a utilizar "Clases" o en su defecto "ID".
Utilización del Atributo CLASS de HTML
HTML cuenta con un atributo que permite definir a que Clase pertenecerá un elemento determinado, esto nos facilitará asignarle estilos de manera personalizada a esa Clase, veamos un ejemplo, en donde nuestro Body tiene lo siguiente:
<body>
<h2>Titulo</h2>
<h3>Subtitulo</h3>
<p>Párrafo</p>
<h3>Subtitulo</h3>
<p>Párrafo</p>
<h3>Subtitulo Extra</h3>
<p>Párrafo</p>
</body>
El código anterior se ve de la siguiente manera:
 |
| A este <body> le aplicaremos CSS |
Y ahora le queremos aplicar un color azul solo a los dos primeros <h3> para ello haremos lo siguiente:
<body>
<h2>Titulo</h2>
<h3 class="azul">Subtitulo</h3>
<p>Párrafo</p>
<h3 class="azul">Subtitulo</h3>
<p>Párrafo</p>
<h3>Subtitulo Extra</h3>
<p>Párrafo</p>
</body>
Como pueden ver, en el código a los dos primeros <h3> se les ha agregado el atributo "class", al mismo le asignamos valor con el signo igual (=) y entre comillas (") escribimos el nombre de la clase.
Ahora bien, para poder aplicarle a estos <h3> el color azul en el <head> tenemos que hacer lo siguiente:
<head>
<style type="text/css">
.azul {color:blue;}
</style>
</head>
El resultado que obtenemos es el siguiente:
 |
| Utilizando el atributo CLASS del HTML para aplicar CSS |
Como pueden ver, en lugar de utilizar el nombre de la etiqueta (<h3>) utilizamos el nombre de la clase ("azul") precedida por un punto (.), este punto en cuestión le dice a nuestro navegador que los estilos se aplicaran a la clase con el nombre al lado del mismo (en este caso "azul").
Utilización del Atributo ID de HTML
Otra posibilidad es asignarle estilos a una elemento en especifico y solo a ese elemento, a diferencia de las clases que permiten aplicarlo a uno o varios elementos, la asignación de estilos mediante el atributo ID es para un único elemento, puesto que el ID no puede repetirse, siguiendo el ejemplo anterior, supongamos que el elemento <h3> restante que no tiene clase le queremos aplicar un estilo, en este caso podríamos utilizar directamente asignación de estilo a la etiqueta <h3>, pero si en el futuro hubiese otras, estas también se verían afectadas. Para evitar este tema haremos lo siguiente:
<body>
<h2>Titulo</h2>
<h3 class="azul">Subtitulo</h3>
<p>Párrafo</p>
<h3 class="azul">Subtitulo</h3>
<p>Párrafo</p>
<h3 id="amarillo">Subtitulo Extra</h3>
<p>Párrafo</p>
</body>
Como pueden ver, en el código al último <h3> se les ha agregado el atributo "id", al mismo le asignamos valor con el signo igual (=) y entre comillas (") escribimos el nombre del elemento (único e irrepetible).
Ahora bien, para poder aplicarle a ese <h3> el color amarillo en el <head> tenemos que hacer lo siguiente:
<head>
<style type="text/css">
.azul {color:blue;}
#amarillo {color:yellow;}
</style>
</head>
El resultado que obtenemos es el siguiente:
 |
| Utilizando el atributo ID de HTML para aplicar CSS |
Como pueden ver, en lugar de utilizar el nombre de la etiqueta (<h3>) utilizamos el nombre del id ("amarillo") precedida por el signo numeral (#), este numeral en cuestión le dice a nuestro navegador que los estilos se aplicaran al elemento cuyo ID sea el nombre al lado del mismo (en este caso "amarillo").
En caso de no haber usado amarillo y utilizado nuevamente azul, nuestra ID sería "azul" por lo cual tanto Class como ID tendrían el mismo valor, lo cual esta permitido dado que son atributos distintos, sin embargo, no puede haber más de un elemento con el mismo ID.
Reglas para los valores de los Atributos Class e Id
• Deben comenzar con una letra: [ A-Z ] o [ a-z ].
• Luego de la primer letra pueden contener: Letras [A-Z , a-z ], Números [ 0-9 ], Guión Medio [ - ] y/o Guión Bajo [ _ ].
• En HTML los valores son sensitivos a mayúsculas y minúsculas, por ende, utilizar exactamente el nombre que fue asignado como valor de atributo, Ejemplo: Si utilizaron class="colorRojo", al utilizarlo en CSS deben escribir ".colorRojo", puesto que si utilizan ".colorrojo" o ".ColorRojo" no funcionará.
Dicho todo esto nos encontramos con que tenemos tres maneras de aplicar estilos:
• Directamente nombrando las etiquetas, ejemplo: h1, h3, p, li, ul, etcétera.
• Utilizando nombre de Clases ya aplicadas a elementos, para ellos utilizar el punto (.), ejemplos: .nombreclase, .nombre-clase, .otronombre, etcétera. [Se puede utilizar el Guión medio {"-"} y el Guión bajo {"_"} como separador de palabras]
• Utilizando nombres de ID ya aplicados a elementos, para ello utilizar el numeral (#), ejemplos: #nombreid, #nombre-id, #otronombre, etcétera. [Se puede utilizar el Guión medio {"-"} y el Guión bajo {"_"} como separador de palabras]
Más adelante veremos más especificaciones y la utilización de selectores en cascada, selectores de grupo, entre otras opciones.
Actualiza campeon
ResponderEliminar