Menú principal

CSS (Cascade Style Sheets)

El lenguaje HTML es poco flexible a la hora de controlar la apariencia de una página. Los problemas aparecen en el momento en que HTML empieza a utilizarse para crear "imagen de marca". Pensemos que la intensa difusión de internet, fue un punto a favor para que la función original de html, representar la estructura lógica de un documento, pasase a centrarse en la forma. HTML no fue pensado para trabajar sobre los elementos formales de los documentos web.

Hoy en día los aspectos formales han cobrado mucha importancia. Los diseñadores web hemos tenido que recurrir a trucos y a nuestra propia astucia para intentar disimular las carencias del lenguaje HTML en lo concerniente a la presentación visual.

Si quisiéramos hacer cambios globales en un sitio web, lo más probable es que nos encontremos con situaciones bastante problemáticas. Imaginemos, por ejemplo, lo que necesitaríamos para cambiar el tipo de letra de un sitio web compuesto por 300 páginas.

Una característica esencial de las hojas de estilo en cascada (CSS) es la posibilidad de separar los elementos formales de los de contenido. De esta forma, sólo con una pequeña modificación de la hoja de estilo es posible cambiar el aspecto de todas las páginas en las que se aplica esa hoja.

No todas las versiones de los navegadores las soportan. Si consideramos los dos principales Netscape es capaz de utilizarlas desde la versión 4.0 y Explorer desde la 3.0


¿Por qué se llaman hojas de estilo?

Con las hojas de estilo podemos crear clases y pseudoclases. Éstas nos permiten modificar e indicarle al navegador la forma en la que tiene que presentar cualquier elemento HTML.


¿Por qué se llaman "en cascada"?

Cuando creamos un estilo, las especificaciones que se realicen para un determinado elemento serán aplicables a todos aquellos elementos que se encuentren "por debajo" de él atendiendo a un criterio de herencia. Por ejemplo, si especificamos un tipo de letra para el elemento <body> todos aquellos elementos que puedan heredar las características se presentarán con el mismo tipo de fuente. Así, el elemento <p> heredará el tipo de letra salvo que especifiquemos lo contrario.

También debemos de tener en cuenta que se establece un orden de prioridad para la aplicación de las normas en caso de que resulten contradictorias. El orden de preferencia para aplicar una norma es el siguiente:

- Estilo especificado dentro de la etiqueta.
- Estilo especificado en la cabecera del documento.
- Estilo definido en un documento independiente al que se enlaza nuestra página.

Si tenemos en cuenta el orden mencionado, lo más razonable es crear una hoja de estilo en un archivo independiente y vincular las páginas a este archivo. Si queremos realizar alguna modificación en un elemento concreto podríamos recurrir a uno de los dos primeros procedimientos que deberían resultar preferentes por ser más específicos.

 

Sintaxis

 

Cómo agregar estilos CSS a una página web.

Podemos usar cuatro métodos diferentes para agregar estilos CSS al código HTML de la página web:

1. Incustrar una hoja de estilo

Las reglas de la hoja de estilo se insertan entre las etiquetas de estilo inicial y final (<style> y </style>) de la sección encabezado de la página web:

<head>
     <title>Hoja de estilo incustrada (CSS)</title>
     <style type="text/css">
  <!--
         h1 {color:blue; font size:40px; font-family:verdana;}
         p {color:white; background:green; font-family:helvetica; text-indent:2cm;}
   -->
     </style>
</head>

El atributo type de la etiqueta <style> indica al explorador el tipo de hoja de estilo que debe esperar.

2. Vinculación a una hoja de estilo externa

Para crear un vínculo a una hoja de estilo externa, insertamos una etiqueta <link> como en el ejemplo siguiente:

<head>
     <title>Hoja de estilo vinculada</title>
     <link href="estilo.css" rel="stylesheet" type="text/css">
</head>


La etiqueta <link> indica al explorador web que use las reglas de formato CSS en el archivo llamado "estilo.css". El atributo type identifica el archivo como un archivo de texto con información CSS, y el atributo href indica al explorador el nombre y, si es necesario, la ruta de acceso del archivo con las definiciones de hojas destilo que el explorador va a abrir. También puede incluir un atributo media para especificar los medios a los que se aplican las reglas de la hoja de estilo. Al leer el valor del atributo media (en la etiqueta <link>), el explorador web puede descargar selectivamente archivos de hojas de estilo aplicables únicamente a los medios utilizados por el explorador. Por ejemplo, explorador web puede impedir la descarga de la siguiente hoja de estilo que se aplicará a "tv" (es decir, televisión) al mostrar documentos HTML en la pantalla de un equipo estándar:

     <link href="webtv.css" rel="stylesheet" type="text/css" media="tv" >

