QE2 Computing

Tecnologia, programación, Linux y software libre

Usted está aquí: Inicio / Desarrollo Web / Introducción a CSS y sintaxis básica

Introducción a CSS y sintaxis básica

¿Qué es CSS?

CSS (Cascading Style Sheets, Hojas de Estilo en Cascada en español) es un lenguaje de hojas de estilo, y es el estándar de estilos de la web. Describe los estilos de los documentos/páginas HTML y algunos otros lenguajes basados en XML.

CSS no es un lenguaje de programación, ni de marcado. En vez de esto, es un lenguaje de hojas de estilo, ya que su propósito es indicarle a los navegadores qué aspecto deben tener las páginas HTML: en qué parte de la ventana y cómo deben organizarse los elementos, que colores deben mostrarse (fondo, líneas, texto, …), qué separación tiene un elemento de los contiguos, con qué tipografía y de qué tamaño se mostrará el texto, qué tipo y grosor de los bordes, cómo debo reorganizar los elementos cuando la página se esté viendo desde un dispositivo móvil o pantalla muy pequeña, y un largo etcétera.

Con CSS es posible, además, crear animaciones que, aunque no tendrían el nivel de sofisticación de animaciones JavaScript, muy probablemente resultarán más ligeras, y crearán páginas más rápidas.

Estas son las últimas especificaciones estables de CSS3, publicadas por el W3C. CSS3 es la versión actual del lenguaje CSS que introduce nuevas características y mejoras sobre las versiones anteriores.

Requisitos previos

Es recomendable empezar con una Introducción a HTML, ya que la principal aplicación de CSS, (aunque no la única) son los documentos web.

Sintaxis básica de CSS

El siguiente es un ejemplo de CSS. En aquel documento al que se aplique estos estilos, todos los títulos de nivel 2 (H2) del documento se verán de color verde, con un tamaño de fuente de 40 píxeles:

h2  {
    color: green;
    font-size: 40px;
}

…donde h2 es el selector, color y font-size son propiedades, y green y 40px son valores de la propiedad.

Selectores

h2 es un selector de tipo, pero este no es el único tipo que hay:

  • Selectores de Tipo. Son aquellos que corresponden con etiquetas HTML predeterminadas: H2, p, img, div, span, … p {…}
  • Selectores de Clase. Las reglas se aplicarán a nuestras propias clases, y deben definirse anteponiendo un punto al nombre de la clase, como p. ej. en .personaje {…}
  • Selectores de ID. Las reglas se aplicarán a nuestros propios identificadores, y deben definirse anteponiendo una almohadilla, como en #galeria {…}
  • El asterisco en CSS (*) es llamado selector universal, y selecciona todos los elementos a los que se apliquen los estilos.
  • Selectores de atributo. En vez nombrarlos por su clase o id, se pueden nombrar elementos que contengan un atributo determinado, como p. ej. en a[href=»https://sitio-ejemplo.com»] {…}

Unidades

Las medidas utilizadas para aplicar un tamaño, margen, etc. se denominan unidades. Existen las unidades absolutas, como los píxeles (px), o los centímetros (cm) y las unidades relativas, como los porcentajes (%), o el em, relativo al tamaño de la fuente del elemento padre.

Algunas unidades absolutas:

  • Píxels. px. Es la unidad absoluta más usual y muchas veces la única (absoluta) que se usa.
  • Centímetros. cm.
  • Pulgadas. in. 1in = 2,54cm = 96px

Algunas unidades relativas:

  • Porcentaje. %. En relación al elemento contenedor.
  • vw y vh. Ancho y algo de la ventana gráfica, o en relación a la ventana del navegador:
    • vw (viewport width). Un elemento con 50vw se dimensionará al 50% de ancho de la ventana del navegador.
    • vh (viewport height). Un elemento con 50vh se dimensionará al 50% de alto de la ventana del navegador.
  • vmin y vmax. Unidades relativas al tamaño del viewport (ventana del navegador). Una unidad vmin o vmax es igual al 1% de la dimensión menor del viewport, sea esta el ancho o el alto. Pongamos como ejemplos los siguientes:
    • vmin. Un elemento con width: 50vmin; se verá con ancho igual al 50% de la dimensión menor del viewport.
    • vmax. Un elemento con width: 50vmax; se verá con ancho igual al 50% de la dimensión mayor del viewport.
body  {
    width: 95vw;   /* 95% de ancho de la ventana del navegador */
    min-width: 1200px;   /* Como mínimo, 1200 píxels */
}
h2  {
    font-size: 40px;   /* La fuente de los títulos  de nivel 2, a 40 píxels de tamaño */
} 
.container {
    width: 50%;   /* 50% del ancho del elemento contenedor */
    padding: 1em;   /* Padding igual al tamaño de la fuente del contenedor */
}

🌐 [developer.mozilla.org] Ver la lista completa de Valores y unidades CSS

Estilos base

Es una buena idea empezar aplicando los estilos base. Estos son los que asientan la base para la aplicación de estilos a todo el documento:

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
}

