sábado, 29 de abril de 2017

Clase N° 14

Se pierden las dos horas de clase por la realización de las

PRUEBAS SABER

jueves, 20 de abril de 2017

Clase N° 13

Repaso general de las etiquetas más importantes, y básicas que se encontraron en el manual.

Se realizó una evaluación teórica sobre temas vistos en los manuales:

1). ¿Cuál es la diferencia entre HTML y CSS?

rta/ HTML se usa para estructurar el contenido css, mientras que css se usa para formatear, modificar y diseñar el contenido previamente estructurado.

2). ¿Cuales son los formatos que se pueden usar con Google Docs?

rta/ procesador de textos, una hoja de cálculo, programa de presentación de diapositivas y un editor de formularios.

3). ¿Cual es el elemento principal que se necesita para usar Google Docs?

rta/ Una cuenta google (Gmail) y una conexión a internet.

4). Código css para que todos los fondos de las páginas web que lo estén modificando salga amarillo, y la letra verde.

rta/

body{

color: green;

bacground-color: yellow;

}

ORDEN DE IMPORTANCIA

ejemplo= si en una misma linea de programación esta type, id, y class al mismo tiempo el orden de importancia es:

1. id

2. class

3. type

Es decir tomaría el valor que se encuentra en el id.

domingo, 16 de abril de 2017

Google docs

Google Docs es un conjunto de programas gratuitos online que sirve para crear documentos y ofrece la posibilidad de colaborar en grupo. Fue creado el 17 de septiembre de 2007.

Incluye un Procesador de textos, una Hoja de cálculo, Programa de Presentación de diapositivas y un Editor de formularios destinados a crear encuestas.

Se puede considerar un gestor online de documentos. Permite subir todo tipo de documentos a la cuenta y desde allí ordenarlos en carpetas y crear enlaces para compartirlos con cualquier persona o página web.

De esta forma, Google Docs se convierte en una especie de disco duro virtual.

Tan sólo se necesita una conexión a internet.

Puedes permitir acceder a aquellos documentos que tú quieras compartir. El resto sólo los verás y modificarás tú. Soporta gran cantidad de formatos.

Con el procesador de textos podremos editar nuestros documentos de Word y guardarlos con el mismo formato u otros distintos. Lo mismo pasa con presentaciones y hojas de cálculo.

Su característica más importante es su capacidad de trabajo colaborativo, mediante la cual, muchas personas son capaces de trabajar juntas en la realización de un documento.

URL= http://docs.google.com

TOMADO DE= https://tmduces.files.wordpress.com/2013/02/u4-manual-de-google-docs.pdf

ESTILO CSS A UNA CAJA DE TEXTO

crear una clase llamada "textbox" y utilizaremos las siguientes propiedades CSS para personalizar cualquier input text o textarea ...

border : Para aplicar estilos al borde de la caja de texto.

font-size : Para aplicar el tamaño de fuente de la caja de texto.

font-family : Para aplicar el tipo de fuente de la caja de texto.

padding : Para establecer unos márgenes entre el texto y el borde de la caja de texto.

border-radius : Para redondear las esquinas de la caja de texto.

background : Para establecer el color de fondo de la caja de texto.

color : Para establecer el color del texto de la caja de texto.

También utilizaremos el evento :hover para aplicar nuevos estilos cuando se pase el cursor sobre la caja de texto.

EJEMPLO=

