Código CSS: entendendo a folha de estilos

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (2)  (0)

Veja neste artigo como declarar seu código css de diferentes formas e também como trabalhar com id e class. Confira!

Olá pessoal, neste artigo vamos falar um pouco sobre o código CSS (Cascating Style Sheet). Iremos ver como podemos aplicar esses códigos em seus sites.

Existem diversas maneiras de se incluir códigos CSS em seu site, são elas:

  • Inline
  • Declarando na mesma página
  • Utilizando um arquivo externo
botao Saiba mais sobre o CSS

Agora vamos ver como utilizar cada um deles. Vamos começar criando um documento HTML que será o nosso documento padrão para o tutorial, nele conterá apenas uma tag h1 e parágrafos.

<html>
<head>
	<title>Código CSS - Entendendo a folha de estilos</title>
</head>
<body>
<h1>Sou a tag h1</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>

</body>
</html>
Listagem 1. Documento html padrão

Bom, agora que criamos um html padrão, vamos começar a aplicar o CSS nele mostrando as diferentes formas de se fazer isso, vamos começar com o css inline.

Código CSS Inline

O css inline é pouco utilizado em websites por deixar o código "poluído" com muita informação, mas é muito utilizado na criação de mailings e e-mail marketing.

Sua utilização é bem simples, para usá-lo, basta inserir o style dentro da própria tag html que ele receberá o efeito.

Como ele é aplicado diretamente naquela tag específica, é impossível reutilizar ele em outra tag, tendo que sempre copiar e colar ou criar um novo para cada tag que você queira estilizar.

<html>
<head>
	<title>Código CSS - Entendendo a folha de estilos</title>
</head>
<body>
<h1 style="font-style: italic;">Sou a tag h1</h1>

<p style="color:red;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>

<p style="color:red;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>

</body>
</html>
Listagem 2. Aplicando css inline

Como podemos ver no código acima, para cada tag que estilizamos tivemos que criar um novo efeito. No caso da tag p nós utilizamos o mesmo estilo, mas tivemos que re-escrever ele para que se aplicasse em todas as tag's.

CSS Inline exemplo
Figura 1. CSS Inline exemplo

botao Saiba mais sobre estilos CSS

Código CSS na mesma página

Esse tipo de declaração é um pouco diferente da declaração inline, ela é aplicada na mesma página onde estão as tag's a serem estilizadas, mas são declaradas de forma global, evitando assim que precisemos inserir o estilo em cada tag específica.

<html>
<head>
	<title>Código CSS - Entendendo a folha de estilos</title>
<style type="text/css">
h1{
	font-style: italic;
}
p{
	color: red;
}
</style>
</head>
<body>
<h1>Sou a tag h1</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>

</body>
</html>
Listagem 3. Exemplo de declaração na mesma página

Se repararmos, o efeito obtido será o mesmo, mas viram que a declaração está diferente? Nesse exemplo nós declaramos de forma global, ou seja:

  • Toda tag h1 terá o efeito declarado
  • Toda tag p terá o efeito declarado

Mas e se nós quisermos aplicar diferentes efeitos para cada tag p, por exemplo, como faríamos?

É aí que começa a entrar os atributos de id e class, dessa forma podemos colocar efeitos apenas nos elementos em que possuem aquele id ou aquela class.

Obs.: Eu costumo dizer que o id é único para cada elemento e a class pode ser usada em outros elementos. Essa é uma opinião pessoal minha e é a forma que eu trabalho com elas.

Vamos criar um exemplo agora onde iremos ver na prática isso que eu acabei de dizer acima.

<html>
<head>
	<title>Código CSS - Entendendo a folha de estilos</title>
<style type="text/css">
h1{
	font-style: italic;
}
#fundo{
	background-color: #a3a9fa;
}
.paragrafo{
	color: red;
}
.paragrafo2{
	color: #0018ff;
}
</style>
</head>
<body>
<div id="fundo">
	<h1>Sou a tag h1</h1>

	<p class="paragrafo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>

	<p class="paragrafo2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
</div>

</body>
</html>
Listagem 4. Utilizando id e class

Como podemos ver acima, o id é representado pela "#" e a class pelo ".", o resultado do código acima pode ser visto na Figura 2.

Utilizando id e class
Figura 2. Utilizando id e class

Código CSS externo

Agora veremos a declaração de CSS mais utilizada, a externa. Basicamente ela se consiste em você colocar todo o código CSS em um arquivo externo .css e no html você apenas linkar/chamar esse arquivo para que o código seja estilizado. Ou seja, você vai chamar o CSS no HTML.

Para fazer esse link temos que usar o código abaixo:

<link rel="stylesheet" type="text/css" href="aqui entra o link do seu arquivo externo">
Listagem 5. Linkando css externo

Crie um documento novo e o salve com o nome de estilo.css, coloque o código abaixo:

h1{
	font-style: italic;
}
#fundo{
	background-color: #a3a9fa;
}
.paragrafo{
	color: red;
}
.paragrafo2{
	color: #0018ff;
}
Listagem 6. estilo.css

No código html coloque o código de linkagem, ficará assim:

<html>
<head>
	<title>Código CSS - Entendendo a folha de estilos</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div id="fundo">
	<h1>Sou a tag h1</h1>

	<p class="paragrafo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>

	<p class="paragrafo2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
</div>

</body>
</html>
Listagem 7. Código HTML

Esses são as três maneiras de se declarar um código css, caso alguém tenha alguma dúvida, fique a vontade em postar nos comentários que terei um prazer em responder e ajudar. Não respondo dúvidas por e-mail, por favor usem os comentários específicos de cada artigo.

Espero que tenham gostado, até o próximo.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Ficou com alguma dúvida?