Philipe Cardoso Com 33 anos de idade, sou um carioca apaixonado por tecnologia e fotografia. Além de ser o criador do Portal Zoom Digital, que preserva sua essência desde os tempos em que era um blog, também sou um verdadeiro entusiasta e amante de todas as formas de tecnologia. Através do Portal, compartilho minha paixão pela tecnologia e trago as últimas novidades e tendências para os leitores. Também sou fascinado pelo mundo da fotografia, explorando o poder das imagens para capturar momentos únicos e transmitir histórias cativantes.

CSS parte 1 – Sintaxe e regras

1 min read

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 !

Philipe Cardoso Com 33 anos de idade, sou um carioca apaixonado por tecnologia e fotografia. Além de ser o criador do Portal Zoom Digital, que preserva sua essência desde os tempos em que era um blog, também sou um verdadeiro entusiasta e amante de todas as formas de tecnologia. Através do Portal, compartilho minha paixão pela tecnologia e trago as últimas novidades e tendências para os leitores. Também sou fascinado pelo mundo da fotografia, explorando o poder das imagens para capturar momentos únicos e transmitir histórias cativantes.

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

  1. 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

Deixe um comentário

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