Programao Web: Introduo a Folhas de Estilo - CSS

Desde o incio do seu desenvolvimento que o HTML, foi pensado como nada mais do que uma forma simples de formatao de documentos cientficos, onde a estrutura e hierarquia prevalecem sobre a composio e o aspecto da apresentao. Com o desenvolvimento da Web, os designers clamaram por uma forma de composio mais livre que a rigidez imposta pelas tabelas e, ao mesmo tempo, que o texto pudesse ser tratado com mais controlo e liberdade que a singular formatao de tipo de letras, cor e nfase. Deste clamor editou o consrcio W3C 1 a especificao das folhas de estilo em cascata ou CSS (Cascading Style Sheets). A designao de cascata refere-se ao modo como as definies so feitas sobre os vrios elementos de formatao e composio das pginas, que adoptam uma estrutura em vrios nveis de profundidade, numa nica lista.

Funcionamento
As folhas de estilo permitem controlar precisamente o tamanho, espaamento e posio numa pgina web de qualquer elemento de composio, seja uma imagem, um texto ou um ficheiro multimdia. O conceito inerente s folhas de estilo algo a que os designers j estavam habituados, pois era um conceito herdado das aplicaes de DTP 2, utilizadas ubiquamente para a composio de edies impressas, como jornais, livros ou revistas. Para alm do controlo preciso sobre os elementos de formatao de uma pgina, as folhas de estilo permitem ainda a definio num s ficheiro da formatao a aplicar a esses elementos, o que pressupe no s a imposio de uma linha grfica comum a toda pgina web, como a sua rpida modificao atravs da imposio de estilos grficos.

Quando um designer elabora o layout de uma revista, trata da mesma forma todos os cabealhos, marcaes de pgina e blocos de texto. De modo a facilitar a formatao destes elementos, da mesma forma e vezes sem conta, so tambm

1 2

World Wide Web Consortium Consrcio responsvel pela padronizao do HTML. DeskTop Publishing (Edio electrnica).

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

aqui empregues folhas de estilo, tornando o conceito de certa forma universal para quem tem esta actividade como profisso.

Tipos de folhas de estilo CSS Tendo em considerao a utilizao que dada s folhas de estilo, estas podem surgir de trs formas distintas, desde a mais abragente at a mais especfica, sendo externas, internas (incorporada) e de incluso pontual (Inline), respectivamente. Externa significa que o designer coloca as regras de CSS em um documento separado, e ento a pgina web pode fazer um link para esse documento. Esta abordagem permite definir regras em um ou mais documentos que podem ser aplicadas em alguma homepage da pgina web. Vide figura 1. Para definir um conjunto de regras de estilo que o designer pode facilmente aplicar em alguma pgina web, preciso colocar as regras em um documento de texto, atribuindo um nome ao mesmo e com a extenso .css. Para utilizar esses estilos em uma nova pgina, basta colocar a tag3 LINK no cabealho (head) que referencie esse documento .css. Vide figura 2. Interna (incorporada) significa que o designer especifica as regras de CSS no cabealho ( head) do documento. As regras incorporadas afectam somente a pgina actual. Vide figura 3. Incluso pontual (inline) significa que o designer especifica as regras de CSS dentro da tag num documento HTML. Essas regras afectam somente a tag actual. Vide figura 4.

Definies de estilo As definies de estilo so feitas de forma semelhante, quer a insero das folhas de estilo seja externa, interna ou pontual. Contudo, existem duas formas de definir um estilo. A primeira, e a mais aconselhada por razes de retrocompatibilidade, a aplicao do estilo a uma tag especfica, ou seja, define-se que sempre que certa tag seja utilizada, esta deve ser formatada de uma forma especfica. A segunda a definio de uma designao escolha para esse estilo. Tendo em considerao as suas caractersticas e para efeitos prticos, designamos a primeira definio como global e a segunda como especfica.

