CSS

1 ª EDIÇÃO
 BRIAN NEUKAMP

CSS

1 ª edição

Caxias do Sul Instituto QI Escolas e

Faculdades.
2018
 CSS

SUMÁRIO

APRESENTAÇÃO.......................................................................................................................06
AULA 1 - INTRODUÇÃO AO CSS.......................................................................................................07
AULA 2 - PROPRIEDADES AO CSS.....................................................................................................10
AULA 3 - PROPRIEDADE FLOAT........................................................................................................13
AULA 4 - ADICIONANDO PERCENTUAL %........................................................................................17
AULA 5 - BACKGROUND-IMAGE, BACKGROUND-REPEAT, MARGIN TOP, {a} E {a:hover}, TEXT ALIGN,
WORD-SPACING....................................................................................................................19 AULA
6 - PARÁGRAFOS, H1, IMG.....................................................................................................23 AULA
7 - CLASSE E ID COM CSS.........................................................................................................26 AULA
8 - BORDER RADIUS................................................................................................................30
AULA 9 - ESTILIZAÇÃO DE FORMULÁRIOS........................................................................................33
AULA10 - FONTES NOCSS.................................................................................................................35
AULA 11 - AVALIAÇÃO......................................................................................................................37
AULA12-
FILEZILA..............................................................................................................................38
REFERÊNCIAS.................................................................................................................................40

QI Escolas e Faculdades

5
 CSS

APRESENTAÇÃO

Proposta em março de 1989, a Web tem transformado a forma como o mundo se comunica,
cria e colabora. Mais de duas em cada cinco pessoas no mundo estão agora ligadas à Web, muitas
vezes, divididas geograficamente e socialmente. A cada minuto, elas enviam umas as outras
centenas de milhões de mensagens, compartilham 20 milhões de fotos e trocam pelo menos US$ 15
milhões em bens e serviços. O sucesso da Web pode ser atribuído ao seu desenho original, como
um sistema descentralizado e uma arquitetura aberta que qualquer um poderia ajudar a construir.
A web está sendo o palco para o desenvolvimento de softwares. A tendência já confirmada e o
uso de dispositivos móveis fazem com que haja uma necessidade cada vez maior de se utilizar esse
universo de linguagens de marcação e programação para web. Podemos citar as principais como
HTML, CSS, Java script, PHP, Asp.net e Java EE.
Do histórico do CSS, chegamos à versão 3, ou seja, o CSS3. Nessa versão, uma série de mudanças
na semântica foi alterada para que os navegadores possam ler em uma estrutura padrão. Dentre
esses navegadores, podemos citar aqui o Google Chrome como um dos navegadores mais
atualizados, depois o Firefox e o Safari da Apple e assim por diante. Faremos uma abordagem quanto
a essa transição e trabalharemos com essas mudanças.
Vamos utilizar algumas ferramentas para o desenvolvimento dessa linhagem como o bloco de
notas, notpad++, também o dreamweaver, isso dependerá de seu professor, todos eles podem ser
utilizados para o conhecimento dessa linguagem.

QI Escolas e Faculdades

6
 CSS

AULA 1 - INTRODUÇÃO AO CSS

• Conhecer a Estrutura de HTML.

• Conhecer as principais tags de HTML.

CSS

Refere-se à estilização de páginas para que os navegarem leiam o conteúdo de forma padrão.
Sem o CSS, cada navegador poderá interpretar a página de maneiras diferentes.

Body

Vamos começar nosso documento com “* body “, ou seja, vamos definir o body para nosso
HTML.

Margin

Também vamos definir o margin da página como zero. Mas atenção, pois essa propriedade
possui vários atributos.

Padding

Também vamos definir o padding da página como zero. Mas atenção essa propriedade possui
vários atributos.

Vamos ao CSS

Abra um arquivo de CSS e salve como estilo.css. Utilize o dreamweaver.

QI Escolas e Faculdades

7
 CSS

* body {
margin: 0px;
padding: 0px;

}
Aqui estamos dizendo que o margin da página será “0”, e o padding será “0”.
A margem limpa uma área em torno de um elemento (fora da fronteira). A margem não tem
uma cor de fundo, sendo completamente transparente.
A parte superior, direito, inferior e margem esquerda podem ser alteradas independentemente,
usando propriedades separadas. Uma propriedade margem abreviada também pode ser utilizada
para alterar todas as margens de uma só vez.
O preenchimento limpa uma área em torno do conteúdo (dentro da fronteira) de um elemento.
O acolchoamento é afetado pela cor do elemento de fundo.
A parte superior, direito, inferior e preenchimento à esquerda podem ser alterado
independentemente, usando propriedades separadas. Uma propriedade de estofoabreviada
também poderá ser utilizada para alterar todos os preenchimentos de uma só vez.
Vamos linkar o CSS ao HTML.
Agora abra um arquivo de HTML entre as tags <head> e </head> e adicione o CSS da seguinte
maneira:

<! DOCTYPE html >

< html >
< head >
< title> Título da Página</title >
<link rel=”stylesheet” type=”text/css” href=”estilo.css”>
< /head >

< body >

Conteúdo <
/body > < /html
>

Pronto, agora estamos conectados com o arquivo de CSS, então, salve esse html, como index.
html. Isso fará com que o site fique dentro dessa configuração para qualquer navegador.
Mudanças ocorreram com CSS3, de forma que, com a integração com HTML5, não seja
necessário utilizar essa opção. Porém, devido ao Internet Explorer, muitas aplicações, mesmo com o
CSS3, ainda utilizam essa opção.
Observe que a largura de um box corresponde à soma dos seguintes comprimentos.

QI Escolas e Faculdades

8
 CSS

• Margem externa da esquerda (margin-left)

• Borda da esquerda (border-left)
• Margem interna da esquerda (padding-left)
• Largura do conteúdo (width)
• Margem interna da direita (padding-right)
• Borda da direita (border-right)
• Margem externa da direita (margin-right)

Analogamente, a altura de um box corresponde à soma dos seguintes comprimentos.

• Margem externa superior (margin-top)

• Borda superior (border-top)
• Margem interna superior (padding-top)
• Altura do conteúdo (height)
• Margem interna inferior (padding-bottom)
• Borda inferior (border-bottom)
• Margem externa inferior (margin-bottom)

QI Escolas e Faculdades

9
 CSS

AULA 2 - PROPRIEDADES AO CSS

• Conhecer a Estrutura de HTML.

• Conhecer as principais tags de HTML.

Para criar um box na página CSS, trabalhe da seguinte forma. Lembre-se das tags de HTML
como width height e, após do body. Então, vamos definir nossas “divs” da seguinte forma com um
“#”. Abra o arquivo estilo.css e vamos dar continuidade.

* body {
margin: 0px;
padding: 0px;

}
#topo{
width:900px;
Height:200px;
margin:auto; background-
color:#F00;

}
#menu{
width:900px;
Height:100px;
margin:auto; background-
color:#003;

}
#corpo{
width:900px;

QI Escolas e Faculdades

1
 CSS

Height:500px;
margin:auto; background-
color:#F00;

}
#rodape{
width:900px;
Height:500px;
margin:auto; background-
color:#003;

OBS:O margin:auto quer dizer que as nossas divs ficarão centralizadas na página.
OBS:O background-color quer dizer que nossa cor de fundo será uma determinada cor.

Agora vamos adicionar ao HTML dentro da das Tags <body> </body>.

Abra seu arquivo de HTML e adicione da seguinte forma. - Arquivo HTML.

< body >

< div id=”topo”></div >
< div id=”menu”></div >
< div id=”corpo”></div >
<div id=”rodape”></div >

</body >

Terá o seguinte resultado.

QI Escolas e Faculdades

1
 CSS

Nessa atividade, considere a largura do topo em 900px, e a altura em 300px. O box da direita
com 700px e altura em 600px. Já, o da esquerda com 200px; e altura 700px.

