[CSS] Como criar estilos?

[skin]

Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe:

elemento {
 atributo1: valor;
 atributo2: valor
 ...
}

Elemento - descreve o elemento de design ao qual o estilo será aplicado. A mesma tag HTML mas sem os sinais de maior e menor. Essa parte da regra é às vezes chamadas de seletor.

Atributo - o aspecto específico do elemento que você quer usar como estilo. Deve ser um nome de atributo CSS válido, como o atributo font-size.

Valor - a configuração aplicada ao atributo. Deve ser uma configuração válida para o atributo em questão , como 20pt (20 pontos) para font-size.

Atributo:valor - a parte declaração da regra. Você pode atribuir múltiplas declarações se desejar separá-los com ponto-e-vírgula (;). Não coloque um ponto-e-vírgula depois da última declaração.

Para entender melhor, eis uma regra CSS que especifica que todos os títulos de nível 1 (tags <h1>) sejam exibidos em uma fonte de 36 pontos:

h1 {
 font-size: 36pt
}

Aqui está um exemplo de regra que diz que todos os títulos de nível 2 (tags <h2>) devem ter tamanho de 24 pontos e cor azul;

h2 {
 font-size: 24pt;
 color: blue
}

Você pode inserir quebras de linha e espaços em branco dentro da regra como quiser. Assim, é possível ver mais facilmente todas as declarações e certificar-se de que colocou todos os sinais de ponto-e-vírgula e colchetes nos lugares corretos. Por exemplo, aqui está uma regra que diz que os parágrafos aparecerão em fonte Times, 12 pontos, azul e recuados meia polegada a partir da margem esquerda da página:

p {
 font-family: Times;
 font-size: 12pt;
 color: blue;
 margin-left: 0.5in
}

Note como é fácil aplicar todas as declarações ao elemento parágrafo (p) e como cada declaração, exceto a última, é seguida pelo caracter de ponto-e-vírgula exigido.

Fonte:Supertrafego

[joninho]

nao te esqueças que para criar um estilo, é preciso ter um "." antes.. por exemplo:

.joninho{
  color: #333333;
  font-size: 13pt;
  font-family: Times
}

[Gurzi]

tipo eu fiz um ficheiro css à parte com isto .tiago {font-family: verdana}

agora dentro do meu ficheiro html faço

<link ref="stylesheet" type="text/css" href="mystyle.css"/>

e agora se quiser escrever "ola malta" com o .tiago como faço ?

[QuickFire]

É simples 🙂

Para isso basta fazeres <div class="tiago">ola malta</div>

Se queres que toda a página seja escrita dessa forma (font-family: verdana) também é facil 🙂 Adicionas na mystyle.css

body {

font-family: Verdana;

}

E assim não precisas de estar a fazer o div.

[pedrotuga]

Epa... nao leves a mal... mas está incompleto e tem um erro.

o elemento <p> na sua definição de estilo não precisa de um ponto atrás pois não é uma classe. Semplesmente estás a definir o estilo para um parágrafo.

acho que querias antes fazer uma coisa do tipo

p.estilo1{

...

}

para depois usar qq coisa assim

<p class="estilo1" ></p>

Devias explicar bem como e onde se podem usar classes, divs, e onde é que se devem usar classes ou ids, quando é que se deve definir uma classe genéric ou quando é que se deve fecha-la a um tipo de elemento etc etc...

eu digo isto porque andei a ler tutoriais incompletos e depois dei-me mal, havia coisas importantes que eu n sabia e que me lixavam a vida a toda a hora. Só topei a ideia toda do css qdo a minha namorada me explicou verbalmente e com toda a calma, ela é que percebe dessas cenas de estilos, eu n pesco nada disso, lol.

[joninho]

É simples 🙂

Para isso basta fazeres <div class="tiago">ola malta</div>

Se queres que toda a página seja escrita dessa forma (font-family: verdana) também é facil 🙂 Adicionas na mystyle.css

body {

font-family: Verdana;

}

E assim não precisas de estar a fazer o div.

ou entao <span class="tiago">HELLO!!</span>

[nsalvador]

Epá, desculpem lá estar a desenterrar isto! :$

Mas se queres escrever "olá malta" ou "hello world" só e apenas não precisas de por dentro d um div! div é uma divisão!

se quiseres criar um divisão que use sempre esse tipo de letra aí sim!

mas mesmo usando o div convêm por o texto dentro de um paragráfo <p class=tiago>olá malta</p> ou d um headr <h1>, <h2> .. <h6>

Acho eu! 😛

Abraços!

[joaoqalves]

Epá, desculpem lá estar a desenterrar isto! :$

Mas se queres escrever "olá malta" ou "hello world" só e apenas não precisas de por dentro d um div! div é uma divisão!

se quiseres criar um divisão que use sempre esse tipo de letra aí sim!

mas mesmo usando o div convêm por o texto dentro de um paragráfo <p class=tiago>olá malta</p> ou d um headr <h1>, <h2> .. <h6>

Acho eu! 😉

Abraços!

Tens alguma razão, nsalvador. Btw, eu quando quero escrever algo que não é nem parágrafo nem um H(x), uso a tag <label> 😉