ICET ꟷ Instituto de Ciência de Tecnologia
Disciplina: Programação Web Responsiva
Docente: Fabio Luís Pereira/ Carlos Arruda Baltazar
MÓDULO 05
1. Primeiro Projeto com CSS
Cascading Style Sheets (CSS) é um mecanismo para adicionar estilos
(cores, fontes, espaçamento, etc.) a uma página web. O CSS pode ser aplicado
diretamente nas tags HTML ou ficar contido dentro das tags <style>. Também é
possível, adicionar estilos adicionando um link para um arquivo CSS que contém
os estilos. Desta forma, quando se quiser alterar a aparência dos documentos
vinculados a este arquivo CSS, basta modifica-lo.
a. Sintaxe CSS
CSS tem uma sintaxe simples, e utiliza uma série de palavras em inglês
para especificar os nomes de diferentes propriedades de estilo.
Uma instrução CSS consiste em:
• Seletor: usado para declarar a quais elementos de marcação (tags)
um dado estilo será aplicado. Os seletores podem ser aplicados a
todos os elementos de marcação de um tipo específico, ou elementos
que correspondam a um determinado atributo; elementos podem ser
combinados, dependendo de sua em relação com outros elementos
ou de como eles estão aninhados dentro do objeto.
• Pseudo classe: seleciona elementos inteiros, tais como :link ou
:visited, considerando que um pseudoelemento faz uma seleção que
pode ser constituída por elementos parciais, tais como :first-line ou
:first-letter.
• Bloco de declaração: estrutura que contém uma propriedade ou
chave, e um valor, separados por dois pontos (:). Além disso, cada
declaração em um mesmo seletor é separada por ponto e vírgula (;).
Desta forma, a sintaxe CSS pode assumir as conformações:
• Um elemento de um dado tipo: elemento {definicao_estilo;}
Cursos: Ciência da Computação | Sistemas da Informação Página 1 de 8
ICET ꟷ Instituto de Ciência de Tecnologia
Disciplina: Programação Web Responsiva
Docente: Fabio Luís Pereira/ Carlos Arruda Baltazar
• Elemento de um dado tipo com classe: [Link]
{definicao_estilo;}
• Todos os elementos de uma dada classe: .classe {definicao_estilo;}
• Um elemento selecionado pelo id: #id {definicao_estilo;}
• Estilo por grupo: elemento1, [Link] {definicao_estilo;}
b. Criando primeira página com CSS interno
• TAG <style>
As tags <style> ... </style> atribuem uma seção de estilo, sendo inserida
entre as tags <head>...</head>. Além disso, é necessário deixar explícito que
será o CSS será utilizado para as definições de estilo através do parâmetro
type:
Cursos: Ciência da Computação | Sistemas da Informação Página 2 de 8
ICET ꟷ Instituto de Ciência de Tecnologia
Disciplina: Programação Web Responsiva
Docente: Fabio Luís Pereira/ Carlos Arruda Baltazar
Após a definição da região de definição de estilo, vamos definir a cor de
fundo de todo o corpo da página como cinza. Para isso, como a tag que define
o corpo da página é a tag <body>, vamos utiliza-la como seletor, seguido da
propriedade color e o valor gray:
Além disso, vamos atribuir a todos os títulos de nível 1 a cor azul, uma
fonte do tipo Arial e um alinhamento centralizado. Para isso, utiliza-se o seletor
h1 com as propriedades color, text-align e font-family; e os valores blue, center
e Times New Roman, respectivamente:
Cursos: Ciência da Computação | Sistemas da Informação Página 3 de 8
ICET ꟷ Instituto de Ciência de Tecnologia
Disciplina: Programação Web Responsiva
Docente: Fabio Luís Pereira/ Carlos Arruda Baltazar
Por fim, vamos atribuir a todos os parágrafos da página uma cor preta,
uma fonte do tipo Arial e um alinhamento justificado. Para isso, utiliza-se o
seletor p com as propriedades color, text-align e font-family; e os valores black,
justify e Arial respectivamente:
Cursos: Ciência da Computação | Sistemas da Informação Página 4 de 8
ICET ꟷ Instituto de Ciência de Tecnologia
Disciplina: Programação Web Responsiva
Docente: Fabio Luís Pereira/ Carlos Arruda Baltazar
c. Criando primeiro arquivo externo CSS
Para projetos de páginas ou aplicações Web mais complexo é
interessante separar o que é estrutura (HTML) do estilo (CSS) aplicado ao
conteúdo. Isso ocorre, pois várias páginas de um mesmo projeto podem
compartilhar uma ou um conjunto de folhas de estilo. Desta forma, costuma-se
criar arquivos separados destinados exclusivamente para definições de estilo do
projeto:
Cursos: Ciência da Computação | Sistemas da Informação Página 5 de 8
ICET ꟷ Instituto de Ciência de Tecnologia
Disciplina: Programação Web Responsiva
Docente: Fabio Luís Pereira/ Carlos Arruda Baltazar
No arquivo CSS são inseridas apenas as definições de estilo, então
utilizando as mesmas definições descritas na seção b, o arquivo CSS teria os
seletores:
d. Chamando folha de estilo no html
Para associar as definições de estilo no arquivo [Link] ao código fonte
HTML, utiliza-se a tag <link>, associada aos parâmetros href onde é definido o
caminho do arquivo CSS e rel que define o relacionamento entre um recurso e o
presente documento:
Cursos: Ciência da Computação | Sistemas da Informação Página 6 de 8
ICET ꟷ Instituto de Ciência de Tecnologia
Disciplina: Programação Web Responsiva
Docente: Fabio Luís Pereira/ Carlos Arruda Baltazar
2. Estilizando com CSS
a. Background-color
A propriedade background-color especifica a cor de fundo de um
elemento:
body {background-color: gray;}
b. Background-image
A propriedade background-image especifica uma imagem que será
utilizada como plano de fundo do elemento:
body {background-image: url("./imgs/[Link]");}
c. Background-repeat
Por padrão, a propriedade background-image repete uma imagem tanto
horizontalmente (eixo x) quanto verticalmente (eixo y). Contudo, utilizando a
propriedade background-repeat, é possível especificar se o desenvolvedor
prefere que a imagem só se repita horizontalmente:
body {background-image: url("./imgs/[Link]");
background-repeat: repeat-x;}
Que a imagem seja repetida verticalmente:
body {background-image: url("./imgs/[Link]");
background-repeat: repeat-y;}
Ou então, que a imagem não seja repetida:
body {background-image: url("./imgs/[Link]");
background-repeat: no-repeat;}
Cursos: Ciência da Computação | Sistemas da Informação Página 7 de 8
ICET ꟷ Instituto de Ciência de Tecnologia
Disciplina: Programação Web Responsiva
Docente: Fabio Luís Pereira/ Carlos Arruda Baltazar
d. Background-size
Além de configurar se uma imagem de plano de fundo irá se repetir
horizontalmente ou verticalmente. É possível especificar a escala ou tamanho da
imagem do plano de fundo, lançando mão da propriedade background-size. O
tamanho da imagem pode ser definido de forma automática:
body {background-image: url("./imgs/[Link]");
background-repeat: no-repeat;
background-size: auto;}
De forma absoluta com suas medidas em pixels:
body {background-image: url("./imgs/[Link]");
background-repeat: no-repeat;
background-size: 300px 300px;}
Ou de forma proporcional, utilizando pontos percentuais:
body {background-image: url("./imgs/[Link]");
background-repeat: no-repeat;
background-size: 50% 50%;}
Cursos: Ciência da Computação | Sistemas da Informação Página 8 de 8