1 Ano | 2 Semestre 2009/2010

Tecnologias da Informao
Docente: Artur Lana

Exerccios CSS 2
1. Edite o ficheiro css3.html.
2. Crie um ficheiro de estilos com o nome texto.css.
3. Associe o ficheiro de estilos pgina css3.html
4. Insira o cdigo seguinte no ficheiro CSS
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset,
blockquote {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}
table { border-collapse: collapse; border-spacing: 0; }
td, th, caption { font-weight: normal; text-align: left; }
img, fieldset { border: 0; }
ol { padding-left: 1.4em; list-style: decimal; }
ul { padding-left: 1.4em; list-style:square; }
q:before, q:after { content:''; }

5. Formate o body da seguinte forma:

Cor da letra: #002D4B;
Tipo de letra: Arial, Helvetica, sans-serif;
Tamanho da letra: 62.5% do tamanho de letra default;

6. Crie uma regra para todos os h1que se encontram no interior do elemento com
ID=main, com as seguintes formataes:
Cor da letra: #FF6600;
Tipo de letra: "Arial Black", Arial, Helvetica, sans-serif;
Tamanho da letra: 4em;

7. Formate agora todos os h2 que se encontram no interior do elemento com

ID=main, com as seguintes declaraes:
font: bold 3.5em "Hoefler Text", Garamond, Times, serif;
Pgina 1 de 3

IPBeja Escola Superior de Educao R. Pedro Soares 7800 295 Beja |Tel: 284 315 001 Fax: 284 326 824 E-mail: eseb@eseb.ipbeja.pt

border-bottom: 1px solid #002D4B;

margin-top: 25px;

8. Defina uma regra para os h3 descendentes do elemento main da seguinte forma:

Cor da letra: #F60;
Tamanho da letra: 1.9em;
Letra em negrito;
maiusculas
margin-top: 25px;
margin-bottom: 10px;

9. Crie uma regra que permita seleccionar os p que se encontram no interior da tag
com ID=main, e insira as seguintes formataes:
Tamanho da letra: 1.5em;
Altura da linha: 150%;
margin-left: 150px;
margin-right: 50px;
margin-bottom: 10px;

10. Defina uma regra que permita colocar a primeira linha dos pargrafos da alnea
anterior com o seguinte aspecto:
Negrito
Cor da letra: #999;

11. Insira as seguintes regras para formatar as listas:

#main ul {
margin: 50px 0 25px 50px;
width: 150px;
float: right;
}
#main li {
color: #207EBF;
font-size: 1.5em;
margin-bottom: 7px;
}

12. Defina uma classe de formao como nome linha para os elementos descendentes
do elemento main com as seguintes caractersticas:
Cor da letra: #999999;
Tamanho da letra: 1.6em;
margin: 5px 0 25px 50px;

13. Localize na pgina CSS3.html o pargrafo <p>2009/2010<strong>Tecnologias da

Informao</strong></p> e aplique-lhe a classe de formatao linha definida na
alnea anterior
Pgina 2 de 3

IPBeja Escola Superior de Educao R. Pedro Soares 7800 295 Beja |Tel: 284 315 001 Fax: 284 326 824 E-mail: eseb@eseb.ipbeja.pt

14. Defina agora uma regra para os elementos strong descendentes dos elementos que
aplicam a classe linha e so descendentes do elemento main, com as seguintes
definies:
Cor da letra: #207EBF;
Todos os caracteres em maisculas
margin-left: 5px;

15. Acrescente a seguinte declarao regra que formata o body

background: #E1EEFD url(imagens/fundo.png) repeat-x;

16. Logo a seguir a regra anterior introduza a seguinte regra:

#main {
width: 740px;
margin: 0 auto;
padding: 0 10px;
border: 4px solid white;
background: transparent url(imagens/faixa.jpg) no-repeat;
}

17. Acrescente uma regra, logo aps a regra que formata os h1, para os elementos strong
que se encontram no interior dos h1 que so descendentes do elemento main, com
declaraes seguintes:
Tamanho da letra: 150px;
Cor da letra: white;
Altura da linha: 1em;
margin-right: -1.25em;

Pgina 3 de 3

IPBeja Escola Superior de Educao R. Pedro Soares 7800 295 Beja |Tel: 284 315 001 Fax: 284 326 824 E-mail: eseb@eseb.ipbeja.pt