A noo de tag aqui neste contedo deve ser entendido como um elemento que vem dentro dos sinais < (menor que) e > (maior que). Por exemplo, <LINK>.
3

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

Propriedades e valores Existe uma multiplicidade de propriedades que podem ser aplicadas a um estilo (tambm designado de classe), seja ele global ou especfico. No entanto, distinguem-se duas classes principais de propriedades: as de formatao e as de posicionamento. A propriedade e o respectivo valor so separados por ponto-e-vrgula, seguido de um espao. Caso a propriedade tenha mais do que um valor, estes devem ser separados por uma vrgula, seguida de um espao. Exemplo, propriedade: valor 1, valor 2.

Sintaxe do CSS Cada estilo que for criado definido como uma regra CSS, cada regra deve utilizar a seguinte sintaxe, e esta feita de trs partes: um selector, uma propriedade e um valor. elemento {atributo1: valor; atributo2: valor ...} ou selector {propriedade1: valor; propriedade2: valor}

Onde: elemento descreve o elemento de design ao qual o estilo ser aplicado. A mesma tag HTML mas, sem os sinais de maior e menor. Essa parte da regra s vezes chamada de selector. atributo / propriedade o aspecto especfico do elemento (selector) a usar como estilo. Deve ser um nome de atributo CSS vlido, ou seja, a propriedade o atributo que se deseja modificar, e cada propriedade pode ter um valor. Vide a tabela 1. valor a configurao aplicada ao atributo. Deve ser vlida para o atributo em questo. atributo: valor / propriedade: valor parte da declarao da regra. Pode-se atribuir mltiplas declaraes, separado-as com ponto-e-vrgula [;] e no se deve colocar um ponto-e-vrgula depois da ltima declarao.

Atalhos e atributos de CSS Alguns atributos de CSS permitem fazer diversas configuraes em uma declarao. Por exemplo,

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

H1 { font-style: italic; font-weight: bold; font-size: 18pt; font-family: 'Times New Roman'}

elemento/selector { atributo1: valor; atributo2: valor; atributo3: valor; atributo4: valor}

Como alternativa a especificar todas essas formataes de fonte individualmente, pode-se utilizar o atributo font: para defini-las todas de uma s vez, por exemplo:

H1 { font: italic bold 18pt 'Times New Roman' }

elemento/selector { atributo: valor1 valor2 valor3 valor4 }

Estilos como separao entre o contedo e o layout As tags HTML foram originalmente planeadas para definir o contedo de um documento, portanto as tags HTML esto encarregadas de especficar que isto um cabealho, um pargrafo, uma tabela, usando as tags como H, P e TABLE respectivamente e assim por diante. O layout do documento era para ser uma funo do browser, sem que fossem usadas nenhuma tag de formatao. Como os navegadores (browsers) continuamente adicionavam novas tags e atributos como a tag FONT e o atributo COLOR a especificao do HTML original, se tornou mais difcil, de se criar pginas web onde o contedo do HTML estivesse claramente separado de sua apresentao ou layout. Com vista a resolver este problema, o W3C criou os estilos (styles) em complemento ao HTML.

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

Tabela 1: Atributos de CSS ATRIBUTO
background-attachment: scroll fixed o nome da imagem com seu caminho relativo ou absoluto #FFFFFF;4 rgb(255,255,255);5 red, blue, green, etc6 transparent7 x-pos y-pos x-% y-% top left top center top right center left center center center right bottom left bottom center bottom right no-repeat (no repete) repeat (repete na vertical e horizontal) repeat-y (repete na vertical) repeat-x (repete na horizontal) [ver atalhos]

VALOR FUNDO - BACKGROUND

DESCRIO

background-image:

