CSS no Lanche

Você sabia que um documento HTML não precisa necessariamente ter uma única folha de estilos? Você pode proporcionar ao usuário várias outras folhas de estilo em um único documento HTML para que o mesmo possa escolher a que melhor se adequa a seu gosto, ou partindo para o lado da acessibilidade, criar folhas de estilo de alto contraste que facilite a leitura de usuários com baixa visão.

Criar folhas de estilo alternativas não exige muito esforço e não tem segredo algum, você só vai encontrar dificuldade devido a alguns browsers que não suportam essa opção, mas, por exemplo, no firefox você pode ir até Exibir > Estilos da página e trocar as folhas de estilo dentre as disponíveis, se é que o site disponibiliza essa opção.

Para incluir folhas de estilos extras em seu site, basta utilizar da tag HTML <link>, com o atributo REL que deve conter o valor alternate e o atributo title:

<link rel="stylesheet" type="text/css" href="default.css" title="Default CSS" />
<link rel="alternate stylesheet" type="text/css" href="simple.css" title="Simple CSS" />
<link rel="alternate stylesheet" type="text/css" href="dark.css" title="Dark CSS" />

A primeira folha de estilos foi a que eu defini como padrão, as outras duas a seguir são as folhas de estilo alternativas, pois como podem observar, elas possuem o atributo re=”alternate stylesheet” e só serão carregadas se o usuário alterá-las no browser. Para que vocês entendam como isso funciona, dêem uma olhada no exemplo que criei para esse tutorial.

Nas especificações da CSS existem 2 propriedades que proporcionam aos desenvolvedores adicionar espaço em torno de elementos HTML. Essas propriedades são chamadas de “margin” e “padding”. Margin e Padding são responsávei por adicionar espaços em branco entre os elementos de uma página HTML, pois sem a utilização dos mesmos, todo o conteúdo ficaria “grudado”.

A primeira impressão você deve estar se perguntando o por que de existir 2 propriedades para adicionar espaço entre os elementos HTML, mas embora suas funções sejam semelhantes, cada uma possui sua particularidade.

Padding é responsável por definir o espaço entre o conteúdo do elemento HTML e sua borda, já Margin é responsável por definir o espaço entre os elementos HTML. Para que fique claro as diferenças, dê uma olhada na imagem abaixo, ela representa o Box Model:

Continuar lendo »