FT5 9949

FICHA DE TRABALHO
CURSO PROFISSIONAL DE TÉCNICO DE MULTIMÉDIA
SPW – Sistemas de Produção web

UFCD 9949 – Construção de páginas web
1.º ANO ANO LETIVO: 2023 / 2024
Folhas de estido - CSS

Grupo I - Pesquisa
Faz uma pesquisa na web e responde às seguintes questões:
a. O que significa linguagem CSS?
CSS significa "Cascading Style Sheets" (Folhas de Estilo em Cascata, em português)
b. Em que consiste o CSS ou “folhas de estilo”?
O CSS (Cascading Style Sheets) é uma linguagem de estilo usada para definir a apresentação de
documentos HTML (ou XML). Ele determina como os elementos de um documento HTML devem
ser estilizados e exibidos na tela ou em outros meios de apresentação. As folhas de estilo
consistem em seletores, propriedades e valores, que juntos especificam o estilo visual dos
elementos selecionados. A separação do conteúdo (HTML) e da apresentação (CSS) permite maior
controle sobre o design e layout de uma página da web.
Cofinanciado por:
MOD.009 - 01 Página 1 de 9
c. Quais as vantagens de uso de CSS?
As vantagens de usar CSS incluem:
1. Separação de conteúdo e apresentação: Facilita a manutenção e atualização do

design da página sem alterar o conteúdo.
2. Consistência visual: Permite aplicar estilos uniformes em todo o site.
3. Facilidade de atualização: Alterações em estilos podem ser feitas uma vez e
aplicadas a várias páginas.
4. Eficiência: Páginas mais leves e carregamento mais rápido, com estilos definidos
em arquivos externos.
5. Flexibilidade e controle: Oferece uma variedade de recursos para estilizar
elementos, dando aos desenvolvedores mais controle sobre o design.
6. Design responsivo: Possibilita criar layouts que se adaptam a diferentes
dispositivos e tamanhos de tela.
7. Compatibilidade: Padronizado e amplamente suportado por navegadores
modernos, garantindo uma experiência consistente para os usuários.
Cofinanciado por:
d. Como funciona o CSS? (Estilos: Interno, Externo e Inline)
O CSS (Cascading Style Sheets) funciona aplicando regras de estilo a elementos HTML para
controlar sua apresentação visual. Existem três formas principais de aplicar estilos CSS em
documentos HTML:
1. Estilos Internos: Definidos dentro da seção <style> no cabeçalho <head> do documento

HTML. Afetam apenas o documento em que estão definidos.
2. Estilos Externos: Definidos em um arquivo CSS separado, vinculado ao documento HTML

usando a tag <link> no cabeçalho <head>. Podem ser compartilhados por vários
documentos HTML.
3. Estilos Inline: Aplicados diretamente aos elementos HTML usando o atributo style. Têm a
maior especificidade e substituem os estilos definidos internamente ou externamente.
4. Essas formas oferecem diferentes níveis de reutilização, manutenção e especificidade de