Archivos CSS

Un archivo CSS tiene la extensión .css, y a menudo son nombrados style.css, aunque esto no es obligatorio.

Un archivo CSS, (exactamente igual que un HTML) puede ser abierto para su edición con cualquier procesador de texto plano, aunque es obvio que es una buena idea elegir editores que ofrezcan funcionalidades adicionales para CSS, y/o HTML, como el coloreado de sintaxis o el autocompletado. De entre los muchos que existen, para nosotros destacan Atom, Zettlr o VIM. Estas son excelentes aplicaciones para este cometido y muchos otros, como la programación en general.

CSS en línea, interno y externo

Es evidente que debe existir al menos una forma de enlazar el CSS al documento/página HTML, de forma que el navegador comprenda que las reglas X están ahí para aplicarse al documento Y.

Y así es, concretamente existen hasta 3 formas de enlazar HTML y CSS, cada una con sus ventajas y desventajas.

CSS externo (hojas de estilo)

Así que empezamos con el uso de CSS en archivos CSS aparte del archivo HTML, conocidos estos CSS como hojas de estilo.

Este enfoque, de separación de HTML (contenido) y CSS (estilos) es el que más ventajas aporta de los 3:

  • Permite a motores de búsqueda indexar el contenido y comprenderlo mejor, sin que los estilos interfieran.
  • Permite renderizar el contenido sin los estilos, para necesidades especiales de accesibilidad.

Para enlazar las hojas de estilo, añadimos la siguiente línea de texto en alguna parte del documento HTML, pero encerrada dentro de las etiquetas <head> y </head>

<link href="estilos/style.css" rel="stylesheet" type="text/css" />

…donde «estilos/style.css» es la ruta que conduce hasta el archivo de estilos, y debe sustituirse por la que proceda en cada caso. Esta ruta podría ser incluso local, apuntando a cualquier parte de nuestro equipo. En este caso no podríamos publicarlo en Internet, pero puede servir para nuestros propios documentos privados, para pruebas, o como ruta temporal.

El enfoque del CSS externo tiene ventajas: al tener separado el contenido (HTML) y los estilos (CSS), el mantenimiento es más sencillo. Podemos crear clases e identificadores, ponerles el nombre que queramos, y asignarlos a tantos elementos como queramos, incluso en tantas páginas HTML como queramos, ya que bastará enlazar el archivo CSS desde cada página.

Una vez hecho, aplicamos reglas CSS a las clases e identificadores que hemos creado.

Un ejemplo con CSS externo

Archivo HTML

<html><head>
<link rel="stylesheet" type="text/css" href="styles.css">
...
</head><body>
<div id="galeria">
    <div class="personaje">
        <img src="https://www.qe2computing.com/wp-content/uploads/2020/11/Sigmund_Freud_by_Max_Halberstadt_cropped_es.wikipedia.org_.Dominio-publico-200px.jpg" alt="Sigmund Freud" />
        <h3>Sigmund Freud</h3>
    </div>

    <div class="personaje">
        <img id="tesla" src="https://www.qe2computing.com/wp-content/uploads/2020/11/Nikola-Tesla-es.wikipedia.org-dominio-publico-200px.jpg" alt="Nikola Tesla"/>
        <h3>Nikola Tesla</h3>
    </div>

    <div class="personaje">
        <img src="https://www.qe2computing.com/wp-content/uploads/2020/11/GodfreyKneller-IsaacNewton-1689-snl.no-dominio-publico-200px.jpg" alt="Isaac Newton" />
        <h3>Isaac Newton</h3>
    </div>
</div>
</body></html>

Archivo CSS

#galeria  {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.personaje img  {
    border-radius: 100px;
}

.personaje h3  {
    text-align: center;
}

En este ejemplo, en el fichero CSS hemos asignado reglas para todos aquellos elementos de clase ‘personaje’ e identificador ‘galeria’, en todo el documento HTML e incluso en todos aquellos documentos HTML en los que esté enlazado el fichero CSS.

Observe el archivo HTML del ejemplo:

  1. Dentro del par <head> </head> se enlaza el archivo styles.css, usando la etiqueta <link>
  2. En el fichero HTML una serie de elementos tienen asignada la clase «personaje» (class=»personaje»), y la capa que lo contiene todo le hemos asignado el identificador «galeria» (id=»galeria»).

