[Página prévia] [Próxima página] [Seção página de conteúdo]

Implementando os Estilos

Os estilos podem ser inseridos nos documentos de várias maneiras diferentes:

  1. por meio de um link direcionado para um arquivo de style sheet em separado, funcionando para uma ou mais páginas web

    Este é o método que eu recomendo, porque ele permite usar um único style sheet para várias páginas, talvez até para um site inteiro, o que é muito mais eficiente. (Isto pode não funcionar se você tende a variar consideravelmente a formatação de cada página, mas geralmente esta não é uma boa idéia em termos de comunicação efetiva.) Este método também separa inteiramente as especificações do style sheet do conteúdo da página, o que elimina qualquer chance de browsers não compatíveis com CSS confundirem as informações do style com o conteúdo da página.

    Neste caso, você define os estilos num arquivo em separado com a extensão .css, e faz uma referência a ele através de uma tag de link que se posiciona entre os tags de head de cada arquivo HTML que irá utilizá-lo:

    Exemplo

    <html>
    <head>
    <link rel=STYLESHEET href="styles/stylesheets.css" type="text/css">
    <title>...</title>
    </head>
    <body>...

    Observe o atributo "type=text/css", também usado na tag <style> logo abaixo, para identificar o arquivo referido como cascading style sheet. (A última versão do Internet Explorer não precisa disso, mas é mais prudente colocar porque outros browsers pedem quando eles dão suporte para style sheets.)

  2. por meio de uma inserção de um style sheet numa única página web

    Neste caso, você define os styles dentro de uma tag de style que se posiciona entre a tag <html> e a tag <body>:

    Exemplo

    <html>

    <head>

    <style type="text/css">
    <!--
    P { font-size: 10pt; font-family: "Verdana, Arial, Sans-Serif"; color: #000066 }
    H1 { font-size: 16pt; font-family: "Impact, Arial, Sans-Serif"; color: #990000 }
    -->
    </style>

    ...</head>
    <body>...

    Observe que em concreto as especificações do estilo (que eu explicarei nas páginas seguintes) são inseridas dentro de uma tag de comentário -- isto é para assegurar que os browsers que não suportam CSS não interpretarão estas linhas como conteúdo a ser mostrado.

  3. pelo acréscimo de atributos de estilo inline em algumas tags como <p>, <div>, ou <span>

    Neste caso você especifica um estilo para um único bloco de texto, ou usa a tag <span> para especificar o estilo para uma palavra ou frase:

    Exemplo

    <div style="margin-left: 0.5in; font-size: 10pt">
    Este deve ser um bloco indentado com algum
    <span style="font-weight: bold; background: #FFFF00"> texto selecionado</span>
    dentro dele
    </div>

[Página prévia] [Próxima página] [Seção página de conteúdo]