CSS é a linguagem que usamos para descrever a apresentação dos documentos HTML. É com o CSS que podemos controlar todo o layout, cor, fonte e vários outros aspectos visuais de documentos HTML. A aplicação de estilo em diferentes elementos do HTML é realizada a partir de "seletores".
Os seletores é que são responsáveis por apontar para qual elemento dentro do HTML que os estilos serão aplicados. Mas, existem alguns tipos de seletores, então vamos dar uma olhadinha nas possibilidades.
Pode ser escrito em 2 lugares diferentes para que o HTML o leia:
<style> dentro da porção <head>, como realizamos na seção de HTML para exemplificar os atributos comuns.<style>A tag <style> é usada para incluir estilos diretamente dentro do HTML. Este código é lido antes da página carregar, assim os estilos são aplicados antes do conteúdo aparecer na tela.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Exemplo de CSS</title>
<style>
body {
background-color: bisque;
}
</style>
</head>
<body>
<h1>Bem-vindo ao CSS</h1>
</body>
</html>
No exemplo acima, o CSS está alterando a cor de fundo de toda a página para a cor "bisque". Lembrando que é importante colocar a tag <style> dentro da tag <head> do HTML.
Primeiro, crie um arquivo chamado style.css na mesma pasta que o seu arquivo HTML. Dentro desse arquivo, escreva o código CSS que você deseja executar:
/* style.css */
body {
background-color: bisque;
font-family: 'Courier New', Courier, monospace;
}
Então, adicione o seu arquivo CSS no documento HTML, usando a tag <link>, com os atributos rel e href, que indicam respectivamente qual é a relação do arquivo que está sendo linkado ao documento HTML, e qual o caminho do arquivo que você quer que seja lido como o CSS da página.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Exemplo de CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Bem-vindo ao CSS</h1>
</body>
</html>
No exemplo acima, o arquivo style.css vai aplicar as alterações no documento HTML, neste exemplo, vai alterar a cor do fundo da página para "bisque" e alterar também a fonte utilizada em todo o documento.
Bom, agora que você já sabe que pode seguir de duas formas diferentes, vamos entender como você deve escrever o código em CSS para que sua página tenha suas propriedades visuais alteradas do jeito que você quiser.
<p> e pedir para que todos os elementos do tipo parágrafo tenham um estilo específico.Sintaxe é como chamamos a "forma padrão" de escrita para declarar corretamente um elemento em alguma linguagem de programação. No caso do CSS a sintaxe básica sempre vai seguir o esquema abaixo:
seletor {
propriedade: valor;
}
Já conhecemos os seletores, então vamos usar alguns deles de exemplo apenas para fixar esta parte do conhecimento.
p {
propriedade: valor;
}
h2 {
propriedade: valor;
}
body {
propriedade: valor;
}
form {
propriedade: valor;
}
Nos códigos acima selecionamos, respectivamente:
É importante ressaltar que podemos declarar várias propriedades para um mesmo seletor, desde que esteja dentro dos colchetes.
Mas o que vai ser modificado? Qual é a propriedade que vamos mudar e como conseguimos preencher o restante dos campos para ter uma página bonita? É o que vamo estudar na próxima porção.
Nesta porção, vamos ver alguns exemplos que podemos usar para deixar o nosso site mais bonito para você compreender como podemos estruturar o conteúdo de nossa página de estilos.
body {
background-color: bisque;
font-family: 'Courier New', Courier, monospace;
}
h1 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
h2{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
p {
margin-left: 5%;
}
img:hover {
transform: scale(1.02);
}
div.estilo {
background-color: aqua;
}
Nesse exemplo, usamos os seguintes seletores:
<class="estilo"> vão seguir esta porção do código que altera a cor de fundo para "aqua". No CSS quando vamos especificar a classe, colocamos um ponto "." antes do nome desta classe.Como resultado do código acima, conseguimos transformar uma página como esta, em uma página como esta.
Um página mais estilizada, exige mais seletores, ainda mais propriedades e também valores. Por isso é importante treinar bastante essa parte de CSS para deixar a sua criatividade falar por você.
Como exemplo de página, toda construída somente com HTML e CSS, deixo aqui este exemplo e também este exemplo. Ambos os portfolios foram criados usando somente HTML e CSS, sem mais nada além disso. Espero que com estes exemplos você consiga entender o poder de uma estilização bem feita e se desafiar a criar algo semelhante a estas páginas.
Lembrando que aprofundar o seu conhecimento neste tema é de extrema importância, por isso, depois de conhecer estes conceitos fundamentais e conseguir montar o seu primeiro documento HTML estilizado com CSS, dê uma olhadinha no W3Schools, tenho certeza que o céu é o limite pra você!
Finalizou mais uma etapa na sua jornada para se tornar um desenvolvedor! Sua dedicação é admirável.
Por último, mas não menos importante, vamos conhecer o que pode fazer mágica no seu documento HTML.