…y en el archivo CSS:

  1. Cada vez que modifiquemos en el archivo CSS, por ejemplo, la regla justify-content, una sola modificación bastará para que todos los elementos galeria cambien en todas las páginas en las que haya galerías. Por eso el CSS externo es esencial para mantener la consistencia de los estilos y optimizar el desarrollo, sobre todo en sitios web de tamaños considerables.
  2. #galeria es un identificador, mientras que .personaje es una clase. Por eso, al nombrarlos en CSS, el primero debe ir precedido de almohadilla (#) y el segundo de un punto (.).
  3. La galería es una caja flexible: display: flex; lo que significa que los elementos que contiene se organizan de una forma especial, adaptada a pantallas pequeñas (responsive).
  4. Deben redondearse (border-radius: 100px;) todas las imágenes contenidas dentro de cualquier capa de clase personaje (.personaje img {…}), y deben alinearse en el centro (text-align: center;) todos los títulos 3 (h3) que estén dentro de una capa de clase personaje (.personaje h3).
  5. Los personajes se deben reubicar en función del tamaño de la pantalla porque tienen la regla flex-wrap: wrap; Compruébelo reduciendo la anchura del navegador hasta que los personajes no quepan en ella. La propiedad flex-wrap solo es válida acompañada de la regla display: flex;
  6. Los personajes se reparten más o menos por el visor, debido a la regla justify-content: space-around;. La propiedad justify-content solo es válida acompañada de la regla display: flex;

Además, observe: las imágenes pueden verse porque están publicadas en el servidor web donde se aloja qe2computing.com.

CSS interno

El CSS interno se aplica a una sola página. Este enfoque tiene sobretodo desventajas con respecto al CSS externo:

  • «Ensucia» la página con código que no es HTML
  • Aumenta el tiempo de carga de cada página, con las consecuencias negativas que esto implica
  • Empeora la gestión del mantenimiento del sitio web. Cuando cambiemos una regla, habremos de hacerlo en todas las páginas

Estas reglas de estilo se escriben dentro del par de etiquetas de apertura y cierre <style>, el cual debe estar dentro de la sección <head>. Puede utilizarse el estilo de CSS interno en páginas web en las que hay estilos que no se van a repetir en ninguna otra página del sitio web.

CSS

...
<head> 
    <style>
        h2  {
            color: green;
            font-size: 40px;
        }
    </style>
</head>
...

CSS inline o en línea

El CSS en línea se aplica a elementos individuales. Este es aún menos reutilizable que el CSS interno, ya que se debe escribir cada regla de forma explícita para cada elemento, tantas veces como se repita en el documento:

Página HTML:

...
<div class="galeria" style="display: flex; flex-wrap: wrap; justify-content: space-around;">
    <div class="personaje">
        <img style="border-radius: 100px;" src="https://www.qe2computing.com/wp-content/uploads/2020/11/Sigmund_Freud_by_Max_Halberstadt_cropped_es.wikipedia.org_.Dominio-publico-200px.jpg" alt="Sigmund Freud" />
        <h3 style="text-align: center;">Sigmund Freud</h3>
    </div><!-- Fin de la capa personaje -->
</div><!-- Fin de la capa galeria -->
...

Observe en el ejemplo anterior:

  1. Cada vez que insertemos un nuevo personaje, o una nueva galería, habrá que volver a escribir de nuevo todas las reglas que se aplican: border-radius a cada imagen, text-align a cada pie de foto, etc.
  2. Las capas pueden seguir teniendo clases (galeria, personaje), aunque de poco o nada sirven si solo utilizamos CSS inline.

Cabe insistir en que si utilizamos CSS inline indiscriminadamente, y un día cambiamos el diseño de nuestro sitio web, habremos de ir página por página, elemento por elemento, haciendo todas aquellas modificaciones que podrían haberse aplicado desde un solo archivo, una sola vez para cada clase o identificador.

Y hasta aquí las desventajas. No obstante, el CSS en línea puede ser útil cuando queremos hacer cambios rápidos y puntuales, que no se van a repetir a largo del sitio web, como mucho unas pocas veces dentro del documento.

Prioridad

Es posible utilizar una combinación entre los 3 métodos, aunque no es recomendable. En este caso, si hay reglas contradictorias, el método con una prioridad más alta prevalece sobre el resto, podríamos decir que sobrescribe sus reglas.

La preferencia es la siguiente, de más a menos preferencia en el orden indicado:

1: CSS inline; 2: CSS interno y 3. CSS externo

Servicios en línea para probar código

Si no tenemos la opción de crear los archivos, o este método nos parece engorroso en este momento, podemos probar código HTML y CSS en uno de los servicios que existen en línea. Usualmente siempre hay opciones gratuitas y de pago en este tipo de servicios.

