Enfim Neste artigo vou ensinar para você as principais técnicas, para você aprender o CSS3, assim de um forma simples o ensino.
1- O que é CSS3
Então aqui você pode conferir cursos treinamento completo sobre linguagem de programação, enfim Aprendendo a Programar
Portanto CSS permite aplicar estilos a elementos em documentos HTML.
Dessa forma, iremos Instalar o Visual Studio Code, portanto abaixo o link para download
2- Aprendendo CSS
O HTML é usado para adicionar conteúdo da web além disso o CSS sendo uma ferramenta para estilizar.
Enfim vamos começar a trabalhar com o Visual Studio Code.
Então agora vá em meus documentos, e crie uma pasta chamada exercícios, mas o importante que você abra o visual studio iremos deixar no idioma português.
Mas Agora na imagem acima, Clique onde está a seta vermelha, nessa engrenagem.
Mas vamos agora ver na imagem acima clicar onde está direcionada a seta vermelha, em extensões.
3- Visual Studio Code
Enfim na imagem acima, onde a seta vermelha está direcionada, Escreva “Portuguese (Brazil) Language Pack for Visual Studio Code”.
E para finalizar, Iremos agora instalar o idioma português Brasil, enfim basta clicar onde a seta vermelha está direcionada, em instalar.
Vamos agora na imagem acima, abrir o “explorador” clique onde a seta vermelha está apontada, depois clique em “abrir pasta”
Na imagem acima, logo após você ter clicado em explorador em seguida e “abrir pasta”.
Você verá essa imagem, Abra “meus documentos” e escolha a pasta “exercícios”, e de selecionar pasta.
Observação: Dentro da pasta documentos crie uma pasta chamada “exercícios”
Para criar a pasta basta você, clicar com o botão direito do mouse, vá em “novo” em seguida “pasta”.
Enfim agora na imagem acima, irá abrir essa tela, Clique onde a seta vermelha está apontada, em “novo arquivo”, irá abrir logo abaixo uma tela, e você irá escrever “index.html”.
Entretanto você irá criar agora a pasta css, basta você clicar em “nova pasta” , e escreva css, veja na figura acima.
Na imagem acima, com a pasta “css” aberta, você irá clicar onde a seta vermelha está direcionada, em “novo arquivo” e escreva “estilo.css”.
Agora a imagem acima, Abra o seu index.html, e escreva o código da figura acima
<html lang=”pt-br”> significa que o código está no idioma Português Brasil.
<meta charset=”utf-8″>onde ficará as meta tags.
<link rel=”stylesheet” href=”css/estilo.css”> referencia ao estilo.css, irá estilizar o HTML.
Enquanto o na linha de código <p> será estilizada pelo CSS. Na figura abaixo, você irá abrir o estilo.css.
Enfim na imagem acima, abra “estilo.css”, em seguida escreva o código css.
Então veremos, a explicação do código.
*
{
margin:0;
padding:0:
box-sizing:border-box;
}
Veja abaixo as Propriedades do Css
Estamos zerando as margens
Já em box-sizing:border-box; é utilizada para alterar propriedade padrão
Em
htm,body
{
height:100%; estamos deixando a altura em 100%
}
4- Resultado do Projeto(no navegador)
Mas agora na imagem abaixo estamos vendo o resultado do nosso projeto, estilizado com o css.
Enfim para você abrir o projeto no seu navegador,
1- Portanto vá em “meus documentos”.
2- Enfim agora dentro da pasta “exercício” que foi criada, abra ela.
3- Mas agora com o botão direito do mouse, clique em “index.html”.
4- Sobretudo escolha a opção “abrir com”.
5- Por fim escolha o navegador de sua preferência.
6- Abaixo o resultado final.
Enfim, espero que tenham gostado da leitura, muito obrigado, até a próxima .
5- Seja um Programador(a) Completo
🙂