<html>
 <head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Como dar estilos css a una caja de texto - input text y textarea</title>

  <style>
  .textbox
  {
  border: 1px solid #DBE1EB;
  font-size: 18px;
  font-family: Arial, Verdana;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -o-border-radius: 4px;
  background: #FFFFFF;
  background: linear-gradient(left, #FFFFFF, #F7F9FA);
  background: -moz-linear-gradient(left, #FFFFFF, #F7F9FA);
  background: -webkit-linear-gradient(left, #FFFFFF, #F7F9FA);
  background: -o-linear-gradient(left, #FFFFFF, #F7F9FA);
  color: #2E3133;
  }
  
  .textbox:focus
  {
  color: #2E3133;
  border-color: #FBFFAD;
  }
 </style>
 </head>
 <body>
 <table>
 <tr>
 <td><input type="text" class="textbox" size="30" placeholder="Input Text"></td>
 <td><textarea cols="25" rows="10" class="textbox" placeholder="Textarea"></textarea></td>
 </tr>
 </table>
</body>
</html>

NOTA IMPORTANTE= En lugar de usar la etiqueta <style> se deben realizar las modificaciones css en un archivo aparte .css

TOMADO DE= http://jquery-manual.blogspot.com.co/2013/11/como-dar-estilos-css-una-caja-de-texto.html

ESTILOS CSS A UN BOTÓN

Toca crear una clase llamada "button" y utilizaremos las siguientes propiedades CSS para personalizar el botón ...

border : Para aplicar estilos al borde del botón.

font-size : Para aplicar el tamaño de fuente del botón.

font-family : Para aplicar el tipo de fuente del botón.

padding : Para establecer unos márgenes entre el texto y el borde del botón.

border-radius : Para redondear las esquinas del botón.

background : Para establecer el color de fondo del botón.

color : Para establecer el color del texto del botón.

También utilizaremos el evento :hover para aplicar nuevos estilos cuando se pase el cursor sobre el botón.

EJEMPLO=

<html>
 <head>
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Como dar estilos css a un botón</title>

  <style>
  .button
  {
  border: 1px solid #DBE1EB;
  font-size: 18px;
  font-family: Arial, Verdana;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -o-border-radius: 4px;
  background: #4972B5;
  background: linear-gradient(left, #4972B5, #618ACB);
  background: -moz-linear-gradient(left, #4972B5, #618ACB);
  background: -webkit-linear-gradient(left, #4972B5, #618ACB);
  background: -o-linear-gradient(left, #4972B5, #618ACB);
  color: #FFFFFF;
  }
  
  .button:hover
  {
  background: #365D9D;
  background: linear-gradient(left, #365D9D, #436CAD);
  background: -moz-linear-gradient(left, #365D9D, #436CAD);
  background: -webkit-linear-gradient(left, #365D9D, #436CAD);
  background: -o-linear-gradient(left, #365D9D, #436CAD);
  color: #FFFFFF;
  border-color: #FBFFAD;
  }
 </style>
 </head>
 <body>
  <input type="button" class="button" value="button">
  <input type="submit" class="button" value="submit">
  <input type="reset" class="button" value="reset">
</body>
</html>

NOTA IMPORTANTE= En lugar de usar la etiqueta <style> se deben hacer las modificaciones css en un documento aparte .css

TOMADO DE= http://jquery-manual.blogspot.com.co/2013/11/como-dar-estilos-css-un-boton.html

ESTANDARES WEB Y VALIDACIÓN

Las siglas "W3C" son la abreviatura del World Wide Web Consortium, es decir, el Consorcio del WWW, que es una organización independiente que controla los estándares de codificación de la web (por ejemplo, HTML, CSS, XML y otros). Microsoft, la fundación Mozilla y muchos otros forman parte del W3C, y entre todos ellos llegan a acuerdos sobre los desarrollos futuros de los estándares.

Si ya has trabajado anteriormente en el campo del diseño web, probablemente sabrás que pueden existir grandes diferencias en la forma en que diferentes navegadores muestran una misma página web. Crear una página web que se pueda visualizar en Mozilla, Internet Explorer, Opera y el resto de los navegadores existentes, puede ser muy frustrante y llevar mucho tiempo de trabajo.

La idea de disponer de estándares es la de llegar a acuerdos sobre un denominador común respecto a cómo usar las tecnologías web. Esto significa que al cumplir con los estándares, todo desarrollador web tiene la certeza de que lo que hace funcionará de un modo más adecuado en diferentes plataformas. Por lo tanto, te recomendamos que respaldes el trabajo realizado por el W3C y valides tu código CSS para que cumpla con los estándares.

Validador CSS

Para hacer más fácil el cumplimiento con el estándar CSS, el W3C ha creado lo que se ha denominado como validador, que es un programa que interpreta las hojas de estilo y devuelve un informe de estado en el que se listan los errores y avisos, en el caso de que el código CSS no sea válido.

Si el validador no encuentra ningún error, se mostrará la imagen siguiente, que podrás poner en tu sitio web para demostrar que usas código validado:

El validador se puede encontrar en el siguiente enlace: http://jigsaw.w3.org/css-validator/

TOMADO DE= http://es.html.net/tutorials/css/lesson16.php

CAPAS (z-index)

CSS funciona sobre tres dimensiones: altura, anchura y profundidad. En las lecciones anteriores hemos examinado las dos primeras dimensiones. En esta lección, aprenderemos cómo hacer que diferentes elementos se conviertan en capas. En pocas palabras, esto hace referencia al orden en que los elementos se superponen unos con respecto a otros.

Para tal propósito, se puede asignar a cada elemento un número por medio de la propiedad z-index. El sistema consiste en que el elemento con un número mayor se superpone al elemento con un número menor.

Supongamos que estamos jugando al poquer y tenemos una escalera de color. La mano se puede presentar de tal manera que cada carta tiene un número asignado por medio de z-index:

En este caso, los números son consecutivos (yendo del 1 al 5), aunque se puede lograr el mismo resultado usando cinco numeros diferentes. Lo importante es la secuencia cronológica de los números (el orden).

El código del ejemplo de las cartas quedaría así:

 
 #diez_de_diamantes {
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: 1;
 }

 #sota_de_diamantes {
  position: absolute;
  left: 115px;
  top: 115px;
  z-index: 2;
 }

 #reina_de_diamantes {
  position: absolute;
  left: 130px;
  top: 130px;
  z-index: 3;
 }

 #rey_de_diamantes {
  position: absolute;
  left: 145px;
  top: 145px;
  z-index: 4;
 }

 #as_de_diamantes {
  position: absolute;
  left: 160px;
  top: 160px;
  z-index: 5;
 }

El método es relativamente sencillo pero las posibilidades que ofrece son múltiples. Es posible colocar imágenes sobre el texto, texto sobre imágenes, etc.

TOMADO DE= http://es.html.net/tutorials/css/lesson15.php

POSICIONAMIENTO DE ELEMENTOS

Con posicionamiento CSS, se puede colocar un elemento en el lugar exacto que se quiera de la página. Junto con las flotaciones [propiedad float], el posicionamiento proporciona muchas posibilidades de crear presentaciones avanzadas y precisas.

En esta lección analizaremos lo siguiente:

Principios que rigen el posicionamiento CSS

Imagina la ventana de un navegador como un sistema de coordenadas:

Los principios que rigen el posicionamiento CSS consisten en que se puede colocar cualquier caja en cualquier lugar del sistema de coordenadas.

Digamos que queremos posicionar un título. Usando el modelo de caja el título aparecerá así:

Si queremos posicionar la cabecera a 100 px del borde superior y a 200px del borde izquierdo del documento, tendríamos que escribir el siguiente código CSS:

 
 h1 {
  position:absolute;
  top: 100px;
  left: 200px;
 }

El resultado será el siguiente:

Como puedes observar, el posicionamiento con CSS es una técnica muy precisa a la hora de colocar elementos. Es mucho más sencillo que intentar usar tablas, imágenes transparentes o cualquier otra cosa.

Posicionamiento absoluto

El elemento que se posiciona de forma absoluta no ocupa espacio alguno en el documento. Esto significa que no deja un espacio vacío después de ser posicionado.

Para posicionar un elemento de forma absoluta, la propiedad position se establece como absolute. Posteriormente puedes usar las propiedades left, right, top, y bottom para colocar la caja.

Como ejemplo de posicionamiento absoluto, vamos a colocar 4 cajas en cada esquina del documento:

 
 #box1 {
  position:absolute;
  top: 50px;
  left: 50px;
 }

 #box2 {
  position:absolute;
  top: 50px;
  right: 50px;
 }

 #box3 {
  position:absolute;
  bottom: 50px;
  right: 50px;
 }

 #box4 {
  position:absolute;
  bottom: 50px;
  left: 50px;
 }

Posicionamiento relativo

Para posicionar un elemento de forma relativa, la propiedad position se establece como relative. La diferencia entre posicionamiento absoluto y relativo consiste en cómo se calcula la posicion.

La posición para un elemento que se posiciona de forma relativa se calcula desde la posición original en el documento.. Esto significa que se mueve el elemento hacia la derecha, la izquierda, arriba o abajo. De este modo, el elemento sigue ocupando espacio en el documento después de haberse posicionado.

Como ejemplo de posicionamiento relativo, podemos intentar posicionar tres imágenes de forma relativa respecto a su posición original en la página. Fíjate cómo las imágenes dejan espacios vacíos en sus posiciones originales en el documento:

 
 #dog1 {
  position:relative;
  left: 350px;
  bottom: 150px;
 }
 #dog2 {
  position:relative;
  left: 150px;
  bottom: 500px;
 }

 #dog3 {
  position:relative;
  left: 50px;
  bottom: 700px;
 }

