Skip to content

CSS

Jump to bottom
Felipe Cortez edited this page Aug 1, 2021 · 1 revision

CSS (Cascading Style Sheets) es un lenguaje estándar que describe la presentación de las páginas web (cómo se muestra lo que contiene la página).

CSS3 es la versión más reciente de este lenguaje.

Lo más básico del CSS es la regla. Cada regla se inicia con un selector, seguido de paréntesis de llave {…}. Tal paréntesis contiene una o varias declaraciones. Cada declaración se compone del par propiedad: valor. Cuando son varias declaraciones, corresponde separar una de otra mediante punto y coma:

selector{ 
 propiedad: valor;
 propiedad: valor;
}

El selector de cada regla CSS indica dónde y/o cuándo ésta debe afectar al HTML. Por ejemplo:

a{
 color:red;
}

a[href$=".pdf"]{
 color:purple;
}

a:hover{
 color:pink;
}

En el ejemplo, tenemos:

  • una primera regla afecta a todo vínculo (a de anchor), asignándole un color rojo.

  • una segunda regla afecta al vínculo si es que su referencia de hipertexto termina en .pdf (href de hipertext reference), asignándole un color púrpura.

  • una tercera regla afecta a todo vínculo cuando el mouse pasa por encima, asignándole un color rosa en ese momento.

Ahora, para que el CSS afecte al documento HTML correspondiente, puede incrustarse, importarse o vincularse en la cabeza del mismo documento:

Cuando se inscrusta, la cabeza del HTML queda así:

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
  a{
   color:red;
  }
  a[href$=".pdf"]{
   color:purple;
  }
  a:hover{
   color:pink;
  }
 </style>
 <title>¡Hola Mundo!</title>
</head>

Cuando se importa:

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
  @import url('estilo.css');
 </style>
 <title>¡Hola Mundo!</title>
</head>

Y cuando se vincula:

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="estilo.css" rel="stylesheet">
 <title>¡Hola Mundo!</title>
</head>

Para que no quede sin mencionarse, también se puede incluir CSS a nivel de atributos del HTML, pero esa es una forma poco eficiente porque afecta a un único elemento, el que lo contiene, y por lo mismo no utiliza selector ni paréntesis de llave, sólo usa el o los pares propiedad: valor.

<a href="https://github.com/profesorfaco/infografia" style="color:red">este es un vínculo</a>
Clone this wiki locally