CSS significa Cascading Style Sheets.
CSS economiza muito trabalho. Ele pode controlar o layout de várias páginas da web de uma só vez.
O que é CSS?
CSS (Cascading Style Sheets) é usado para formatar o layout de uma página da web.
Com CSS, você pode controlar a cor, a fonte, o tamanho do texto, o espaçamento entre os elementos, como os elementos são posicionados e dispostos, quais imagens ou cores de plano de fundo serão usadas, diferentes telas para diferentes dispositivos e tamanhos de tela e muito mais. Mais!
Dica: A palavra em cascata significa que um estilo aplicado a um elemento pai também se aplicará a todos os elementos filhos dentro do pai. Portanto, se você definir a cor do texto do corpo como “azul”, todos os títulos, parágrafos e outros elementos de texto no corpo também terão a mesma cor (a menos que você especifique outra coisa)!
Usando CSS
O CSS pode ser adicionado aos documentos HTML de três maneiras:
Inline – usando o style atributo dentro dos elementos HTML
Interno – usando um <style>elemento na <head>seção
Externo – usando um <link> elemento para vincular a um arquivo CSS externo
A maneira mais comum de adicionar CSS é manter os estilos em arquivos CSS externos.
No entanto, neste tutorial, usaremos estilos interno e interno, porque isso é mais fácil de demonstrar e mais fácil para você experimentar.
CSS embutido
Um CSS embutido é usado para aplicar um estilo exclusivo a um único elemento HTML.
Um CSS embutido usa o styleatributo de um elemento HTML.
O exemplo a seguir define a cor do texto do <h1>elemento como azul e a cor do texto do <p>elemento como vermelho:
<h1 style="color:blue;">Cor azul</h1> <p style="color:red;">cor vermelha.</p>
CSS interno
Um CSS interno é usado para definir um estilo para uma única página HTML.
Um CSS interno é definido na <head>seção de uma página HTML, dentro de um <style>elemento.
O exemplo a seguir define a cor do texto de TODOS os <h1>elementos (nessa página) para azul e a cor do texto de TODOS os <p>elementos para vermelho. Além disso, a página será exibida com uma cor de fundo “pó azul”:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>Título azul</h1>
<p>Parágrafo vermelho</p>
</body>
</html>
CSS externo
Uma folha de estilos externa é usada para definir o estilo para muitas páginas HTML.
Para usar uma folha de estilos externa, adicione um link a ela na <head>seção de cada página HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
Tem que chamar o style no head a página styles.css fica assim
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Cores, fontes e tamanhos CSS
Aqui, demonstraremos algumas propriedades CSS usadas com frequência. Você aprenderá mais sobre eles mais tarde.
A color propriedade CSS define a cor do texto a ser usada.
A font-family propriedade CSS define a fonte a ser usada.
A font-size propriedade CSS define o tamanho do texto a ser usado.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>Título</h1>
<p>Parágrafo</p>
</body>
</html>
Preenchimento CSS
A padding propriedade CSS define um preenchimento (espaço) entre o texto e a borda.
p {
border: 2px solid powderblue;
padding: 30px;
}
Margem CSS
A margin propriedade CSS define uma margem (espaço) fora da borda.
p {
border: 2px solid powderblue;
margin: 50px;
}
Link para CSS externo
As folhas de estilo externas podem ser referenciadas com um URL completo ou com um caminho relativo à página da web atual.
Exemplo
Este exemplo usa um URL completo para vincular a uma folha de estilos:
<link rel="stylesheet" href="https://www.joemaster.com.br/html/styles.css">
Se for na mesma pasta
<link rel="stylesheet" href="styles.css">
Resumo
Use o style atributo HTML para estilizar em linha
Use o <style>elemento HTML para definir CSS interno
Use o <link>elemento HTML para se referir a um arquivo CSS externo
Use o <head>elemento HTML para armazenar os elementos <style> e <link>
Use a color propriedade CSS para cores de texto
Use a font-family propriedade CSS para fontes de texto
Use a font-size propriedade CSS para tamanhos de texto
Use a border propriedade CSS para bordas
Use a padding propriedade CSS para espaço dentro da borda
Use a margin propriedade CSS para espaço fora da borda
<< Anterior Tabela de Cores HTML
Deixe um comentário