TOMADO DE= http://es.html.net/tutorials/css/lesson14.php

ELEMENTOS FLOTANTES (float)

Elementos flotantes (la propiedad `float`)

Los elementos se pueden hacer flotar a la derecha o a la izquierda usando la propiedad float. Es decir, que la caja con su contenido flota bien a la derecha o la izquierda de un documento (o de la caja contenedora) [véase la lección 9 que describe el modelo de caja]. La siguiente imagen muestra este principio:

Por ejemplo, si quisiéramos texto con ajuste de línea alrededor de una imagen, el resultado sería el siguiente:

¿Cómo se hace?

El código HTML del ejemplo anterior es el siguiente:

 
 <div id="picture">
  <img src="bill.jpg" alt="Bill Gates">
 </div>

 <p>causas naturales et antecedentes, 
 idciro etiam nostrarum voluntatum...</p>

Para conseguir que la imagen flote a la izquierda y el texto se ajuste a su alrededor, sólo hay que definir el ancho de la caja que rodea la imagen y, después de eso, fijar la propiedad float con el valor left:

 
 #picture {
  float:left;
  width: 100px;
 }

Otro ejemplo: columnas

La propiedad float también se puede usar para crear columnas en un documento. Para crear dichas columnas tendrás que estructurar las columnas deseadas en el código HTML con la etiqueta <div>, como se muestra a continuación:

 
 <div id="column1">
  <p>Haec disserens qua de re agatur
  et in quo causa consistat non videt...</p>
 </div>

 <div id="column2">
  <p>causas naturales et antecedentes, 
  idciro etiam nostrarum voluntatum...</p>
 </div>

 <div id="column3">
  <p>nam nihil esset in nostra 
  potestate si res ita se haberet...</p>
 </div>

