NorfiPC
NorfiPC » Web » Usar CSS

Como usar las hojas de estilo CSS en las páginas web

Sencilla descripción y uso del lenguaje CSS, para definir el estilo visual de documentos HTML. Estructura y funcionamiento de las reglas, selectores, declaraciones, propiedades y valores. Ejemplos prácticos.
Como usar las hojas de estilo CSS en las páginas web El CSS es el método que se utiliza para definir el estilo de los elementos en HTML o sea en páginas web.
CSS son las siglas de Cascading Style Sheets (Hojas de estilo en cascada) y es un sencillo lenguaje de programación, fácil de entender y comprender sin ser un especialista.
Consiste en un grupo de reglas que los navegadores web interpretan y de acuerdo a lo especificado, representan el contenido de la página.
Se ha convertido en casi un arte, mediante el cual se pueden crear millones de combinaciones posibles, siendo posible expresar visualmente en una página el estilo del gusto de su creador.
Mediante CSS se pueden configurar muchos parámetros, entre ellos el color, el tamaño, la posición, el formato del texto, posicionar cualquier elemento, definir la estructura de un documento de acuerdo al ancho de la ventana del navegador del lector, etc.
Esta página es un sencillo y básico tutorial del empleo del CSS.



¿Cómo funciona el CSS?


CSS funciona mediante reglas que especifican exactamente el estilo de uno o varios elementos en una página.
Una regla posee tres elementos básicos que se expresan de la siguiente forma en el código:
selector {
 propiedad: valor;
}
✔ Selector. Permite especificar el elemento al que se aplica la regla.
Se pueden usar nombres de elementos en HTML (por ejemplo: a, body, h1), identificadores (DIV) anteponiéndoles el carácter # y clases (CLASS) anteponiendo el carácter .(punto).
✔ Bloque de declaración. Se define entre llaves y está formado por una o varias declaraciones de estilo.
Cada una incluye la propiedad y su valor.
La propiedad y el valor tienen que estar separados por dos puntos y la declaración termina con un punto y coma.
Cualquier equivocación al usar estos signos de puntuación, provoca que la regla no funcione correctamente.
Algunos ejemplos simples:
– La siguiente regla especifica que todos los enlaces en la página deben tener el color rojo.
a {
  color: #f44336;
}
– La siguiente regla especifica que el elemento que posee la identidad "big" debe usar un tamaño de fuente de 22 pixeles.
#big {
  font-size: 22px;
}
– La siguiente regla especifica que todos los elementos con la clase "neg", su texto debe de usar negritas.
.neg {
  font-weight: bold;
}
En una misma regla se puede usar varios selectores al mismo tiempo, separándolos con una coma.
También se pueden especificar varias propiedades con sus valores en una misma declaración.
Por ejemplo:
h3, #id1, .clas2 {
  line-height: 38px;
  margin: 6px;
  padding-top: 10px;
}
En la siguiente imagen se puede comprobar la estructura de una regla CSS.
Estructura de una regla CSS, con sus selectores, propiedades y valores
Los valores a emplear dependen de las propiedades.
En los ejemplos anteriores hemos usado para "color" valores hexadecimales (recomendados), pero también se pueden emplear sus nombres en HTML, por ejemplo: rojo = ff0000 o de forma abreviada f00.
En las propiedades con valores de tamaño usamos pixeles (px), pero también se puede definir usado emes (em), puntos (pt) o porcientos (%).
Las propiedades más empleadas y sus valores se pueden consultar en las tablas del siguiente artículo: Tutorial y manual básico del uso de los estilos CSS
La semántica recomienda emplear CSS como en los ejemplos anteriores, usando saltos de línea para separar y diferenciar las instrucciones.
No obstante en la práctica se eliminan los espacios sin perjudicar el funcionamiento.
Esta práctica se conoce como comprimir o minimizar el CSS.
Permite reducir el tamaño de los archivos para optimizar su funcionamiento en la web.



¿Cómo se usa el CSS en las páginas?


