¿Qué es CSS?
CSS (Cascading Style Sheets, u Hojas de Estilo en Cascada) es la tecnología desarrollada por el World Wide Web Consortium (W3C) con el fin de separar la estructura de la presentación. A pesar de que la recomendación oficial del grupo de trabajo de la W3C ya había alcanzado la estabilidad requerida para que fuera soportada por los principales navegadores comerciales, como Netscape e Internet Explorer, tan tempranamente como en el año 1998, la situación de entonces, comúnmente conocida como la “guerra de los navegadores”, hacía que los intereses comerciales de las dos compañías en lucha por el mercado de usuarios de Internet se interpusieran en el camino de las CSS.
Definir estilos a la Pagina
Es la definición de estilos en una sección de la cabecera de la página HTML donde podemos definir estilos que se aplican a las distintas marcas HTML de la página.
El problema del concepto anterior donde debíamos crear un estilo similar para la marca h1 se puede resolver en forma más adecuada empleando la definición de estilos a nivel de página.
Problema: Mostrar dos títulos con texto de color rojo sobre fondo amarillo.
<html>
<head>
<title>Problema</title>
<style type="text/css">
h1 {color:#ff0000;background-color:#ffff00}
</style>
</head>
<body>
<h1>Primer título</h1>
<h1>Segundo título</h1>
</body>
</html>
Podemos observar que en la cabecera de la página definimos la sección:<style type="text/css">
h1 {color:#ff0000;background-color:#ffff00}
</style>
Debe estar encerrada por la marca style. En este ejemplo indicamos al navegador que en todos los lugares de esta página donde se utilice la marca h1 debe aplicar como estilo de color de texto el rojo y fondo el amarillo. Podemos observar que es mucho más eficiente que definir los estilos directamente sobre las marcas HTML.Podemos definir estilos para muchas marcas en la sección style:
<html>
<head>
<title>Problema</title>
<style type="text/css">>
h1 {color:#ff0000}
h2 {color:#00ff00}
h3 {color:#0000ff}
</style>
</head>
<body>
<h1>rojo</h1>
<h2>verde</h2>
<h3>azul</h3>
</body>
</html> Definir estilos a las Etiquetas
Es la forma más fácil pero menos recomendada para aplicación de un estilo a una marca HTML. Se define en la propiedad style los estilos a definir para dicha marca.
Es común definir estilos directamente en las marcas HTML cuando estamos diseñando la página y posteriormente trasladar el estilo creado a una hoja de estilos.
La sintaxis para definir un estilo a una marca HTML es la siguiente:
<html>
<head>
</head>
<body>
<h1 style="color:#ff0000;background-color:#ffff00">
Este mensaje es de color rojo sobre fondo amarillo.
</h1>
</body>
</html>
Por defecto, todo navegador tiene un estilo definido para cada marca HTML, lo que hacemos con la propiedad style es redefinir el estilo por defecto. En este problema definimos que la marca h1 defina como color de texto el rojo y como color de fondo el amarillo:<h1 style="color:#ff0000;background-color:#ffff00">
Este mensaje es de color rojo sobre fondo amarillo.
</h1>
Veremos más adelante que hay muchas propiedades en CSS. En este primer ejemplo inicializamos las propiedades color (define el color del texto) y background-color (define el color de fondo del texto).Cada vez que inicializamos una propiedad debemos separarla de la siguiente por punto y coma.
Cuando definimos estilos directamente en las marcas HTML, tenemos que tener en cuenta que el estilo se aplica únicamente a la marca donde inicializamos la propiedad style, es decir, si tenemos dos secciones h1, deberemos definir la propiedad style para cada marca:
<h1 style="color:#ff0000;background-color:#ffff00">
Primer título
</h1>
<h1 style="color:#ff0000;background-color:#ffff00">
Segundo título
</h1>
Como podemos observar, más alla que los dos estilos son exactamente iguales, estamos obligados a definirlos para cada marca HTML.Propiedades de Fuentes
Contamos con una serie de propiedades relacionadas a fuentes:
La primera regla definida para la marca h1 es:
La primera propiedad inicializada es font-family, algunas de las fuentes más comunes que puede acceder el navegador son:
Podemos definir varias fuentes por si acaso alguna no se encuentra disponible para el navegador, esto lo hacemos separando por coma todas las fuentes (se eligen de izquierda a derecha):
La segunda regla define sólo dos propiedades relacionadas a la fuente:
Existe una última propiedad no utilizada en este ejemplo que es font-variant que puede asumir estos dos valores:
font-family font-size font-style font-weight font-variantPodemos inicializar algunas o todas las propiedades relacionadas a fuentes, un ejemplo:
<html>
<head>
<title>Problema</title>
<style type="text/css">
h1 {
font-family:times new roman;
font-size:30px;
font-style:italic;
font-weight:bold;
}
h2 {
font-family:verdana;
font-size:20px;
}
</style>
</head>
<body>
<h1>Titulo de nivel 1</h1>
<h2>Titulo de nivel 2</h2>
</body>
</html>
Como podemos observar, hemos definido dos reglas de estilos para las marcas h1 y h2, eso significa que el navegador utilizará esas reglas de fuentes para todas las partes de la página que se utilicen dichas marcas HTML.La primera regla definida para la marca h1 es:
h1 {
font-family:times new roman;
font-size:30px;
font-style:italic;
font-weight:bold;
}
Recordemos que para definir la regla de estilo debemos indicar el nombre de la marca HTML a la que definiremos el estilo y luego, entre paréntesis, todas las propiedades y sus valores separados por punto y coma.La primera propiedad inicializada es font-family, algunas de las fuentes más comunes que puede acceder el navegador son:
Arial Arial Black Arial Narrow Courier New Georgia Impact Tahoma Times New Roman VerdanaEn caso que la fuente no esté disponible el navegador selecciona el estilo por defecto para esa marca HTML.
Podemos definir varias fuentes por si acaso alguna no se encuentra disponible para el navegador, esto lo hacemos separando por coma todas las fuentes (se eligen de izquierda a derecha):
font-family: verdana, arial, georgia;La segunda propiedad inicializada es font-size, hay varias medidas para indicar el tamaño de la fuente (veremos más adelante otros sistemas de medida), en nuestro caso indicamos en píxeles:
font-size:30px;La tercera propiedad es font-style, que puede tener los siguientes valores :
normal italic obliqueLa última propiedad es font-weight, pudiendo tomar los siguientes valores:
>normal bold bolder lighter 100 200 300 400 500 600 700 800 900Esta propiedad indica el peso de la fuente (mientras tenga un valor mayor los caracteres serán más rellenos).
La segunda regla define sólo dos propiedades relacionadas a la fuente:
h2 {
font-family:verdana;
font-size:20px;
}
Las propiedades que no se inicializan quedan como responsabilidad al navegador, quien elegirá los valores correspondientes.Existe una última propiedad no utilizada en este ejemplo que es font-variant que puede asumir estos dos valores:
small-caps normalDefine si la fuente se muestra en mayúsculas tipo normal o pequeñas.