Ahora, el ancho deseado de las columnas se fija, por ejemplo, en un porcentaje equivalente a un 33%, y luego simplemente se flota cada columna a la izquierda definiendo la propiedad float:

 
 #column1 {
  float:left;
  width: 33%;
 }

 #column2 {
  float:left;
  width: 33%;
 }

 #column3 {
  float:left;
  width: 33%;
 }

La propiedad float se puede establecer con los siguientes valores: left (izquierda), right (derecha) o none (ninguna).

La propiedad `clear`

La propiedad clear se usa para controlar cómo se comportarán los elementos que siguen a los elementos flotados de un documento.

Por defecto, los elementos siguientes se mueven hacia arriba para rellenar el espacio disponible que quedará libre al flotar una caja hacia un lado. Echa un vistazo al ejemplo anterior en el que el texto se desplaza de forma automática hacia arriba junto a la imagen de Bill Gates.

La propiedad clear puede tomar los valores:left, right, both o none. El principio consiste en que, si clear, por ejemplo, se fija en both para una caja, el borde del margen superior de esta caja siempre estará debajo del borde del margen inferior para las posibles cajas flotantes que vengan de arriba.

 
 <div id="picture">
  <img src="bill.jpg" alt="Bill Gates">
 </div>

 <h1>Bill Gates</h1>

 <p class="floatstop">causas naturales et antecedentes, 
 idciro etiam nostrarum voluntatum...</p>

