O HTML CSS é o principal ferramenta utilizado em conjuntos com as páginas HTML. Através do CSS, podemos estar estilizando todos os nossos elementos HTML, e manipulando o visual da nossa página. Contudo, você sabe o que é e como utilizar?
Neste artigo veremos os seguintes tópicos:
- O que é o HTML CSS
- Como surgiu o HTML CSS
- Como utilizar o HTML CSS
- Como funciona o CSS
- Cores do CSS
- Espaçamentos do CSS
- Propriedades de fontes
- Outras usualidades do CSS
O que é o HTML CSS
O CSS, ou folha de estilo em cascata, nada mais é que uma linguagem que permite estilizar os elementos HTML de nossas páginas. Praticamente todos os elementos visuais da nossa página são editados através do CSS. Com ele podemos manipular, posições, cores, fontes, e muitos outros recursos.
Como surgiu o HTML CSS
O CSS foi desenvolvido pelo W3C (World Wide Web Consortium) em 1996, pois o HTML não foi projetado para ter tags que ajudariam a formatar a página. Você deveria apenas escrever a marcação para o site.
Como os sites tinham diferentes fontes, cores e estilos, era um processo longo, doloroso e caro para reescrever o código. Assim, o CSS foi criado pelo W3C para resolver este problema.
Como utilizar o HTML CSS
O CSS pode ser utilizado de 3 maneiras, inline, externa ou interna.
CSS Interno
Basta declarar a tag <style> no head e assim aplicar todo o estilos desejado, como no exemplo abaixo:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>Esses paragrafo serão estilizados com css</p>
</body>
</html> CSS Externo
Geralmente, a maioria das páginas opta por este estilo de trabalho. Dessa forma, basta criar um arquivos com extensão .css e utilizar o link no head da página:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
</body>
</html> Dessa forma, todo o estilo será escrito no arquivo estilo.css.
CSS Inline
Essa forma é a menos recomendada, mas muitas vezes necessária. Basta utilizar o atributo style no elemento HTML como no exemplo abaixo:
<p style="color: pink">Meu texto rosa</p>
Como funciona o CSS
A folha de cascata em estilo funciona de forma simples, basta declarar o elemento e os estilos do mesmo. Vejamos então o exemplo abaixo:
body{
height: 100%;
width: 100%;
background-color: #CCC;
} Além de declarar pelo elemento, também pode-se utilizar a cascata através de classes, ids, e outros.
Vejamos o exemplo de HTML CSS Abaixo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
background-color: green
}
div.vermelho{
background-color: red
}
</style>
</head>
<body>
<div>
<p>div normal</p>
</div>
<div class="vermelho">
<p>vermelho</p>
</div>
</body>
</html> Veja que, apesar da div receber como cor de fundo verde, o nível de importância do segundo div vermelho é maior, o que fará com que o estilo do mesmo prevaleça a esse exemplo:
Cores do CSS
Para poder modificar cores, existem duas formas: a cor da fonte a cor de fundo.
Para mudar a cor da fonte, basta chamar a propriedade color e sua respectiva cor. Já a cor de fundo é necessário chamar a propriedade background-color, e sua cor. Você pode ver mais sobre cores na tabela de cores HTML.
Vejamos então o exemplo abaixo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
background-color: red;
}
p{
color: white;
}
</style>
</head>
<body>
<div>
<p>Cor branca de fundo vermelho</p>
</div>
</body>
</html> Dessa forma, teremos como resultado o exemplo abaixo:
Espaçamentos do CSS
Vamos dividir aqui, em padding, margin e border. O padding é um espaçamento interno. O Border é uma borda, já o margin, é um espaçamento externo. Vejamos no exemplo abaixo para melhor compreensão:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 300px;
background-color: blue;
padding: 20px;
}
div.espaco{
height: 20px;
width: 200px;
background-color: red;
padding: 20px;
border:1px solid white;
margin: 20px;
}
p{
color: white;
}
</style>
</head>
<body>
<div>
<div class="espaco">
<p>Cor branca</p>
</div>
</div>
</body>
</html> Dessa forma, o resultado será:
Propriedades de fontes
Para nossas fontes, podemos estilizar não só a cor, mas também seu tipo de alinhamento, assim como o tamanho, família de fontes e outros. Vejamos os exemplos abaixo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
text-transform: uppercase;
text-align: center;
width: 300px;
font-size: 22px;
font-family: verdana;
}
</style>
</head>
<body>
<p>Meu texto</p>
</body>
</html> O resultado será conforme o exemplo abaixo:
Outras usualidades do CSS
Apesar de apresentarmos algumas formas de uso do CSS, existem diversas outras formas. É possível utilizar o CSS para fazer a completa edição visual de uma página. Portanto, o CSS é uma ferramenta poderosíssima utilizada em conjunto com o HTML, e muitas vezes junto ao JavaScript.
Você pode estar vendo mais a respeito do CSS no manual do Mozilla ou ainda no tutorial de CSS do w3C Schools.
