Cargando...

CSS – ¿Qué son y para qué sirven?

Un repaso a los fundamentos de las CSS

El lenguaje HTML está limitado a la hora de dar formato visual a un documento, por tanto, los diseñadores utilizaron etiquetas html que tenían
(tienen) atributos que proporciona el lenguaje html, por ejemplo color=»» pero sucedía que algunas no funcionaban en  todos los navegadores. También utilizaban diversos trucos no estándares para darle aspecto visual a sus páginas html.  Problemas que tenía este método:

  • Errores en distintos navegadores
  • Difícil escalabilidad

Tradicionalmente en una página HTML teníamos:

  • HTML estructural   (<p>Hola mundo</p>)
  • HTML de diseño     (<p color=»red»>Hola mundo</p>)

Que se mezclan ambos en un documento dificultando la legibilidad del código.

CSS Significa Cascading Style Sheets

CSS significa Cascadig Style Sheets

Los estilos CSS son reglas de formato que controlan el aspecto de una página. Los estilos CSS tienen una sintaxis especial. Con ella definiremos un estilo (regla) que se aplicará a:

  • Un web entero
  • Un documento o página HMTL
  • Una porción del documento
  • Una etiqueta en concreto
  • Podemos tener varios estilos diferentes aplicables a un mismo elemento

De esta forma se aumenta muchísimo la capacidad de maquetación de la página. Podemos por ejemplo:

  • Definir interlineados, identados, margenes…
  • Colocar con precisión elementos en la página
  • Definir visibilidades
  • Utilizar distintas unidades de medida, pixels, %, pulgadas, puntos, centimetros…
  • Trabajar por capas, definir regiones desplazables (scroll) …
Ubicación de las reglas CSS

Ubicación de las reglas CSS

Las reglas  o estilos CSS pueden residir en las ubicaciones siguientes:

  • Las hojas de estilos CSS externas: son conjuntos de reglas CSS almacenados en un archivo .css independiente externo (no un archivo HTML).El archivo .css se vincula a una o varias páginas de un sitio Web mediante un vínculo situado en la sección head de un documento.
  • Las hojas de estilos CSS internas (o incrustadas): son grupos de reglas CSS incluidos en una etiqueta style en la sección head de un documento HTML.

Por ejemplo, el siguiente ejemplo define el tamaño de la fuente de todo el texto del documento formateado con la etiqueta de párrafo:

<head>
  <style>
     p{ 
       font-size:80px
      }
  </style>
</head>
  •  Los estilos en línea: se definen con instancias específicas de etiquetas en un documento HTML. Por ejemplo, <p style=“font-size: 9px”> define el tamaño de la fuente sólo para el párrafo formateado con una etiqueta que contenga el estilo en línea.

Los estilos en línea, aplicados a etiquetas que contienen bloques de la web permiten aplicar estilos a determinadas áreas de nuestra web:

La etiqueta html <span></span> permite aplicar estilo a una zona reducida de la página con el atributo style, incluso dentro de un párrafo:

<p> 
   Establece un párrafo con varias palabras donde 
   <span style="color:green">esto se muestra en color verde</span>.
   Con estilos resulta muy fácil.
</p>

La etitqueta <div></div> establece una división o área en la pagina. Permite aplicar estilo a una zona amplia de la página.

<div style="color:#000099; font-weight:bold">
    <h3>Estas etiquetas van en <i>azul y negrita</i></h3>
    <p>Seguimos dentro del DIV, luego permanecen los etilos</p>
</div>

Herramientas para desarrolladores como Dreamweaver, Expressión Web, WebMatrix, etc.  representan la mayoría de atributos de estilo aplicados y los muestra en la ventana de documento. También se puede obtener una vista previa del documento en la ventana del navegador para comprobar los estilos aplicados. Algunos atributos de estilo CSS se representan de forma distinta en Microsoft Internet Explorer, Netscape Navigator, Opera y Apple Safari.

Definir un conjunto de estilos

Definir un conjunto de estilos

Con la etiqueta HTML <style type=“text/css”></stile> podemos definir un conjunto de estilos. Cuando esta etiqueta se coloca en una página, dentro de la cabecera <head></head>,  permite aplicar estilos a toda la página.