Para evitar que el texto flote hacia arriba junto a la imagen, podemos añadir lo siguiente al código CSS:

 
 #picture {
  float:left;
  width: 100px;
 }

 .floatstop {
  clear:both;
 }

TOMADO DE: http://es.html.net/tutorials/css/lesson13.php

EL MODELO DE CAJA

El modelo de caja en CSS describe las cajas que se generan a partir de los elementos HTML. El modelo de caja también contiene opciones detalladas en lo referente al ajuste de márgenes, bordes, relleno (padding) y contenido de cada elemento. La siguiente imagen muestra cómo se construye el modelo de caja:

El modelo de caja en CSS

A primera vista, la imagen anterior puede parecer muy teórica, así que intentemos usar el modelo en un caso real con un encabezado y algo de texto.

El código HTML de nuestro ejemplo es el siguiente (extraído de la Declaración Universal de los Derechos Humanos):

 
 <h1>Artículo 1:</h1> 

 <p>Todos los hombres nacen libres 
 e iguales en diginidad y derechos. Están 
 dotados de razonamiento y consciencia y 
 deberían de comportarse entre sí con 
 espíritu de hermandad.</p>

si añadimos algo de color e información sobre la fuente, el ejemplo se podría presentar así:

El ejemplo contiene dos elementos: el elemento <h1> y el elemento <p>. El modelo de caja para los dos elementos se puede ilustrar como sigue:

Aunque puede parecer un poco complicado, la imagen muestra cómo cada elemento HTML está rodeado por cajas, cajas que se pueden ajustar usando CSS.

MARGEN Y RELLENO (PADDING)

En la lección anterior te presentamos el concepto de modelo de caja. En ésta, examinaremos cómo cambiar la presentación de los elementos estableciendo las propiedades margin y padding.

Establecer el márgen de un elemento

Todo elemento tiene cuatro lados: derecho, izquierdo, superior e inferior. La propiedad margin hace referencia a la distancia desde cada lado respecto al elemento colindante (o respecto a los bordes del documento).

En un primer ejemplo, veremos cómo definir los márgenes del documento en sí, es decir, del elemento <body>. La imagen siguiente muestra cómo queremos que sean los márgenes de nuestras páginas.

El código CSS necesario para esto es el siguiente:

 
 body {
  margin-top: 100px;
  margin-right: 40px;
  margin-bottom: 10px;
  margin-left: 70px;
 }

O podrías elegir usar la versión combinada de margin, que queda como más elegante:

 
 body {
  margin: 100px 40px 10px 70px;
 }

Se puede establecer los márgenes de casi todos los elementos del mismo modo. Por ejemplo, podemos elegir definir márgenes para todos los párrafos de texto marcados con el elemento <p>:

 
 body {
  margin: 100px 40px 10px 70px;
 }

 p {
  margin: 5px 50px 5px 50px;
 }

Establecer el relleno de un elemento

La propiedad padding puede entenderse como "relleno". Esto tiene sentido puesto que el relleno (padding) no afecta a la distancia de un elemento respecto a otros elementos, sino que sólo define la distancia interior entre el borde y el contenido del elemento.

El uso de la propiedad padding se puede ilustrar viendo un sencillo ejemplo en el que todos los títulos tienen diferentes colores de fondo:

 
 h1 {
  background: yellow;
 }

 h2 {
  background: orange;
 }

