CSS

As tags HTML usadas atualmente para estilização são práticas inadequadas e nunca devem ser usadas, elas são interpretadas apenas como modo de compatibilidade. Logo em seguida, surgiu o CSS (Cascading Style Sheet ou Cascading Style Sheet), que representava outra linguagem diferente do HTML, e seu único propósito era lidar com estilos de página. Como veremos, a vantagem é que o CSS é mais robusto em termos de estilo do que o HTML. Mas na maioria dos casos, é impraticável escrever formatos visuais misturados com conteúdo de texto em HTML. CSS resolve esse problema separando as coisas; regras de estilo não aparecem mais em HTML, apenas em CSS.

A sintaxe do CSS tem estrutura simples: é uma declaração de propriedades e valores separados por um sinal de dois pontos ":", e cada propriedade é separada por um sinal de ponto e vírgula ";" da seguinte maneira: color: blue; background-color: yellow; O elemento que receber essas propriedades será exibido com o texto na cor azul e com o fundo amarelo. Essas propriedades podem ser declaradas de três maneiras diferentes.

1. Atribuito style

A primeira delas é com o atributo style no próprio elemento:

<p style= “color: blue; background-color: yellow;”>

2. A tag style

A outra maneira de se utilizar o CSS é declarando suas propriedades dentro de uma tag <style>

Pelo fato da ocorrência das declarando as propriedades visuais de um elemento em outro lugar do nosso documento, precisamos indicar de alguma maneira a qual elemento nos referimos. Fazemos isso utilizando um seletor CSS.

Assim temos a estrutura de uso do CSS:

seletor {

propriedade: valor;

}

E algumas propriedades contém "subpropriedades" que modificam uma parte específica daquela propriedade que vamos trabalhar, sendo sua sintaxe:

seletor {

propriedade-subpropriedade: valor;

}

No próximo exemplo, em ambos os casos, trabalhamos com a propriedade text, que estiliza a aparência do texto do seletor informado. Podendo especificar quais propriedades específicas do texto será modificada, no caso text-align o alinhamento do texto, e com text-decoration colocamos o efeito de sublinhado.

p {

text-align: center;

text-decoration: underline; }

3. Arquivo Externo

A terceira maneira de declarar estilos para um determinado documento é usar um arquivo externo com uma extensão .css. Para viabilizar a declaração CSS em um arquivo separado, é necessário indicar o vínculo entre ele e a folha de estilo (arquivo com extensão .css) no documento HTML. A folha de estilo externa também tem a melhor função de organização do projeto, mas também tem as vantagens de manter o HTML mais conciso e reutilizar a mesma folha de estilo para vários documentos.

Assim inserido dentro do arquivo estilos.css

exemplo:

p{ color: blue;

background-color: yellow;

}

Alteração é feita nos textos com o uso da propriedade font-family. A qual, pode receber seu valor com ou sem aspas dependendo da sua composição, ou seja, quando uma fonte tem o nome separado por espaço.

Por padrão, os navegadores mais conhecidos exibem texto em um tipo que conhecemos como "serif". As fontes mais conhecidas (e comumente utilizadas como padrão) são "Times" e "Times New Roman", dependendo do sistema operacional. Elas são chamadas de fontes serifadas pelos pequenos ornamentos em suas terminações

Fontes monospace podem ser tanto com serifa ou sem serifa. Por exemplo:

h1{

font-family: serif;

}

h2 {

font-family: sans-serif; }

p{

font-family: monospace; }

Há outras propriedades para o domínio da fonte, como a propriedade font-style que define o estilo da fonte em normal: (normal na vertical), italic (incluindo) e oblique (obliquia).

Pela propriedade background-image permite designar um arquivo de imagem para ser exibido ao fundo do elemento:

h1{

background-image: url (sobre-background.jpg); }

Agora, procedendo para as bordas, as propriedades do CSS dos elementos a serem definidos: cada borda deve conter sua cor, seu estilo de exibição e sua largura. Temos como exemplos:

body {

border-color: red;

border- style: solid;

border-width: 1px;

ou a forma resumida:

body {

border: 1px solid red; }

Propriedades como background-color, color, border-color, entre outras aceitam uma cor como valor. Existem várias maneiras de definir cores quando utilizamos o CSS.

h1{

color: red; }

h2 {

background-color: yellow; }

Sendo estabelecido restrições na variação de cores como:

- A W3C obriga que todos os navegadores tenham pelo menos 140 nomes de cores padronizados;

- O mais comum é definir a cor com base em sua composição RGB, porque ele é o sistema de cor usado nos monitores, já que cada pixel nos monitores possuem 3 leds (um 7.6 CORES NA WEB 7.6 CORES NA WEB 35 vermelho, um verde e um azul) e a combinação dessas 3 cores formam todas as outras 16 milhões de cores que vemos nos monitores. Um amarelo forte, por exemplo, tem 255 de Red, 255 de Green e 0 de Blue (255, 255, 0). Se quiser

um laranja, basta diminuir um pouco o verde (255, 200, 0). E assim por diante.

Passo a passo com código. Exemplo:

#css/sobre.css

+body {

+ font-family: "Helvetica", "Lucida Grande", sans-serif;

+ color: #3D3D3D;

+}

+

+h1 {

+ background-color: #E1EDF2;

+}

+

+h2 {

+ border-bottom: 2px solid black;

+}

+

+figure {

+ text-align: center;

+

+ background-color: whitesmoke;

+ border: 1px solid lightgrey;