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;
}

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.

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

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

Se puede aplicar CSS para formatear cualquier documento HTML, de varias 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.

---

<style scoped>
p{color:blue;
}
</style>

El atributo scoped está en desuso y se eliminará. No lo uses.

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;
}

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.

Compartir el código CSS como una imagen

Para compartir en redes sociales cualquier porción de código ya sea CSS o de otro lenguaje, entra a la siguiente web, pégalo y descárgalo como una imagen u obtén la dirección URL.
Un ejemplo:

https://www.ray.so/

Páginas relacionadas