O que é CSS?

O que é CSS?

É comum ficar curioso para saber de fato o que é CSS quando se está começando a aprender mais sobre a Web. CSS é abreviação para Cascading Style Sheets, o que traduzido fica “folhas de estilo em cascata”. Nas camadas de programação, o CSS sobrepõe a estrutura HTML, a qual funciona como o esqueleto da página demarcando os parágrafos. Fontes, cores, linhas, margens, alturas e muitos outros elementos visuais da página são estilizados via CSS.

A palavra “cascata” na abreviação não aparece por acaso. Diversos arquivos CSS podem integrar um único documento, se complementando ou introduzindo outros recursos visuais. Essa facilidade possibilita a aplicação de estilos de maneira seleta nos elementos dos documentos HTML como uma verdadeira cascata.

O CSS permitiu aos editores de página realizar padrões de estilo próprio para o design de todas as guias de um mesmo projeto, sem a necessidade de repetir a configuração da programação de forma manual. Essa praticidade possibilita a criação de páginas com design cada vez mais atraente e adaptável a qualquer tamanho de tela.

Entendendo melhor o que é CSS

Um conceito necessário para entender o que é CSS, é compreender a estrutura de um documento HTML estilizado em cascatas. O bloco é composto por margem, borda e preenchimento envolvendo o conteúdo, por onde fica viável realizar a edição de tamanhos, cores, imagens e estilos.

Diferente do PHP, o CSS é uma linguagem de frontend, executado no cliente para estilizar uma aplicação. Portanto, é fundamental utilizar o CSS para ter o domínio do layout da página por meio de um arquivo externo. Esta linguagem também possibilita tornar a navegação no projeto mais rápida e eficiente, inclusive adaptada aos dispositivos mobile e quaisquer tamanhos de telas.

Para acumular e aplicar noções de CSS na construção do site é necessário saber o básico do HTML. Saber o que é CSS e dos seus benefícios junto com HTML e JavaScript é essencial para aprender mais sobre a web.

Propriedades do CSS

Assim como qualquer outra linguagem de programação, há padrões a serem seguidos para realizar a “escrita” da página. Estas definições são chamadas de sintaxe, são as regras para a escrita do CSS. Trata-se, basicamente, da estilização que os elementos HTML vão assumir após aplicação do CSS. Para definir o estilo, os elementos chave são: seletor, propriedade e valor.

A declaração do CSS é composta pela propriedade e o valor, sendo que esta declaração é integrada ao HTML (portanto, parte estrutural da página) por meio do seletor. A propriedade é responsável por atribuir uma característica visual para o elemento HTML definido pelo seletor. Veja o exemplo:

P {color : green} = seletor {propriedade : valor}

Partindo deste exemplo, seletor é o elemento HTML colocado para ser estilizado. Aqui no caso, trata-se do parágrafo. A propriedade é alguma característica, como a cor ou o formato do que foi selecionado, sendo aqui o fator cor. E o valor é a característica em si. Neste exemplo, o parágrafo é da cor verde. Por esta regra, todo parágrafo do documento HTML vai receber esta estilizado.

Exatamente por ser sobre estilo de página, a regra pode trazer mais de uma declaração e os parágrafos podem definir estilização de mais de um seletor.

Seletores

Há possibilidade de trabalhar os estilos por meio dos seletores “class” ou “id”. No caso das classes, há mais de um tipo de elemento que pode ser selecionado, estilizando vários itens de uma vez só.

O que é CSS - Seletores

Enquanto isso, as ids permitem apenas a estilização de um item de cada vez. Por esse motivo, o código diz respeito a um elemento específico que receberá atribuições ou alterações em seu estilo.

Entre outros seletores mais complexos, é possível configurar as folhas de estilo em input de tipos específicos, como e-mail e texto. Há, ainda, a possibilidade de selecionar os elementos por meio da extensão do arquivo, pelo target, pelo atributo ou pela negação. Para estilizar a página é possível combinar toda essa variedade de seletores, de acordo com a necessidade do projeto.

Você pode conhecer mais sobre CSS em sites de referência, como Mozilla Developer Network (MDN).

Cascatas

Também conhecidas como “herança” entre os usuários de CSS, esta é uma das principais características da linguagem. Isso significa que muitas das características e propriedades atribuídas a um elemento vão passar para os “herdeiros”, ou seja, elementos derivados daquele. Consulte também o conteúdo de referência da MDN.