QI Escolas e Faculdades

1
 CSS

QI Escolas e Faculdades

1
 CSS

AULA 3 - PROPRIEDADE FLOAT

• Conhecer a propriedade float.

Daremos continuidade para entender sobre a propriedade Float. Essa propriedade nos dará
suporte para adicionarmos “divs” dentro de uma outra div, ou seja, vamos fazer as divs flutuar uma
na outra.

Abra seu arquivo de HTML e CSS da aula anterior e adicione essa propriedade no nosso código.
Vamos criar duas “divs”: uma chamada de #corpo-esquerdo, e outra #corpo-direito.

* body {
margin: 0px;
padding: 0px;

}
#topo{
width:900px;
Height:200px;
margin:auto; background-
color:#F00;

}
#menu{
width:900px;
Height:100px;
margin:auto; background-
color:#003;

QI Escolas e Faculdades

1
 CSS

#corpo{
width:900px;
Height:500px;
margin:auto;
background-color:#F00;
}
#corpo-esquerdo{
width:400px;
Height:500px;
background-color:#003;
float:left;

}
#corpo-direito{
width:400px;
Height:500px;
background-color:#003;
float:right;

#rodape{
width:900px;
Height:500px;
margin:auto; background-
color:#003;

OBS: Foi removido o margin:auto dessas novas divs, deixando apenas o float. Adicione os
backgroud-color, para essas duas “divs” que criamos.

Terá o seguinte resultado.

QI Escolas e Faculdades

1
 CSS

Desenvolva o layout abaixo.

QI Escolas e Faculdades

1
 CSS

QI Escolas e Faculdades

1
 CSS

AULA 4 - ACIDIONANDO PERCENTUAL “%”

•Conhecer pixels.

É comum nos sites e sistemas de hoje, onde a “div”, ao menos quanto ao rodapé e topo da
página, sempre preencherem o navegador ao seu 100%. Bem, até então, trabalhamos com pixels,
porém podemos adicionar percentual nas “divs”, para isso, vamos buscar novamente o exercício do
capítulo anterior. Poderá fazer separado também.
Abra o arquivo estilo.css e adicione as seguintes “div’s” #topo-percentual #rodape-percentual.

#topo-percentual{
width:100%;
Height:200px;
margin:auto; background-
color:#F00;

}
#rodape-percentual{
width:100%;
Height:200px;
margin:auto; background-
color:#F00;

Adicionando ao HTML

< div id=”topo-percentual” >

< div id=”topo”></div >
< /div >

QI Escolas e Faculdades

1
 CSS

< div id=”menu” >

< div id=”logo”></div >
< div id=”menu2”></div >
< /div >
< div id=”anima”></div >
< div id=”corpo” >
< div id=”corpo-esquerdo”></div >
< div id=”corpo-direito”></div >

< /div >

< div id=”rodape-percentual” >
< div id=”rodape”></div > <
/div >

Terá um resultado dessa maneira.

QI Escolas e Faculdades

1
 CSS

AULA 5 - BACKGROUND-IMAGE - BACKGROUND-REPEAT -

MARGIN TOP - {a} E {a: hover} - TEXT ALIGN - WORD-SPACING

• Conhecer as técnicas para um bom atendimento telefônico.

• Falar bem ao telefone.

• Aprender as técnicas de atendimento pelo telefone.

Neste capítulo, vamos adicionar backgrounds com imagens em nosso layout e aproveitar para
revisar um pouco de photoshop. Vamos remover as opções de background-color, e adicionarmos
background-image.

Background-image = Utiliza uma imagem no fundo da DIV.

Background-repeat = Repete a imagem dentro da DIV. Porém, estamos utilizando o no-repeat,

pois não precisaremos preencher toda nossa “div”, que é maior que a imagem.

Margin-top = Distância do objeto do topo da div.

a = Estilização do link a:hover

= ao passar o mouse.

