O que é CSS? Quais suas vantagens? Como funciona? E o que é Estilo Interno, externo e inline? | Dev Lawliet Maverick
Olá novamente, eu sou L.Maverick e é um imenso prazer trazer um novo post no site, hoje iremos falar sobre o CSS, mas caso queria entender o que é HTML clique aqui pois já falamos sobre ele e é de grande importância você entender primeiro o que é HTML para depois entender o CSS, sem mais delongas vamos começar...
Mas Afinal...
O que é CSS?
O CSS e bem simples de se explicar, de uma forma bem simplista podemos dizer que o CSS é o embelezamento de um site, assim como numa casa você pode colocar diversos móveis de diversas cores e tamanhos, e quem decide isso é o CSS. No caso aqui a casa é o HTML, enquanto o HTML decide onde fica o "quarto", a "cozinha" e a "sala de estar", o CSS vem e faz o design, colocando os móveis de um jeito que tudo encaixe perfeitamente e fique bem agradável visualmente.
A comparação é bem boba para você entender o básico, mas na hora de programar não é muito diferente, explicarei em detalhes mais para frente.
Uma coisa importante a mencionar é que a sigla CSS significa Cascading Style Sheet, é comum falar que você está "estilizando" um site ao utilizar essa linguagem. Ele foi desenvolvido pelo W3C (World Wide Web Consortium) em 1996 (o famoso www) para resolver muitos problemas que o HTML causava com suas limitações, demorou um pouco para que isso desse certo tanto que quando ocorreu, algumas atualizações no HTML trouxe o CSS que foi se introduzindo e se aprimorando, melhorando e facilitando a forma de usar. Hoje em dia ambos são peças fundamentais que não pode faltar em seu site, enquanto um cria as paredes e os alicerces de seu site, o outro cuida da cor, organização e embelezamento do seu site.
Vantagens do CSS
Se eu não quiser usar CSS em meu site eu posso?
Na verdade você pode, ele não é obrigatório, mas tenho certeza que dificilmente alguém irá entrar no seu site sem CSS e irá usar, pois sem ele o site fica com um aspecto meio abandonado ou muito simples no sentido de antigo, com fundo branco e texto preto, e olhe lá, coisa que hoje em dia não estamos mais acostumados. Já que mencionei isso, leva a questão, qual a vantagem em usar o CSS?
Tirando o que já mencionei, acima, usar CSS te dá vários benefícios como:
- Pode estilizar diversos arquivos de uma vez só, como configurar todos os parágrafos de um texto sem precisar ir parágrafo por parágrafo configurar;
- Mudar plano de fundo, cor das fontes, fundo de texto e o alinhamento do mesmo;
- Arrumar imagens e vídeos, como arrumar seu tamanho e muito mais;
- Fazer o design que quiser com seu site;
- Usar animações (um nível um pouco mais avançado);
- E o principal, deixar seu site Responsivo.
O que é responsividade?
Não irei me aprofundar em como usá-lo, apenas explicarei o que é, sabe a tela que você está usando para ler esse artigo nesse momento? Seja computador ou seu Smartphone é óbvio que você pode ler onde quiser contanto que ele tenha o navegador, você pode ler em qualquer coisa, é ai que entra a responsividade, suponhamos que você adicione uma imagem com a largura de 2.000px, se você estiver vendo na tela do seu computador, é provável que você possa ver a maior parte senão a imagem inteira certo? Mas e em um celular que consegue ver somente 600px? O que fazemos?
Se você pensou em "diminuímos" a imagem você está certo, em partes, a responsividade faz a imagem de 2.000px caber em uma tela de 1.200px e em uma tela de 600px também, sem perder a qualidade da imagem, isso faz com que multiplataformas acesse seu site sem problemas, e facilita para você também, sem a responsividade você teria que criar um modelo de site para cada tamanho de tela, imagina isso.
 |
