CSS
Estilos Inline
<body style="background-color: lightskyblue; font-family: Arial, Helvetica,
sans-serif; font-size: 20px;">
<h1 style="color: mediumblue; background-color: dodgerblue; font-size: 1.5em;">
<h2 style="color: darkred; font-size: 1.2em;">
<p style="text-align: justify;">
Estilos Locais/Internos
<title>Estilos Locais / Internos</title>
<style>
body {
background-color: lightsteelblue;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
h1 {
color: darkblue;
background-color: lightblue;
}
h2 {
color: darkred;
}
p {
text-align: justify;
}
</style>
</head>
<body>
Estilos Externos
<title>Estilos Externos</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
Crie um arquivo com o nome: "style.css"
@charset "UTF-8";
body {
background-color: lightgoldenrodyellow;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
h1 {
color: maroon;
background-color: goldenrod;
}
h2 {
color: darkred;
}
p {
text-align: justify;
}
Cores
<h2 style="background-color: blue; color: white;">
<h2 style="background-color: #0000ff; color: #ffffff;">
<h2 style="background-color: rgb(0,0, 255); color: rgb(255, 255, 255);">
<h2 style="background-color: hsl(240, 100%, 50%); color: hsl(0, 0%, 100%);">
<h2 style="background-color: rgba(27, 78, 33, 0.205); color:#047000;">
Paleta de cores
https://color.adobe.com/create/color-wheel
Gradiente em Css
<title>Gradiente em Css</title>
<style>
* { /* Configurações globais das CSS */
height: 100%;
}
body {
background-image: linear-gradient(to right, #3198E2, #6D59C0, #B93590,
#E33F5F, #FDD579);
background-attachment: fixed;
}
</style>
</head>
<body>
Exemplo de estilo
@charset "UTF-8";
* {
font-family: Arial, Helvetica, sans-serif:
height: 100%;
}
body {
background-image: linear-gradient(to right, #F1D8C9, #F2C3A7);
}
main {
background-color: white;
border-radius: 10px;
box-shadow: 5px 5px 15px rgba(136, 109, 93, 0.616);
width: 600px;
padding: 10px;
margin: auto;
}
h1 {
color: #F39209;
text-align: center;
text-shadow: 1px 1px 2px rgba(129, 77, 5, 0.726);
}
h2 {
color: #125189;
}
p {
text-align: justify;
}
Fontes
https://fonts.google.com/
<title>Fontes com Google Fonts</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display
=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&
display=swap');
@import url('https://fonts.googleapis.com/css2?family=KorksSans:ital, wght@
,100;0,200;0, 300;0,400;0, 500;0,600;0,700;0,800;0,900; 1,100;1,200;1,300;1,400
;1,500;1,600;1,700;1,800; 1,900&display=swap');
body {
font-family: 'Work Sans', Arial, Verdana, sans-serif;
font-size: 16px;
color: black;
}
h1 {
font-family: 'Fredericka the Great', cursive;
font-size: 3em;
font-weight: normal;
}
h2 {
font-family: 'Kaushan Script', serif; font-size: 2em;
}
</style>
Alinhamento
<title>Alinhamentos</title>
<style>
body {
font: normal 16px Arial, Verdana, serif;
text-align: left;
}
h1 {
text-align: center;
}
h2 {
text-align: right;
}
p {
text-align: justify;
text-indent: 30px;
}
</style>
Fontes Externas
<title>Fontes Externas</title>
<style>
@font-face {
font-family: 'Love';
src: url('fonts/love larry.otf') format('opentype'), url('fonts/love
larry ttf.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Lover';
src: url('fonts/Lovebeat.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
h1 {
font-family: 'Love', Times, serif;
font-size: 3em;
font-weight: normal;
}
h2 {
font-family: 'Lover', Times, serif;
font-size: 3em;
font-weight: normal;
}
/* Baixe a fonte e deixe na pasta "fonts".
Tipos de format()
- opentype (otf)
- truetype (ttf)
- embedded-opentype
- truetype-aat (Apple Advanced Typography)
- SVg
*/
</style>
Usando o #id
No HTML "id"
<h1 id="principal">Titulo Principal</h1>
<h1>Titulo 1</h1>
No CSS "#"
/* Pode ser apenas #principal */
h1#principal {
text-align: center;
background-color:rgb(4, 109, 0);
color: white;
}
h1 {
color: rgb(4, 109, 0);
}