Text-align = Será ao centro, esquerda, direita ou justificado.

Word-spacing = Espaçamento entre palavras.

Observe o layout agora:

QI Escolas e Faculdades

2
 CSS

Vamos ao código e suas mudanças:

Citaremos aqui apenas as “divs” que sofrem mudanças e as “divs” que foram adicionadas.

#topo-percentual{

width:100%; height:200px;
height:200px;
margin:auto; background- margin:auto;
color:#33ccff;

background-image:url(twitter-

logo.png); }

#logo{

QI Escolas e Faculdades

2
 CSS

background-
image:url(url.png);

width:200px; background-repeat: no-repeat;

height:200px;
float:left; }
#menu2{ margin-top:10px;

width:700px; height:200px; }
float:right; background-
image:url(menu.jpg); #menu2 a{ text-
background-repeat:no-repeat;
word-spacing:20px; text- decoration:none;
align:center;
color:#FFFFFF;

#menu2 a:hover{

color:#FF0000;
}
}
#menu2 p{

#rodape{ #rodape-percentual{

width:900px; width:100%;
height:200px; height:200px;
margin:auto; background- margin:auto;
color:#33ccff; background-
color:#33ccff;

} }
Como ficou no HTML:

QI Escolas e Faculdades

2
 CSS

<p>
<div id=”topo-percentual”>
< a href=”index.html”>HOME</a >
<div id=”topo”></div>
< a href=”empresa.html”>EMPRESA</a
</div> >

< a
<div id=”menu”> href=”servicos.html”>SERVIÇOS</a >

<div id=”logo”></div> < a href=”noticias.html”>NOTÍCIAS</a

>
<div id=”menu2”>
< a href=”contato.html”>CONTATO</a
>

< /p >

</div>
< /div >
</div>
< div id=”rodape-percentual” >
<div id=”anima”></div> < div id=”rodape”></div >

<div id=”corpo”> < /div >

< div id=”corpo-esquerdo”></div >

< div id=”corpo-direito”></div >

QI Escolas e Faculdades

2
 CSS

AULA 6 - PARÁGRAFOS - HM1 - IMG

• Conhecer <p> <h1> <img>.

Dando continuidade ao trabalho, vamos estilizar os parágrafos títulos e imagens no CSS.

Cada “div” irá comportar esses elementos.

Alguns elementos foram adicionados como:

Font-size: Define o tamanho da fonte.

Font-face: Define a fonte que será utilizada.

Margin: 10px 20px 30px 10px. Este servirá para as fotos, cada inserção de pixel representa um
lado da imagem, funciona com um relógio.

Margin-Left: Representa quantos pixels queremos afastar da margin esquerda.

Margin-Right:10px: Representa quantos pixels queremos afastar da margin direita.

Abra o arquivo de CSS da aula passada e trabalhe primeiro com a configuração de parágrafo.
Para isso, criaremos mais um div com o elemento “p”. Depois, adicionaremos “img” e “h1”, vejamos
os códigos abaixo.

Vamos ao código quanto aos parágrafos:

#corpo-direito p { #corpo-esquerdo p{ Text-align:justify; text-

align:justify; font-size:14px; font-size:14px;

font-face:”MS Serif”, “New York”, serif; font-face:”MS Serif”, “New York”, serif;

} }

QI Escolas e Faculdades

2
 CSS

Vamos ao código quanto as imagens: }

#corpo-esquerdo img{
#corpo-direito img{ float:left;

margin: 10px 20px 30px 10px; float:left;

border:none; margin: 10px 20px 30px

10px; border:none;
}
}

Vamos ao código quanto aos parágrafos:

#corpo-direito h1{
#corpo-direito h1{
margin-left:10px;
margin-left:10px;
font-size:30px;
font-size:30px;
color:#09F;
color:#09F;

Terá o seguinte resultado.

QI Escolas e Faculdades

2
 CSS

Desenvolva o trabalho abaixo.

QI Escolas e Faculdades

2
 CSS

