Universidade Fernando Pessoa

Laboratório Web do Lado Cliente

Ficha Prática/Laboratorial nº2 – CSS
Objectivos:
● Perceber a sintaxe CSS
● Saber utilizar a etiqueta ​style​.
● Saber criar um documento CSS
● Entender o modelo de caixas

Regras importantes:
● O ficheiro ZIP deve conter as suas resoluções no formato específico solicitado.

1. Com base no ​ficheiro html​, devem tentar replicar a apresentação da figura abaixo:

O tamanho do corpo deverá ser 800px. A cor de fundo da página, do cabeçalho e do menu são,
respectivamente, #DDDDFF, #666666 e #330000.

Objetivos principais:
 ● Como centralizar o conteúdo?
● Como alinhar os elementos de listas na horizontal?
● Como fazer as imagens serem “envolvidas” pelo texto?
● Qual a importância dos atributos ​margin,​ ​border ​e ​padding​?

2. Com base na página pessoal implementada na ficha de exercícios 1, modificar a aparência

conforme os requisitos abaixo:
a. As hiperligações deverão estar dentro de um elemento que representa o menu e
deverá possuir um padding de 50px, e cor de fundo #55CC55
b. Ao fazer hover em qualquer das hiperligações, a cor de fundo deverá mudar para
#33CC33
c. Cada hiperligação deverá estar separada lateralmente por 10px
d. Cada item da lista de hobbies deverá estar identificada por uma letra do alfabeto
grego, ser capitalizada (primeira letra de cada palavra em maiúscula) via CSS e
alternar cores de texto entre verde e vermelho
e. Os elementos do cabeçalho da tabela deverão ter a cor ​chartreuse​.
f. Todas as células devem deixar de ter espaços entre si e devem ter um padding de
10px.
g. As células vazias da tabela deverão ter cor de fundo gray.

Referências:
1. CSS background-color property (w3schools.com)
2. CSS color property (w3schools.com)
3. CSS width property (w3schools.com)
4. CSS font-family property (w3schools.com)
5. CSS Margin (w3schools.com)
6. CSS border property (w3schools.com)
7. CSS padding property (w3schools.com)
8. CSS list-style-type property (w3schools.com)
9. CSS display property (w3schools.com)
10. CSS float property (w3schools.com)
11. CSS Pseudo-classes (w3schools.com​)
12. CSS Pseudo-elements (w3schools.com)
 Fernando Pessoa University
Client Side Web Lab
Worksheet nº2 – CSS
Objectives:
● Understand CSS syntax.
● Know how to use the ​style t​ ag.
● Know how to create a css document.
● Understand the box model.

Important rules:
● The ZIP file must contain all files that solve the proposed problems.

1. Based on the ​html ​file, they should try to replicate the presentation of the figure below:

The body size should be 800px. The background color of the page, header and menu are,
respectively, #DDDDFF, # 666666 and # 330000.
Main objectives:

● How to center the content?

● How to horizontally align elements?
● How to make the images “involved” by the text?
● What is the meaning of the ​margin,​ ​border ​e ​padding attributes​?

2. Based on the personal page implemented in exercise sheet 1, modify the appearance according
to the requirements below:
a. The hyperlinks must be inside an element that represents the menu and must have a
padding of 50px, and background color # 55CC55
b. When hovering on any of the links, the background color should change to # 33CC33
c. Each hyperlink must be laterally separated by 10px
d. Each item on the hobby list must be identified by a letter of the Greek alphabet,
capitalized (first letter of each word in uppercase) via CSS and alternate text colors
between green and red
e. The elements of the table header must be in ​chartreuse c​ olor.
f. All cells must have no spaces between them and must have a padding of 10px.
g. Empty table cells should have a ​gray ​background color.

Referências:
1. CSS background-color property (w3schools.com)
2. CSS color property (w3schools.com)
3. CSS width property (w3schools.com)
4. CSS font-family property (w3schools.com)
5. CSS Margin (w3schools.com)
6. CSS border property (w3schools.com)
7. CSS padding property (w3schools.com)
8. CSS list-style-type property (w3schools.com)
9. CSS display property (w3schools.com)
10. CSS float property (w3schools.com)
11. CSS Pseudo-classes (w3schools.com)
12. CSS Pseudo-elements (w3schools.com)