Seleccionar página

Bueno, he decidido hacer un pequeño tutorial si quieren llamarle sobre CSS desde cero para novatos y para experimentados no les viene mal recordar algunas cosas…  Espero sea de ayuda.

Para trabajar con CSS y HTML necesitamos una aplicacion/software que nos permita programar en estos lenguajes, yo personalmente uso Adobe Dreamweaver. Pero sin siquiera abrir dreamweaver voy a pasar a explicar los conceptos que tiene el titulo de esta entrada…

 

Incluir CSS en HTML

Supongamos que tenemos nuestra pagina HTML y decidimos ponerle estetica mediante CSS, la creamos y tenemos una pagina HTML y una CSS con el codigo (que lo veremos mas adelante)…
Hay varias formas de enlazar o llamar a CSS desde nuestra pagina HTML, vamos a ver la mas comoda y mas usada:
Este metodo consiste en crear un archivo CSS con su respectivo codigo en forma externa y luego llamarlo o enlazarlo desde nuestro HTML mediante la etiqueta Link

<link rel="stylesheet" Type="text/css" href ="/css/estilos.css" media="screen"/>

generalmente la etiqueta Link va dentro de HEAD, veamos como queda la porcion de codigo Link dentro de la pagina 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=utf-8" />
<title>Documento sin titulo</title>
<link rel="stylesheet" Type="text/css" href ="/css/estilos.css"   media="screen"/>
</head>
<body>
</body>
</html>

Atributos de la etiqueta Link, ¿que significan?:

  • rel: realtivo a tipo de relacion que tiene el archivo que queremos enlazar, en este caso para CSS usamos siempre «stylesheet».
  • type: indica el tipo de recurso enlazado, para CSS es «text/css».
  • href: hace referencia a la ubicacion del archivo CSS
  • media: aca definimos en que tipo de dispositivo se va a ver (hay varios lo vemos mas adelante en este mismo Post (Medios CSS) )

okey, hasta ahi ya enlazamos nuestro CSS a la pagina HTML.

Glosario basico

veamos ahora el glosario o lenguaje basico de CSS, y para ello nada mas descriptivo que una   imagen:
Descripción:
Regla: es cada uno de los estilos que conforman una hoja de estilos, cada regla esta compuesta de selectores, llave apertura, declaracion, llave cierre
Declaracion: es el conjunto de propiedad y valor encerrado entre llaves, especifica los estilos, contiene las propiedades.
Propiedad: Permite modificar una caracteristica del elemento al que hacemos referencia.
valor: el valor que se le da a la propiedad.
En este caso lo que vemos es que a un titulo/texto ( h1 )  le cambiamos el color a negro.

Medios CSS

Algo caracteristico y bueno de CSS es que nos permite definir nuestra hoja de estilos para distintos dispositivos (PC, moviles, impresoras, tv, etc), aca listo algunos (sino son todos) medios:

  • all: todos los medios
  • braille: Dispositivos tactiles que emplean braille
  • embosed: impresoras braille
  • handheld: dispositivo de mano
  • Print: Impresoras y navegadores en el modo «vista previa para imprimir»
  • Projection: Proyectores y dispositivos para presentaciones
  • Screen: pantallas de computadoras regulares, PC.
  • Speech:  sintetizadores para navegadores de voz
  • tty: Dispositivos textuales limitados como teletipos o terminales de texto
  • TV: televisores y dispositivos con resolución baja.

Los medios mas utilizados actualmente son Screen y Print.

Bueno hasta aqui ha llegado esta entrega, espero que les sea de utilidad para empezar en el mundo de CSS.
Hasta la proxima….

A %d blogueros les gusta esto: