Scroll Top

Aprenda tudo que você precisa para criar o seu negócio na internet.  São 30 vídeos aulas totalmente gratuitas. Basta se cadastrar em um de nossos formulário.

Tutoriais

CSS no HTML – Métodos de aplicação

CSS no HTML

CSS no HTML –  Métodos de Aplicação.  

CSS no HTML  de sites é muito simples deste que se conheça os principais métodos de aplicação. Vejamos agora como se aplica estes método um por um de forma prática e bem simples usando CSS no HTML.

Método 1: In-line (o atributo style)

Uma maneira de aplicar CSS no HTML é pelo uso do atributo style do HTML. Tomando como base o exemplo mostrado anteriormente a cor vermelha para o fundo da página pode ser aplicada conforme mostrado a seguir:

 

 

<html>
<head>
<title>Exemplo</title>
</head>
<body style=”background-color: #FF0000;”>
<p>Esta é uma página com fundo vermelho</p>
</body>
</html>

Veja imagem:

atributo style

 

 

Método 2: Interno (a tag style)

Uma outra maneira de aplicar CSS no HTML é pelo uso da tag <style> do HTML. Como mostrado a seguir:

<html>
<head>
<title>Exemplo</title>
<style type=”text/css”>
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Esta é uma página com fundo vermelho</p>
</body>
</html>

Salve o arquivo e rode no seu navegador e aparecerá a seguinte imagem:

CSS no HTML

 

Veja que é praticamente a mesma imagem do Modelo1, o que mudou foi apenas o código HTML.

 

Método 3: Externo (link para uma folha de estilos)

O método mais recomendado é o de lincar para uma folha de estilos externa. Usaremos este método nos exemplos deste tutorial. Uma folha de estilos externa é um simples arquivo de texto com a extensão .css. Tal como com qualquer outro tipo de arquivo e você pode colocar uma folha de estilos tanto no servidor de sua hospedagem  como no servidor local do seu disco rígido.

Vamos supor, por exemplo, que sua folha de estilos tenha sido nomeada de estilo.css e está localizada no diretório estilo (o que não é necessário, colocar em pasta separada do arquivo HTML). Tal situação está mostrada a seguir:

O que você tem a fazer é criar um link no documento HTML salvo no arquivo (índex.html) para a folha de estilos (estilo.css). O link é criado em uma simples linha de código HTML como mostrado a seguir:

<link rel=”stylesheet” type=”text/css” href=”c:\~documentos~/estilo.css” />

Note que o caminho para a folha de estilos é indicado no atributo (href)  e se você observar, verá que o arquivo foi salvo no disco rígido, diretório c:, pasta documentos e arquivo estilo.css. Mas o ideal é você salvar dentro da pasta do seu site, junto com o arquivo index.html, na pasta indicada do seu servidor.


Esta linha de código deve ser inserida na seção header do documento HTML, isto é, entre as tags <head> e </head>. Conforme mostrado abaixo:

<html>
<head>
<title>Meu documento</title>
<link rel=”stylesheet” type=”text/css” href=”style/style.css” />
</head>
<body>
</html>

Este link informa ao navegador para usar o arquivo CSS na renderização e apresentação do layout do documento HTML. 

A coisa realmente inteligente disto é que vários documentos HTML podem lincar para uma mesma folha de estilos. Em outras palavras isto significa que um simples arquivo será capaz de controlar a apresentação de muitos documentos HTML. Esta técnica pode economizar uma grande quantidade de trabalho. Se por exemplo, você quiser trocar a cor do fundo de um site com 100 páginas, a folha de estilos evita que você edite manualmente uma a uma as páginas para fazer a mudança nos 100 documentos HTML. Usando CSS no HTML a mudança se fará em uns poucos segundos trocando a cor em uma folha de estilos central.


VAMOS PRATICAR!


Abra o bloco de notas NotePade+ + (ou equivalente em outro sistema operacional) e crie dois arquivos — um arquivo HTML  (index.html) e um arquivo CSS (estilo.css) — com os seguintes conteúdos:

Salve os dois arquivos na mesma pasta, de predeferência com o nome do seu site e dentro do seu servidor local, caso você ainda não tenha um servidor local, pode salvar na sua área de trabalho para ficar mais fácil. Lembre-se de salvar os arquivos com a extensão apropriada (“.css” e “.html”)

Coloque dentro do index.html o seguinte código:

<html>
<head>
<title>Meu documento</title>
<link rel=”stylesheet” type=”text/css” href=”estilo.css” />
</head>
<body>
<h1>Minha primeira folha de estilos</h1>
</body>
</html>

Agora coloque dentro do aquivo estilo.css o seguinte código:

body {
background-color: #FF0000;
}

Salve os dois arquivos, e abra index.html no seu navegador e veja se abre uma página com o fundo vermelho:

CSS no HTML

Parabéns! Você construiu sua primeira folha de estilos.

Está Gostando do Artigo?

Se inscreva em nossa lista e receba 30 vídeos aulas grátis, ensinando como criar o seu negócio na internet a partir do zero.

| Website

Sou blogueiro por que gosto de ler e escrever. Criei este blog para te ajudar a criar o seu negócio na internet e ter um novo estilo de vida.

  • I just want to tell you that I am new to blogging and honestly loved your web-site. Very likely I’m want to bookmark your blog post . You absolutely have wonderful well written articles. Thanks a lot for sharing with us your web page.

    Tradução:

    Eu só quero te dizer que eu sou novo em blogs e honestamente amava seu web-site. É muito provável que eu estou deseja marcar seu blog. Você absolutamente maravilhosos artigos bem escritos. Muito obrigado por compartilhar conosco sua página web.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.
error: Este conteúdo está protegido ! Se precisar de alguma coisa envie mensagem pelo formulário de contato.