QI Escolas e Faculdades

2
 CSS

AULA 7 - CLASSE E ID COM CSS

• Conhecer a importância das relações pessoais e profissionais

• Aprender a relacionar-se intrapessoal e interpessoal e ter conduta profissional e pessoal

Além de poder definir estilos para os elementos padrão em HTML, o CSS permite especificar os
próprios seletores. Isso significa que, além de poder aplicar estilos aos elementos comuns, o
desenvolvedor poderá criar formatações especiais. Isso poderá ser realizado através de classes e
ids.

Seletor Class

É possível e, aliás, ser muito utilizada a técnica de aplicar estilos a elementos através de classes
com CSS. Pode-se definir um seletor de classe com qualquer nome, inserindo um ponto (.) antes do
nome do mesmo. Por exemplo, o seguinte código em CSS define uma classe que poderá ser utilizada
em elementos HTML.

.verde_escuro { color: green; font-weight: bold; }

No HTML

<p class=”verde_escuro”>

Este parágrafo recebe um estilo de

cor verde e em negrito por estar

QI Escolas e Faculdades

2
 CSS

definido em uma classe definida com

CSS.

</p>
Utilizando classes para elementos específicos

Outra vantagem da utilização de classes é poder definir estilos para elementos específicos, pois
somente os mesmos serão afetados de acordo com o nome da classe. Por exemplo veja o código
abaixo:

No CSS

p.vermelho { color: red; }

p.verde { color: green; }

p.azul { color: blue; }

No HTML

html>
<head>

<meta http-equiv=”Content-Type” content=”text/xhtml;

charset=UTF-8” />

<title>Classe em elemento específico< /title >

<style type=”text/css”>