Por meio de uma entrada específica, se é definido determinado tamanho de fonte e cor para um elemento chamado “elemento pai”, os seguintes “elementos filhos” recebem as mesmas propriedades. Podem ser parágrafos, linhas ou até o corpo da página. Não é à toa que se trata de um dos principais diferenciais da linguagem CSS o efeito cascata, a fim de possibilitar essa criação de padrões.

Unidades para valores

Apesar das inúmeras definições utilizadas para tamanhos, cores e formatos, há alguns padrões que prevalecem e podem ser úteis para quem está descobrindo o CSS.

O que é CSS - Box Model

Px – para dimensionar blocos e fontes, a medida mais utilizada é em pixels. Exemplo: font-size: 10px; width: 100px.

Em – útil para dimensionar fontes a partir do padrão do dispositivo do usuário. A medida de referência comando para o tamanho da fonte é o próprio computador, celular ou tablet. Se o tamanho padrão for 10px, o a fonte 3em equivale a 30px. Se o tamanho padrão for 16px, a fonte 0.5em equivale a 8px, e assim por diante.

% - A unidade de porcentagens é diretamente relacionada ao bloco que contém o elemento. Se um bloco tem dimensão de 100 pixels estiver atribuído a outro bloco de 50%, vai equivaler a 50 pixels.

O valor em hexadecimal vem depois do símbolo #, e é formado por três pares de caracteres. Da esquerda para a direita, representa o sistema RGB que reproduz cores por meio de mesclas com as cores adicionais vermelho, verde e azul. Este sistema é complexo e requer aprofundamento. Existem outras unidades que se baseiam em dados do seu navegador/computador, veja aqui.

Para inserir o CSS

Quem procura saber o que é CSS também quer saber como inserir os códigos CSS num site. Existem três maneiras de configurar a página com linguagem CSS, vamos conhcer um pouco sobre cada uma agora.

O que é CSS - Externo, interno, inline

A primeira delas é com ligação externa, já que um arquivo externo CSS pode ter relação com uma quantidade infinita de páginas. Esta é a opção mais versátil e interessante, já que por controlar o visual de todo o projeto do site com apenas uma página CSS, mantê-lo em dia fica mais fácil.

Além de saber o que é CSS, é importante saber como ele pode ser inserido em seu site. Você já sabe que há um estilo pai que precede os elementos herdeiros, correto? Esta página de ligação externa normalmente é criada a partir de outras, herdando as características anteriores. Portanto, cuidado para não fazer alterações que possam mexer de maneira negativa com a identidade visual do projeto devido a algum possível conflito de informações.

A segunda maneira de colocar as regras de CSS é por meio da tag style. Dentro de alguma tag da estrutura HTML como head, por exemplo, é colocada alguma característica que vai passar para todos os parágrafos daquele documento. Pode ser um estilo de fonte, cor ou tamanho. Por esse motivo, esta configuração é precedente para outras páginas herdeiras que também vão contar com essas definições.

O atributo style é o terceiro método de inserir o CSS, e também o menos utilizado, por aplicar características apenas a elementos específicos. Também é chamado de “estilos em linha” ou "inline CSS" por estar no mesmo local que os códigos HTML.

Conclusão

Agora você sabe o que é CSS e como esta tecnologia contribui para o desenvolvimento de sites. Em um primeiro momento, tantos códigos de programação podem parecer complicados. Mas, com o tempo e a prática, são cada vez mais familiares e podem facilitar muito o cotidiano de quem necessita realizar melhorias em seu projeto.

O CSS também é essencial em sites estáticos, sendo um dos principais componentes para tornar a página mais agradavel.

Se você quiser se aprofundar no CSS, invista tempo em tutoriais para saber ainda mais sobre as regras de cascata, precedência, tipos de seletores, classes e ids. Assim, é possível tornar seu site cada vez mais leve, funcional e atrativo para quem o visita.

Melhor Hospedagem de Sites é um projeto com o objetivo de ajudar as pessoas na busca pelo lugar ideal para hospedar seus sites, trazendo informação e conhecimento sobre o universo de hospedagem de sites.
Receba os artigos do blog por e-mail: