ESTILOS HTML5 – CSS
CSS- é usado para formatar dentro html páginas da web.
ATRIBUTO style é usado para colocar estilo em somente um elemento html.
<!DOCTYPE
html>
<html>
<body>
<h1
style="font-size20px;">Tamanho do título 20px</h1>
<p
style="color:blue;">Parágrafo com cor texto azul.</p>
</body>
</html>
ELEMENTO <style>
fica dentro da seção <head>
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: gren;}
h1 {color: red;}
p {font-size:15px;color:red;font-family:arial}
</style>
</head>
<body>
<h1>Título cor vermelho</h1>
<p>fonte é 15px.</p>
</body>
</html>
CSS EXTERNO
Criando folha de estilo link fica dentro <head>
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet" href="estilos.css">
</head>
<body>
<h1>Título cor azul</h1>
<p>Parágrafo vermelho. </p>
</body>
</html>
Folha de estilo tem extensão .css Será salvo assim, estilos.css
body {
background-color:gren;
}
h1 {
color: blue;
font-size:16px;
font-family:verdana;
}
p {
color: red;
font-size:16px;
font-family:verdana;
}
BACKGROND- COLOR – COR DO
FUNDO.
COLOR - COR DO TEXTO.
FONT-FAMILY - FONTE DO TEXTO.
FONT-SIZE – TAMANHO DO TEXTO.
BORDA CSS
border define borda em torno do elemento html.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid
blue;
}
</style>
</head>
<body>
<h1>Título da página</h1>
<p> Borda do parágrafo. </p>
</body>
</html>
PREENCHIMENTO CSS
Padding para preencher espaço
entre o texto e a borda.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid
blue;
padding: 20px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>Preenchimento entre texto e a borda. </p>
</body>
</html>
MARGEM CSS
margin define o espaço fora
da borda.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid
blue;
margin: 50px;
}
</style>
</head>
<body>
<h1>Título da página</h1>
<p> espaço fora
da borda.</p>
</body>
</html>
LINK EXTERNO CSS
Folha de estilo em
outro site.
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://www.site.com.br/pasta/estilo.css">
</head>
<body>
<h1>Título da página</h1>
<p>Parágrafo.</p>
</body>
</html>
Folha de estilos dentro de uma pasta no mesmo site.
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet" href="/pasta/estilos.css">
</head>
<body>
<h1>Título da pa´gina</h1>
<p>parágrafo.</p>
</body>
</html>
Folha de estilo na pasta inicial site.
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet" href="estilos.css">
</head>
<body>
<h1>Título</h1>
<p>Parágrafos.</p>
</body>
</html>