Página dedicada ao conteúdo de CSS.

CASCADING STYLE SHEETS

O CSS é uma linguagem de definição de estilos, que pode ser utilizada para descrever a apresentação de páginas HTML ou documentos XML. Com o uso do CSS podemos criar folhas de estilo que definem como aparecem diferentes elementos, tais como: cabeçalhos, tags, links, caixas etc. As formatações do CSS, geralmente são inseridas em elementos (tags) do HTML. No CSS esses elementos são chamados seletores.

Folhas de Estilo Css

Folha de estilo em cascata é um mecanismo simples para adicionar estilos (p.ex., fontes, cores, espaçamentos) aos documentos Web.

Web Standards

A Web Standards é um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, produzidos pelo W3C e destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos, independentemente dos dispositivos usados ou de suas necessidades especiais

A Vantagem em utilizar o Css

A grande vantagem do uso de CSS é a de separar a marcação HTML, da apresentação do site. Em outras palavras, vale dizer que o HTML destina-se unicamente a estruturar e marcar o conteúdo, ficando por conta das CSS toda a responsabilidade pelo visual do documento.

O HTML marca e estrutura textos, cabeçalhos, parágrafos, links, botões, formulários, imagens e demais elementos da página e CSS define cores, posicionamento na tela, estilos de linhas, bordas e tudo o mais relacionado à apresentação.

A adoção desta técnica resulta em múltiplas vantagens e benefícios que não são conseguidos quando se utiliza o conceito largamente empregado para construção de web sites, baseado no uso de tabelas e de atributos de estilização dentro das tags HTML.

Sintaxe Css

Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será aplicado estilo a um ou mais elementos HTML. Um conjunto de regras CSS forma uma Folha de Estilos. Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo:

seletor { propriedade: valor; }

Seletor: genericamente, é o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, ou etc., e para o qual a regra será válida (por exemplo: < p >,< h1 >, < form >, .minhaclasse, etc...);

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

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

Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves { }. Quando mais de uma propriedade for definida na regra, deve-se usar ponto-e-vírgula para separá-las. O ponto-e-vírgula é facultativo no caso de propriedade única e também após a declaração da última propriedade quando houver mais de uma.

Exemplo:

p {

font-size: 12px; }

body {

color: #000;

background: #fff;

font-weight: bold;

}

Comentários no Código Css

/* este é um comentário*/

p {

font-size: 14px; /* este é outro comentário*/

color: #000;

font-family: Arial, Serif;

}

Agrupamento de Seletores

Os seletores pode ser agrupados e receberem o mesmo estilo.

Exemplo:

h1, h2, h3, h4, h5, h6 {

color: #0f0;

}

Tipos de Css

As folhas de estilo podem ser vinculadas a um documento HTML de três maneiras distintas:

Externas (Importadas ou linkadas);
Internas (Incorporadas);
Inline.

Folhas de Estilos Externas (Importadas ou Linkadas)

Uma folha de estilo é dita externa, quando as regras CSS estão declaradas em um documento a parte do documento HTML. A folha de estilo é um arquivo separado do arquivo html. O arquivo de folha de estilo deve ser gravado com a extensão .css.

Uma folha de estilo externa é ideal para ser aplicada a várias páginas. Com uma folha de estilo externa, você pode mudar a aparência de um site inteiro mudando regras de estilos contidas em um arquivo apenas (o arquivo da folha de estilo).

O arquivo css da folha de estilo externa deverá ser linkado ou importado ao documento HTML, dentro da seção head do documento. A sintaxe geral para linkar uma folha de estilo chamada estilo.css é mostrada a seguir.

<head>

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

</head>

A sintaxe geral para importar uma folha de estilo chamada estilo.css é mostrada a seguir.

<head>

<style type="text/css">

@import url("estilo.css");

</style>

</head>

Folhas de Estilos Incorporadas ou Internas

Uma folha de estilo é dita incorporada ou interna, quando as regras CSS estão declaradas no próprio documento HTML.

Uma folha de estilo incorporada ou interna, é ideal para ser aplicada a uma única página. Com uma folha de estilo incorporada ou interna, você pode mudar a aparência de somente um documento, aquele onde a folha de estilo está incorporada.

As regras de estilo incorporadas e válidas para o documento são declaradas na seção <head> do documento com a tag de estilo <style>, conforme sintaxe mostrada a seguir.

<head>

<style type="text/css">



</style>

</head>

Folhas de Estilos InLine

Uma folha de estilo é dita inline, quando as regras CSS estão declaradas dentro da tag do elemento HTML com uso do atributo style.

Um estilo inline só se aplica a um elemento HTML. Ele perde muitas das vantagens de folhas de estilo pois mistura a apresentação com a marcação. Use este método excepcionalmente, por exemplo: quando quiser aplicar um estilo a uma única ocorrência de um elemento.

A sintaxe para aplicar estilo inline é mostrada a seguir:

<p style="color:#000; margin: 5px;">

Aqui um parágrafo de cor preta e com 5px nas 4 margens.

</p>

Em breve mais postagens.

CSS