O que é CSS e como ele funciona

O que é CSS e como ele funciona

Escrito por

terça-feira, 12 de janeiro de 2010 | Comentários

Atualizado em 12/04/2016 – Por: HostGator Brasil

CSS (Cascading Style Sheets) são folhas de estilo em cascata. O CSS é uma linguagem que complementa e formata o HTML (HyperText Markup Language, a Linguagem de Marcação de Hipertexto) organizando melhor as linhas e adicionando novas possibilidades ao código. Com ele, você pode modificar praticamente tudo dentro do seu layout (como as cores, background, características de fontes, margens, preenchimentos, posição, até a própria estrutura do site com a propriedade float).

O CSS ajuda a manter as informações de um documento separadas dos detalhes de como exibi-la. Esses detalhes de como exibir o documento são conhecidos como estilo. Você mantém o estilo separado do conteúdo e assim, pode evitar duplicação, tornar a manutenção mais fácil e utilizar o conteúdo com diferentes estilos para diferentes propósitos.

Como o CSS funciona?

Seu site pode ter várias páginas similares e utilizando CSS, você armazena as informações em arquivos comuns que todas as páginas compartilham. Quando um usuário acessa uma página, o navegador carrega as informações de estilo junto com o conteúdo da página. Uma linguagem de marcação, como o HTML, também fornece alguns modos de especificar o estilo. Por exemplo, em HTML, você pode usar uma tag <strong> para tornar o texto negrito, e você pode especificar a cor do segundo plano de uma página na tag <body>, como por exemplo:

<body style=”background-color:#FFFFFF;”>

Ao utilizar CSS, você normalmente evita utilizar esses recursos da linguagem de marcação para que todas as informações de estilo de seu documento estejam em um só lugar.

Para que o arquivo HTML “leia” o arquivo CSS é necessário que se coloque entre as tags <head></head> esta linha <link href=” seu_css.css” rel=”stylesheet” /> Desta forma as tags do seu HTML obedecerão aos estilos do seu arquivo css, que é um arquivo de texto com a extensão .css.

Como criar uma folha de estilo?

Dentro do seu arquivo CSS (que é capaz de ler algumas cores diretamente pelo nome, em inglês), você pode copiar e colar a seguinte linha, salvando o arquivo em seguida:

CSS - HostGator Brasil

Para relacionar seu documento com sua folha de estilo, edite seu arquivo HTML e adicione a linha mostrada em negrito:

HTML - HostGator Brasil

Salve o arquivo e atualize a tela do seu navegador. A folha de estilo transforma o texto, dessa maneira:

este-e-meu-primeiro

Em elementos que se manterão nas suas páginas, como por exemplo o background, não é necessário identificá-los com ids ou classes. Mas, esses recursos podem ajudar bastante na hora de organizar sua página, se nela existem muitos elementos (como parágrafos, listas, links) com propriedades diferentes. A principal diferença entre id e class é que o id só poderá ser usado em um elemento, já a class é usada quando há necessidade de que vários elementos tenham os mesmos parâmetros.

Essa maneira de construir um código de um site é chamada “tableless”, ou seja, com menos tabelas. Os web standards (padrões usados por desenvolvedores, como o W3CWorld Wide Web Consortium -, que apresenta um conjunto de diretrizes, bem como publicações técnicas, para otimização de websites) não recomendam o uso de tabelas para definir o layout de uma página. As tabelas devem ser preferencialmente usadas para o que foram projetadas: exibir dados tabulares. Sendo assim, devemos optar por elementos que agrupam e estruturam um documento, os famosos divs e spans.

Novas possibilidades com o CSS

Com as atualizações do CSS3, iniciou-se uma era onde o CSS é o maior aliado dos Web Designers, pois além dos pontos básicos, é possível controlar diversos outros aspectos no layout. Hoje, é possível customizar muito além do básico, conseguimos selecionar elementos específicos de um determinado grupo de elementos; estruturar os elementos independentemente da posição no código HTML; manipular a opacidade; colocar gradiente em textos e formas; pôr sombras em textos e outros componentes; inserir bordas estilizadas; controlar a rotação e perspectiva; inserir animações.

Além disso, novas propriedades são inseridas diariamente e sempre há como se atualizar e ir usando novidades nas formatações do CSS em um layout. Para se aprofundar, recomendamos a leitura deste curso de CSS3.

Tags:, , ,
Comentários
Pressione Enter para pesquisar ou ESC para fechar