CSS – O que é?

CSS (Cascading Style Sheet) são folhas de estilo em cascata.

Pra que servem?

Servem para definir um estilo para o seu documento Web (HTML, XHTLM, por exemplo). Ao invez de você ter que toda hora definir dentro da tag usada os atributos desejados, basta fazer isso uma vez pelo CSS.

Ex.: Se você quer que toda a tag <p> tenha a fonte de cor azul, Verdana e tamanho 12px. Basta configurar ela no CSS dessa maneira:

p {
font: 12px Verdana;
color: blue;
}

E assim todas as tag <p> terão essa mesma característica. Caso você não queira que isso se aplique a todas mas sim em apenas algumas tag <p>, você pode definir uma classe com tais características e depois dentro da tag chamar essa classe.

Ex.:

.minhaclasse {
font: 12px Verdana;
color: blue;
} repare que para definir uma classe é necessário começar com um ponto.

e na tag:

<p class=”minhaclasse“> Meu parágrafo aqui </p>

Como que eu uso o CSS?

Há duas maneiras de aplicar uma folha de estilo em seu documento, uma é definir na própria página, ou chamar um arquivo externo de extensão .css. A segunda opção posibilita muito mais flexibilidade, devido a que você não irá precisar mudar os estilos página por páginas, caso venha querer mudar a “cara” do seu documento, e sim só alterar uma vez o próprio arquivo .css.

Sintaxe:

A sintaxe do CSS é muito simples. Primeiro coloca o nome da tag que queira definir o estilo abra “{” coloca os atributos e depois fecha “}”.

Os nomes das classes devem ser iniciados com um “.” e dos ID com “#“.

Ex.:

body {
background: black;
}

.minhaclasse {
color: #FF0000;
}

#meuDiv {
width: 100px;
height: 200px;
}

mais aqui

A diferença primordial entre class e id, é que a mesma classe você usa mais de uma vez em tags diferentes, enquanto o id é usado uma única vez – por uma <div> por exempo – pois o nome declarado no id serve para identificar aquela tag (exclusiva), como era feito pelo atributo name.

Definindo o estilo pela própria página:

Se você não ver porquê criar um arquivo externo ou que só vai precisar usá-lo em uma página, basta colocar o código do CSS dentro da tag <style> que por sua vez deve ficar dentro da tag <head> passando o atributo type como text/css.

Ex.:

<html>
<head>
<title>Meu Título</title>
<style type=”text/css”>
<!–
.minhaclasse {
font: 12px Verdana;
color: blue;
}
–>
</style>
</head>
<body>
<p class=”minhaclasse“> Meu parágrafo aqui </p>
</body>
</html>

Repare que o CSS propriamente dito vem dentro de um comentário ( <!– –> ), isso acontece para evitar bugs de alguns browser antigos, mas será ignorados pelos browsers mais novos.

Definindo o estilo através de um arquivo externo:

Pode-se chamar um arquivo externo de duas maneiras, uma já utrapassada e pouco usada e a mais semânticamente correta usando a tag <link> – tag na qual adiciona informações externas na página.

Primeira:

<style type=”text/css”>
<!–
@import: url(arquivo.css);
–>
</style>

Segunda, e recomendada:

<link rel=”stylesheet” href=”style.css” type=”text/css”/>

Para entender um pouco mais do porquê de tanto atributos vamos analisar um-por-um :

href: igual ao da tag <a>, define o caminho.

rel: vem do ingles relationship (relacionamento), com o atual arquivo especificado no href.

A tag <link> também deverá estar contida na tag <head>.

Alguns dos atributos mais utilizados:

background: cor; /* cor do fundo da página */
color: cor; /* cor da fonte */
font: familia; /* ex.: Verdana, Arial, Tahoma */
margin: top right bottom left; /* margin e os sentidos */
padding: top right bottom left; /* espaçamento dentro e os sentidos */
width: valor /* largura */
height: valor /* altura */
text-align: valor /* alinhamento do texto – center, left, right, justify */
border: largura tipo cor /* largura, tipo (solid, dotted, dashed), cor */

mais sobre:

Maujor.com
Maujor.com Tutorial
W3.org
W3.org Use Link
W3schools.com
W3schools.com examples
Wikipedia.org

One thought on “CSS – O que é?

  1. Pingback: Rogério Lino

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s