CSS parte 1 – Sintaxe e regras | Zoom Digital : Reviews de Smartphones, Tutoriais, Notícias

CSS parte 1 – Sintaxe e regras

Por Philipe Cardoso
Categoria: Tecnologia
set 17th, 2008
3 Comments
372 Views

E ae pessoal, sou o Juan Santos, irei postar artigos referentes a CSS aqui no Zoom Digital.

Bom vamos lá, vou começar do começo falando sobre a utilização do CSS, sua sintaxe e algumas regras.

Primeiramente dentro de seu arquivo HTML, mais precisamente entre as tags <HEAD> e </HEAD> poderá ser inserida a seguinte linha para vincular o arquivo CSS ao seu documento:

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

O browser lerá as regras de estilo do arquivo estilo.css, e formatará a página de acordo com elas.

Uma folha de estilo não deve conter nenhuma tag HTML. Devem ser sempre “salvas” com uma extensão .css

A sintaxe CSS é formada por seletor, propriedade e valor da seguinte forma:

seletor { propriedade:valor; }

Seletor: Trata-se do elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID. (por exemplo: <p>, <h1>, <form>, .minhaclasse, #meuid …);

Propriedade: É o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, …).

Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, …)

Abaixo um exemplo para alterar do fundo da página toda, onde o seletor é o BODY, a propriedade é o fundo (BACKGROUND) e o valor é a cor azul (BLUE):

body {
background: blue;
}

Agrupando seletores

É possível também agrupar seletores, caso deseje definir uma mesma cor para um parágrafo e para um link ao invés de digitar duas vezes a mesma coisa, poderá agrupá-los desde que sejam separados por vírgula:

p, a{
font-color: blue;
}

Seletor Classe

As classes podem ser aplicadas para quaisquer elementos HTML, e na folha de estilo serão definidas as regras CSS.

Elas são inseridas nos elementos HTML da seguinte forma:

<div class=”teste”>TEXTO</div>

E no CSS ficam (Observem que deverá ser inserido sempre um ponto “.” antes do nome da classe definida):

.teste{
propriedade: valor;
}

Seletor ID

O seletor ID funciona de forma semelhante ao seletor classe, porém só podem ser definidos uma única vez dentro da página para um único elemento, enquanto as classes podem ser definidas para ilimitados elementos dentro da página.

Eles são inseridas nos elementos HTML da seguinte forma:

<div id=”teste”>TEXTO</div>

E no CSS ficam (Observem que deverá ser inserido sempre uma tralha “#” antes do nome do ID definido):

#teste{
propriedade: valor;
}

Por enquanto é isso, lembrando que os arquivos .css podem ser editados através de qualquer editor de texto, recomendo o Top Style Lite pois além de facilitar a criação, também mostra uma pré-visualização da edição e esta versão é gratuita.

Até a próxima !

About "" Has 2042 Posts

23 anos, Carioca, Criador do Portal Zoom Digital, mantém desde a epoca que possuia formato de blog, Podcaster oficial do Zoom Cast. Amante por todo tipo de tecnologia e formado como técnico de informática.

3 Responses to “CSS parte 1 – Sintaxe e regras”

  1. Cassio Santos disse:

    Continua praticando CSS e estudando futebol não é?

    Seu texto é muito bom. Estou aguardando os próximos!

  2. Daniel disse:

    Gostei do artigo,

    Uma aula introdutório sobre o CSS, muito bom.

    Sobre o Top Style Lite ele é bom mesmo, mas em geral(HTML,Javascript,asp) eu prefiro o notepad++

    Abraços

  3. poxa muito obragado pelo post maravilhoso, estava atras de alguns por ai mas nao chega aos pes desse. muito grato.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *