Ajuda:Tutorial/CSS

	Outros projetos Wikimedia também contêm material sobre este tema:
	Artigos na Wikipedia

	Guia de edição
	Como criar uma notícia
	Formatar notícias
	Ligar páginas a outros Wikinotícias
	Ligar notícias a projetos relacionados
	Ligar notícias a páginas externas
	Como usar imagens
	Categorizar
	Fazer notas de rodapé
	Redirecionar páginas
	Usar predefinições
	Usar tabelas
	Usar fórmulas matemáticas
	Renomear uma página
	Reverter edições
	Fundir páginas
	Assinar mensagens
	HTML
	CSS
	Funções sintáticas
	Palavras mágicas
	Javascript
	Usar robôs/bots
	Outros guias
	Livro de estilo
	Dicas e truques
	Guia de eliminação
	FAQ de edição

CSS
(inglês: Cascading Style Sheets)

permite a formatação de uma página. O seu principal benefício é permitir criar, em blocos de código diferentes, a separação entre o formato e o conteúdo de um documento.

Assim, se o HTML descreve o conteúdo de um documento, o CSS configura e formata o estilo visual do documento. O CSS deve ser usada, sempre que possível, para a formatação de conteúdo não-tabular.

Uso

Você pode usar o estilo CSS em elementos HTML em seu código, como faria na marcação HTML normal.

Por exemplo, o elemento <div> com uma borda verde e seu conteúdo destinado para a direita ficaria como

<div style="float:right; border:thin solid green;">
Aqui um pequeno parágrafo que<br />
contém um elemento "div"<br />
o deixando na direita.
</div>

Aqui um pequeno parágrafo que
contém um elemento "div"
o deixando na direita.

que produziria a caixa à direita. Alguns elementos do wikitexto permitem inserir estilos CSS diretamente neles. Um exemplo é a sintaxe da tabela:

{| style="estilo aqui"
|-
|seu conteúdo
|}

Classes

Uma classe é definida por class="abc". Se o estilo for de uso geral, deve ser especificado na página MediaWiki:Common.css, que se aplica a todos os usuários e todos os skins.

Por exemplo, em <span style="display:{{{1|none}}}">abc</span> exibirá "abc" diferente se o parâmetro 1 for definido, se não exibirá diferenças.

Entre uso comuns estar ocultar conteúdos em uma versão e mostrá-los em outra visualização: mobile-only faz com que o conteúdo apareça apenas para celulares e desktop-only apenas para computador.

Pode-se também evitar que o conteúdo seja capturado (se o navegador suportar CSS) usando a classe "noprint":

<div class="noprint">Isso não aparecerá no print.</div>

MediaWiki

O MediaWiki suporta a maioria dos CSS, com exceções como o atributo url(). Havia alguns bugs no suporte a CSS em versões anteriores.

Se você é um usuário registrado, pode escolher usar um tipo de visualização que já é predefinido no MediaWiki ou também pode criar um estilo exclusivo para a sua página.

Vector é o estilo padrão, você pode visualizá-lo em: MediaWiki:Vector.css. As demais skins podem ser visualizadas em suas preferências.

Wikinotícias

Afeta a visualização na versão desktop: MediaWiki:Common.css
Afeta a visualizações na versão móvel: MediaWiki:Mobile.css
Afeta a visualização por skin: MediaWiki:Vector.css, MediaWiki:Monobook.css, etc.
Afeta a visualização por grupos de usuários: MediaWiki:Group-user.css, MediaWiki:Group-autoconfirmed.css, etc.
Afeta a visualização para fins especializados: MediaWiki:Print.css, MediaWiki:Noscript.css, MediaWiki:Filepage.css
Para os gadgets existentes consulte Especial:Gadgets.

Nota: A edição é restrita a administradores de interface

Para usuário

Afeta a visualização global do usuário: meta:Special:MyPage/global.css
Afeta a visualização local do usuário: Special:MyPage/common.css
Afeta a visualizações local por skin: Special:MyPage/vector.css ou Special:MyPage/skin.css para sua skin atual.

Exemplos

Os títulos das seções usam o seguinte CSS padrão:

Wiki	HTML	Estilo
`= Heading =`	<h1/>	color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.8em; font-family: 'Linux Libertine',Georgia,Times,serif; margin-top: 1em; margin-bottom: 0.25em; line-height: 1.3; padding: 0; border-bottom: 1px solid #AAAAAA;
`== Título ==`	<h2/>	color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.5em; font-family: 'Linux Libertine',Georgia,Times,serif; margin-top: 1em; margin-bottom: 0.25em; line-height: 1.3; padding: 0; border-bottom: 1px solid #AAAAAA;
`=== Título ===`	<h3/>	color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.2em; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;
`==== Título ====`	<h4/>	color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;
`===== Título =====`	<h5/>	color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;
`====== Título ======`	<h6/>	color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;

Usos comuns de classes em projetos da Wikimedia Foundation incluem:

firstHeading – classe da tag de título no topo de cada página;
contentSub – o nome da wiki imediatamente abaixo do título;
content – espaço que contém o conteúdo da página;
p-logo – id para o logotipo, canto superior esquerdo da desktop;
p-navigation – id para os links de navegação à esquerda da página na desktop;
footer – rodapé.

Ver também