Preguntas frecuentes sobre CSS:

Sí. Por ejemplo, en la confección de este manual se utilizan simultáneamente algunos de ellos. En las páginas del índice y de la portada se utilizan el segundo método (inclusión de la hoja de estilo en el documento HTML) y también el primero (inclusión del estilo en etiquetas concretas). Y en la totalidad de los capítulos se usan el tercero (enlace a la hoja de estilo) y el primero.

1. Se pueden aplicar más de uno a la vez en una misma página ?

Si, pero solo podra actuar uno de cada tipo. Si por ejemplo defines una etiqueta con letra de color rojo, todas sus etiquetas hijas seran de color rojo (herencia) a no ser que definas especificamente una de ellas de otro color.

2. Qué ocurre si hay información contradictoria entre ellos ?

Para evitar conflictos entre los distintos métodos usados simultáneamente, existe un orden de preferencia, es decir, cuál prevalecerá sobre el otro si dan órdenes contradictorias sobre un aspecto concreto.

El orden de preferencia es el siguiente (de mayor a menor):

  1. Estilo dentro de una etiqueta.
  2. Bloque de estilo en la cabecera del documento.
  3. Enlace a un archivo que contiene la hoja de estilo .CSS

Esto quiere decir que una orden de estilo, por ejemplo el color del texto, puesta dentro de un etiqueta, prevalecerá sobre la que esté indicada en los otros dos métodos, si es que se usan en esa página.

Lo más práctico es usar el tercer método (enlace a una hoja de estilo), para dar una apariencia consistente a todas las páginas, y si es necesario modificar un aspecto concreto en alguna de ellas, usar el primero o el segundo metodo.

3. Consejos de uso

En este capítulo se amplían los conceptos vistos en los dos capítulos anteriores, y se introducen algunos nuevos sobre las hojas de estilo en cascada.

El orden de los atributos es significativo. Los atributos Font-Weight y Font-Style se deben especificar antes que los demas.

3.1 Comentarios

Se pueden añadir comentarios propios a las hojas de estilo, que pueden servir de recordatorio posterior. Se pueden colocar en cualquier sitio de la especificacisn, siempre que vayan englobados entre los caracteres /* y */.

H1 {font: 20pt/22pt bold; color=#00FF00} /*Color verde*/

Si quieres hacer que una linea deje de hacer efecto, simplemente añadele un * delante del selector. Al no reconocer el selector, dejara de funcionar.

3.2 Diseño para todos los navegadores

Si se usa el metodo de incluir un bloque de estilo en la cabecera, que consiste en poner las distintas instrucciones de estilo entre las etiquetas <STYLE> y </STYLE>, tal como en el ejemplo que se visúalisara:

<STYLE TYPE="text/css"> 
	BODY {
		background: yellow; 
		font-size: 10pt; 
		font-family: Arial; 
		margin-left: 2cm; 
		margin-right: 2cm
	}
	H1 {
		background: blue; 
		font-size: 14pt; 
		font-weight: bold; 
		color: red
	} 
	H2 {
		font-size: 12pt; 
		font-weight: bold; 
		color: red
	} 
	DIV {
		background: URL(isla.gif)
	} 
</STYLE>

En los navegadores que no implementen las hojas de estilo se ignoraran las etiquetas <STYLE> y </STYLE>, pero podrá ocurrir que aparezca como texto el bloque de definición del estilo.

Para evitar esto, es conveniente englobar dicho bloque de información entre los símbolos <!-- y -->. Por tanto, es conveniente poner el bloque de definición del estilo de esta manera:

<Style Type="text/css"> 
	<!-- 
	BODY {
		background: yellow; 
		font-size: 10pt; 
		font-family: Arial; 
		margin-left: 2cm; 
		margin-right: 2cm;
	} 
	H1 {
		background: blue; 
		font-size: 14pt; 
		font-weight: bold; 
		color: red;
	} 
	H2 {
		font-size: 12pt; 
		font-weight: bold; 
		color: red
	} 
	DIV {
		background: URL(nubes.jpg)
	} 
	--> 
</Style> 

4. Aprovechando la herencia entre etiquetas

Como sabemos, las etiquetas de un documento HTML tienen una estructura definida, que de manera muy resumida se puede poner de esta forma:

<HTML> 
<BODY> 
	(conjunto de etiquetas que conforman el DOM) 
</BODY> 
</HTML> 

Como se puede ver, la etiqueta <BODY> engloba a todas las demas. Si se la asigna un estilo determinado a esta etiqueta, todos los elementos que estin dentro de la pagina (tablas, listas, parrafos, etc.) heredaran este estilo.

Por tanto, para establecer un estilo global a la pagina entera, lo mas apropiado es atribuirselo a la etiqueta <BODY>. Por ejemplo:

BODY {
	font: 10pt/11pt Arial, Helvetica, sans-serif; 
	background: url(isla.gif); 
	margin: 0 2cm 0 2cm;
}

Establece para el DOM completo la fuente, separación entre líneas, imagen de fondo y espesor de los margenes. Si se precisa que ciertos elementos concretos dentro del DOM tengan otras caractermsticas distinta a la general, entonces hay que definirlas por separado.

4. Metodos de desarrollo

1. Progressive enhancement - Mejora progresiva
Propone hacer un diseño basico que soportes todos los navegadores y a partir de alli mejorando en capas con CSS3, JavaScript, etc
2. Graceful degradatio - degradacion en elegancia
Es el proceso inverso.

5. Recomendaciones:

  1. W3 index list
  2. HTML.net
  3. CSS3 Generator
  4. 50 fantasticos ejemplos
  5. Opal Group
  6. CSS Discussion list
  7. CSS-D Wiki
  8. CSS Zen Garden
  9. Yahoo recommends YUI 3
  10. The OPAL group

Una pagina con muchos ejemplos es CSS 3 info