Recomendamos empezar practicando con uno de estos servicios online, a partir de los ejemplos propuestos, y después ampliar con los recursos de MDN y w3schools.com (se especifican más adelante).

Codepen.io

Tal vez la más popular, esta fabulosa plataforma online permite, con versión gratuita disponible, nos permite probar código HTML, CSS y JavaScript simultáneo. Es decir, no como actuarían por separado, sino unidos en una sola aplicación web.

Con multitud de funcionalidades, como la de incrustar nuestros «pen» en páginas web, incluso permite enlazar preprocesadores HTML,CSS y JS, y visualizar los resultados en tiempo real. 🌐 Sitio web de Codepen.

JSFiddle

Similar a Codepen.io, permite también la visión en tiempo real del código que escribimos. 🌐 Sitio web de JSFiddle

Preprocesadores CSS

Un procesador CSS es un software que permite generar CSS a partir de la sintaxis del preoprocesador. La mayoría de preprocesadores que existen añaden características que el CSS puro no tiene, como las variables, mixins, selectores anidados, … estas características hacen la estructura de CSS más legible y fácil de mantener.

Para usar un preprocesadro CSS se debe instalar un compilador en el servidor web que utilicemos.

SASS

| sitio web | instalación | guía básica sobre Sass | documentación |

SASS es el preprocesador CSS más popular que actualmente existe. Es libre (open source), bajo licencia MIT.

SASS es, por tanto, una extensión del lenguaje CSS, al que le añade capacidades para el uso de variables, reglas anidadas, funciones, … y más.

Frameworks CSS

Un Framework CSS es una serie de herramientas que facilitan el desarrollo de sitios web. Para ello nos facilitan interfaces de usuario, reglas CSS predefinidas para tablas, botones, formularios, … y diferentes utilidades que nos evitan tener que escribir el código desde cero.

Además, asegura la compatibilidad del código entre navegadores.

Twitter Bootstrap

Twitter Bootstrap o simplemente Bootstrap, es el framework front-end HTML, CSS y JavaScript más popular que existe actualmente. Aunque posee extensiones para JavaScript como se ha señalado, Bootstrap suele catalogarse como «framework para CSS». Contiene plantillas de diseño con formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS.

Fue creado por un empleado de Twitter, que lo lanzó bajo licencia de software libre. A diferencia de muchos otros frameworks web, Bootstrap solo gestiona el desarrollo frontend.

La popularidad de Bootstrap se debe a la facilidad de maquetación que disponemos usando sus clases CSS predefinidas. Además, el diseño visual de elementos HTML lo hace considerablemente intuitivo.

  • Hace el desarrollo web más fácil y rápido.
  • Incluye plantillas HTML y CSS para tipografía, formularios, botones, tablas, navegación, carruseles de imágenes, plugins JavaScript y más.
  • Te facilita la creación de diseños responsive (sitios adaptados a cualquier tamaño de pantalla).

Uso de Bootstrap

Las alternativas para utilizar Bootstrap en nuestro sitio Web:

  • Descargar desde getbootstrap.com uno de los siguientes:
    • Descargar el código CSS y JavaScript compilado, la forma más fácil de empezar.
    • Descargar el código fuente. contiene todos los archivos Less, y JavaScript originales de Bootstrap. Requiere una mayor coinfiguración.
    • Descargar el código fuente en formato Sass, una variante de la versión anterior. Permite fácil inclusión de Rails, Compass, o para proyectos de solo Sass.
    • Instalar Bootstrap con el gestor de dependencias Bower.
  • Inicluir Bootstrap desde un CDN. La empresa NetDNA aloja de forma gratuita en su CDN una copia de los archivos CSS y JavaScript de Bootstrap.

Más ejemplos: Cajas flexibles con imágenes circulares

El siguiente ejemplo, que puede abrir y editar directamente en Codepen, muestra una capa flexbox, responsive, con capas interiores que contienen personajes.

Recursos

🌐 [developer.mozilla.org#css] CSS. El punto de partida CSS de Mozilla Developer Network, una fantástica serie de recursos para desarrolladores, llenos de tutoriales, guias de referencia, … y más.
🌐 [developer.mozilla.org#refcss] Referencia CSS. Referencia exhaustiva para desarrolladores web experimentados, de los MDN Web Docs
🌐 [w3schools.com] CSS Tutorial. También excelentes los tutoriales de w3schools, su bien organizada estructura lo hace ideal como guía de consulta.
🌐 [w3.org] Cascading Style Sheets home page. Especificación estandarizada de CSS del W3C.
🌐 [codepen.io] Codepen. Sitio en línea con cuenta gratuita disponible para probar código HTML, CSS y JavaScript, simultáneamente.
🌐 [getbootstrap.com] Sitio del framework Bootstrap.

Share This