HTML CSS: Como utilizar as folhas de estilo em cascata

O HTML CSS é o principal ferramenta utilizado em conjuntos com as páginas HTML. Através do CSS, podemos estar estilizando todos os nossos elementos HTML, e manipulando o visual da nossa página. Contudo, você sabe o que é e como utilizar?
Neste artigo veremos os seguintes tópicos:

O que é o HTML CSS

O CSS, ou folha de estilo em cascata, nada mais é que uma linguagem que permite estilizar os elementos HTML de nossas páginas. Praticamente todos os elementos visuais da nossa página são editados através do CSS. Com ele podemos manipular, posições, cores, fontes, e muitos outros recursos.

15% OFF

Como surgiu o HTML CSS

O CSS foi desenvolvido pelo W3C (World Wide Web Consortium) em 1996, pois o HTML não foi projetado para ter tags que ajudariam a formatar a página. Você deveria apenas escrever a marcação para o site.

Como os sites tinham diferentes fontes, cores e estilos, era um processo longo, doloroso e caro para reescrever o código. Assim, o CSS foi criado pelo W3C para resolver este problema.

Como utilizar o HTML CSS

O CSS pode ser utilizado de 3 maneiras, inline, externa ou interna.

CSS Interno

Basta declarar a tag <style> no head e assim aplicar todo o estilos desejado, como no exemplo abaixo:

Ainda não tem um www

CSS Externo

Geralmente, a maioria das páginas opta por este estilo de trabalho. Dessa forma, basta criar um arquivos com extensão .css  e utilizar o  link no head da página:

Dessa forma, todo o estilo será escrito no arquivo estilo.css.

CSS Inline

Essa forma é a menos recomendada, mas muitas vezes necessária. Basta utilizar o atributo style no elemento HTML como no exemplo abaixo:

Como funciona o CSS

A folha de cascata em estilo funciona de forma simples, basta declarar o elemento e os estilos do mesmo. Vejamos então o exemplo abaixo:

Além de declarar pelo elemento, também pode-se utilizar a cascata através de classes, ids, e outros.

Vejamos o exemplo de HTML CSS Abaixo:

Veja que, apesar da div receber como cor de fundo verde, o nível de importância do segundo div vermelho é maior, o que fará com que o estilo do mesmo prevaleça a esse exemplo:


Cores do CSS

Para poder modificar cores, existem duas formas: a cor da fonte a cor de fundo.

Para mudar a cor da fonte, basta chamar a propriedade color e sua respectiva cor. Já a cor de fundo é necessário chamar a propriedade background-color, e sua cor. Você pode ver mais sobre cores na tabela de cores HTML.

Vejamos então o exemplo abaixo:

Dessa forma, teremos como resultado o exemplo abaixo:

exemplo de css color

Espaçamentos do CSS

Vamos dividir aqui, em padding, margin e border. O padding é um espaçamento interno. O Border é uma borda, já o margin, é um espaçamento externo. Vejamos no exemplo abaixo para melhor compreensão:

Dessa forma, o resultado será:


Propriedades de fontes

Para nossas fontes, podemos estilizar não só a cor, mas também seu tipo de alinhamento, assim como o tamanho, família de fontes e outros. Vejamos os exemplos abaixo:

O resultado será conforme o exemplo abaixo:


Outras usualidades do CSS

Apesar de apresentarmos algumas formas de uso do CSS, existem diversas outras formas. É possível utilizar o CSS para fazer a completa edição visual de uma página. Portanto, o CSS é uma ferramenta poderosíssima utilizada em conjunto com o HTML, e muitas vezes junto ao JavaScript.

Você pode estar vendo mais a respeito do CSS no manual do Mozilla ou ainda no tutorial de CSS do w3C Schools.

Publicado por

Rafael Marques

Desenvolvedor Web especialista em Front End apaixonado por tecnologia! www.instagram.com/rm.developer/ linkedin.com/in/rafamarquesrmb/

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

hhchat