Scroll a imagem rola com a pgina Fixed a imagem fixa. Com este atributo coloca-se uma imagem de fundo na pgina. Exemplo: background-image: url(imagem.extenso); background-image: url(http://endereo da pgina); Define a cor do fundo de uma pgina e/ou elemento

background-color:

background-position:8

Posicionamento da imagem de fundo. Por padro uma imagem de fundo posicionada no canto superior da tela, portanto, esta propriedade (atributo) permite alterar este posicionamento padro e colocar a imagem em qualquer lugar na tela. Vide figura 5.

background-repeat:

Define a maneira como a imagem de fundo posicionada. uma abreviao para todas as propriedades, deste modo torna a folha de estilo mais fcil de ler e entender.

background:

BOX - CAIXA
border-width: thin (borda fina) medium (borda mdia) thick (borda grossa) length (px, pt, em, cm, ...) none (nenhuma borda) hidden (equivalente a none) dotted (borda pontilhada) dashed (borda tracejada) solid (borda contnua) Define a espessura da borda

border-style:

Define o estilo da borda

Cdigo hexadecimal Cdigo rgb 6 Nome da cor 7 Transparente 8 Vide tabela 2

4 5

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

double (borda dupla) groove (borda entalhada) ridge (borda em ressalto) inset (borda em baixo relevo) outset (borda em alto relevo) Cdigo hexadecimal Cdigo rgb Nome da cor veja o atributo border-width veja o atributo border-style veja o atributo border-color veja o atributo border-width veja o atributo border-style veja o atributo border-color veja o atributo border-width veja o atributo border-style veja o atributo border-color veja o atributo border-width veja o atributo border-style veja o atributo border-color

border-color: border-top-width: border-top-style: border-top-color: border-right-width: border-right-style: border-right-color: border-bottom-width: border-bottom-style: border-bottom-color: border-left-width: border-left-style: border-left-color: border-top: border-right: border-bottom: border-left: border: margin-left: margin-right: margin-top: margin-bottom: border-collapse:

Define a cor da borda Espessura da borda superior Estilo da borda superior Cor da borda superior Define a espessura da borda direita Define o estilo da borda direita Define a cor da borda direita Espessura da borda inferior Define o estilo da borda inferior Define a cor da borda inferior Espessura da borda esquerda Define o estilo da borda esquerda Define a cor da borda esquerda Forma abreviada para todas as propriedades da borda superior Abreviao para todas as propriedades da borda direita Abreviao para todas as propriedades da borda inferior Abreviao para todas as propriedades da borda esquerda Maneira abreviada para todas as quatro bordas Este atributo indica o tamanho da margem esquerda Utiliza-se para definir o tamanho da margem direita Este atributo indica o tamanho da margem acima da pgina Define o tamanho da margem na parte debaixo da pgina Cria um efeito collapse. Indica o espao inserido, pela esquerda, entre a borda do elemento que contm e o contedo deste. parecido ao atributo cellpadding das tabelas. O espao inserido tem o mesmo fundo que o fundo do elemento que contm. Indica o espao inserido, neste caso pela direita, entre a borda do elemento que contm e o contedo deste. parecido ao atributo cellpadding das tabelas. O espao inserido tem o mesmo fundo que o fundo do elemento que contm. Indica o espao inserido, por cima, entre a borda do elemento que contm e o contedo deste. Indica o espao inserido, neste caso por baixo, entre a borda do elemento que contm e o contedo deste. Serve para alinhar um elemento esquerda ou direita fazendo com que o texto se agrupe ao redor de tal

unidades CSS9 unidades CSS unidades CSS unidades CSS Collapse (borda em alto relevo refinada) unidades CSS

padding-left:

padding-right:

unidades CSS

padding-top: padding-bottom: float:

9

unidades CSS unidades CSS none right

Vide tabela 3

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

left clear: none left right elemento. Se este elemento tem a sua altura, imagens ou outros elementos alinhados direita ou esquerda, com o atributo clear pode se fazer com que cloloque-se em um lugar onde j no tenha estes elementos ao lado que indicou-se.

PARGRAFOS - TEXT
text-align: left (esquerda) right (direita) center (centro) justify (justificado)10 none (nenhuma) underline (sublinhado) overline (sobrelinha) line-through (linha em cima do texto riscado-) blink (faz o texto piscar) unidades CSS capitalize11 uppercase (maisculas) lowercase (minsculas) none (texto normal) normal unidades CSS normal (os espaos em branco sero ignorados pelo browser. pre (os espaos em branco sero preservados pelo browser) nowrap (o texto ser apresentado todo ele numa linha nica na tela. No h quebra de linha at ser encontrada uma tag <br>. normal ( o espaamento default) lenght [uma medida reconhecida pela CSS (px, pt, em, cm, ...)] normal ( o espaamento default) lenght [uma medida reconhecida pela CSS (px, pt, em, cm, ...)] ltr (texto escrito da esquerda para a direita) rtl (texto escrito da direita para a esquerda) Cdigo hexadecimal Serve para indicar o alinhamento do texto.

text-decoration:

Para estabelecer a decorao de um texto, ou seja, se est sublinhado, riscado, etc. Um atributo que serve para fazer recuos ou margens nas pginas muito til e novo. Permite transformar o texto. A altura de uma linha, e, portanto, o espaamento entre linhas. uma dessas caractersticas que no se podiam modificar utilizando o HTML.

text-indent: text-transform:

line-height:

white-space:

Como o browser trata os espaos em branco.

letter-spacing:

Define o espaamento entre letras. Para valor lenght so vlidos valores negativos.

word-spacing:

Define o espaamento entre as palavras. Para valor lenght so vlidos valores negativos.

direction: color:
10 11

Define a direco do texto. Define a cor do texto.

Fora o texto a ocupar toda a extenso da linha da esquerda direita. Todas as primeiras letras do texto em maisculas.

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

Cdigo rgb Nome da cor12

LIST - LISTA
list-style: list-style-image: list-style-position: none URL:url(caminho/marcador.gif) outside13 inside14 none (sem amrcador) disc (crculo bolinha cheia) circle (circunferncia bolinha vazia) square (quadrado cheio) decimal (nmeros 1, 2, 3, 4, ...) decimal-leading-zero lower-roman (romano minsculo i, ii, iii, iv, ...) upper-roman (romano maisculo I, II, III, IV, ...) lower-alpha (letra minsculo a, b, c, d, ...) upper-alpha (letra maiscula A, B, C, D, ...) lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha Cdigo hexadecimal Cdigo rgb Nome da cor Nome da famlia de fontes15 Nome da famlia genrica16 xx-small x-small small medium large x-large xx-large Abreviao para todas as propriedades Define a imagem como marcador da lista Indica onde o marcador da lista posicionado

list-style-type:

Define o tipo de marcador da lista

FONT - FONTE
color: font: font-family: Define a cor da fonte Abreviao para todas as propriedades Indica o tipo de fonte

font-size:

Define o tamanho da fonte

Vide tabela 4: cores. Marcador for a do alinhamento do texto. 14 Marcador alinhado com texto. 15 Define-se pelo nome da fonte (por exemplo, verdana, helvetica, arial, etc). 16 Define-se pelo nome generic (por exemplo, serif, sans-serif, cursive, etc).
12 13

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

smaller larger length17 % normal (fonte normal na vertical) italic (fonte inclinada) oblique (fonte obliqua) normal (fonte normal) small-caps18 normal bold (negrito) bolder lighter 100 200 300 400 500 600 700 800 900 help (interrogao) crosshair (cruz) default (cursor padro) hand (mo padro) move (cruz com setas) n-resite (seta para o norte) ne-resize (seta para o nordeste) e-resize (seta para o leste) se-resize (seta para o nordeste) s-resize (seta para o sul) sw-resize (seta para o sudoeste) w-resize (seta para o oeste) nw-resize (seta para o noroeste) text (insero) wait (ampulheta) alpha (efeito de opacidade) blur (efeito 3D) chroma (filtra uma cor prdefinida do objecto) dropshadow (efeito de sombreamento disfocado) fliph (inverte a imagem do objecto horizontalmete) flipv (inverte a imagem do

font-style: font-variant:

Indica o estilo de fonte Define fontes maisculas de menor altura

font-weight:

Define quanto mais escura a fonte .

CURSOR

cursor:

Altera o formato do cursor

FILTER

filter:

Cria efeito visuais em objectos

17 18

Uma medida reconhecida pela CSS (px, pt, em, cm, ). Transforma em maisculas de menor altura.

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

objecto verticalmente) glow (efeito de borramento) gray (apresenta o objecto em tons de cinza) invert (inverte as cores do objecto) mask (efeito transparente negativa) motion-blur (cria um efeito de velocidade ao objecto) shadow (efeito sombreado) wave (efeito de ondulao) xray (filtro de cores semelhante ao gray) points (pt) pontosinches (in) polegadascentimeters (cm) centmetrospixels (px) pixelsabsolute19 relative20 static (posicionamento esttico) baseline (alinhamento pela base) bottom (mesmo que baseline) middle (alinhamento pelo meio) percentage (especifica uma percentage vertical no alinhamento) sub (texto sub-escrito) super (texto sobre-escrito) text-bottom text-top top (alinhamento pelo topo) lr-tb (escrita da esquerda para a direita, do topo para baixo) tb-rl (escrita do topo para baixo, da direita para a esquerda) auto nmero Ver figura 6

height:

Define a altura do objecto

position:

Define o posicionamento de objectos

vertical-align:

Alinhamento vertical de objectos

writing-mode:

Gere o modo da escrita

z-index:

Define uma hierarquia na sobreposio dos objectos. 21

LINHAS DE CONTORNO
outline: none hidden dotted dashed solid double groove Define a linha de contorno

outline-style:

Define o estilo da linha de contorno

Posicionamento absoluto. Idem. 21 CSS usa o espao tri-dimensional (altura), largura e profundidade. Para colocar elementos em layers (camadas), isto , as camadas significam como os elementos se sobrepem uns aos outros. Para fazer isto, basta definir para cada elemento um nmero ndice (z-index). O comportamento que elementos com nmero do ndice maior se sobrepem queles com menor nmero.
19 20

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

ridge inset outset thin medium thick unidades CSS Nome da cor Cdigo hexadecimal Cdigo rgb

outline-width:

Define a espessura da linha de contorno

outline-color:

Define a cor da linha de contorno

FIGURA 1: Folhas de estilo CSS [externa]

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

FIGURA 2: Importando uma folha de estilo externa

OBS: rel=stylesheet indica que o link feito com uma folha de estilo / type=text/css indica que um documento de texto que contm o cdigo CSS / href=documento.css indica o nome do documento

FIGURA 3: Folha de estilo CSS interna (incorporada)

.html

.html

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

FIGURA 4: folhas de estilo CSS inline (incluso pontual)

FIGURA 5: Ilustrao das coordenadas (background-position)

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

FIGURA 6: z-index (layers)

TABELA 2: Uso do atributo (background-position)

ATRIBUTO: VALOR
background-position: 2cm 2cm background-position: 50% 50% background-position: top right

DESCRIO
A imagem posicionada a 2cm da esquerda e 2cm para baixo na pgina A imagem centrada na horizontal e a um quarto (25%) para baixo na pgina A imagem posicionada no canto superior direito da pgina

TABELA 3: Unidades CSS

UNIDADE DESCRIO ABSOLUTA22

cm in mm pt pc em ex px % Centmetro A polegada inch, corresponde a 2,54 cm milmetro Ponto O pica (corresponde a 12pt) RELATIVA23 Unidade relativa dimenso da letra do elemento seleccionado. nica excepo a esta regra: quando a propriedade font-size est definida, refere-se dimenso da letra do elemento parente. Unidade relativa altura da minscula do elemento seleccionado. nica excepo a esta regra: quando a propriedade font-size est definida, refere-se altura da minscula do elemento parente. O pixel. Trata-se de uma unidade cujo resultado depende da resoluo do perifrico de apresentao. A percentagem uma unidade relativa dimenso do elemento ou do seu parente.

22 23

As unidades absolutas propostas pelo standard CS. Idem

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

TABELA 4: Cores em HTML/CSS

SECO I: CORES CUJOS NOMES PODEM SER USADOS NO LUGAR DO CDIGO. O ASTERISCO INDICA TRATAR-SE DE COR OFICIAL

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

SECO II: ALGUMAS CORES CUJOS NOMES EM PORTUGUS SO CONHECIDOS

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

SECO III: GRADAES I

SECO IV: GRADAES II

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

SECO V: TONALIDADES DE VERDE

SECO VI: TONALIDADES DE MARRON

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

SECO VII: TONALIDADES DE VIOLETA

SECO VIII: TONALIDADES DE AMARELO

SECO IX: TONALIDADES DE AZUL

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

SECO X: AS 216 CORES SEGURAS DA WEB (CSW)

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

OBS: As cores podem ser apresentadas pelo nome, cdigo rgb hexadecimal, cdigo hexadecimal abreviado, cdigo rgb decimal. Portanto a tabela ilustra se a cor est contida no conjunto das Cores Seguras da Web (CSW: sim ou no). Apresenta o cdigo hexadecimal abreviado da cor CSW mais prxima, somente quando a indicao acima for no. De acordo com a tabela 4 algumas cores apresentam-se sem nome e/ou sem cdigo hexadecimal abreviado (porque no possvel t-lo).

Estilizao de links com CSS As folhas de estilo CSS possibilitam definir uma variedade infinita de layouts e efeitos para um link ou um conjunto de links (o limite a sua imaginao!). Portanto, para estilizar os links em uma pgina web deve-se conhecer os quatro selectores pseudo classes de links, bem como a prioridade nas declaraes para links, ou seja, a sequncia em que as regras CSS para cada um dos estados deve ser declarada na folha de estilos. Sob os conceitos das CSS, um link poder ser estilizado de quatro maneiras distintas, correspondendo cada uma delas a um estado do link. Os quatro estados dos links so: 1 Estado UP (corresponde a situao inicial do link, isto , o aspecto do link quando a pgina carregada no browser do utilizador; 2 Estado OVER ( o aspecto que o link assume quando o utilizador passa o ponteiro do mouse sobre o link); 3 Estado VISITED ( o aspecto do link depois que foi visitado pelo utilizador); e 4 Estado ACTIVE ( o aspecto do link activo, isto , aquele que foi clicado pelo utilizador). As pseudo classes para links Cada um dos quatro estados dos links poder ser estilizado por regras CSS aplicadas em quatro pseudo classes, conforme a tabela abaixo: PSEUDO CLASSES a:link a:visited a:hover a:active DESCRIO aplicada para links que ainda no foram visitados aplicada para links que j foram visitados pelo utilizador aplicada quando o cursor do mouse est sobre o link aplicada quando um elemento est sendo activado pelo utilizador (o que foi clicado)

A ordem (sequncia) das declaraes deve ser: a:link; a:visited; a:hover; a:active.

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

Exemplo: a:link { text-decorantion: none; } a:hover { text-decorantion: underline; } Neste exemplo, o estado UP do link estar sem sublinhado e o estado OVER com sublinhado. Do resto s ver a tabela 1 para atributo (text-decoration, entre outros).

Alguns exemplos FIGURA 7: Usando pseudo classe para a estilizao de links

Docente: Bruno Alfredo Gamito

Programao Web: Introduo a Folhas de Estilo - CSS

FIGURA 8: Estilizando a barra de rolagem (scrollbar)

Docente: Bruno Alfredo Gamito