Al deninir el padding para los títulos, cambiamos la cantidad de "relleno" que habrá alrededor del texto en cada uno de ellos:

 
 h1 {
  background: yellow;
  padding: 20px 20px 20px 80px;
 }

 h2 {
  background: orange;
  padding-left:120px;
 }

BORDES

Los bordes se pueden usar para muchas cosas, por ejemplo, como elemento decorativo o para subrayar la separación entre dos cosas. CSS te ofrece opciones sin fin a la hora de usar bordes en tus páginas. En esta lección vamos a examinar las siguientes propiedades CSS:

Anchura del borde [border-width]

La anchura del borde se define por medio de la propiedad border-width, que dispone de los valores thin, medium y thick, o de un valor numérico indicado en píxeles. La siguiente imagen ilustra cómo funciona el sistema:

Color del borde [border-color]

La propiedad border-color define el color del borde. Los valores de esta propiedad son los valores de color normales, por ejemplo, "#123456" (en notación hexadecimal), "rgb(123,123,123)" (en notación RGB) o "yellow" (por nombre del color).

Estilo de borde [border-style]

Se puede elegir entre diferentes estilos de borde. Más abajo se muestran 8 estilos de borde según los interpreta Internet Explorer 5.5. Todos los ejemplos se muestran con el valor del color a "oro" y el valor de la anchura a "thick", pero se pueden mostrar, por supuesto, en otros colores y grosores.

Si no queremos mostrar ningún borde, se puede usar los valores none o hidden.

Ejemplos de definición de bordes

Las tres propiedades descritas anteriormente se pueden unir para cada elemento y así producir diferentes bordes. Para ilustrar esto, veremos un documento en el que definimos diferentes bordes para los elementos <h1>, <h2>, <ul> y <p>. El resultado puede que no sea demasiado bonito pero ilustra gráficamente algunas de las muchas posibilidades:

 
 h1 {
  border-width: thick;
  border-style: dotted;
  border-color: gold;
 }

 h2 {
  border-width: 20px;
  border-style: outset;
  border-color: red;
 }

 p {
  border-width: 1px;
  border-style: dashed;
  border-color: blue;
 }

 ul {
  border-width: thin;
  border-style: solid;
  border-color: orange;
 }

También es posible declarar propiedades especiales para el borde superior (top), inferior (bottom), derecho (right) e izquierdo (left). En el siguiente ejemplo vemos cómo:

 
 h1 {
  border-top-width: thick;
  border-top-style: solid;
  border-top-color: red;

  border-bottom-width: thick;
  border-bottom-style: solid;
  border-bottom-color: blue;

  border-right-width: thick;
  border-right-style: solid;
  border-right-color: green;

  border-left-width: thick;
  border-left-style: solid;
  border-left-color: orange;
 }

Combinación de propiedades [border]

Como ocurre con muchas otras propiedades, usando la propiedad border se pueden combinar otras muchas propiedades en una sola. Veamos un ejemplo:

 
 p {
  border-width: 1px;
  border-style: solid;
  border-color: blue;
 }

La declaración anterior se puede combinar así:

 
 p {
  border: 1px solid blue;
 }

ALTURA Y ANCHURA

Hasta ahora, no hemos prestado demasiada atención a las dimensiones de los elementos con los que hemos estado trabajando. En esta lección examinaremos lo fácil que es definir la altura y anchura de un elemento. Para lo cual usaremos las propiedades:

width
height

Estableciendo la propiedad `width`

Con la propiedad width se puede definir la anchura concreta de un elemento.

El sencillo ejemplo que sigue nos proporciona una caja en la que se puede introducir texto:

 
 div.box {
  width: 200px;
  border: 1px solid black;
  background: orange;
 }

Estableciendo la propiedad `height`

Fíjate cómo en el ejemplo anterior la altura de la caja queda establecida por el contenido de la misma. Se puede influir en la altura de un elemento con la propiedad height. Por ejemplo, probemos a fijar la altura de la caja en 500px:

 
 div.box {
  height: 500px;
  width: 200px;
  border: 1px solid black;
  background: orange;
 }

