Ministério da Educação

Escola Secundária de Avelar Brotero

Disciplina: Sistemas e Programação Web 2022/2023

UFCD 0154 – CSS Questão Aula

Questão Aula – Aplicação de um ficheiro CSS a uma página HTML

1. CRIAR NOVO DOCUMENTO HTML

Comece por criar uma pasta no ambiente de trabalho “Questão Aula – MeuNome” – depois, utilizando
o Visual Code ou Note++, crie novo documento HTML com o nome q_aula_css.html.

Use o código seguinte como base para este documento.

Ver num navegador web o documento q_aula_css.html.

 2. ALTERAR POSICIONAMENTO DOS ELEMENTOS

a) Crie um novo documento em branco no “Visual Code” ou “Note++” (Microsoft Word ou

outro editor de texto não são permitidos) e grave este documentocom o nome estilos.css na
mesma pasta onde se encontra o documento q_aula_css.html.

b) Associe o documento HTML q_aula_css.html ao documento estilos.css. Para tal, adicione

o elemento link (com os atributos corretos) ao elemento head no documento
q_aula_css.html.

c) Crie novas regras CSS no documento estilos.css de forma a alterar a cor do texto dos primeiros
quatro parágrafos para azul, vermelho, verde e laranja. Notar que, para manipularisoladamente
cada um dos parágrafos, também será necessário alterar o documento HTML.

d) Crie uma nova regra de forma a colocar os quatro primeiros parágrafos com o fundo a
cinzento claro.

e) Altere a cor de fundo dos dois últimos parágrafos para azul claro.

f) Altere a largura de cada parágrafo para 100px e defina um contorno preto de 1px.

g) Defina um contorno de 1px vermelho para todos os elementos section e footer usando
apenas uma regra CSS.

h) Defina uma margem de topo de 40px para o elemento footer.

i) Posicione o elemento section da classe b no canto inferior direito do documento, com uma
largura de 100px e altura de 200px.

j) Altere a posição do elemento section da classe a para o canto inferior do esquerdo do

browser, com uma largura de 100px e altura de 300px.

k) Altere a margem esquerda e a margem direita do elemento footer para 200px.

l) Coloque o quinto parágrafo junto ao topo esquerdo em relação ao browser.

m) Coloque o sexto parágrafo junto ao topo direito em relação ao browser.

n) Coloque o segundo parágrafo junto à parte inferior do elemento section da classe a.

o) Desloque o primeiro parágrafo 50px para a direita.

3. VALIDAR O DOCUMENTO CSS

Use o serviço de validação de CSS oferecido pelo W3C para verificar o documento estilos.css.

Se forem encontrados erros, corrija-­‐os de forma a que no final o documento seja válido.

Entregue os 2 ficheiros elaborados na atividade do classroom “Questão de Aula”.