HTML, CCS e Bootstrap
Entendendo sobre estilos
Professora: Lívia Gouvêa
Tutor(a):
Introdução
O CCS, é o acrônimo de Cascading Style Sheets, cuja tradução para português
significa Folhas de estilo em cascata. É uma linguagem usada para formatar a
apresentação de uma página em HTML no navegador. Os padrões desta linguagem
são definidos pelo W3C, mesmo consórcio que define os padrões para a linguagem
HTML.
Objetivos da aula
● Definir o conceito de CSS
● Discutir a estrutura básica do CSS
● Identificar forma de implementar CSS
Resumo
O que é o CSS e como é sua sintaxe
O CCS, é o acrônimo de Cascading Style Sheets, cuja tradução para português
significa Folhas de estilo em cascata. É uma linguagem usada para formatar a
apresentação de uma página em HTML no navegador. Os padrões desta linguagem
são definidos pelo W3C, mesmo consórcio que define os padrões para a linguagem
HTML.
O CSS foi criado em 1996 para remover da página HTML o estilo, que antes era
atribuído por tags como <font> que eram um pesadelo para desenvolvedores pois se
aplicavam a cada elemento HTML. Para resolver esse problema, o World Wide Web
Consortium (W3C) criou o CSS, que economiza muito trabalho controlando o layout
de várias páginas da web de uma só vez. O CSS atualmente está em sua terceira
versão.
A linguagem CSS é utilizada para definir propriedades de elementos HTML como
cores, fontes, tamanhos de texto, espaçamento entre elementos, posicionamento dos
elementos, definir imagens de fundo ou cores de fundo e variações de exibição para
diferentes dispositivos e tamanhos de tela. A palavra cascata significa que um estilo
aplicado a um elemento pai também se aplicará a todos os elementos filhos dentro
do pai.
A sintaxe do CSS compõe-se de um seletor, abertura de chaves, declaração de
propriedade e valor para esta, como no exemplo a seguir, onde atribui-se ao seletor
p a fonte verdana e o tamanho de 20px.
p{
font-family: verdana;
font-size: 20px;
}
▪ O seletor aponta para o elemento HTML que se deseja estilizar.
▪ O bloco de declaração contém uma ou mais declarações separadas
por ponto e vírgula.
▪ Cada declaração inclui um nome de propriedade CSS e um valor,
separados por dois pontos.
▪ Os blocos de declaração são cercados por chaves.
Formas de adicionar CSS ao documento HTML
● Existem três formas de adicionar CSS à uma página HTML:
◦ Inline (em linha): Um estilo embutido usado para aplicar um estilo único
para um único elemento. Deve se adicionar o atributo style ao elemento que
ser quer alterar e dentro dele, definir as propriedades, como no exemplo a
seguir
<h1 style="color:blue;text-align:center;">Título</h1>
<p style="color:red;">Parágrafo</p>
◦ Internal (interno): O código CSS é definido na própria página HTML, dentro
do elemento <style>, dentro da seção <head>. Exemplo:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
Corpo da página
</body>
◦ External (externo): Um arquivo externo à página HTML que deve ser
incluído via elemento <link>, dentro da seção <head>. no cabeçalho da
página. Com uma folha de estilo externa, você pode alterar a aparência de
um site inteiro alterando apenas um arquivo! Exemplo:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
Corpo da página
</body>
</html>
Como aplicar na prática o que aprendeu
● Vamos incluir em nosso projeto um arquivo externo de CSS.
● Para isso, vamos criar uma nova pasta dentro de nosso projeto chamada css:
Clique com o botão direito na pasta de seu projeto no VS Code e em seguida
em New folder. Em seguida, dê o nome css para a pasta criada.
● Agora vamos criar um arquivo .css dentro da pasta: Clique com o botão
direito sobre a pasta css criada e em seguida em New file. Dê o nome para o
novo arquivo de [Link].
● Abra o arquivo [Link] e adicione dentro da <head> a inclusão do arquivo
css com o seguinte código:
<link rel="stylesheet" href="css/[Link]">
● Agora abra o arquivo [Link] e vamos adicionar algum código nele. Vamos
colorir o fundo da página de de cinza, adicionando o código
body {
background-color: #aaa1a1;
}
● Agora vamos adicionar um espaçamento entre as seções com o seguinte
trecho de código:
section {
padding: 20px
}
Dica quente para você não esquecer
● Você pode usar o W3C CSS Validation Service para verificar se o seu CSS
é válido. Essa é uma ferramenta indispensável para depuração:
[Link]
Referência Bibliográfica
DEVELOPER. CSS. Disponível em: [Link]
BR/docs/Web/CSS Acesso em: 20 set. 2022.
W3Schools is Powered by W3. CSS Tutorial. Disponível em:
[Link] Acesso em: 20 set. 2022.
Exercícios
1. Qual é o HTML correto para se referir a uma folha de estilo externa?
a) <link rel="stylesheet" href="[Link]">
b) <style src="[Link]">
c) <stylesheet>[Link]</stylesheet>
d) <head>[Link]</head>
e) <script>[Link]</script>
2. Em qual parte do documento HTML deve-se inserir a referência a uma folha
de estilo externa?
a) No final do documento
b) Dentro do <body>
c) Dentro do <head>
d) Dentro do <footer>
e) Dentro da <section>
3. Qual tag HTML é usada para definir uma folha de estilo interna?
a) <css>
b) <style>
c) <script>
d) <head>
e) <section>
4. Qual atributo HTML é usado para definir estilos em linha (inline)?
a) font
b) style
c) styles
d) class
e) id
5. Qual é a extensão de um arquivo de folha de estilos?
a) .style
b) .stylesheet
c) .cascade
d) .css
e) .html
Gabarito
1. Letra a. Estilos externos são definidos dentro do elemento <link>, onde o atributo
rel define qual é o tipo de documento e o atributo href especifica o caminho para o
documento.
2. Letra c. A referência a arquivos de folha de estilo externos devem ser inseridos em
elementos <link> dentro da seção <head>.
3. Letra b. Uma folha de estilo interna deve ser usada no caso de uma página HTML
necessitar de um estilo específico. É definido dentro do elemento <style>, dentro da
seção <head>.
4. Letra b. Um CSS inline deve ser utilizado para aplicar um estilo único a um elemento
específico, utilizando o atributo style ao elemento que se quer customizar. O atributo
style pode conter qualquer propriedade CSS.
5. Letra d. Uma folha de estilo externa pode ser escrita em qualquer editor de texto e
deve ser salva com uma extensão .css. O arquivo .css não deve conter tags HTML.