CSS: introdução


Este é o primeiro post de uma série que tem o objetivo de ajudar no aprendizado de CSS.

CSS significa Cascading Style Sheets, planilha de estilos em cascata. É uma metodologia que define a exibição de elementos HTML dentro de uma página de Internet.

Para aprender CSS é preciso ter conhecimentos básicos de HTML.

No CSS você define qual será a aparência de cada elemento da página. Sempre que o elemento definido aparecer o estilo será aplicado.

Qual é o benefício de se utilizar CSS?

Esta metodologia permite separar o conteúdo da página de seu estilo. Desta forma é possível criar páginas mais organizadas e leves. O desenvolvimento também fica mais rápido, pois é possível definir o estilo de diversas páginas de um site alterando apenas um arquivo.

Mas como isso funciona?

Colocando um link para um arquivo *.css. É possível criar diversos arquivos, separando seu conteúdo de acordo com a necessidade do site.

Como era antes?

Vamos dar uma olhada em como era criar sites em 1900 e antigamente. Crie um arquivo HTML e coloque o seguinte código:

<h1>Título</h1>
<p>Texto de parágrafo</p>

Este tipo de formatação atende as necessidades da web em seu estado primordial, que era servir de plataforma para o compartilhamento de conteúdo acadêmico. Como a web ampliou seu campo de atuação, essa estrutura precisou evoluir.

No HTML tradicional precisamos adicionar o seguinte código para alterar os atributos de estilo:

<h1>
<font color=red>
Teste
</font>
</h1>

<p>
<font color=gray size=4>
paragrafo
</p>

Por muito tempo esta era a forma padrão para se trabalhar a tipografia de um site.

Quando o assunto era montar a estrutura, ficava ainda mais complicado. O desenvolvedor precisava montar uma tabela e encaixar os elementos (menus, cabeçalhos, conteúdo, entre outros) dentro de cada célula. Algumas vezes era necessário criar tabelas dentro de outras tabelas, o que tornava o código-fonte da página muito confuso. Segue um exemplo (preste atenção na bagunça do código).

<table border=”1″ width=200px>
<tr>
<td>Célula 1</td>

<table border=”1″ width=200px>
<tr>
<td>Célula 2</td>
<td>Célula 3</td>
</table>

</tr>
</table>

O resultado era esse:

O detalhe é que o comando <table> foi concebido para organizar tabelas de conteúdo, não aparência.

Qual era a desvantagem de se montar páginas com <table>?

  • Complexidade

Páginas com muito elementos possuíam diversos elementos <table>, o que dificultava a compreensão do código por outro desenvolvedor.

  • Lentidão

Ao colocar o estilo de forma repetida dentro de cada página é gerado tráfego desnecessário: 20 kb extras parecem pouco, porém se transformam em 1mb com cerca de 50 acessos, e em um giga com 50 mil.

Anúncios

Modelo Básico para HTML 5

Aqui está um modelo (template) para se montar uma página básica em HTML5.

Este modelo usa a seguinte estrutura:

  • informação básicas da tag head
  • menu com acessibilidade para celulares
  • tag header – cabeçalho da página
  • tag article – conteúdo
  • tag sidebar – barra lateral
  • tag footer – rodapé

Na maior parte dos projetos este modelo precisará de alterações, pois possuiu uma estrutura genérica.

Novos elementos como header, article, sidebar e footer podem ser utilizados no CSS, da mesma forma que utilizamos as tags p, h1, h2, entre outras.

Dessa forma, é possível criar uma regra do tipo:

header{
	font-color: green;
}

A vantagem deste método é um código mais limpo, sem mares de tags div com classes e ID.


<!DOCTYPE HTML>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Título da página</title>
</head>

<body>

<header>
	<nav>
		<ul>
			<li>Ítem do seu menu de navegação</li>
			<li>Outro item de navegação</li>
		</ul>
	</nav>
</header>

<section>

<article>
<header>
<h2>Título do artigo</h2>
<p>Publicado em <time datetime="2015-09-04T16:31:24+02:00">4 de setembro de 2015</time> por <a href="#">Autor</a> - <a href="#comments">6 comentários</a></p>
</header>
<p>Parágrafo do artigo.</p>
</article>

<article>
<header>
<h2>Título do artigo</h2>
<p>Publicado em <time datetime="2015-09-04T16:31:24+02:00">9 de setembro de 2015</time> by <a href="#">Autor</a> - <a href="#comments">2 comentários</a></p>
</header>
<p>Parágrafo do artigo.</p>
</article>

</section>

<aside>
<h2>Seção Sobre</h2>
<p>Descrição.</p>
</aside>

<footer>
<p>Copyright 20xx Seu nome</p>
</footer>

</body>

</html>