Se puede aplicar CSS para formatear cualquier documento HTML, de tres formas:
1- Inline. Insertando las reglas directamente en los elementos usando la propiedad STYLE.
Por ejemplo:
Mi casa es de color <span style="color: #2196f3;">azul</span>.
Esta técnica no es recomendada en la web moderna.

2- Una hoja de estilo interna, incluyendo las reglas dentro de un script <style></style>, situado en el área del HEAD de la página, de la siguiente forma:
<style>
blue{
  color: #2196f3;
}
</style>
3- Una hoja de estilo externa, enlazada a la página. Las reglas de almacenan en un archivo de texto con la extensión CSS, de la siguiente forma:
<link href="estilo.css" rel="stylesheet" type="text/css">
La ventaja de este último método es que permite aplicar las reglas a varias páginas al mismo tiempo y solo es necesario modificar el archivo ante cualquier actualización.



Otros elementos en las hojas de estilo CSS


En las hojas de estilo modernas se pueden usar las reglas @media screen para especificar el ancho de la ventana del navegador, @media print para especificar el estilo del documento solo para imprimir, @font-face para cargar fuentes externas, entre otras.
Además pueden contener otros elementos que no son reglas.
Uno de ellos son los comentarios, usados para agregar anotaciones, las que son ignoradas por el navegador.
Tambien pueden contener índices o tablas de contenido en hojas extensas.
Siempre es de utilidad ver el código fuente de los archivos CSS que agregamos a nuestras páginas.



Ejemplos sencillos del uso del CSS


Bloques de texto con CSS

En las páginas de este sitio usamos un bloque de aclaración, al que le asignamos la clase "blue".
Se emplea en el estilo CSS la siguiente regla para definir su estilo:
.blue{
background-color: #d4eefd;
padding: 12px;
margin: 12px 0 12px 0;
border-radius: 10px;
}
Bloque usado en las páginas para hacer aclaraciones o para resaltar contenido que puede ser importante. Otros similares emplean la misma regla, solo diferenciándose en el color de fondo (background-color).



Personalizar y dar estilo al texto con CSS

Con CSS podemos personalizar completamente el estilo del texto, su color, el tamaño o el tipo de fuente.
Emplear cursivas, negritas, subrayados o tachados y hasta sombras
También podemos agregar vistosos y útiles ToolTipsEsto es un Tooltip o descripción emergente. Permite mostrar información adicional al situar el cursor del ratón encima de una palabra, marcada con esta función., para agregar información adicional, a situar el cursor del ratón encima de las palabras.

Efectos con CSS

Con CSS se pueden implementar muchos efectos en las páginas.
Hay sitios como el de Stuart Nicholls en: http://www.cssplay.co.uk/, donde se pueden ver fantásticas creaciones, hechas usando solo texto plano.
El siguiente magnificador de imágenes es una muestra de ello.
Para advertir el efecto es necesario desplazar el cursor del ratón por encima de la miniatura.

Popup o ventana emergente

Pequeño cuadro de alerta en CSS, que simula un popup o ventana emergente, aunque no es tal.
Un Pop-up!!   ALERTA ! X
POP-UP
Hecho con CSS


Se activa al pasar en cursor del mouse por encima del bloque de texto.
Como solo depende de CSS, funciona aunque el navegador bloquee los indeseables pop-up.



Validar el CSS


Cuando implementamos nuevas reglas o editamos las existentes y comprobamos que no funcionan, generalmente se deben a errores casi imperceptibles.
Para corregirlo podemos validar la hoja de estilo usando los servicios de validación online.
El Servicio del W3C demás de informar sobre cualquier error, devuelve como resultado el código formateado correctamente.
El CSS se emplea usando texto plano.
Los snipetts en esta página aplican estilo al código para hacerlo más comprensible, usando Prettify, un proyecto para resaltar el código en páginas web, disponible gratis en Github.
Lee más información detallada: Crear snipetts adaptables para mostrar código fuente en las páginas

Páginas relacionadas