Descriptores de tipos de medios de hojas de estilo en cascada de nivel 2 (CSS level2)
Descriptor de tipo de medios Aplicar reglas de hojas de estilo a
"all" Todos los dispositivos
"aural" Sintetizadores de voz
"Braille" Dispositivos táctiles y de braille
"embossed" Impresoras de páginas de braille
"handheld" Dispositivos de mano (como PDA
"print" Medios de páginas (como una página impresa) o páginas que se muestran en pantalla (como una "presentacion preliminar").
"Projection" Proyectores y dispositivos de impresión en diapositivas y transparencias
"screen" Pantallas en color de computadoras
"tty" Dispositvos con cuadrículas de caracteres de punto fijo, como teletipos
"tv" Dispositivos del estilo de la televisión (baja resolución, color, desplazacmiento limitado, dispone de sonido).

 

3. Importar una hoja de estilo externa

Es similar a la vinculación. La diferencia es que puede combinar la importación con otros métodos, algo que no ocurre con la vinculación. El siguiente ejemplo no sólo contiene una instrucción de import, sino también reglas CSS incrustadas que dan estilo a encabezados de nivel dos y modifican el estilo del texto principal de la página web:

<head>
     <title>Hoja de estilo en cascada importada(CSS)</title>
     <style type="text/css">
  <!--
         @import url(estilo.css)
         h2 {color:purple; font size:30px; font-family:helvetica;}
         body {color:black;}
   -->
     </style>
</head>

El archivo estilo.css incluye la siguiente regla:

         body {background:#ADD8E6; color:maroon;}

¿Cuál será la regla que se impondrá?

4. Aplicar estilos en línea de etiquetas HTML

Imaginemos que deseamos aplicar una sangría de cuatro centímetros a un único encabezado de nivel dos y mostrar el color del encabezado como texto blanco sobre un fondo azul. Para especificar una regla de formato CSS que se aplique solamente a una etiqueta, utilizamos el atributo style para especificar la regla en la etiqueta como <nombreDeEtiqueta style="Declaraciones de CSS">. Así, en este ejemplo, podriamos insertar la regla CSS en la etiqueta <h2> de la siguiente manera:

<html>
<head>
     <title>Estilos en línea </title>
<head>
<body>
         <h2 style="text-indent:1.5 in; background:blue; color:white;">
         Este texto de encabezado es blanco con un fondo azul, sangrado de
         4 centímetros. </h2>
  </body>
</html>

Descargar referencia css

Gramática de CSS

Selectores

Podemos redifinir cualquier elemento o etiqueta xhtml, esto afectará a todos los elementos h1:

h1 {      }



Selectores de clase

Los selectores de clase se integran en el documento utilizando el atributo class. Existen dos tipos de selectores de clase: Generales y específicos.

Selectores generales:

.small

<a class="small">Novedades</a>
<p class="small">Esto es un párrafo de texto</p>

Selectores específicos:

p.small

Podemos escribir clases más específicas para un elemento:

p.small { font-size: 10px;}
p.medium {font-size: 12 px;}
p.large {font-size: 14 px;}

La ventaja de estos selectores específicos es que evitamos el solapamiento y una mayor flexibilidad a la hora de aplicar estilos a cualquier elemento.


Selectores ID

Son similares a los selectores de clase. Se diferencia en la semántica y en el comportamiento.

Sintaxis:

#cabecera

<div id="cabecera">Contenido de cabecera</div>


Esto no sería correcto:

#barra

<div id="barra">Bienvenidos</div>
<div id="barra">Esto es una prueba de diseño web </div>


Selectores contextuales (descendientes)

p em { }


Pseudo clases

a:link
a:visited
a:hover
a:active

Como hemos visto, podemos combinar estos selectores y clases. Así tenemos la posibilidad de crear múltiples estilos, por ejemplo para un enlace:

a.principal:link
a.pie:link


Pseudo elementos

CSS2 ofrece un total de cuatro pseudo-elementos de selector.

:first-line
:first:letter
:before
:after


Grupo de selectores

h1, h2, h3 {font-family: Arial, sans-serfi;}


Pseudo selectores dinámicos

:hover
:active
:focus


Selectores hijo

div>p { }



Reglas, declaraciones, propiedades

body {

           font-family: Arial, sans-serif;
           color: blue;
 
        }

Una hoja de estilo contiene al menos una regla y puede contener tantas como necesites.



Propiedades

Disponemos de una serie de abreviaciones para escribir las propiedades:

Propiedades
Abreviación Propiedades que incluye
background background-attachment
background-color

background-image
background-position
background-repeat
border border-color
border-style
border-width
border-bottom border-bottom-color
border-bottom-style
border-bottom-width
border-left border-left-color
border-left-style
border-left-width
border-right border-right-color
border-right-style
border-right-width
border-top border-top-color
border-top-style
border-top-width
font font-family
font-size
font-style
font-weight
font-variant
font-height
list-style list-style-image
list-style-position
list-style-type
margin margin-top
margin-right
margin-bottom
margin- left
padding padding-top
padding-right
padding-bottom
padding-left

Ejemplo:

p {

      font-family: Arial, sans-serif;
      font-size: Arial, sans-serif;
      font-weight: Arial, sans-serif;
      font-style: Arial, sans-serif;      
      line-height: 12px;
      color: black ;

     }


Abreviado: p {
                        font: bold normal 16px/15px Arial, sans-serif;
                   } 



body { margin: .10in .75in .75in .10in;}

Elementos de bloque

h1-h6
p
form
table
ol
ul

Elementos en línea

a
em
strong
img
input

Ejercicio 1

Documento sin estilo en txt. Dar formato con css.

1. Definimos márgenes, fuente, colr y color de fondo para el cuerpo del documento (body)

2. Añadimos estilos a las cabeceras.

Cabecera principal (h1) (margen, relleno, fuente, color, color de fondo y borde inferior)
Cabecera secundaria (h2) (margen, relleno, fuente y color)
Párrafo (p) (margen, fuente,)

3. Las imágenes sin borde (img)

4. Los enlaces (etiqueta <a>):

El estilo principal (a:link) con su color, color de fondo transparente y sin subrayado. Cuando pase el cursor sobre un link (a:hover) que cambie de color del link, el color de fondo y que siga sin subrayar.

5. Las listas desordenadas (ul) (li). Fuete, tamaño, espacio entre líneas, tipo de letra

6. Por último, el estilo para las clases small

Trabajando con fondos

Ejemplos:

Posición de la imagen de fondo

Trabajando con bordes

Ejemplos:

Bordes

Trabajando con posicionamiento

Ejemplos:

Ejemplo 1
Ejemplo 2
Ejemplo 3
Ejemplo 4
Ejemplo 5
Ejemplo 6
Ejemplo 7