Introdução ao CSS
http://www.w3schools.com/css/default.asp
http://www.w3schools.com/css/tryit.asp?filename=trycss_ex
Ótima Apostila
https://www.caelum.com.br/download/caelum-html-css-javascript-php.pdf
O que é CSS?
Talvez você já tenha ouvido falar em CSS, mas não saiba o que significa exatamente. Nesta lição você saberá o que é e para que serve CSS.
CSS é a abreviatura para Cascading Style Sheets. — Folha de Estilos em Cascata
O que eu posso fazer com CSS?
CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais. Aguarde e você verá!
HTML pode ser (in)devidamente usado para definir o layout de websites. Contudo CSS proporciona mais opções e é mais preciso e sofisticado. CSS é suportado por todos os navegadores atuais.
Depois de estudar algumas poucas lições deste tutorial, você estará em condições de projetar uma folha de estilos, usando CSS para dar um grande visual ao seu website.
Qual é a diferença entre CSS e HTML?
HTML é usado para estruturar conteúdo. CSS é usado para formatar conteúdo estruturado.
OK, isto soa um tanto técnico e confuso. Mas, por favor continue lendo. Tudo fará sentido em breve.
Em tempos passados quando a Madonna era virgem e um sujeito chamado Tim Berners Lee inventou a World Wide Web, a linguagem HTML era usada somente para estruturar textos. Um autor podia marcar seus textos definindo "isto é um cabeçalho " ou "isto é um parágrafo" usando tags HTML tais como <h1> e <p>.
À medida que a Web ganhava popularidade, os designers começavam a sentir a necessidade de encontrar meios de construir layout para os documentos online. Para suprir estas necessidades os fabricantes de navegadores (àquela época a Netscape e a Microsoft) inventaram novas tags HTML tais como, por exemplo a tag <font> que se diferenciava das tags originais do HTML pelo fato de destinar-se à layout — e não à estrutura.
Isto adicionalmente teve o efeito de disvirtuar o emprego de tags inicialmente projetadas para estrutura como por exemplo a tag <table> que passaram a ser empregadas para layout. Muitas destas novas tags para layout como a tag <blink> eram suportadas somente por um determinado tipo de navegador. A frase "Você precisa do navegador X para visualizar esta página" tornou-se comum nos websites.
CSS foi inventada para solucionar esta situação, colocando à disposição dos web designers meios sofisticados de projetar layouts suportados por todos os navegadores. E ao mesmo tempo a separação dos estilos de apresentação da marcação dos conteúdos torna a manutenção dos sites bem mais fácil.
Quais são os benefícios do uso de CSS?
CSS é uma revolução no mundo do web design. Os benefícios concretos do uso de CSS incluem:
-
controle do layout de vários documentos a partir de uma simples folha de estilos;
-
maior precisão no controle do layout;
-
aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, etc.);
-
emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento.
Fonte: http://www.pt-br.html.net/tutorials/css/lesson1.asp
Sintaxe:
seletor {propriedade: valor;}
Exemplo:
body {color:black;}
Mudará a cor do texto do body para preto.
O que mostra que quando aplicamos CSS ao HTML, o CSS mudará (sobrescreverá) o comportamento do HTML.
Existem as classes e os IDs. Veja como os criamos:
.nome_classe {
margin-left: 1.0in;
}
#nome_id {
margin-left: 1.0in;
}
Classe inicia com ponto (.).
ID inicia com cerquilha (#).
Separando em Camadas com CSS
Uma das funções importantes do CSS é permitir que separemos em camadas o conteúdo do site (HTML) da formatação (CSS) e também o JavaScript em outra camada.
Cada camada em arquivo separado:
conteúdo - .html
formatação - .css
JavaScript - .js
Suprindo Deficiências do HTML
Outra função muito importante do CSS é suprir algumas deficiências do HTML. Por exemplo, o HTML com seus recursos não permite mudar a cor de fundo de uma caixa de texto de um input de formulário e o CSS consegue. Assim vários outros recursos permitidos pelo CSS, como mudar a cor de fundo de uma textarea, de um botão, cor das bordas de uma caixa de texto, cor ao mover o mouse, etc.
Exemplo de CSS que altera o comportamento do input e do select e também quando perde o foco:
input {
background-color: #6D5B52;
border-style: 1px solid;
border-color: black gray gray black;
color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
input:focus {
background-color: #6D5B52;
border-style: 1px solid;
border-color: red red red red;
color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
select {
background-color: #6D5B52;
font:12px verdana, arial, helvetica, sans-serif;
color:white;
}
select:focus {
background-color: #3C1103;
font:12px verdana, arial, helvetica, sans-serif;
color:white;
}Quando no CSS usamos o nome de controles de formulários, o seu comportamento e formatação será substituído pelo comportamento adicionado no CSS (que prevalecerá).
Comments fornecido por CComment