Conteúdo
O CSS é uma linguagem de web muito importante para o desenvolvimento de sites e aplicações que utilizam html.
Ele faz parte da tríade da web ao lado do JavaScript e do HTML.
O HTML, por sua vez, também é muito popular na edição e configuração de páginas para internet e construção de site e aplicações web.
Neste artigo vou falar sobre Css para ajudar você a obter um entendimento melhor.
O que é CSS?
O CSS significa Cascading Style Sheets e refere-se a um conjunto de estilos que podem ser inseridos e configurados na edição de uma página de web.
Refere-se a uma linguagem usada para dar estilos reutilizáveis para a apresentação do Html.
Resumindo o Css faz magia e da vida ao o nosso queridinho html.
Quando foi criado?
O conceito dessa linguagem de estilo e configuração de página web foi criado por Håkon Wium Lie em 1994.
A sua abreviação abrange as folhas de estilo em cascata, sendo uma linguagem usada para descrever estilos reutilizáveis para a apresentação de documentos escritos em uma linguagem de marcação.
No ano de 1996, o CSS receberia uma especificação pelo W3C e hoje permite que os desenvolvedores da Web altere o layout e a aparência de suas páginas.
Utilização inicial
Em sua utilização inicial, esse tipo de linguagem de folhas de estilo pode ser aplicado na alteração de fonte utilizada em determinado arquivo HTML.
Possibilita alterar, por exemplo, o tamanho e cor de objetos.
Dessa forma, um determinado arquivo CSS pode ser vinculado a várias páginas, o que permite que um desenvolvedor altere a aparência de todas as páginas ao mesmo tempo no projeto.
O CSS e o HTML
O HTML é utilizada para estruturar o documento ou página que será rodado na web, utiliza descrições em tags e sinais elementares definindo itens como títulos e parágrafos e permitindo incorporar imagens, vídeos e outras mídias.
O CSS é aplicado para melhorar a apresentação da estrutura configurada a partir do HTML, ele é apresentado e especifica o estilo do seu documento, como layouts de página, cores e fontes são todos determinados com CSS.
Dessa forma podemos pensar no HTML como base e o CSS como um conjunto de opções estéticas.
Como ele funciona?
Em uma aplicação, o conjunto de estilos aplicáveis no HTML cria opções interagindo com elementos HTML.
Elementos são os componentes HTML individuais de uma página da web.
Se você codar e optar para que o parágrafo apareça rosa e negrito para as pessoas que visualizam sua página utilizando Css, ele transformará no efeito pretendido.
Na edição, o parágrafo (p) é referido como “seletor”, sendo parte do código CSS que especifica qual elemento HTML e o estilo a ser utilizado.
Sendo assim, os termos “color” e “font-weight” são propriedades, e “pink” e “bold” são valores.
Exemplos
Na aplicação, os princípios básicos podem ser aplicados para alterar tamanhos de fonte, cores de plano de fundo, recuos de margem e muito mais, veja a linha a seguir.
[css]
body {background: blue; }
[/css]Com a linha acima, a página terá um fundo de página azul.
Utilizando a linha:
[css]
body {background: blue; }
p {font-size: 20px; color: red; }
[/css]O documento terá um parágrafo de fonte de 20px com letras vermelhas.
Veja o Curso de Css aqui no Youtube
Externo, interno ou inline?
Alguns Stackers ( Devs ) iniciantes se perguntam como o código CSS é realmente aplicado ao conteúdo HTML.
Assim como o HTML, o CSS é escrito em texto simples e simples por meio de um editor de texto ou processador de texto no seu computador.
Existem três maneiras principais de adicionar esse código CSS às suas páginas HTML. O código CSS (ou folhas de estilo) pode ser externo, interno ou inline.
As folhas de estilo externas são salvas como arquivos “.css” e podem ser usadas para determinar a aparência de um site inteiro por meio de um arquivo , em vez de inserir instâncias individuais de código CSS a cada elemento HTML.
Para utilizar uma folha de estilos externa, os arquivos “.html” necessitam incluir uma seção de cabeçalho que se vincule à folha de estilos externa e tenha a seguinte aparência, conforme o exemplo:
[html]
<head>
<link rel= "stylesheet" tipo="text/css" href="style.css">
</head>
[/html]Dessa forma, o editor consegue vincular o arquivo “.html” na folha de estilo externa, e as demais instruções CSS nesse arquivo serão aplicadas às suas páginas “.html” vinculadas.
As instruções
Ao aplicar as folhas de estilo, no caso das internas elas são instruções gravadas diretamente no cabeçalho de uma página .html específica.
Esse procedimento é útil quando o editor possui uma única página em um site com uma aparência única.
Benefícios
A aplicação das folhas de estilo são fundamentais para aprimorar a aparência e a visibilidade da página de internet. As as folhas de estilo externas são o método mais eficiente para implementar CSS em um site.
Enquanto que a utilização das folhas de estilo internas e o estilo embutido podem ser usados caso a caso, considerando as mudanças individuais no estilo.
Resumindo, você ganhar mais legibilidade e organização em seu código.
A base
Ao considerar o HTML como base do projeto e das páginas, podemos considerar que o CSS da vida ao projeto.
Se a estrutura HTML é a viga e a parede, as folhas de estilos seriam as cores e o acabamento de uma casa.
Outras considerações técnicas
Devemos enfatizar que as folhas de estilos não é uma linguagem de marcação, trata-se de uma linguagem de folha de estilo que fornece alterações na aparência de uma linguagem de marcação.
No projeto, o HTML é utilizado para a criação de layout básico de uma página da web , como este parágrafo de texto que você está lendo neste site. A aplicação das folhas de estilo ajuda a definir a fonte, tamanho da fonte, peso da fonte, sua posição e outras configurações visuais.
Conclusão
Portanto, neste artigo aprofundamos sobre os principais conceitos, aplicações e ferramentas relacionadas às folhas de estilos.
Sim…sim…sim, o Css da vida ao nosso Html!
O melhor jeito de dominar essa linguagem é codando páginas web.
A aplicação dessas folhas de estilo ajuda a reduzir a perda de notoriedade das páginas e aprimora a navegabilidade.
Me diz uma coisa, você quer aprender mais sobre Front end? Baixe nosso Material Gratuito ou aprenda mais sobre html no youtube.
Deixe suas perguntas ai nos comentários que irei responder, e até a próxima forte abraço!
