Introducción al lenguaje CSS

El lenguaje CSS es un lenguaje de diseño gráfico que se complementa extraordinariamente bien con el lenguaje HTML. En esta página de la Wikipedia podéis leer algo más sobre su historia. El lenguaje HTML está limitado hasta cierto punto a la hora de cambiar el estilo o apariencia de la visualización de las páginas web. Sin embargo, esta limitación se reduce notablemente con la introducción del lenguaje CSS. Para poder comprender completamente esta entrada, os recomiendo que leáis la entrada del lenguaje HTML.

Introducción al lenguaje CSS

Quiero leer...

Introducción al lenguaje CSS

En esta introducción al lenguaje CSS vamos a ver primero cómo es la estructura básica de este lenguaje de programación y después algunos ejemplo sencillos para ilustrarlo.

Estructura básica del lenguaje CSS

El código básico del lenguaje CSS debe seguir la siguiente sintaxis, que recibe el nombre de regla:

selector { 
    propiedad: valor; 
}

El selector es el elemento al que vamos a dar estilo (puede ser una etiqueta, una clase o un identificador).

La propiedad es como se conocen a los atributos que pueden ponerse en lenguaje CSS, con sus valores correspondientes. Si el selector es…

  • una etiqueta, la regla se escribe así: etiqueta {} (sin nada delante)
  • un identificador, la regla se escribe así: #identificador {} (con almohadilla delante)
  • una clase, la regla se escribe así: .clase {} (con punto delante)

El selector clase es interesante, porque podemos definir varias etiquetas como una clase cualquiera <p class=”texto”>. Esto es intermedio entre el selector etiqueta (en el que se modifican todos los objetos con esa etiqueta) y el selector identificador (en el que modifica sólo una etiqueta en concreto con ese nombre).

Ejemplos de uso de CSS según selectores

Vamos a comenzar con una etiqueta HTML, la que se corresponde con h1. Esta regla tiene 3 valores: el color del texto, el tamaño del texto, y la tipografía.

h1 { color: red; 
     font-size: 32px; 
     font-family: Verdana; 
   }

Seguimos con un identificador que tiene solo un valor: el color.

#cabecera { 
    color: red; 
    }

Y finalizamos con una clase, que contiene dos valores: el color del texto y el tamaño del texto.

.texto {
  color: blue;
  font-size: 30px;
  }

Añadir comentarios

Como en cualquier otro lenguaje de programación, es muy recomendable el uso de comentarios en el código, con objeto de poder ayudarnos a interpretarlo. En el caso del lenguaje CSS los comentarios se introducen usando el símbolo de barra-asterisco al principio, asterisco-barra al final.

/* El comentario viene aquí */

Incluir códigos CSS en páginas web HTML

Podemos incluir código CSS en nuestra web de dos modos:

  • Haciendo un enlace a un archivo CSS usando <link>
<link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<link rel= "stylesheet" type= "text/css" href= "Datos/estilo.css" />
  • Dentro de las etiquetas ya vistas <style></style> en el <head> (si son pocas).

3 comentarios en «Introducción al lenguaje CSS»

Deja un comentario