CSS - Parte 1 - O que é CSS?
CSS é a abreviatura para Cascading Style Sheets — Folha de Estilos em Cascata CSS é uma linguagem para estilos que define o layout de documentos HTML.
CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos, etc.
Já vimos que HTML pode ser (in)devidamente usado para definir o layout de websites, mas o uso de CSS proporciona mais opções e é mais preciso e sofisticado.
Qual é a diferença entre CSS e HTML?
HTML deve ser usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados.
Inicialmente, a linguagem HTML era usada somente para estruturar textos. Um autor podia marcar seus textos definindo "isto é um cabeçalho" ou "isto é um parágrafo" usando tags HTML como <h1> e
<p>.
Conforme a Web foi se popularizando, os designers começaram a sentir a necessidade de incluir layout nos documentos (sofisticar). Para isso, os fabricantes de navegadores (como a Microsoft) inventaram novas tags HTML, como <font>, <blink>, etc., que se destinam ao layout e não à estrutura.
Houve época em que muitas das novas tags para layout eram suportadas (funcionavam) somente por um determinado tipo de navegador. A frase "Você precisa do navegador X para visualizar esta página" tornou-se comum nos websites.
CSS foi inventada para solucionar esta situação e para separar a formatação dos conteúdos (textos e estrutura) torna a manutenção dos sites bem mais fácil (o controle do layout de vários documentos pode ser feito em um único local chamado folha de estilos). Facilita a padronização das páginas (um conceito importante em design).
Muitas das propriedades usadas em CSS são semelhantes às do HTML.
A sintaxe básica de uma CSS
Exemplo: desejamos a cor de fundo vermelha para uma página web Usando HTML:
<body bgcolor="#FF0000">
Usando CSS o mesmo resultado será obtido com:
body {background-color: #FF0000;}
Note que os códigos HTML e CSS são parecidos.
Sintaxe básica:
Onde colocar o código CSS apresentado acima (recomendação)
Método Externo - Link para uma folha de estilos externa ao arquivo .html (página).
Uma folha de estilos externa é um arquivo de texto com a extensão .css.
Supondo, por exemplo, que a folha de estilos tenha sido nomeada de style.css e está localizada no diretório style.
O link é criado inserindo uma linha de código HTML entre as tags <head> e </head>. Como mostrado a seguir:
<html>
<head>
<title>Meu documento</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
...
Este link informa ao navegador para usar o arquivo CSS na apresentação do layout do documento HTML.
Vários documentos HTML podem usar a mesma folha de estilos, ou seja, um arquivo CSS pode controlar a apresentação de muitos documentos HTML (economizando grande quantidade de trabalho e facilitando a aplicação do mesmo design em várias páginas diferentes do website).
Exercício 1
Abra o Notepad (bloco de notas) e crie dois arquivos (um arquivo HTML e um arquivo CSS) com os seguintes conteúdos (salve-os na mesma pasta para não precisar indicar o local (url) do arquivo css):
1) default.html (pode mudar o nome )
<html>
<head>
<title>Meu documento</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Minha primeira folha de estilos</h1>
</body>
</html>
2) Abra default.html no seu navegador e veja o que acontece.
3)style.css (pode mudar o nome, mas não a extensão .css)
body { background-color: #FF0000; }
4) Abra default.htm no seu navegador e veja o que acontece.
Propriedades CSS para Cores e Fundos
Propriedades:
• color
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background
•••• color - define a cor do primeiro plano de um elemento.
Exemplo: desejamos que todos os cabeçalhos de primeiro nível <h1> de um documento sejam na cor vermelha (o código a seguir define todos os <h1> com a cor vermelha).
h1 { color: #ff0000; }
As cores podem ser definidas pelo seu valor hexadecimal ou com uso do nome da cor ("red").
•••• background-color - define a cor do fundo de um elemento.
Exemplo: aplicar diferentes cores de fundo para os elementos <body> e <h1>.
body { background-color: #FFCC66; }
h1 { color: #990000;
background-color: #FC9804; }
Faça os exercícios e os exemplos
também
Note acima que as duas propriedades ao elemento <h1> estão separadas por um ponto e vírgula.
EXERCÍCO 2
Crie uma página HTML contendo as tags <body>, <h1> (pode ser o arquivo default.html do exercício anterior) e com link para uma folha de estilos contendo as formatações do exemplo acima (mude as cores algumas vezes na folha de estilo e veja o efeito).
•••• background-image - usada para definir uma imagem de fundo.
Faça o download da imagem mostrada abaixo e use-a nos exemplos e exercícios ou use outra imagem ao seu gosto.
Para inserir uma imagem de fundo na página, aplicar a propriedade background-image ao elemento
<body> e especificar o caminho para onde está gravada a imagem. Exemplo:
body {
background-color: #FFCC66;
background-image: url("star.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
•••• background-repeat – no exemplo anterior, a imagem repetiu tanto na vertical como na horizontal cobrindo toda a tela. A propriedade background-repeat controla o comportamento de repetição da imagem de fundo.
A tabela abaixo mostra os quatro diferentes valores para background-repeat:
Valor Descrição
Background-repeat: repeat-x A imagem se repete na horizontal
background-repeat: repeat-y A imagem se repete na vertical
background-repeat: repeat A imagem se repete na tanto na horizontal como na vertical
background-repeat: no-repeat A imagem não se repete
Exemplo: o código mostrado a seguir é para que a imagem não se repita na tela:
body {
background-color: #FFCC66;
background-image: url("star.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
EXERCÍCO 3
Faça testes usando as variações da propriedade background-repeat apresentada na tabela acima (use o mesmo arquivo HTML (default.html) do início da apostila.
Caminho não especificado porque a figura está na mesma pasta da folha de estilos.
Pode ser um local da internet também. Ex.:
(“http://www.xxxx/xxx.gif”)
•••• background-attachment - define se a imagem será fixa ou se irá rolar. Uma imagem de fundo fixa permanece no mesmo lugar e não rola com a tela ao contrário da imagem que não é fixa e rola acompanhando o conteúdo da tela.
Valores para background-attachment:
Value Description
Background-attachment: scroll A imagem rola com a página
Background-attachment: fixed A imagem é fixa Exemplo: o código abaixo fixa a imagem na tela.
body {
background-color: #FFCC66;
background-image: url("star.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Para testar use o arquivo HTML abaixo:
<html>
<head>
<title>Meu documento</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Minha primeira folha de estilos</h1>
<p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd <p>dfsfdffsd </body>
</html>
EXERCÍCO 4
Teste a propriedade Background-attachment: scroll.
•••• background-position - Por padrão uma imagem de fundo é posicionada no canto superior esquerdo da tela. A propriedade background-position permite alterar este posicionamento padrão e colocar a imagem em qualquer lugar na tela.
Existem várias maneiras de definir o posicionamento da imagem na tela, mas todas se utilizam de um sistema de coordenadas.
Por exemplo, os valores '100px 200px' posiciona a imagem a 100px (pixels) do topo e a 200px do lado esquerdo da janela do navegador.
As coordenadas também podem ser expressas em percentagem da largura da janela.
Também pode-se usar as palavras top, bottom, center, left e right.
Será preciso inserir mais texto no arquivo HTML para que a pág.
role. Multiplique as linhas dfsdfs...
A figura a seguir ilustra as possibilidades:
Na tabela a seguir são mostrados alguns exemplos .
Value Description
background-position: 2cm 2cm A imagem é posicionada a 2 cm da esquerda e 2 cm para baixo na página
background-position: 50% 25% A imagem é centrada na horizontal e a um quarto (25%) para baixo na página
background-position: top right A imagem é posicionada no canto superior direito da página Exemplo: a imagem sendo posicionada no canto inferior direito da página:
body {
background-color: #FFCC66;
background-image: url("star.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}
EXERCÍCO 5
Teste os exemplos apresentados na tabela acima.
•••• background -
A propriedade background (sem nenhum complemento) é uma abreviação para todas as propriedades listadas anteriormente.
Exemplo, observe as cinco linhas a seguir:
background-color: #FFCC66;
background-image: url("star.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
Usando background consegue-se o mesmo resultado:
background: #FFCC66 url("star.gif") no-repeat fixed right bottom;
Obs.:
A declaração abreviada deve seguir a seguinte ordem:
[background-color] | [background-image] | [background-repeat] | [background-attachment]
| [background-position]
Se uma das propriedades não for declarada ela assume automaticamente o seu valor default.
EXERCÍCO 6
Altere o arquivo .css para funcionar conforme o exemplo (usando abreviação).
Fontes
Propriedades CSS para fontes:
• font-family
• font-style
• font-variant
• font-weight
• font-size
• font
• Família de fontes [font-family]
A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada na máquina do usuário, deverá ser usada a segunda e assim por diante até ser encontrada uma fonte instalada.
Existem dois tipos de nomes para definir as fontes: nomes para famílias de fontes e nomes para famílias genéricas:
• nome para famílias de fontes:
Exemplos para este tipo (normalmente conhecidas como "font") são "Arial", "Times New Roman" ou "Tahoma".
• nome para famílias genéricas:
Famílias genéricas são fontes que pertencem a um grupo com aparência uniforme. Um exemplo são as fontes sans-serif que englobam a coleção de fontes que "não têm pé".
Exemplos:
Ao listar fontes para seu website, comece com aquela preferida, seguindo-se algumas alternativas para ela. Encerre a listagem das fontes com uma fonte genérica (em último caso a página será renderizada
com uma fonte da mesma família das que foram especificadas quando todas as demais estiverem indisponíveis na máquina do usuário).
Exemplo de listagem de fontes:
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Cabeçalhos <h1> serão renderizados com fonte "Arial". Se o usuário não tiver a font Arial instalada, será usada a fonte "Verdana". Se ambas estiverem indisponíveis na máquina do usuário será usada uma fonte da família sans-serif.
Notar que para especificar a fonte "Times New Roman" foram usadas aspas. Isto é necessário para fontes com nomes compostos e que contenham espaços entre os nomes.
• Estilo da fonte [font-style]
A propriedade font-style define a escolha da fonte em normal, italic ou oblique. No exemplo a seguir todos as cabeçalhos <h2> serão em itálico.
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}
• Fonte variante [font-variant]
A propriedade font-variant é usada para escolher as variantes normal ou small-caps. Uma fonte small-caps é aquela que usa (converte) para letras maiúsculas de tamanhos reduzidos. Entenda observando os exemplos a seguir:
h1 {font-variant: small-caps;} haverá conversão
h2 {font-variant: normal;} não haverá conversão para maiúscula (apresentará conforme o texto M ou m)
Se a propriedade font-variant for definida para small-caps e não estiver disponível na máquina do usuário, será usada fonte em maiúscula comum.
• Peso da fonte [font-weight]
A propriedade font-weight define negrito ou "pesada" deve ser apresentada a fonte. Uma fonte pode ser normal ou bold.
Alguns navegadores suportam números de 100-900 (em intervalos de 100 em 100) para definir o peso da fonte.
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
ou font-weight: 500;
ou font-weight: 700;
etc.
• Tamanho da fonte [font-size]
O tamanho da fonte é definido pela propriedade font-size.
Existem muitas unidades (por exemplo: pixels e percentagem) que podem ser usadas para definir o tamanho da fonte. Ver exemplos a seguir:
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Obs.:
px pixels
pt pontos (1 pt é o mesmo que 1/72 polegadas)
% porcentagem
em 1em é igual ao tamanho da fonte atual (definida pelo navegador). 2em significa 2 vezes maior que o tamanho da fonte atual.
Diferença fundamental entre as quatro unidades do exemplo acima:
As unidades 'px' e 'pt' são absolutas, enquanto '%' e 'em' permitem ao usuário ajustar o tamanho das fontes. Muitos usuários têm restrições, como por exemplo, pessoas idosas, pessoas com visão limitada etc.. Assim, para fazer um site acessível a todos, deve-se usar unidades como '%' ou 'em'.
Obs.: para ajustar o tamanho das fontes no navegador Internet Explorer deve-se clicar no menu Exibir / Tamanho do Texto / escolher uma das opções (muito grande, grande, médio, pequeno, muito pequeno).
• Propriedade Font [font]
Usar font é uma abreviação que permite definir várias propriedades em uma só.
Veja a seguir quatro linhas de código usadas para definir propriedades de fonte para um parágrafo <p>:
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Usar a abreviação simplifica o código como mostrado abaixo:
p {
font: italic bold 30px arial, sans-serif;
}
A ordem dos valores para font é a mostrada a seguir :
font-style | font-variant | font-weight | font-size | font-family
Resumo
A grande vantagem de especificar fontes usando CSS é que será possível alterar em alguns minutos as fontes de um website inteiro. CSS economiza tempo, facilita e organiza o trabalho.
Principais Tags XHTML:
Apenas tags para estruturar os conteúdos da página e não para formatar.
Observe que <font> não faz parte da lista, agora usamos CSS para formatar os conteúdos da página.
Corpo básico: html head title body
Parágrafo: p br h1 h2 h3 h4 h5 h6 hr
Lista: ol ul li
Imagem: img (atributos src e alt)
Link: a (atributos href, target, name, mailto)
Tabela: table caption tr th td
Formulário: form label input select option textarea fieldset legend
Frame: iframe
Textos
Propriedades CSS para adicionar layout aos textos:
• text-indent
• text-align
• text-decoration
• letter-spacing
• text-transform
Indentação de texto [text-indent]
A propriedade text-indent permite aplicar um recuo à primeira linha de um parágrafo. No exemplo abaixo um recuo de 30px é aplicado à todos os textos marcados com <p>:
p {
text-indent: 30px;
}
Alinhamento de texto [text-align]
Textos podem ser alinhados à esquerda (left), à direita (right), centrados (centred) ou justificados (justify) que faz com o texto contido em uma linha se estenda tocando as margens esquerda e direita.
No exemplo a seguir o texto contido na célula de cabeçalho <th> é alinhado à direita e os contidos nas células de dados <td> são centrados. Os textos em parágrafos <p> são alinhados à esquerda:
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: left;
}
Decoração de textos [text-decoration]
A propriedade text-decoration possibilita adicionar "efeitos" em textos. As possibilidades são:
text-decoration: underline; sublinhado text-decoration: overline; linha acima text-decoration: line-through; linha cortando
Obs.: claro que é necessário indicar a tab (p, td; etc.) onde o efeito será aplicado.
Espaço entre letras [letter-spacing]
O espaçamento entre os caracteres de um texto é controlado pela propriedade letter-spacing. O exemplo abaixo configura um espaço de 3px entre as letras do texto de um parágrafo <p> e de 6px entre as letras do texto de um cabeçalho <h1>:
p {
letter-spacing: 3px;
}
h1 {
letter-spacing: 6px;
}
Transformação de textos [text-transform]
Esta propriedade (text-transform)controla a capitalização (tornar maiúscula) do texto. Assim, independentemente de como o texto foi escrito no código HTML, é possível escolher entre capitalize, uppercase ou lowercase:
• capitalize
Capitaliza a primeira letra de cada palavra. Por exemplo: "jose silva" transforma-se para "Jose Silva".
• uppercase
Converte todas as letras para maiúscula. Por exemplo: "jose silva" transforma-se para"JOSE SILVA".
• lowercase
Converte todas as letras para minúscula. Por exemplo: "JOSE SILVA" transforma-se para "jose silva".
• none (default)
Sem transformações - o texto é apresentado como foi escrito no código HTML.
Exemplo: todos os caracteres (texto) em <h3> apresentados em minúsculo, mesmo que no código HTML esteja em maiúsculo (algum caractere ou todos).
h3 {
text-transform: lowercase;
}
Exercícios
Para cada item,
Copie o código apresentado e gere o arquivo .html correspondente.
Abra-o no navegador e veja o efeito.
A seguir, crie o respectivo arquivo .css (conforme o que se pede no enunciado em termos de formatação).
Associe o arquivo .css ao arquivo .html.
Abra novamente no navegador o arquivo .html e veja se a nova formatação (usando css) está correta.
A) Aplicar um efeito de recuo de 40px à primeira linha de cada parágrafo. Aplicar um efeito de espaçamento entre letras de 5px nos parágrafos e 8px no título.
<html>
<head>
<title> Exercício A</title>
</head>
<body>
<h1>Indentação e Espaçamento de textos </h1>
<p>Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo.Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium dictare; sed emendata videri pulchraque et exactis minimum distantia miror. Inter quae verbum emicuit si forte decorum, et si versus paulo concinnior unus et alter, venditque poema.</p>
<p>Indignor quicquam reprehendi, non quia crasse compositum illepedeve putetur, sed quia nuper, nec veniam antiquis, sed honorem et praemia posci. Recte necne crocum floresque perambulet Attae fabula si dubitem, clament periisse pudorem cuncti paene patres, ea cum reprehendere coner, quae gravis Aesopus, quae doctus Roscius egit; vel quia nil rectum, nisi quod placuit sibi, ducunt, vel quia turpe putant parere minoribus, et quae imberbes senes.</p>
</body>
</html>
B) Aplicar no texto contido na célula de cabeçalho da tabela um alinhamento no centro. No texto contido nas células de dados da tabela aplicar efeito de alinhamento à direita.
Os textos em parágrafos comuns devem ficar justificados
<html>
<head>
<title> Exercício B</title>
</head>
<body>
<h1>Alinhamento de textos</h1>
<h2>Texto alinhado em tabelas</h2>
<table border="1" width="100%">
<tr>
<th>Cabeçalho 1</th>
<th>Cabeçalho 2</th>
</tr>
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>
<h2>Texto em parágrafos </h2>
<p>Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo.Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium dictare; sed emendata videri pulchraque et exactis minimum distantia miror. Inter quae verbum emicuit si forte decorum, et si versus paulo concinnior unus et alter, venditque poema.</p>
<p>Indignor quicquam reprehendi, non quia crasse compositum illepedeve putetur, sed quia nuper, nec veniam antiquis, sed honorem et praemia posci. Recte necne crocum floresque perambulet Attae fabula si dubitem, clament periisse pudorem cuncti paene patres, ea cum reprehendere coner, quae gravis Aesopus, quae doctus Roscius egit; vel quia nil rectum, nisi quod placuit sibi, ducunt, vel quia turpe putant parere minoribus, et quae imberbes senes.</p>
</body>
</html>
C) Aplicar o efeito conforme o próprio texto indica no código html abaixo.
<html>
<head>
<title> Exercício C</title>
</head>
<body>
<h1>Este texto é sublinhado </h1>
<h2>Este texto é com linha acima </h2>
<h3>Este texto é cortado por uma linha </h3>
</body>
</html>
D) Usando a lista de nomes abaixo, capitalizar os nomes e por em maiúsculo todo o texto do cabeçalho.
<html>
<head>
<title> Exercício D</title>
</head>
<body>
<h1>este cabeçalho é com letras maiúsculas </h1>
<ul>
<li>jose silva</li>
<li>maria lucia</li>
<li>jorge assis</li>
<li>marta gomes</li>
<li>carlos cesar</li>
</ul>
<p>Notar, que todas as letras iniciais dos nomes foram capitalizadas (tornadas maiúsculas). </p>
</body>
</html>