| (Exemplo de responsividade) |
Uma forma de entender essa diferença, é você ver esse site no computador ou algo que tenha a tela grande, e logo após no seu smartphone, você logo notará que a direita do site aparecerá algumas barras, e então, testou?
Como o CSS Funciona
Falando principalmente o que é possível fazer com CSS, dá pra usar bastante funcionalidades e desenvolver ótimos sites com design bem bonitos, você consegue criar animações simples e complexas, criar efeitos usando parallax criando profundidade caso use em imagens, jogos também é possíveis, recomendo que pesquise no Youtube "CSS incríveis" para ver com os próprios olhos o que ele pode alcançar.
Okay, vimos o que ele pode alcançar, e como iremos usar isso? Irei explicar o mais simples, o CSS usa sintaxe baseada na língua inglesa, como você deve saber caso tenha lido o artigo anterior, o parágrafo no HTML é a tag <p></p>, e para estilizar esse parágrafo você usa a estrutura de sintaxe que deseja, vamos aos exemplos:
Caso queira deixar o texto do parágrafo com a cor Vermelha, você pode usar o seguinte código "<p style="color: red;" >Texto exemplo</p>", e ele aparecerá assim:
Texto exemplo
E se quiser mudar o fundo você pode usar "<p style="background-color: red;" >Fundo Exemplo</p>"
Fundo Exemplo
Assim por diante...
 |
| (Diferença do HTML e CSS) |
O código acima foi usado com o formato Inline, existe três formas de usar CSS, a forma inline, interna e externa, você pode descobrir se é inline ou não olhando o que coloquei dentro da tag <p>, como você deve ter notado eu coloquei "Style", o style significa estilo, e é uma marcação pra quando o navegador ler seu código ele entender que é uma alteração visual que você está fazendo, o "color" significa que quero alterar a cor do texto, logo escolhi RED que é vermelho, o mesmo serve para "background-color" que também usei a cor RED, mais pra frente eu explico com mais detalhes.
Uma coisa importante no CSS que você não pode esquecer, é que após usar o código que você quer você tem que colocar ";" no final, se você reparar eu coloquei ";" tanto na mudança de cor no texto quanto no fundo, não se esqueça! Cada declaração se separa por ponto e vírgula, por isso é de vital importância colocar ele sempre.
CSS Interno, Externo e Inline
O inline já deve estar bem compreensível, mas ele gera bastante trabalho, inline traduzindo fica "na linha", isso significa que você tem que fazer as alterações que você quer na própria linha, até ai tudo bem certo? O problema não é grande quando se tem menos de 100 linhas de código, agora imagina ter mais que isso, imagina 1.000 linhas e você ter que alterar uma por uma, depois de terminar de alterar e se você quiser mudar a cor de algo de novo, ai teria que mudar de todas as linhas novamente, isso te parece desgastante?
Para resolver esse problema temos o CSS Interno e Externo, ambos funcionam diferente do Inline mas são muito semelhantes, se no inline você vai diretamente onde você quer alterar, no Externo e Interno você altera a tag generalizada diretamente, como assim? Eu explico.
No inline se você tiver 100 parágrafos você teria que ir em todos e escrever "<p style="color: red;" >Texto exemplo</p>", nos outros você usaria o seguinte comando:
p{ color: red; [deixa a cor do texto vermelha]
background-color: white; [deixa o fundo branco]
}
Com esse simples código todos os parágrafos do seu projeto mudariam na hora, mas se você tentar agora no seu HTML esse código não funcionará, sabe o porque?
Bom, por que você acha que existe 3 formas de usar o CSS?
Pra responder essas perguntas começarei com o Interno, para utilizar o CSS interno você precisa colocar a tag "<style></style>" no seu HTML, com abertura e fechamento, e com isso você coloca todos os código CSS dentro do comando como na figura abaixo:
E o CSS Externo? Bom, esse formato do CSS não é dentro do HTML, você criará um arquivo separado próprio para CSS, onde um arquivo tem somente HTML e outro somente CSS, separar os arquivos é bom para quando tem um código imenso e quer evita a poluição visual, e quando for procurar algo do CSS saberá onde é, e quando for HTML saberá onde procurar, facilitando e muito o uso do CSS.
 |
