Está en la página 1de 6

Guas HTML

2012

GUIA 4. Estilos CSS


CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en cascada.
Las hojas de estilo es una tecnologa que nos permite controlar la apariencia de una pgina
web.

Definicin de estilos a nivel de marca HTML.


Es la forma ms fcil pero menos recomendada para aplicacin de un estilo a una marca
HTML. Se define en la propiedad style los estilos a definir para dicha marca.

La sintaxis para definir un estilo a una marca HTML es la siguiente:


<body>
<h1 style="color:#ff0000;background-color:#ffff00">
Este mensaje es de color rojo sobre fondo amarillo.
</h1>
</body>
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.

Definicin de estilos a nivel de pgina.


Es la definicin de estilos en una seccin de la cabecera de la pgina HTML donde podemos
definir estilos que se aplican a las distintas marcas HTML de la pgina.
<html>
<head>
<title>Problema</title>
<styletype="text/css">
.St1 {color:#ff0000}
.st2 {color:#00ff00}
.st3 {color:#0000ff}
</style>
</head>
<body>
<h1 classSt1>rojo</h1>
<h2 classSt1>>verde</h2>
<h3 classSt1>>azul</h3>
</body>
</html>
Se declaran los estilos entre las etiquetas <styletype="text/css"> y </style> en la cabecera y
se llama en la etiqueta.

Propiedades relacionadas a fuentes.


Contamos con una serie de propiedades relacionadas a fuentes:
font-family
font-size
font-style

Gua 1 HTML. Elaborada por: Daniel Mora

Guas HTML
2012
font-weight
font-variant
Podemos inicializar algunas o todas las propiedades relacionadas a fuentes, un ejemplo:
<html>
<head>
<title>Problema</title>
<styletype="text/css">
.st1 {
font-family:times new roman;
font-size:30px;
font-style:italic;
font-weight:bold;
text-align:left;

// Tipo de letra
// Tamao
// Estilo
// Negrita
// Alineacion

}
.st2 {
font-family:verdana;
font-size:20px;
}
</style>
</head>
<body>
<h1class=st1>Titulo de nivel 1</h1>
<h2class=st2>Titulo de nivel 2</h2>
</body>
</html>

Definicin de hojas de estilo en un archivo externo.


<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>

Propiedades relacionadas al borde de una marca HTML.


background-color:#ffff00;
border-width:1px;
border-style:solid;
border-color:#000000;
En sta hemos cambiado el estilo de borde. Disponemos de los siguientes estilos de borde:
None hidden dotted dashed solid doubl Groove ridge inset - outset
Como vimos en el concepto anterior tenemos propiedades que nos permiten fijar el grosor,
estilo y color del borde de una marca HTML. Pero podemos ir un paso ms alla, las CSS nos
permiten modificar independientemente cada uno de los cuatro bordes del rectngulo.
border-top-width:1px;
border-right-width:3px;
border-bottom-width:3px;
border-left-width:1px;
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:solid;

Gua 1 HTML. Elaborada por: Daniel Mora

Guas HTML
2012
border-left-style:dotted;
border-top-color:#ffaa00;
border-right-color:#ff0000;
border-bottom-color:#ff0000;
border-left-color:#ffaa00;

Propiedades relacionadas al fondo (background)


Hay otras propiedades relacionadas al fondo que nos permiten, entre otras cosas, disponer un
archivo de imagen. Las propiedades relacionadas al background y sus valores son:
background-color
background-image
background-repeat
background-position
background-attachment
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
</body>
</html>
body {
background-image:url(fondo.jpg);
}
La nica propiedad que hemos inicializado es background-image indicando el nombre del
archivo de imagen a mostrar.
La imagen se repite en x e y hasta llenar la pgina por completo, ya que por defecto
background-repeat est inicializada con el valor repeat, probar de modificar el estilo primero
con:
body {
background-image:url(fondo.jpg);
background-repeat:repeat-x;
}
Luego con:
body {
background-image:url(fondo.jpg);
background-repeat:repeat-y;
}
Y por ltimo:
body {
background-image:url(fondo.jpg);
background-repeat:no-repeat;
}

Gua 1 HTML. Elaborada por: Daniel Mora

Guas HTML
2012
Tener en cuenta que podemos aplicar una imagen a otras marcas HTML (h1,h2,h3,p, etc.).
La ltima propiedad background-position podemos indicar la posicin de la imagen segn los
siguientes valores:
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
Para que tenga sentido esta propiedad debemos inicializar la propiedad background-repeat
con el valor no-repeat.
Por ejemplo:
body {
background-image:url(fondo.jpg);
background-repeat:no-repeat;
background-position:20% 50%;
}
Ejercicios
1. Crear una pgina HTML y definir tres mensajes entre las marcas h1, h2 y h3. Definir el
mismo color para el texto de cada bloque y colores diferentes para el fondo de los
mismos (cada marca HTML debe tener definida la propiedad style).
2. Definir un estilo diferente para las marcas h1,h2,h3,h4,h5 y h6. Mostrar mensajes
utilizando estas marcas a las que se le han definido estilos (por ahora slo conocemos
el color de texto y fondo)
3. Definir reglas para las marcas HTML: h1,h2,h3,h4,h5 y h6. Inicializar la propiedad
font-size con valores decrecientes para cada una de las marcas (40,30,25,20,15 y 10
pxeles). Inicializar la propiedad font-family para las tres primeras marcas con los
valores: Arial, Arial Black y Arial Narrow.
4. Crear una pgina web que contenga una cabecera de nivel 1 (h1), luego una cabecera
de
nivel
2
(h2)
y
un
prrafo.
Definir reglas de estilo para las tres marcas h1,h2 y p. Inicializar propiedades vistas
en conceptos anteriores mediante un archivo externo.
5. Inicializar las marcas h1,h2 y h3 con bordes de 2 pixeles, color azul y diferentes
estilos para cada una. Crear una pgina HTML que los utilice.
6. Crear una tabla con que inicialice el borde superior e inferior con ancho de 2 pixeles y
los bordes laterales con cero pixel. A su eleccin queda el estilo y color.
7. Realizar la siguiente pagina aplicando estilos CSS.

Gua 1 HTML. Elaborada por: Daniel Mora

Guas HTML
2012

8. Determinar las reglas CSS necesarias para que el resultado sea similar al mostrado en
la siguiente imagen:

9. Determinar las reglas CSS necesarias para que el resultado sea similar al mostrado en
la siguiente imagen:

Gua 1 HTML. Elaborada por: Daniel Mora

Guas HTML
2012

10. Determinar las reglas CSS necesarias para que el resultado sea similar al mostrado en
la siguiente imagen:

11. Determinar las reglas CSS necesarias para que el resultado sea similar al mostrado en
la siguiente imagen:

Bibliografa
http://www.cssya.com.ar
http://www.w3schools.com/css/

Gua 1 HTML. Elaborada por: Daniel Mora