TOMADO DE:
http://es.html.net/tutorials/css/lesson9.php

http://es.html.net/tutorials/css/lesson10.php

http://es.html.net/tutorials/css/lesson11.php

http://es.html.net/tutorials/css/lesson12.php

AGRUPACIÓN DE ELEMENTOS (span y div)

Los elementos <span> y <div> se usan para agrupar y estructurar un documento, y se usarán, a menudo, junto con los atributos class e id.

En esta lección revisaremos el uso de los elementos <span> y <div>, ya que estos dos elementos de HTML son, precisamente, de importancia clave en lo que se refiere a CSS.

Agrupación con <span>

El elemento <span> es lo que se podría denominar un elemento neutro que no añade nada al documento en sí. Pero con CSS <span> se puede usar para añadir características visuales distintivas a partes específicas de texto en los documentos.

Un ejemplo de esto podría ser esta cita de Benjamin Franklin:

 
 <p>El que pronto se acuesta y pronto se levanta,
es hombre saludable, rico y sabio.</p>

Digamos que queremos que lo que el señor Franklin considera como las ventajas de no pasarse todo el día durmiendo, aparezca enfatizado en rojo. Para este fin, podemos marcar dichas ventajas con el elemento <span>. A cada elemento span se le añade el atributo class, que podemos definir así en nuestra hoja de estilo:

 
 <p>El que pronto se acuesta y pronto se levanta,
es hombre <span class="ventaja">saludable</span>,
<span class="ventaja">rico</span>
y <span class="ventaja">sabio</span>.</p>

El código CSS necesario para producir este efecto es el siguiente:

 
 span.benefit {
  color:red;
 }

Por supuesto, se puede usar también el atributo id para añadir estilo a los elementos definidos con <span>. Pero recuerda que tendrás que aplicar siempre un atributo id único para cada uno de los tres elementos <span>, tal como aprendimos en la lección anterior.

Agrupación con el elemento <div>

Mientras que <span> se usa dentro de un elemento a nivel de bloque como vimos en el ejemplo anterior, <div> se usa para agrupar uno o más elementos a nivel de bloque.

Aparte de esta diferencia, la agrupación con <div> funciona más o menos igual. Veamos un ejemplo con dos listas de presidentes de los EE.UU., divididas según su filiación política.

 
 <div id="democrats">
 <ul>
 <li>Franklin D. Roosevelt</li>
 <li>Harry S. Truman</li>
 <li>John F. Kennedy</li>
 <li>Lyndon B. Johnson</li>
 <li>Jimmy Carter</li>
 <li>Bill Clinton</li>
 </ul>
 </div>

 <div id="republicans">
 <ul>
 <li>Dwight D. Eisenhower</li>
 <li>Richard Nixon</li>
 <li>Gerald Ford</li>
 <li>Ronald Reagan</li>
 <li>George Bush</li>
 <li>George W. Bush</li>
 </ul>
 </div>

En nuestra hoja de estilo podemos utilizar la agrupación del mismo modo que antes:

 
 #democrats {
  background:blue;
 }

 #republicans {
  background:red;
 }

En los ejemplos anteriores, sólo hemos usado <div> y <span> con cosas muy sencillas como, por ejemplo, texto y colores de fondo. Ambos elementos tienen el potencial para realizar cosas más avanzadas. Sin embargo, esto no se presentará en esta lección; lo veremos más adelante a lo largo del tutorial.

TOMADO DE: http://es.html.net/tutorials/css/lesson8.php

AGRUPACIÓN ELEMENTOS E IDENTIFICACIÓN (class e id)

A veces querrás aplicar un estilo especial a un elemento concreto o a un grupo concreto de elementos. En esta lección examinaremos cómo usar los atributos class e id para especificar propiedades para los elementos seleccionados.

