Você pode aplicar as folhas de estilo em suas páginas através de três maneiras diferentes, que são:

- Folha de estilo interna: com esse tipo de folha estilo, as regras são criadas dentro da tag<head>do documento HTML, mais especificamente dentro da tag <style>. A vantagem desse método é que você pode concentrar, em um único arquivo HTML, a estrutura do documento e as regras de exibição desse conteúdo. Por outro lado, se precisar aplicar uma mesma regra a vários documentos, terá que fazê-lo individualmente em cada arquivo, ou seja, cada arquivo HTML terá que conter o bloco de instruções CSS desejado. Sempre há a opção de copiar e colar, mas ainda assim, será trabalhoso.

Abaixo segue um exemplo de código css interno.

<head>
...
<style type="text/css">
body {
background: #fff;
url(pictures/pic01.gif);
}

H1 {
color: #f00;
}

p {
margin-left: 5px;
padding:5px;
}

</style>
 ...
</head>

Lembrando que as regras devem ser criadas dentro da tag<head>.

- Folha de estilo in-line:com esse modelo de folha você cria suas regras diretamente dentro da tag que está estruturando seu código. Recomendo sua utilização somente em casos muito específicos, pois ela acaba tirando do CSS sua grande vantagem, que é o reaproveitamento das regras para vários documentos.

Exemplo de código CSS inline:

<p style="color: #ffff00; font-size: 16px; text-align: justity; ">

Não é necessário a inserção do atributo type=”text/css”, pois os navegadores já partirão do princípio que quaisquer regras de estilo criadas serão CSS.

- Folha de estilo externa: é a mais usada e, para mim, a melhor, já que isola completamente o código CSS da estrutura do documento. Utilizando a folha de estilo dessa forma você cria um arquivo em formato texto, o salva com a extensão css e o vincula ao seu documento da seguinte forma:

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

O exemplo acima vincula um arquivo chamado "layout.css" ao documento HTML.

Você também pode utilizar mais de um método numa mesma página, ou seja, pode criar uma folha externa vinculada a determinada página e pode, dentro dela, colocar instruções inline.

A folha de estilos externa poderia conter, por exemplo, instruções de formatação como tamanho de texto igual a 20px às tags h1 e, nessa mesma tag, colocar uma instrução inline dizendo que seu texto deve ser azul. O navegador exibiria, nesse caso, o texto de tamanho 20 pixels e na cor azul. Ele percebe que existem regras para serem aplicadas à tag h1 tanto no css externo quanto no inline e as soma. Isso é bastante interessante.
Bem, mas o que aconteceria se as instruções fossem conflitantes? E se a folha de estilos externa contivesse a informação de que o tamanho do texto precisa ter 20 pixels, mas a inline dissesse que essa tag associada deveria ter o tamanho 12 pixels? Em casos como esse o navegador executa as regras em forma de cascata e obedecendo a uma prioridade. Abaixo segue ordem de execução:

1- Configurações do próprio navegador (quando não existe nenhuma regra css associada)
2- Folha de estilo externa
3- Folha de estilo interna
4- Estilo inline

Ou seja, se existirem regras conflitando entre uma folha de estilos externa e uma interna, a interna terá prioridade e irá se sobrepor à regra externa. Se houver um conflito entre uma regra numa folha de estilo interna e uma instrução inline, esta última irá prevalecer. Caso você opte por utilizar mais de uma folha de estilos na mesma página, é importante saber essa ordem de execução. Aliás, essa execução em cascata pode ser muito útil. Imagine uma situação onde 10 parágrafos tenham um mesmo padrão de formatação, como cor, tamanho e fonte, mas apenas um tenha que possuir um alinhamento diferente. Neste caso você pode criar uma regra geral para esses 10 parágrafos em uma folha de estilos externa e criar, apenas na exceção, a regra particular. Nesse caso bastaria inserir o comando para modificar o alinhamento, já que os parâmetros de cor e tamanho seriam recebidos da folha de estilos externa. Parece confuso, mas acompanhando os próximos artigos você verá que é extremamente simples e útil.

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Galaxy Game

As primeiras máquinas de fliperama do mundo a utilizarem moedas, chamadas de Galaxy Game, custavam mais de 20 mil dólares para serem produzidas. Saiba mais sobre elas aqui.

Tomb Raider - O Filme

Considerando todas as adaptações de jogos de videogame para o cinema, a mais bem sucedida foi Lara Croft: Tomb Raider, lançado em 2001 e que faturou 274 milhões de dólares. Ele foi dirigido por Simon West e estrelado pela bela Angelina Jolie.

Mario e seu bigode

O personagem Mario só possui bigode porque quando ele foi criado, em 1981, a resolução de tela dos equipamentos disponíveis não permitia que fosse desenhada uma boca, então os desenvolvedores fizeram o grande bigode para contornar essa limitação tecnológica.

Ábaco

O ábaco é o dispositivo de cálculo mais antigo construído e conhecido pelo homem. Suas formas mais primitivas datam de 400 a.C. e eles foram encontrados na China e na Babilônia. Para saber mais sobre a história dos computadores, clique aqui.

Mario em Donkey Kong

O personagem Mario surgiu pela primeira vez no mundo dos games em um jogo chamado Donkey Kong, lançado em 1981. Mario, que naquela época se chamava Jumpman, não era o personagem principal do jogo, mas ele se tornaria um dos mais famosos personagens do mundo dos games. Saiba mais.