Introducción a CCS, hojas de estilo o Cascading Style Sheets (I)

Valencia, 09/03/2022, G.B. (actualizado a 10 de marzo de 2022; 11:30 horas)
He decidido iniciar un mini tutorial de CSS (Cascading Style Sheets). Iré mejorándolo y ampliándolo, poquito a poco…

Cada cambio importante que haga lo reflejaré re publicando este pequeño artículo o post (incluiré la fecha de revisión). Me temo que  será bastante frecuente al principio!

Queda pendientes varias cosas, como los objetivos del mini tutorial, qué necesitaremos y un glosario o apéndice básico de CSS, que será un página en vez de una entrada. También subiré los ejemplos para que podási verlos en linea y poder modificarlos localmente para un mejor aprendizaje. Imagino que eso será ya al final, por lo menos lo del glosario CSS.

Bueno, no me entretengo más: aquí va el primer artículo:

Qué es CSS: una introducción

CSS (Cascading Style Sheets en inglés u hojas de estilo en cascada en castellano) es un lenguaje de programación que sirve para controlar y modificar el aspecto o presentación de documentos electrónicos, como por ejemplo el lenguaje de marcado HTML, utilizado para generar páginas web.

Lo de ‘en cascada‘ significa que las propiedades CSS se ‘heredan‘ de elementos ‘padres‘ a ‘hijos‘, entre otras cosas… Os recomiendo para más adelante (ahora no) esta lectura para comprenderlo: Herencia y cascada.

Así, con CSS podemos separar los contenidos de su aspecto o presentación, tanto en cualquier pantalla (ordenador, móvil, etc.) como en impresión. CSS nos aporta propiedades para ampliar el lenguaje HTML en la representación visual de las páginas web (párrafos, listas, tablas, capas, imágenes, etc.).

El lenguaje de hojas de estilo en cascada (CSS) fue definido por primera vez en 1996  y está desarrollado por un grupo del W3C llamado CSS Working Group, el cual está compuesto por representantes de proveedores de navegadores y otras compañías interesadas en CSS. También hay otras personas, conocidas como expertos invitados, que actúan como voces independientes y no están vinculados a ninguna organización.

Con el lenguaje CCS podemos vincular los elementos HTML con “plantillas de documento” denominadas hojas de estilo o stylesheets. estas ‘plantillas‘ u hojas de estilo contienen la información de los elementos visuales de la página y nos permiten separar la estructura de contenidos de su representación gráfica y visual en pantallas e impresión.

Sintáxis básica y ejemplo sencillo de CSS

El lenguaje CSS podemos añadirlo dentro de un documento HTML. La forma de hacerlo que muestro en el ejemplo es la más sencilla: se declara la hoja de estilo o CSS dentro del propio documento HTML. La sintáxis es:

selector (o elemento) { propiedad: valor; }

Al enunciado anterior se le denomina declaración CSS y puede haber tantos selectores con sus respectivas propiedades y valores o atributos como queramos. A los elementos encerrados entre las llaves se le denomina regla CSS:

selector1
(o elemento) { propiedad: valor; }
selector2 (o elemento) { propiedad: valor; }
selector3 (o elemento) { propiedad: valor; }
etc…

Cada selector o elemento puede llevar también tántas parejas propiedad:valor (o reglas CSS) como queramos, siempre separadas por punto y coma (;):

selector1 (o elemento) { propiedad: valor;  propiedad2: valor}

El CSS es un lenguaje basado en reglas. Así, cada usuario o programador puede definir las reglas CSS que especifican los grupos de estilos que van a aplicarse a elementos particulares o grupos de elementos de la página web. Por ejemplo:  elijo que el encabezado principal (H1) de mi página se muestre en letras grandes de color azul». El código siguiente muestra una regla CSS muy simple que proporcionaría el estilo descrito en el párrafo anterior:

h1 {
color: blue;
font-size: 5em;
}

Dentro de un documento HTML:

<style type=”text/css”>
(en la versión actual de CSS, CSS3, también se puede poner solo <style>)
selector {
propiedad: valor;
}
</style>

– El selector: un elemento HTML, como por ejemplo p (párrafo). En el ejemplo anterior hemos elegido el tag de Título 1: h1
– La declaración de la regla CSS (va entre llaves de apertura y cierre: { }
– La propiedad seguida de dos puntos (:)
color:
font-size:
– Y seguidamente el atributo o valor(más 😉 Si hay más atributos, van seguidos por ;
color: blue;
(propiedad: valor;)
font-size: 5em;
(propiedad: valor;)
Siempre cerraremos la regla CSS con }

Arriba

Ejemplo de código fuente de la página HTML con la hoja de estilos embebida

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Mi primera página con estilo</title> 
<style type="text/css"> 
body { 
color: white; 
background-color: #000000; 
} 
h1 { 
color: red; 
} 
p 
{ 
text-align: justify; 
} 
/* Esto es un comentario en CSS */ 
</style> 
</head> 
<body> 
<!-- Menú de navegación del sitio --> 
<ul class="navbar"> 
<!-- Los enlaces no van a ningún sitio... --> 
<li><a href="#">Inicio</a></li> 
<li><a href="#">Acerca de</a></li> 
<li><a href="#">Servicios</a></li> 
<li><a href="#">Contacto</a> </li>
</ul> 
<!-- Contenido principal --> 
<h1>Página con hoja de estilos (CSS)</h1> 
<p>¡Bienvenido a mi primera página con hoja de estilo! Esto es una prueba… Aquí podría seguir escribiendo...</p> 
<!-- Firma y fecha de la página, ¡sólo por cortesía! --> 
<address>Creada el 9 de abril de 2022</address> 
</body> 
</html>

Salida (la página HTML con la hoja de estilos incluida en el documento):
paginaConCSS
ejemplo-css-embebido-en-pagina-web
Ejecutar ejemplo

Arriba

Cómo incluir CSS en una página web (principales métodos)

  • Vinculando a un archivo de hoja de estilo separado (por ejemplo style.css). (VER)
  • Incrustando CSS en una etiqueta de estilo (como en el ejemplo anterior)
  • Agregando estilos en línea a elementos HTML. Lo veremos…
  • Importando archivos de hojas de estilo existentes. Lo veremos…
  • Inyectando css con JavaScript. Lo veremos…

Arriba

Qué nos aporta el lenguaje CSS: sus ventajas

  • CSS nos facilita las actualizaciones (todas las modificaciones se pueden realizarse de forma centralizada, desde un único archivo)
  • Menor cantidad de código, más transparente , estructurado y comprensible
  • Mayor accesibilidad: webs accesibles y con menos obstáculos y acceso a su contenido desde cualquier sistema y cualquier plataforma
  • Usabilidad: CSS contiene muchas funciones y métodos con los que proporcionar funciones ampliadas a sus visitantes
  • Mayor velocidad de carga:   al haber menos código fuente en la página web y que la estructura el código fuente esté más ordenada, facilitan y aceleranla lectura del código de la página web para los robots de búsqueda. Además, las palabras clave más importantes en textos y títulos (H1, H2, H3,…) se formatean de forma conjunta y rápida
  • Ahorro de costos en el desarrollo: un único archivo .css es el encargado de modificar toda una web. Eso sí, también puede utilizarse de forma puntual en elementos de un archivo.

Continuaré…
Arriba