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.
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).
gracias por la info!
un saludo
Muy buena información, gracias por el aporte.