CSS Media Types (Medios de CSS)

Una de las caracteristicas de las hojas de estilo es que podemos definir la forma en que se visualizara el contenido dependiendo del dispositivo o medio en el que se presenta la informacion. Por ejemplo el monitor, en papel, un dispositivo braille, etc. es decir que un documento puede tener una presentacion al visualizarla en el monitor y otra diferente al momento de imprimirlo.

En la especificacion CSS 2.1 se listan 10 tipos:

  • all Utilizado para todos los dispositivos.
  • braille Utilizado para la retroalimentacion tactil de dispositivos braille.
  • embossed Utilizado para impresoras paginadas en braille.
  • handheld Utilizado para dispositivos moviles.
  • print Utilizado para documentos paginados destinados a ser impresos y para documentos vistos sobre pantalla en modo de vista preliminar.
  • projection Utilizado para presentaciones proyectadas.
  • screen Utilizado principalmente para pantallas del ordenador.
  • speech Utilizado para sintetizadores de voz.
  • tty Querido para medios de comunicación que usan una rejilla de carácter de diapasón fijo (como teletipos, terminales, o dispositivos portátiles con capacidades de demostración limitadas).
  • tv Destinado para dispositivos de tipo de televisión. Sigue leyendo

Incluir CSS en un documento HTML

Puedes incluir CSS en un documento HTML de tres formas:

  • Incluir CSS dentro del documento HTML
  • Incluir CSS en las etiquetas HTML
  • Incluir CSS desde un archivo externo

Incluir CSS dentro del documento HTML

Para incluir CSS dentro del documento HTML hacemos uso de la etiqueta <style>, la cual estara incluida dentro de la etiqueta <head>. El inconveniente de definir CSS dentro del mismo documento es que si ocupas un mismo estilo en diferentes documentos HTML a la hora de que quieras realizar algun cambio tendras que hacerlo en todos los documentos HTML.

Ejemplo:

<html>
<head>
<style type="text/css">
p { color: blue; font-size:15px; font-family:Arial;  }
</style>
</head>
<body>
<p>Este es un parrafo </p>
</body>

</html>

Incluir CSS dentro de la etiqueta HTML

Se puede incluir CSS dentro de la misma etiqueta html mediante el atributo style.

Ejemplo:

<html>
<head>
</head>
<body>
<p style="color: blue; font-size:15px; font-family:Arial;"> Este es un parrafo </p>
</body>
</html>

Incluir CSS desde un archivo externo

La otra forma de incluir CSS es definiendo en un archivo todos los estilos que vayamos a ocupar y lo guardamos con la extension .CSS, Una vez que tenemos el archivo creado lo enlazamos mediante la etiqueta <link>

Ejemplo:
Archivo: estilo.css

p { color: blue;
font-family:Arial;
font-size:15px;
}

Archivo: pagina.html

codigo.jpg

Centrar el contenido de una pagina con CSS

Muchas veces queremos que el contenido de nuestra pagina web se muestre en el centro y no sobemos como hacerlo. A continuacion se muestra una técnica para lograr esto:

En la etiqueta body se establecen los siquientes atributos:

body {
/* todos los margenes se establecen en 0 */
margin: 0px;

/* El texto se alinea a la derecha */
text-align: center;
}

Se crea una capa que llamaremos contenedor la cual incluira los siguientes atributos:

#contenedor {
/* Ancho de la capa */
width: 750px; 

/* Margen superior e inferior 0 px
margen derecho e izquierdo automatico*/
margin: 0 auto;

/* alineacion del texto a la izquierda*/
text-align: left;
}

Descargar: Ejemplo

Editor CSS – topSTYLE Lite

topst.jpg

Muchas veces queremos que cambiar el estilo de nuestra pagina o blog y no lo hacemos porque se nos complica la creación de las hojas de estilo. TopSTYLE Lite nos ofrece un entorno de desarrollo simple pero a la vez muy completo el cual integra:

  • Editor de CSS el cual cuenta con code hints que son utiles si no estas muy familiarizado con los atributos CSS .
  • Inspector de estilos en el que se muestra la lista completa de atributos CSS.
  • Vista previa mediante esta se aprecia el resultado de los estilos que se utilizan en el archivo CSS.

La version completa de este software es topSTYLE Pro el cual incluye un mayor numero de caracteristicas.