estilos, sendo a escolha entre elas dependente das necessidades específicas do projeto.
Cofinanciado por:
Grupo II – Exercício HTML/ CSS
1. Criar um novo documento HTML (notepad++) com o nome pagina_01.html. Usar o código
seguinte como base para este documento.
Neste ponto deves fazer o print do resultado:
Cofinanciado por:
Associar CSS ao Documento HTML
1. Criar um novo documento em branco no notepad++ e gravar este documento com o nome
estilos_01.css na mesma pasta onde se encontra o documento pagina_01.html.
2. No documento estilos_01.css criar uma regra que defina o “Verdana” como tipo de letra para
todo o documento.
body {
font-family: Verdana;
}
3. Estabelecer a ligação entre as regras definidas no documento estilos_01.css e o documento
pagina_01.html.
<head>
<title>Documento CSS1</title>
<link rel="stylesheet" type="text/css" href="estilos_01.css">
</head>
4. Ver novamente o documento pagina_01.html num navegador web e confirmar as alterações
produzidas.
Formatação de Texto
Cofinanciado por:
1. Criar novas regras CSS no ficheiro estilos_01.css para alterar os tipos de letra usados nos vários
títulos do documento HTML. Criar regras de forma a que o título de nível 1 (h1) use Arial, o
título de nível 2 (h2) use Courier, o nível 3 use Georgia, o nível 4 use Times New Roman, o nível
5 use Trebuchet, e o nível 6 use Garamond. Acompanha os resultados no navegador web
enquanto crias novas regras CSS.
Exemplo:
h1 {
font-family:Arial;
}
2. Alterar as regras de forma a que os títulos de nível 3 e 6 surjam em itálico (italic).
Exemplo:
h3 {
font-style:italic;
}
3. Alterar a regra associada aos parágrafos de forma a que os parágrafos surjam a negrito (bold).
p{
font-weight: bold;
}
4. Alterar a regra associada ao título de nível 5 de forma a que o negrito seja removido e o texto
surja normal (normal).
h5 {
font-weight:normal;
}
5. Experimentar as propriedades associadas à decoração do texto e alterar as regras de forma a
que o texto associado ao título de nível 2 surja sublinhado (underline), o texto do título de nível
3 surja com uma linha sobre ele (overline), e o texto do título de nível 4 surja riscado (line-
trough).
Exemplo:
h2 {
text-decoration:underline;
}
Apresentação de Texto
1. Alterar os alinhamentos de forma a que o título de nível 2 surja alinhado à direita (right) e o
título de nível 3 surja centrado (center).
h2 {
text-align:right;
Cofinanciado por:
}
2. Alterar o espaçamento entre letras do título de nível 1 para 0.7em.
h1 {
letter-spacing:0.7em;
}
3. Alterar o espaçamento entre palavras do título de nível 6 para 1.2em.
h6 {
word-spacing:1.2em;
}
4. Alterar as cores do texto nos títulos de forma a que o título de nível 1 seja apresentado a
vermelho, o de nível 2 a verde, o de nível 3 a azul, o de nível 4 a laranja, o de nível 5 a cinzento,
e o de nível 6 a azul-claro.
h1 {
color:red;
}
5. Alterar a cor de fundo dos títulos de forma a que o título de nível 1 seja apresentado sobre um
fundo cinzento, o de nível 2 sobre preto, e o de nível 3 sobre amarelo.
h1 {
background-color:grey;
}
CONCLUSÃO
- Consolidação CSS -
É importante ter percebido que o CSS são formatações de estilo que se podem aplicar no
próprio documento ou em ficheiro(s) externo(s).
No próprio documento pode-se incluir o CSS
Cofinanciado por:
- ou na área de cabeçalho (head):
Exemplo:
<html>
<head>
<style>
body {
background-color: blue;
}
h1 {
color: red;
padding: 60px;
}
</style>
</head>
<body>
<h1>Hostinger Tutoriais</h1>
<p>Este é o nosso parágrafo.</p>
</body>
</html>
- ou entre a tag <style> ou na própria linha exemplo:

<body style=”background-color:black;”>
<h1 style=”color:white;padding:30px;”>Aprender CSS</h1>
<p style=”color:white;”>É muito importante.</p>
Quando o CSS é colocado num documento externo, faz-se a codificação CSS num documento e
guarda-se com o tipo CSS, e faz-se a devida referenciação no documento html.
Exemplo:
Criar um novo documento em branco no notepad++ e gravar este documento com o nome
estilos_01.css na mesma pasta onde se encontra ou se vai guardar o documento html.
No documento estilos_01.css criar uma regra que definir o “Verdana” como tipo de letra para todo
o documento.
body {
font-family: Verdana;
}
h1 {
font-family:Arial;
letter-spacing:0.7em;
color: red;
background-color:grey;
}
Cofinanciado por:
h2 {
text-decoration:underline;
text-align:right;
}
Estabelecer a ligação entre as regras definidas no documento estilos_01.css e o documento html.

<head>
<title>Documento CSS1</title>
<link rel="stylesheet" type="text/css" href="estilos_01.css">
</head>
Cofinanciado por:

FT5 9949

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

FT5 9949

Enviado por

Direitos autorais:

Formatos disponíveis

FICHA DE TRABALHO

CURSO PROFISSIONAL DE TÉCNICO DE MULTIMÉDIA

SPW – Sistemas de Produção web

Folhas de estido - CSS

Faz uma pesquisa na web e responde às seguintes questões:

a. O que significa linguagem CSS?

CSS significa "Cascading Style Sheets" (Folhas de Estilo em Cascata, em português)

b. Em que consiste o CSS ou “folhas de estilo”?

As vantagens de usar CSS incluem:

1. Separação de conteúdo e apresentação: Facilita a manutenção e atualização do

1. Estilos Internos: Definidos dentro da seção <style> no cabeçalho <head> do documento

2. Estilos Externos: Definidos em um arquivo CSS separado, vinculado ao documento HTML

4. Essas formas oferecem diferentes níveis de reutilização, manutenção e especificidade de

Neste ponto deves fazer o print do resultado:

Neste ponto deves fazer o print do resultado:

Neste ponto deves fazer o print do resultado:

- ou entre a tag <style> ou na própria linha exemplo:

Estabelecer a ligação entre as regras definidas no documento estilos_01.css e o documento html.

Você também pode gostar