CSS pela W3schools (Parte 1) - Uma introdução
Estive na w3schools vendo algumas especificações, a forma correta de fazer as coisas e lendo tudo de novo como quem não soubesse nada. Por isso surgiu a idéia de escrever, traduzir em forma de resumo, o que a w3schools ensina em termos CSS básico.
Parte 3: Como criar/aplicar?
A criação/aplicação dos estilos nos elementos HTML é feito de três formas:
Na maioria das vezes o que utiliza é um arquivo separado com todos os estilos, tipo "estilo.css", onde incluímos ou chamamos para as páginas que quisermos utilizar alguma formatação. Esta forma garante maior flexibilidade na alteração do estilo no arquivo, sem que seja necessário abrirmos arquivo a arquivo para alterar um estilo ou tag para alterar.
Ainda se pensarmos na própria organização do código é mais simples esta opção. As outras duas opções são válidas e utilizáveis, pois por vezes apenas queremos aplicar o estilo a dois ou três elementos, não necessitando de chamar um arquivo com cinco ou dez linhas de formatação.
Onde o href indica o caminho e o arquivo que contém as formatações. Muito mais simples torna-se ainda se este estiver num cabeçalho de uma página baseado em "Includes", evitando a repetição ou várias chamadas. Eventualmente podemos ainda chamar vários arquivos diferentes ficando a sintaxe da seguinte forma:
No próximo tópico vamos ver a junção destes três originando no que chamamos de efeito cascata.
- Através de um arquivo externo à página;
- Bloco separado, mas dentro da mesma página;
- "Inline" diretamente no elemento HTML.
Na maioria das vezes o que utiliza é um arquivo separado com todos os estilos, tipo "estilo.css", onde incluímos ou chamamos para as páginas que quisermos utilizar alguma formatação. Esta forma garante maior flexibilidade na alteração do estilo no arquivo, sem que seja necessário abrirmos arquivo a arquivo para alterar um estilo ou tag para alterar.
Ainda se pensarmos na própria organização do código é mais simples esta opção. As outras duas opções são válidas e utilizáveis, pois por vezes apenas queremos aplicar o estilo a dois ou três elementos, não necessitando de chamar um arquivo com cinco ou dez linhas de formatação.
1. Arquivo externo
Para aplicar CSS utilizando um arquivo externo, utilizamos a seguinte sintaxe:
<head>
<link rel="stylesheet" type="text/css"
href="estilo.css" />
</head>
<link rel="stylesheet" type="text/css"
href="estilo.css" />
</head>
Onde o href indica o caminho e o arquivo que contém as formatações. Muito mais simples torna-se ainda se este estiver num cabeçalho de uma página baseado em "Includes", evitando a repetição ou várias chamadas. Eventualmente podemos ainda chamar vários arquivos diferentes ficando a sintaxe da seguinte forma:
<head>
<link rel="stylesheet" type="text/css" href="estilo_1.css" />
<link rel="stylesheet" type="text/css" href="estilo_2.css" />
<link rel="stylesheet" type="text/css" href="estilo_3.css" />
</head>
<link rel="stylesheet" type="text/css" href="estilo_1.css" />
<link rel="stylesheet" type="text/css" href="estilo_2.css" />
<link rel="stylesheet" type="text/css" href="estilo_3.css" />
</head>
2. Na mesma página
A aplicação da mesma página consiste em utilizar a tag HTML <b><style type="text/css"></b> e o código tal como se estivesse num arquivo separado. Vejamos um exemplo:
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
3. Inline
Finalmente temos esta forma simples utilizada diretamente nas tags HTML, seguindo esta sintaxe:
<p style="margin-left: 20px">CSS em ação</p>
No próximo tópico vamos ver a junção destes três originando no que chamamos de efeito cascata.