HOja de estilo tarea

HOla alumnos:

Les dejo el código de la hoja de estilo. Tienen que copiarla en el documento default y guardarla, los cambios se tienen que ver en su documento HTML. Una vez que la tengan funcionando tienen que editarla para cambiar colores, tipo de letra, tamaño, etc, para personalizarla. Hay que modificar la hoja de estilo.También tienen que sustituir las imágenes para crear su propio aspecto gráfico, eso quiere decir que tendrán que hacer su propia página a partir de la plantilla que se les dio. Saludos.

* {
margin: 0;
padding: 0;
}

body {
margin-bottom: 50px;
background: #FFFFFF url(images/img1.gif) repeat-x;
font: normal 13px “Trebuchet MS”, Arial, Helvetica, sans-serif;
color: #3B3B3B;
}

h1, h2, h3 {
color: #4F789F;
}

h1 {
}

h2 {
}

h3 {
font-size: 1em;
}

p, blockquote, ul, ol {
}

p {
}

blockquote {
}

ul {
}

ul li {
}

ol {
}

ol li {
}

a {
color: #4F789F;
}

a:hover {
text-decoration: none;
}

img {
border: 1px solid #3B3B3B;
}

img.left {
float: left;
margin: 0 20px 0 0;
}

img.right {
float: right;
margin: 0 0 0 20px;
}

/* Boxed Style */

.boxed {
}

.boxed .title {
padding: 10px 15px;
background: #3B3B3B;
text-transform: uppercase;
font: bold .77em Georgia, “Times New Roman”, Times, serif;
color: #FFFFFF;
}

.boxed .content {
padding: 15px;
}

.boxed ul {
list-style: none;
}

/* Post */

.post {
clear: both;
padding: 20px;
border-bottom: 1px solid #3B3B3B;
}

.post .title {
}

.post .content {
line-height: 1.6em;
}

.post .title {
margin-bottom: 20px;
font-family: Georgia, “Times New Roman”, Times, serif;
}

.post p, .post blockquote, .post ul, .post ol {
margin-bottom: 1em;
}

.post blockquote, .post ul, .post ol {
margin-left: 3em;
}

/* Header */

#header {
width: 700px;
height: 150px;
margin: 0 auto;
background: #69B10A url(images/img2.jpg);
}

#header h1, #header h2 {
text-transform: lowercase;
font-family: Georgia, “Times New Roman”, Times, serif;
font-style: italic;
font-weight: normal;
}

#header h1 {
float: left;
padding: 80px 0 0 20px;
letter-spacing: -3px;
font-size: 48px;
}

#header h2 {
float: left;
padding: 107px 0 0 7px;
}

#header a {
text-decoration: none;
color: #FFFFFF;
}

/* Page */

#page {
width: 700px;
margin: 0 auto;
background: url(images/img3.gif) repeat-y;
border-top: 20px solid #3B3B3B;
}

#content {
float: right;
width: 497px;
padding-right: 1px;
}

#sidebar {
float: left;
width: 200px;
padding-left: 1px;
}

/* Menu */

#menu {
}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
}

#menu li {
display: inline;
}

#menu a {
display: block;
padding: 5px 15px;
border-bottom: 1px solid #FFFFFF;
text-decoration: none;
color: #3B3B3B;
}

#menu a:hover {
background: #4F789F;
color: #FFFFFF;
}

#menu .active a {
background: #BABABA;
color: #000000;
}

/* Login */

#login {
}

#login fieldset {
border: none;
}

#login legend {
display: none;
}

#login input {
margin-bottom: 5px;
}

#inputtext1, #inputtext2 {
width: 160px;
}

/* Updates */

#updates {
}

#updates ul {
}

#updates li {
margin-bottom: 20px;
}

#updates h3 {
font-size: .77em;
}

/* Footer */

#footer {
width: 670px;
height: 15px;
margin: 0 auto;
padding: 5px 15px;
background: #3B3B3B;
font-size: .77em;
color: #FFFFFF;
}

#legal {
float: left;
}

#links {
float: right;
}

Anuncios

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s