O HTML define quais os objetos /elementos que serão exibidos na página.
A CSS define como esses objetos serão exibidos, melhor dizendo, seu estilo como posição, cores (letras, fundo), tamanho (largura, altura), formas (arredondamentos etc.), etc.
O browser tem um estilo default para todos elementos que ele apresenta.
Quando você insere uma tag input não precisa definir muito detalhes, só alguns fundamentais e o browser pega
um 'modelo de apresentação da tag' que ele possui internamente e 'encaixa' os parâmetros de sua tag nele e o
exibe.
Exemplificando, a seguir mostro a tag input : .
Literalmente o que fiz foi : <input type="text" value="input type text" />
Falei para ele botar uma caixa para entrada de texto, seu tamanho, largura ou altura ?
Não, o browser tem um default que ele usa quando o usuário não define certos parâmetros / estilos.
Só determinei que queria uma tag input para entrar texto e um parâmetro value que é o conteúdo em seu interior no
momento inicial de sua exibição.
Contudo muitas vezes precisamos dar uma 'personalizada' para que fique mais apropriado para o design do documento atual. Pode ser uma cor, um fundo, um tamanho ou estilo de letra...qualquer coisa que não seja já definido pelo padrão do browser.
Finalizando, ao inserir uma tag input, por exemplo, no html temos a definição, pelo próprio browser de como a tag input deve ser exibida, não precisamos definir nada ( além da tag ) nem estilo algum para que ela seja exibida perfeitamente.
Veremos abaixo que podemos fazer a estilização na tag, numa classe, num id etc. Contudo podemos ter uma página com pouco css e podemos ter página com muitas estilizações. Sendo assim, qual seria a melhor maneira de aplicar a estilização da página ?
Via de regra se a página tem poucos estilos ou os estilos são específicos a página devemos fazer o estilo na página.
Se quisermos fazer os estilos comuns a todas as páginas do site o melhor é fazer num arquivo externo que iremos adicionar a cada página do site. Isso é bom porque cria um padrão consistente em todas as páginas do site.
Contudo quando essa 'estilização' contém muitos elementos esses 'estilos' aplicados começam a atrapalhar a visualização do código html e a página html parece um 'linguição' de códigos que acaba confundindo o programador. Por isso muitas vezes é recomendar colocar esses estilos em fontes de estilo separada da página atual para não atrapalhar a visualização do código html.
Outra vantagem de separar o código html do estilo é que podemos aplicar o mesmo estilo em diversas tags html. Muito mais prático que escrever o estilo em cada uma das tags.
Na especificação do html5 tudo que é estilo está sendo transferido para a CSS. Contudo, logicamente, para efeito de compatibilidades com versões antigas, algumas tags ainda funcionam mas claramente deixarão de funcionar em versões futuras do html.
Colocando os estilos na css podemos agrupar definições ou mesmo misturar os estilos para ter estilos mais ricos, versáteis e personalizados.
Podemos dizer que com a CSS as aplicações web ganharam mais recursos de exibição que uma aplicação desktop.
CSS está ganhando tanto poder e versatilidade que já inventaram ferramentas ( como o SASS ) que permite fazer um código que gera um CSS específico para aquele momento. Por exemplo, se estamos exibindo um SVG ( desenho vetorial ) numa região da página com um fundo preto e uma cor branca a ferramenta pode fazer com que, automaticamente, o SVG fique com a cor preta e fundo branco para se destacar do local onde esta sendo exibido, automaticamente.
Importante : Não importa a maneira que você insere os estilos na página o comportamento será basicamente o mesmo .
A CSS é aplicada de acordo com o que chamamos de seletores.
Seletores nada mais são que os identificadores dos estilos e, basicamente, usaremos esse nome para aplicá-los.
Se quiser ver em detalhes estes
seletores sugiro que veja esta página. mas no final desta página tem
um bom exemplo de seu funcionamento e aplicação
Exemplo de seletor:
body{
margin:0;
padding:0;
}
Dos seletores você não pode esquecer: Podemos aplicar os seletores pelo :
• 1 - Pelo nome da tag,
• 2 - Aplicando uma classe na tag
• 3 - Pelo id da tag.
Dentro do nosso documento a classe / estilo pode ser aplicada de três formas:
Neste caso os estilos da página estão em um documento css externo a página html.
É a melhor maneira quando utilizamos muitos estilos especialmente quando o 'código' é
relativamente extenso e a visualização da página fica mais simples e ordenada desta maneira,
separando o código html do estilo.
Outro ponto importante a notar no arquivo css externo é a padronização de todas as páginas do site.
Como usar : Dentro da tag header da página html inclua o código / linha a seguir:
<link rel="stylesheet" href="estilo.css">
onde estilo.css é o documento onde seus estilos externos estão armazenados, puro texto igual ao que você colocaria dentro do seu documento.
Nota : a página de estilos é um documento texto exatamente como é a definição da css.
Exemplo:
body{
margin:0;
padding:0;
}
Se você colocar o código acima numa página css e 'linkar' ela como definido no exemplo o conteúdo da página será exibido com margem e espaçamento zero da borda do browser.
Neste caso o estilo é definido dentro da tag head do documento html.
Nota : O browser moderno admite que se coloque os estilos em qualquer lugar da página mas fica muito deselegante misturar estilos no meio de html, javascripts...bagunça e muito especialmente porque você precisaria procurar o estilo dentro de todo o código da página para alterá-lo. Mas se forem poucos estilos e particulares a página ou a um ponto específico do documento corrente este recurso passa a ser interessante.
Acostumamos usar este modelo para pequenos ou particulares conjuntos de estilos válidos
apenas dentro da página corrente.
Exemplo - Código(dentro da tag head da página html ):
<style>
.classe3 {
color: red;
font-size: 22pt;
}
</style>
Exemplo - Como é exibido
Código:
<h5 class="classe3">Exemplo de estilo aplicado por uma classe ( classe3 ) definida no header</h5>
Note que ao colocar a classe='classe3' na tag atribui o estilo a ela e no estilo estava definido sua cor (vermelha) e o tamanho da fonte=22 o que modificou a maneira como a tag h5 seria exibida no documento.
Importante: No estilo temos um ponto antes do nome dele que indica que ele deverá sem aplicado no estilo da tag. Note que o ponto não existe na utilização da classe dentro da tag.
Neste caso o estilo é definido pelo parâmetro style dento da
propria tag html. É a melhor maneira quando utilizamos um estilo único ou simples
porque evita que precisamos abrir a página de estilo para ver o que esta sendo feito.
Exemplo-Código:
<span style="background-color:aqua">Esta mensagem está dentro de um span com a cor de fundo aqua</span>
Exemplo-Como é exibido:
Esta mensagem está dentro de um span com a cor de fundo aqua
Definimos onde o estilo deve ser aplicado através de seletores. Os seletores selecionam, definem onde o estilo deve ser aplicado.
A css pode atuar nos elementos da página através de 3 níveis de seletores, do mais restrito ao mais amplo no que se refere ao número de elementos da página selecionados.
Além desses 3 estilos básicos de seletores ainda podemos associar/combinar esses seletores e criarmos seletores mais específicos como os seletores com parentes, por exemplo.
Neste caso o estilo será aplicado a todas as tags do mesmo tipo no documento.
Formato : Selector{} ou colocando na prática : tag{}
Onde: Seletor pode ser qualquer tag html (ex: p, div, input, etc.).
Exemplo 1 :
p{
color: red;
}
Neste caso todos os parágrafos <p> do documento terão na fonte da letra a cor vermelha.
Importante: Com este tipo de estilo todas as tags do tipo escolhido no documento são afetadas indiscriminadamente.
Exemplo 2 :
<style>
div {
font-family: Arial;
}
</style>
Na página as divs utilizarão a fonte de letra Arial.
Neste caso
o estilo será aplicado aos elementos que usarem o estilo como parâmetro na sua tag.
O estilo será aplicado através do parâmetro class da tag : class='estilox' e poderemos
selecionar quais tags terão e quais não terão o estilo.
Formato : .Selector{}
Importante : O ponto indica que a css será aplicada a uma classe de uma tag.
Exemplo da definição do estilo:
.classeVermelha{
color: red;
}
Exemplo de utilização :
<p class="classeVermelha"> Este texto terá a fonte das letras com a cor vermelha></p>
Importante :
Note que o ponto existe na definição do estilo (.classeVermelha) na css, mas não na aplicação desse estilo no
elemento a ser formatado (class="classeVermelha")
.
Comprovação do funcionamento :
Este texto terá a fonte das letras com a cor vermelha
Note que apenas o elemento que tiver o estilo será é formatado por ele. O que não tiver não será.
Neste caso todos os parágrafos do documento que usarem o estilo 'classeVermelha' terão na fonte da
letra a cor vermelha.
Com este tipo de estilo podemos selecionar as tags do documento que serão afetadas.
Note que o estilo que deverá ser utilizado em uma classe sempre tem um ponto antes do seu nome.
O Ponto determina que é um estilo para ser aplicado em uma classe.
Exemplo:
.classea{
font-size:22px;
}
Aplicando a classe : <p class="classea">Aplicando a tag acima o parágrafo fica assim :
Resultado :
Aplicando a tag acima o parágrafo fica deste jeito.
Pela id - O mais seletivo - Em uma única tag Neste caso o estilo será aplicado num único elemento da página identificado pelo sua id.
Importante: Como o id deve ser único em um documento html esta formatação será aplicado apenas a um elemento do documento.
Formato : #Selector{}
Exemplo :
#idPink{
color: pink;
}
Exemplo de uso 1 :
<p id="idPink"> Este texto terá a fonte das letras com a cor rosa></p>
Comprovação do funcionamento :
Este texto terá a fonte das letras com a cor rosa
Note que o estilo que deverá ser utilizado em um único elemento pelo seu id tem um # ( jogo da velha ) antes do seu nome .
O Jogo da Velha determina que é um estilo para ser aplicado em um ID.
Exemplo de uso 2:
#classeb{
font-style:italic;
}
Aplicando a classe : <p class="classeb">Aplicando a tag acima o parágrafo fica assim :</p>
Resultado :
Aplicando a tag acima o parágrafo fica assim :
Importante1 : O ID tem que ser um único em toda a página.
Importante2 : O símbolo # deve ser utilizado na definição do estilo na css, mas não é utilizado
na tag onde o formato será aplicado.
Neste tipo de seletor nós não só selecionamos o tipo da tag mas se ela tem uma tag parente específica, tipo só quero aplicar o estilo na tag x que seja precedida ou antecedida pela tag y.
Como tag parente entenda a tag anterior ou posterior, pode ser a n posterior ou a n anterior.
Exemplo :
<style>
table p {
color:blue;
}
</style>
Neste caso apenas as tags p que estejam dentro de tags table serão afetadas. Na realidade você está encadeando tags e tornando sua utilização mais específica. É muito usada na construção de menus onde o estilo deve ser aplicado apenas as tags do menu ( tipo ul li{..})
Pseudo-Classes são classes que são ativadas apenas em eventos do browser, como ao passar o mouse por cima de um elemento ou função similar que especifica uma condição da tag.
As Pseudo-Classes também são utilizadas para definir estilos que antes eram feitos precariamente pelo html ou estilos mais primitivos mas que foram substituídos e melhorados.
A seguir mencionamos as PseudoClasses mais comuns em todos os browsers:
1-:link Define os estilos das tags <a> quando estas ainda não foram visitadas pelo usuário.
Exemplo:
a:link{color:red};
Isto faria com que todas as tags de link ainda não visitadas sejam exibidas na cor vermelha.
2-:visited Define os estilos das tags <a> quando estas ainda já foram visitadas pelo usuário.
Exemplo:
a:visited{color:green};
Isto faria com que todas as tags de link já visitadas sejam exibidas na cor vermelha.
3-:active Este estilo seria ativado quando o elemento da tag recebesse o foco da aplicação como o click do mouse nele, por exemplo.
Exemplo:
input:active{background-color:green};
Isto faria com que o controle ao receber o foco teria sua cor de fundo alterada para verde.
Demonstração:
4-:hover Este estilo será ativado quando o mouse passar sobre o elemento.
Exemplo:
a:hover{background-color:fuchsia};
Isto faria com que quando o mouse passar sobre o controle este terá a cor de seu fundo mudada.
Demonstração: Isto é um link comum
São seletores criados para definir uma condição particular do elemento como primeiro, ultimo, antes, depois, primeira letra.
Importante : A definição de pseudo-elementos pode ser feita em estilos externos ou incorporados mas não em estilo local .
1-Before : Utilizado junto com a propriedade content define um conteúdo antes da ocorrência
do elemento.
Ex: a:before{content:open-quote}
2-After : Utilizado junto com a propriedade content define um conteúdo depois da ocorrência
do elemento.
Ex: a:after{content:close-quote}
3-First-Leter : Permite aplicar um estilo apenas na primeira letra de um elemento.
Ex: p:fist-letter{font-weight:bold}
4-First-Line : Permite aplicar um estilo apenas na primeira linha de um elemento.
Ex: p:fist-line{font-weight:bold}
Se entendeu o que foi explicado até aqui aqui tem um resumo para você se lembrar deste assunto : Resumo CSS - seletores
Podemos aplicar duas ou mais classes no mesmo item :
Formato : class="classe1 classe2"
O espaço separa os nomes dos estilos a serem aplicados. />
Exemplo:
.classepreto {
color: black;
}
.classeazul {
color: blue;
}
.classeverde {
color: green;
}
.classe3{
color: red;
font-size: 22pt;
}
tag :<p class="classeazul classe3">Aplicando a classe azul e classe3 neste parágrafo fica assim :</p>
Aplicando o resultado é este.
Note que na tag classe azul temos a definição da cor azul e na tag classe3 temos a definição de cor vermelha.
A cor que prevaleceu foi a vermelha porque em HTML, sempre, a última definição será a que prevalecerá.
Note que ao definir um estilo em uma classe e depois em outra a última prevalescera por default ou a que for mais específica em relação a uma mais genérica.
Podemos aplicar o estilo dentro do próprio elemento / tag - Chamamos isso de css inline :
É meio deselegante mas muito utilizado especialmente em estilos simples ou únicos.
Exemplo:
<div style='position:absolute;margin-left:10px;margin-top:10px;width:300px;height:140px;z-index:1'>Div1</div>
<div style='position:absolute;margin-left:50px;margin-top:20px;width:300px;height:140px;z-index:1'>Div2</div>
<div style='position:absolute;margin-left:60px;margin-top:150px;width:300px;height:140px;z-index:1'>Div3</div>
<div style='position:absolute;margin-left:150px;margin-top:100px;width:300px;height:140px;z-index:1'>Div4</div>
Resultado :
Importante : Com o posicionamento absoluto tiramos o tratamento que o browser dá na disposição dos elementos na página.
Só para dar um exemplo, se copiarmos os textos das divs e trocarmos por span as mensagens serão exibidas exatamente do mesmo jeito.
Podemos aplicar a mesma definição de estilo para diversas tags. No exemplo abaixo faço a definição de um estilo para todas as tags head.
Exemplo:
<style>
H1, H2, H3, H4, H5, H6 {
color: purple;
}
</style>
Neste caso todas as tags header serão afetadas pelo estilo que esta sendo definido.
Importante: Torna-se particularmente confuso ter a definição de estilo para uma tag em diversos pontos do documento de estilo. Por exemplo, no exemplo acima se eu quisesse dar um tamanho de fonte diferenciado para cada tipo de tag header teria que fazer a definição específica para cada tag separadamente. Parece, no início uma boa solução, mas na prática um desastre. Você tem que ficar cassando no documento as definições de estilo para a mesma tag em diversos pontos do documento de estilo.
Para entender este tópico você deve conhecer como funciona o DOM e a sua hierarquia de elementos.
1-Pela definição do browser.
Quando você monta uma página html e define uma tag input type text o proprio browser tem uma
definição de estilo sobre como ele deve ser apresentado, qual fonte de letra, qual tamanho,
cor, etc. Isto é feito pela declaração <html> ou <html5>.
Note que ao definir um estilo para um elemento pai você pode estar definindo os estilos
de seus elementos filhos. Por exemplo, se eu defino na tag body que o texto é
Arial todos os elementos da página utilizarão o padrão de texto Arial, digamos que o
estilo é 'herdado' do elemento anterior ou de elementos parentes.
2-Pela CSS
Neste caso a CSS altera o estilo default do broswer e personaliza a exibição da tag.
Importante: Todos os estilos default de exibição da tag podem ser alterados pela CSS.
Absolutamente todos. Isto pode causar efeitos estranhos como uma tag input type text ser exibida
como um label ( não acessível, sem bordas, etc..) ou mesmo um elemento inline ser exibido como
um elemento block, o que causa uma certa confusão sobre a tag
utilizada no elemento especialmente pelo programador.
Um recurso que podemos utilizar na CSS é atribuindo a ele o parâmetro importante o que faz com que o estilo não possa ser mais alterado dali por diante. Este parâmetro faz com que a hierarquia de estilo do dom fique estática, congelada para aquele elemento.
Exemplo de utilização:
div #p1 {
position: fixed !important;
top: auto !important;
left: auto !important;
bottom: 10px !important;
right: 30px !important;
}
O exemplo acima cita alguns estilos mas em todos os estilos podemos aplicar o parâmetro !important. o que fará que o parâmetro nunca seja sobrescrito por outro estilo.
Nota : Só use este recurso em último caso. É péssimo dar manutenção num site com muitos !important.