<html>
&nbsp; <head>
&nbsp; <title>Ejemplo de estilos para toda una p&aacute;gina</title>
&nbsp;&nbsp; <STYLE type="text/css">
&nbsp; <!--
&nbsp; &nbsp;&nbsp; H1 {text-decoration: underline; text-align:center}
&nbsp; &nbsp;&nbsp; P {font-Family:arial,verdana; color: white; background-color: black}
&nbsp; &nbsp;&nbsp; BODY {color:black;background-color: #cccccc; text-indent:1cm}
&nbsp; &nbsp;&nbsp; // -->
&nbsp; &nbsp;&nbsp; </STYLE>
&nbsp; </head>
&nbsp; <body>
   &nbsp; <h1>P&aacute;gina con estilos</h1>
   &nbsp; Bienvenidos...
&nbsp;    <p>
        Esto es un ejemplo de página con estilos definidos en la etiqueta <b>style</b>
     </p>
&nbsp; </body>
</html>

Si aplicamos estilos a <body> son heredados por las demás etiquetas. Se pueden redefinir los estilos para las etiquetas contenidas en body. Manda el estilo de la etiqueta más concreta (más interna). Los comentarios <!–Declaración de estilos–> se utilizan para soporte de navegadores antiguos.

Redefinición de estilos

Redefinición de estilos

Se pueden definir varios tipos de estilos CSS para:

  • Una etiqueta Html, redefiniendo su estilo por defecto. Estas son las llamadas reglas de etiquetas HTML que redefinen el formato de una determinada etiqueta, como <p> o <h1>.
  • Las reglas CSS personalizadas, también llamadas estilos de clase (o simplemente clase), permiten aplicar atributos de estilo a cualquier rango o bloque de texto. Los estilos de clase empiezan por un punto (.)

Por ejemplo, puede crear un estilo de clase llamado .red, defininiendo la propiedad de color de la regla con el valor red y aplicar el estilo a una porción del texto de párrafo, utilizando <span class=»red»>Texto en rojo</span>

  • Los estilos avanzados redefinen el formato de una combinación particular de elementos o de otros selectores (por ejemplo, el selector td h2 se aplica siempre que aparezca un encabezado h2 dentro de una celda de tabla, td)

Los estilos avanzados también pueden redefinir el formato de etiquetas que contengan un atributo id específico (por ejemplo, los estilos definidos por #myStyle se aplican a todas las etiquetas que contengan el atributo id=»myStyle»).

Hojas de estilo

Hojas de estilo

Cuando estas definiciones se colocan todas juntas en una Hoja de Estilos  (fichero de texto con extensión .css) permiten aplicar estilo a toda un sitio o a las páginas que se vinculen con la hoja de estilos. Si el contenido de la página reside en el archivo .html, entonces los estilos css :

  • Se crearán en documentos .css que contienen todas las declaraciones de estilo
  • O bien se colocan todos juntos en la cabecera de la página (<head>).

Los ficheros .css se vinculan a cada página que queramos que hereden los estilos de la hoja de estilo

Definición de las reglas

Definición de las reglas

Un estilo CSS o regla de formato consta de dos partes:

  • El Selector
  • La Declaración

El selector es un término (como p, h1, el nombre de una clase (.red) o un ID (#myStyle) que identifica el elemento formateado. La declaración define los elementos de estilo. En el siguiente ejemplo, h1 es el selector y todo lo que queda entre las llaves ({}) es la declaración:

h1 {
   font-size: 16px;
   font-family: Helvetica;
   font-weight: bold;
}

La declaración a si vez tiene dos partes:

  • La propiedad (por ejemplo, font-family)
  • El valor (por ejemplo, Helvetica).

El ejemplo anterior crea un estilo para las etiquetas h1:

El texto de todas las etiquetas h1 vinculadas a este estilo tendrá un tamaño de 16 píxeles, fuente Helvetica y negrita.

Ejemplo de hoja de estilos

Ejemplo de hoja de estilos

body {
  font-family: Arial, Helvetica, sans-serif;
  color: #00ffff;
  background-color: Teal;
}

p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12pt;
}

h1 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 36pt;
  text-decoration: underline;
  background-color: #00CC00;
  text-align: center;
}

td {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10pt;
  text-align: center;
}

.oculto {
  display: none;
}

#mitabla {
  background-color: #99FF33;
}

 

Vincular una hoja de estilos

Vincular una hoja de estilos

Se vinculan a cada página que queramos con la siguiente etiqueta hmtl. Esta vinculación se hace dentro del <head> </head> de la página.

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

rel=»stylesheet» indica que el enlace es hacia (con) una hoja de estilos type=»text/css»     el archivo es de texto, en sintaxis CSS href=»estilos.css»  indica el nombre del fichero de los estilos, aquí podremos poner la ruta de nuestro fichero .css, normalmente relativa a la raiz del sitio como  por ejemplo /css/estilos.css, o relativa al documento que la vincula, como ./css/estilos.css El siguiente ejemplo vemos cómo se realiza la vinculación con la hoja de estilos ./css/estilos.css, que según la ruta está dentro de una carpeta css en el mismo sitio que la página html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Página que lee estilos</title>

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

</head>

<body>
<h1>Página que lee estilos</h1>
<p>Esta página tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos.<br />
Es muy fácil.</p>
<p>Otro párrafo antes de la tabla</p>
<table width="242" border="1" cellpadding="2" cellspacing="0" class="oculto">
  <tr>
    <td>Esto está dentro de un TD, luego tiene estilo propio, declarado en el fichero externo. </td>
  </tr>
  <tr>
    <td>La sgunda fila otro TD </td>
  </tr>
</table>
<br/>
</body>
</html>
El orden de aplicación, cascada

El orden de aplicación, cascada

Es importante el orden de aplicación de la regla css, según donde se coloque se su valor prevalecerá sobre el de otras reglas que quieran modificar la apariencia del mismo elemento de la página.  En orden de prioridad:

  1. Declaración de estilos con fichero externo. (Para todo un sitio web vinculación en <head>)
  2. Declaración de estilos para toda la página. (Con la etiqueta <style> en la cabecera de la página)
  3. Estilos definidos en una parte de la página. (Con la etiqueta <div> por ejemplo)
  4. Definidos en una etiqueta en concreto. (Utilizando el atributo style en la etiqueta en cuestión)
  5. Declaración de estilo para una porción pequeña del documento. (Con la etiqueta <span>)

Cuanto más específico es el lugar donde se ubique la regla mayor es la prioridad de aplicación.

La expresión en cascada hace referencia a la posibilidad de aplicar varios estilos al mismo elemento o página Web.

Por ejemplo, puede crear una regla CSS que aplique color y otra que aplique los márgenes y aplicarlas las dos al mismo texto en una página.

Los estilos definidos se distribuyen en “cascada” hacia los elementos de la página Web, lo que le permite obtener finalmente el diseño deseado.

Una de las grandes ventajas de las CSS reside en que pueden actualizarse fácilmente; cuando actualiza una regla CSS en un sitio, el formato de todos los documentos que usan ese estilo se actualiza automáticamente con el nuevo estilo.

Al crear estilos en una hoja de estilos externa, puede controlar el aspecto de varias páginas Web desde un punto central, en lugar de definir estilos para cada página individualmente.

Deja un comentario