| (Exemplo do uso do CSS Externo) |
Mas no formato Externo o código não se ligará ao HTML por mágica, você precisa de uma tag que chame o CSS e aplique as alterações que você usa pro navegador, e como fazer isso? Usando (<link rel="stylesheet" type="text/css" href="style.css" />), o que você precisa se importar nesse instante é o href, dentro dele você colocará o arquivo que você criou com a extensão .css, no caso do código o nome do arquivo se chama style, mas você pode nomear como quiser, poderia ter esse nome também (<link rel="stylesheet" type="text/css" href="cssIncrivelBemLegalEBacana.css" />), você precisa colocar o arquivo CSS na mesma pasta que seu HTML se encontra, assim seu o HTML achará seu CSS.
Anatomia dos comandos CSS
Pra não te confundir eu coloquei mais um tópico para explicar melhor como usar o CSS, o código de CSS sempre terá esse formato SELETOR {PROPRIEDADE: VALOR;}, usando esse formato de exemplo você consegue identificar o seletor, a propriedade e o valor sozinho?
p{ color: red; [deixa a cor do texto vermelha]
background-color: white; [deixa o fundo branco]
}
Isso mesmo, mas para ter certeza de seu pensamento irei revelar a resposta, o seletor é o "P", pois queremos alterar parágrafos, mas isso também é possível para botões, div, e muito mais, pode colocar qualquer seletor ali que dê para usar CSS. A propriedade tem duas respostas validas, e elas são "Color" e "Background-color", elas são propriedades já que definem o que você quer alterar, no caso é apenas a cor de fundo e cor do texto. E por ultimo o valor é tanto "red" quanto "white", ambas definem com o valor que você quer alterar, poderia colocar qualquer cor ou quase qualquer uma que o comando mudaria a cor para a desejada.
Isso se aplica somente ao modelo Externo e Interno, no Inline você não precisa do Seletor pois usará o comando diretamente nele, por isso você pode tirar o seletor e usar diretamente o style, com a propriedade e o valor.
Existe uma lista de comandos básicos para CSS, que você pode encontrar clicando AQUI (Em breve o post sairá, e quando estiver pronto o link estará disponível).
O que é ID e CLASS?
Algo que não pode faltar, e a utilidade dele é fundamental para seu código, sabe quando citei acima que se tentar mudar o parágrafo e usar o CSS Externo e/ou Interno você poderá alterar todos de uma vez só? E se você quiser que 1 deles tenha uma cor diferente? E se quiser que 10 seja diferente, o que você fará?
Para resolver isso existe o ID e o CLASS, ambos são identificadores que te permite selecionar um ou mais comandos e configurar somente eles, o que não generaliza, no caso se você quiser 5 parágrafos diferentes com o ID e o CLASS isso se torna possível.
O ID é usado quando apenas uma coisa sofrerá alteração, ou coisa muito especifica que acontecerá uma vez, é usado "#" para chamar um ID, assim ele vira um SELETOR como mencionado na estrutura acima.
Já o CLASS pode ser usado para múltiplos itens, e para chamar um Class você usará ".", ele também vira um seletor.
Precisa de duas coisas para usar um Id ou Class, primeiro você precisa selecionar ele no HTML e depois no CSS, para isso você tem que usar assim:
HTML ID
<p id="paragrafo1"> Exemplo de parágrafo </p>
<p id="paragrafo2"> Exemplo de parágrafo </p>
HTML CLASS
<p class="useiOClass"> Exemplo de parágrafo </p>
<p class="useiOClass"> Exemplo de parágrafo </p>
<p class="useiOClass"> Exemplo de parágrafo </p>
Você pode usar o nome que quiser dentro do "" do class e do id, e não é necessário colocar "#" ou ".", ambos são usados no CSS, e para configurar eles no CSS é assim:
CSS ID
#paragrafo1 {
color: red; [deixa a cor do texto vermelha]
background-color: white; [deixa o fundo branco]
}
#paragrafo2 {
color: yellow; [deixa a cor do texto amarela]
background-color: white; [deixa o fundo branco]
}
CSS CLASS
.useiOClass {
color: red; [deixa a cor do texto vermelha]
background-color: black; [deixa o fundo preto]
}
Simples não? Qualquer dúvida comente aqui embaixo e logo a gente te responde, em breve teremos post sobre animações do CSS, não perca!
Conclusão
A essência do CSS foi explicada, vocês viram como é importante saber CSS para fazer o design e ajuste em seu site, a importância da responsividade que ele disponibiliza, a diferença entre CSS Inline, externo e interno, aprendeu sobre Id e Class, a anatomia básica de todo CSS o mais importante, a suas vantagens, se gostou do post compartilha com seus amigos e ajude nosso site que está começando agora, compartilhe o conhecimento para que aprenda junto com amigos e familiares, sem mais delongas, me despeço e agradeço a sua atenção.
Muito obrigado e até a próxima!
Tem interesse em livros? Jogos? Animes ou mangás? Então visite nosso parceiro, a Mistérios Nerd, eles tem diversos assuntos interessantes que são do seu interesse, visite clicando aqui, é de graça!
Postar um comentário
0 Comentários