Scribd
Carregar
11 visualizações8 páginas

HTML, CCS e Bootstrap

O documento aborda o CSS (Cascading Style Sheets), uma linguagem utilizada para formatar a apresentação de páginas HTML, definindo propriedades como cores, fontes e layout. São apresentadas três formas de implementar CSS em documentos HTML: inline, interno e externo, além de exemplos práticos. O texto também inclui exercícios para reforçar o aprendizado sobre a utilização do CSS.

Enviado por

Roberson
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
11 visualizações8 páginas

HTML, CCS e Bootstrap

O documento aborda o CSS (Cascading Style Sheets), uma linguagem utilizada para formatar a apresentação de páginas HTML, definindo propriedades como cores, fontes e layout. São apresentadas três formas de implementar CSS em documentos HTML: inline, interno e externo, além de exemplos práticos. O texto também inclui exercícios para reforçar o aprendizado sobre a utilização do CSS.

Enviado por

Roberson
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 8

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="mystyle.css">
</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 style.css.

● Abra o arquivo index.html e adicione dentro da <head> a inclusão do arquivo


css com o seguinte código:

<link rel="stylesheet" href="css/style.css">

● Agora abra o arquivo style.css 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:
https://jigsaw.w3.org/css-validator/
Referência Bibliográfica

DEVELOPER. CSS. Disponível em: https://developer.mozilla.org/pt-


BR/docs/Web/CSS Acesso em: 20 set. 2022.

W3Schools is Powered by W3. CSS Tutorial. Disponível em:


https://www.w3schools.com/css/default.asp 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="style.css">

b) <style src="mystyle.css">

c) <stylesheet>mystyle.css</stylesheet>

d) <head>mystyle.css</head>

e) <script>mystyle.css</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.

Você também pode gostar