p.vermelho {
color: red;

QI Escolas e Faculdades

2
 CSS

p.verde {
color: green;

p.azul {
color: blue;

</style>

</head>

<body>

<h4>Seletor classe em elemento específico com CSS< /h 4>

<p>
Este parágrafo não recebe nenhuma formatação especial.

</p>

<p class=”vermelho”>

Este outro parágrafo recebe estilos definidos na classe

<strong>”vermelho”< /strong >.

</p>

<p class=”verde”>

Este parágrafo recebe formatação especial graças à definição

da classe <strong>”verde”< /strong >.

</p>

<p class=”azul”>

QI Escolas e Faculdades

3
 CSS

Já este parágrafo tem cor azul devido à definição

na classe <strong>”azul”< /strong >.

</p>

<p class=”verde”>

Outro parágrafo verde.

</p>

</body>

< /html >

Seletor id

Através do seletor id é possível definir estilos para um elemento em HTML, mas somente para
um elemento por página. Ou seja, para definir um id em CSS, basta inserir uma cerquilha (#) antes
do nome do seletor, como em:

#especial { color: green; font-weight: bold; }

Esse seletor também poderá ser utilizado por scripts em Java script ou ActionScript, que são
linguagens de programação que se beneficiam do id como um identificador para o elemento.
Por essa razão não se deve atribuir um id para mais de um elemento por página. Em CSS, um id
poderá ser definido com qualquer nome, desde que não comece com um número. Por exemplo, o
código abaixo define um id que será utilizado em um elemento HTML:

<style type=”text/css”>

#especial { color: green; font-weight: bold; }

</style>

</head>

<body>

QI Escolas e Faculdades

3
 CSS

<h4>Seletor id em CSS< /h 4>

<p>

Este parágrafo é comum.

</p>

<p id=”especial”>

Este parágrafo recebe uma formatação

especial por estar definido em um

<strong>id</strong> com CSS.

</p>

<p>

O atributo <strong>id</strong> só deve

ser utilizado uma única vez com o mesmo
nome a cada página HTML. </p>

</body>

< /html >

QI Escolas e Faculdades

3
 CSS

AULA 8 - BORDER RADIUS

• Conhecer o Border Radius.

Bordas com cantos arredondados podem ser definidas com a propriedade border-radius.

border-*-*-radius

As propriedades border-top-left-radius, border-top-right-radius, border-bottom-right-radius e

border-bottom-left-radius são utilizadas para definir o arredondamento das bordas dos cantos

QI Escolas e Faculdades

3
 CSS

superior esquerdo, superior direito, inferior direito e inferior esquerdo respectivamente. Veja alguns
exemplos:

1. Abra o arquivo de CSS e aplique a seguinte formatação Na div logo.

2. Atividade

QI Escolas e Faculdades

3
 CSS

QI Escolas e Faculdades

3
 CSS

AULA 9 - ESTILIZAÇÃO DE FORMULÁRIOS

• Conhecer a estilização de formulários.

Crie o seguinte formulário.

QI Escolas e Faculdades

3
 CSS

O formulário abaixo é um exemplo de como podemos utilizar o CSS para os “forms” em “html”.
Com ajuda do professor, comente o código ou busque na web um “form”. Após o “CSS” pronto não
será necessário digitar todo esse código; apenas comente, fazendo uma junção de tudo que
passamos até o momento.
E vamos ao CSS:

Terá o seguinte resultado.

QI Escolas e Faculdades

3
 CSS

QI Escolas e Faculdades

3
 CSS

AULA 10 - FONTES NO CSS

• Conhecer tipos de fontes incorporadas no CSS.

Poderíamos utilizar o google fontes, mas isso somente será possível em um servidor web, como
estamos trabalhando local, poderemos utilizar outra prática.
Site:
http://www.fontsquirrel.com/
Baixe o kit da fonte “open _sans” através do link.
http://www.fontsquirrel.com/fonts/open-sans
Descompacte a pasta e terás todos os estilos da fonte para cada pasta com seu estilo possui
um arquivo “stylesheet.css”.
Abra o arquivo e copie seu css.

Abra o arquivo de css e de html da página do twitter e vamos referenciar esse css, deixando os
arquivos no mesmo diretório. Faça o link para a pasta web fonte, considere o seguinte diretório.

QI Escolas e Faculdades

3
 CSS

Após abra seu css e link a fonte com indicado abaixo.

Nem todas as fontes poderão ser baixadas como, por exemplo, fontes da Adobe.

QI Escolas e Faculdades

4
 CSS

AULA 11 - AVALIAÇÃO

• Aplicar os conhecimentos adquiridos no decorrer das aulas.

Nesta tarefa estão marcadas as “divs” que deveremos criar com o s respectivos logos. Você
poderá, com a ajuda de seu professor, baixar as imagens, mas não será necessário ser o mesmo
layout, mas com a estrutura desenhada abaixo. No site da FTEC, há um banner rotativo que poderá
ser somente uma imagem, pois aqui não estudamos jquery.

AULA 12 - FILEZILA

QI Escolas e Faculdades

4
 CSS

• Conhecer o filezila.

1) Baixe o filezila através do link abaixo

https://filezilla-project.org/download.php?type=client

2) Ao final da instalação, a interface do FileZilla abrirá automaticamente (caso isso não ocorra,
localize o aplicativo nos arquivos de seu computador e abra-o).

QI Escolas e Faculdades

4
 CSS

3) Com a interface do FileZilla aberta, vá até o topo do aplicativo e preencha os campos Host,
nome de usuário, senha e porta com os dados que você poderá ver também no painel de sua
Hospedagem.

Sendo:
• Host >> Endereço FTP (pode usar qualquer uma das duas opções);
•Nome de usuário >> Usuário FTP/SSH;
• Senha >> Senha que você define pelo painel.

4) Clique em “Conexão rápida” e pronto! Você conseguirá enxergar o FTP da sua Hospedagem
por meio do FileZilla.

QI Escolas e Faculdades

4
 CSS

Esse processo é para fins didáticos, não sendo necessária a compra de um domínio, converse
com seu professor há registros de domínios gratuitos e também hospedagem.

Fonte: http://www.w3schools.com

QI Escolas e Faculdades