1. TIPOS de CSS
1.1. CSS inline:
1.1.1. ocorre quando colocamos o CSS junto à tag HTML
1.1.2. Exemplo:
1.1.2.1. <p style=”color: #ff0000”>Isto é CSS Inline</p>
1.2. CSS embeded (ou incorporado)
1.2.1. é usado no inicio do código
1.2.2. Exemplo:
1.2.2.1. <head> <title></title> <style type="text/css"> p{ font-family: arial; font-size: 12px; } </style> </head>
1.3. CSS externo:
1.3.1. Neste caso, cria-se um arquivo externo com a extensão .css e linka ele com o documento CSS.
1.3.2. Exemplo:
1.3.2.1. <link href="imgs/estilo.css" rel="stylesheet" type="text/css" />
2. SELETORES
2.1. Um seletor pode ser qualquer tag HTML, porém, a identificação pode ser diferente
2.2. Exemplo:
2.2.1. <div id=”box” class=”caixa”> ... conteúdo da div ... </div>
2.3. É possível formatar o seletor div de três formas diferentes.
2.3.1. Pelo nome da tag:
2.3.1.1. h1 { color: #000000 }
2.3.2. Pelo id:
2.3.2.1. #box { color: #0000FF }
2.3.3. Pela classe:
2.3.3.1. caixa { color: #0000FF }
3. REGRA em CSS
3.1. Uma regra é composta basicamente por três elementos: seletor, propriedade e valor
3.2. Exemplo:
3.2.1. h1 { color: #0082BF; } h1 é o seletor, color a propriedade e #0082BF é o valor da propriedade color.
4. <div id=”box” class=”caixa”> ... conteúdo da div ... </div>
5. SINTAXE
5.1. Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será aplicado estilo a um ou mais elementos HTML. Um conjunto de regras CSS formam uma Folha de Estilos. Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo:
5.2. Propriedade:
5.2.1. é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc...).
5.3. Seletor:
5.3.1. genericamente, é o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, ou etc., e para o qual a regra será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
5.4. Valor:
5.4.1. é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc...)
6. DÚVIDAS
6.1. Posso fazer um site usando apenas CSS?
6.1.1. R: Não. O CSS é usado para formatação de outro documento, geralmente HTML. Portanto, para criar um site, você precisa de HTML para estruturar a página e CSS para formatar.
6.2. Quando se usa formatar pelo nome da tag?
6.2.1. R: Este tipo de formatação de aplica a casos gerais, por exemplo, você quer que todos os textos do seu site tenham a mesma fonte, tamanho e cor. Neste caso basta formatar a tag <p> e pronto.
6.3. Quando se usa formatar pelo id?
6.3.1. R: Em casos muito específicos. Pela regra do XHTML não é possível ter em uma mesma página dois ids com nomes iguais. Normalmente são usados para os elementos principais da página, como o topo, menu, rodapé, box containers, etc.
6.4. Quando se usa formatar pela classe?
6.4.1. R: É um caso que fica no meio termo entre o específico do ID e o geral do nome da tag. A classe é útil quando você deseja formatar algumas tags, mas não todas. Por exemplo, em um texto com dez parágrafos, você poderia dar uma formatação diferenciada para os parágrafos 3, 6 e 7. Como fazer isto? Cria uma classe em CSS e aplica manualmente a estes parágrafos.
6.5. Todos os sites usam CSS?
6.5.1. R: Não. Antigamente a formatação era feita pelo próprio HTML, desta forma não se usava CSS. Hoje não faz sentido formatar em HTML, já que isto seria semanticamente incorreto.
6.6. Quem padroniza o CSS?
6.6.1. R: É o W3C, o mesmo órgão que regulamente e padroniza o HTML e diversas outras linguagens