¿Como se puede dar color a un título concreto de forma diferente a los otros títulos de tu sitio web? ¿Cómo se pueden agrupar los enlaces en diferentes categorías y dar a cada categoría un estilo especial? Estas dos preguntas son un ejemplo de las preguntas a las que daremos respuesta en esta lección.

Agrupación de elementos con el atributo `class`

Digamos que tenemos dos listas de enlaces con los diferentes tipos de uva usados para el vino tinto y el blanco. El código HTML sería el siguiente:

 
 <p>Uvas para el vino blanco:</p>
 <ul>
 <li><a href="ri.htm">Riesling</a></li>
 <li><a href="ch.htm">Chardonnay</a></li>
 <li><a href="pb.htm">Pinot Blanc</a></li>
 </ul>

 <p>Uvas para el vino tinto:</p>
 <ul>
 <li><a href="cs.htm">Cabernet Sauvignon</a></li>
 <li><a href="me.htm">Merlot</a></li>
 <li><a href="pn.htm">Pinot Noir</a></li>
 </ul>

Así pues, queremos que los enlaces relativos al vino blanco sean amarillos, los enlaces relacionados con el vino tinto sean rojos, y el resto de enlaces de la página web sigan siendo azules.

Para lograr esto, dividiremos los enlaces en dos categorías. Esto se hace asignando una clase para cada tipo de enlace, usando el atributo class.

Intentemos especificar algunas clases en el ejemplo anterior:

 
 <p>Uvas para el vino blanco:</p>
 <ul>
 <li><a href="ri.htm" class="whitewine">Riesling</a></li>
 <li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
 <li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
 </ul>

 <p>Uvas para el vino tinto:</p>
 <ul>
 <li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
 <li><a href="me.htm" class="redwine">Merlot</a></li>
 <li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
 </ul>

A partir de aquí, podemos definir propiedades especiales para los enlaces que hacen referencia al vino tinto y al vino blanco, respectivamente.

 
 a {
  color: blue;
 }

 a.whitewine {
  color: #FFBB00;
 }

 a.redwine {
  color: #800000;
 }

Como se muestra en el ejemplo, se pueden definir las propiedades para los elementos que pertenecen a una clase unsando.nombredelaclase en la hoja de estilo del documento.

Identificación de un elemento usando el atributo `id`

Además de agrupar elementos, podrías necesitar identificar un elemento único. Esto se hace con el atributo id.

Lo que hace especial al atributo id es que no pueden existir dos elementos dentro del mismo documento con el mismo id. Cada id tiene que ser único. En cualquier otro caso, se debería usar el atributo class en su lugar. Ahora, examinemos un ejemplo de un posible uso del atributo id:

 
 <h1>Capítulo 1</h1>
 ...
 <h2>Capítulo 1.1</h2>
 ...
 <h2>Capítulo 1.2</h2>
 ...
 <h1>Capítulo 2</h1>
 ...
 <h2>Capítulo 2.1</h2>
 ...
 <h3>Capítulo 2.1.2</h3>
 ...

El código anterior podría hacer referencia a encabezados de cualquier documento dividido en capítulos y párrafos. Sería normal asignar un id a cada capítulo de la siguiente manera:

 
 <h1 id="c1">Capítulo 1</h1>
 ...
 <h2 id="c1-1">Capítulo 1.1</h2>
 ...
 <h2 id="c1-2">Capítulo 1.2</h2>
 ...
 <h1 id="c2">Capítulo 2</h1>
 ...
 <h2 id="c2-1">Capítulo 2.1</h2>
 ...
 <h3 id="c2-1-2">Capítulo 2.1.2</h3>
 ...

Digamos que el título del capítulo 1.2 tiene que estar en rojo. Usando el código CSS necesario, se podría hacer así:

 
 #c1-2 {
  color: red;
 }

Como se muestra en el ejemplo anterior, se pueden definir las propiedades de un elemento específico usando #nombredelidentificador en la hoja de estilo del documento.

TOMADO DE: http://es.html.net/tutorials/css/lesson7.php