Vamos agora conhecer algumas das mais utilizadas propriedades CSS e como usá-las. Os nomes das propriedades do CSS são bem descritivos quanto às suas funções.
Neste Post há vários exemplos de código. Reproduza-os em seu vscode para melhor compreensão! Não fique apenas copiando e colando sem entender o que está acontecendo!
CSS Colors
Background Color
Define cor de fundo
<h1 style="background-color:#211644; color:white">Ninja</h1>
<p style="background-color:#da1d63; color:white">Dev Space</p>Text Color
Define cor de texto
<h1 style="color:blueviolet;">Ninja</h1>
<p style="color:#da1d63;">Dev Space</p>Border Color
Define cor da borda
<h1 style="border:2px solid #211644;">Ninja</h1>
<p style="border: 5px solid #da1d63;">Dev Space</p>Color Values
Valores que permitem definir uma cor. Pode ser usado RGB, Heximadecimal, HSL
<h1 style="color:rgb(255, 99, 71)">Ninja</h1>
<p style="color:#ff6347">Dev Space</p>
<p style="color:hsl(9, 100%, 64%)">O espaço do dev ninja</p>Repare que as cores são as mesmas! A única coisa diferente é a forma como estas foram declaradas no CSS. RGB, Heximadecimal, HSL respectivamente
Você não precisar saber nada disso de cabeça. Sempre que quiser uma cor específica acesse este site
CSS Fonts
Font Family
Define a família da fonte utilizada
<!DOCTYPE html>
<html>
<style>
.serif {
font-family: "Times New Roman", Times, serif;
}
.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
.monospace {
font-family: "Lucida Console", Courier, monospace;
}
</style>
<body>
<p class="serif">Ninja Dev Space, Times New Roman font.</p>
<p class="sansserif">Ninja Dev Space, Arial font.</p>
<p class="monospace">Ninja Dev Space, Lucida Console font.</p>
</body>
</html>Font Style
Usada na maior parte para deixar um texto em itálico
<p style="font-style:italic">Ninja Dev Space</p>Font Size
Define o tamanho do texto. O tamanho pode ser definido em px(pixels), em e vm(viewport width)
1em equivale a 16px
Viewport é o tamanho da janela do navegador. 1vw = 1% da largura da janela de visualização. Se a janela de visualização tiver 50 cm de largura, 1vw será de 0,5 cm.
<!DOCTYPE html>
<html>
<style>
.pixel {
font-size: 16px;
}
.em {
font-size: 1em;
}
.viewWidth {
font-size: 10vw
}
</style>
<body>
<p class="pixel">Ninja Dev Space</p>
<p class="em">Ninja Dev Space</p>
<p class="viewWidth">Ninja Dev Space</p>
</body>
</html>Font Google
O Google fornece um monte de estilos de fonte super fáceis de usar através do Google Fonts API. Basta adicionar um link indicando o font family desejado. Neste link você encontra diversos exemplos de Google Fonts
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia";
font-size: 22px;
}
</style>
</head>
<body>
<h1>Sofia Font</h1>
<p>Ninja Dev Space o espaço do dev ninja.</p>
</body>
</html>Margin
Controla as margens de um elementos. Se forem indicados quatro valores, eles dizem respeito, respectivamente, às margens superior, direita, inferior e esquerda. Se for fornecido apenas um valor, ele é aplicado às quatro margens.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px 50px 75px 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Forma abreviada - 4 valores</h2>
<div>
Esta div tem margem superior de 25px, margem direita de 50px, margem inferior de 75px, e margem esquerda de 100px.
</div>
<hr>
</body>
</html>CSS Padding
É usado para gerar espaço em torno do conteúdo de um elemento, dentro de qualquer borda definida. Funciona de forma semelhante ao margin.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px 50px 75px 100px;
background-color: lightblue;
padding: 30px;
}
</style>
</head>
<body>
<h2>Usando Padding</h2>
<div>
Esta div tem margem superior de 25px, margem direita de 50px,
margem inferior de 75px, e margem esquerda de 100px. O padding é 30px para todos os 4 cantos: superior, direito,
inferior e esquerdo
</div>
<hr>
</body>
</html>CSS Height and Width
Propriedades utilizada para definis altura (height) e largura (width). Estas propriedades podem ser expressas em pixels (px) e porcentagem (%)
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
</head>
<body>
<p>Esta div tem 200px de altura e 50% de largura:</p>
<div></div>
</body>
</html>CSS Box Model
Todos os elementos HTML podem ser considerados como caixas. No CSS, o termo "box model" é usado quando se fala em design e layout.
O box model do CSS é essencialmente uma caixa que envolve todos os elementos HTML. Consiste em: margins, borders, padding e conteúdo. A imagem abaixo ilustra o box model
CSS Layout - Alinhamento horizontal e alinhamento vertical
Centralizar elementos
Para alinhar horizontalmente blocos de elementos, uma <div> por exemplo, basta usar
margin: auto
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: auto;
border: 2px solid #da1d63;
width: 200px;
font-weight: bold;
padding: 10px;
}
</style>
</head>
<body>
<div>
Div centralizada
</div>
</body>
</html>Centralizar texto
Para centralizar um texto basta usar text-align: center
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: auto;
border: 2px solid #da1d63;
width: 200px;
font-weight: bold;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div>
Div com texto centralizado
</div>
</body>
</html>Centralizar imagem
Para centralizar uma imagem basta definir as margens esquerda e direita como auto e usar display: block
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<img src="https://picsum.photos/200" />
</body>
</html>Centralização - Usando padding
Defina o padding da direita e esquerda como 0 (zero), isto irá centralizar seu texto verticalmente e para centralizar horizontalmente use o text-align: center
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid #da1d63;
padding: 50px 0;
text-align: center;
}
</style>
</head>
<body>
<div>
Texto centralizado usando padding
</div>
</body>
</html>Alinhamento à esquerda e direita - Usando float
Para alinhar à esquerda use float: left e para alinha à direita use float:right
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid #da1d63;
padding: 50px 0;
text-align: center;
width: 50%;
float: right;
}
span {
font-style: italic;
font-weight: bold;
}
</style>
</head>
<body>
<div>
Div alinhada à direita usando <span>float: right</span>
</div>
</body>
</html>CSS Lists
Para remover as marcações de lista padrão do HTML use o seguinte comando CSS
list-style-type: none
<!DOCTYPE html>
<html>
<head>
<style>
ul.demo {
list-style-type: none;
}
</style>
</head>
<body>
<p>Lista padrão:</p>
<ul>
<li>Café</li>
<li>Chá</li>
<li>Coca Cola</li>
</ul>
<p>Lista sem marcação:</p>
<ul class="demo">
<li>Café</li>
<li>Chá</li>
<li>Coca Cola</li>
</ul>
</body>
</html>Exercício
Baseado em tudo que foi ensinado sobre HTML e CSS até o momento construa uma página igual ao exemplo abaixo:
Considerações
Não importa como você irá escrever seu código HTML e CSS, contato que o resultado seja semelhante ao exemplo acima.
Utilize Google Fonts, de sua preferência, para estilizar o cabeçalho e o texto. No exemplo acima eu usei as fontes Architects Daughter para o cabeçalho e Anaheim para o resto.
Utilize as cores de sua preferência. Este site tem um colors picker que pode ser útil
Utilize apenas Internal CSS (Foi explicado no post passado)
muito bom cara, bem explicado.
Obrigado Gabriel. Fique ligado que amanhã sairá mais um post o assunto será Bootstrap. Foque bastante nos exercícios eles são super importantes para consolidar o que você aprendeu
Melhor aula