SdevLab – Tutorial | CSS folha de estilos

Fala galera!

O tutorial de hoje é a sequência do tutorial anterior, que dava início à uma série de tutorias sobre CSS. Se você já tem uma noção básica não faz diferença a sequência, porém, se você deseja aprender na ordem correta, visite esta página!

Boa leitura!

ATUALIZAÇÃO (14/08/2015): Este post foi escrito com base nos tutoriais do W3C para CSS (se não me engano, esta versão é a primeira que tinha no W3C (CSS 1), ou seja, veio antes do CSS 2.1). O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para o tutorial de CSS 2.1 ou CSS 3, logo não é mais válido. Vale lembrar que o conteúdo ainda é válido, só não é a versão mais nova!

CSS folha de estilos

Estilo Inline

Os estilos “inline” são os estilos que vão dentro dos elementos html. Colocar um estilo diretamente em um elemento pode ajudar a resolver problemas mas não de preferência a este tipo, porque para cada tag a ser estilizada, uma regra deverá ser adicionada dentro da mesma, como no exemplo abaixo:

<html>
   <head>
      <title>Teste 1</title>
   </head>
   <body>
      <p style="border-width: 1; border: solid; text-align: center">Exemplo de estilo inline.</p>
   </body>
</html>

Estilo Incorporado

Esta modalidade de inserção de estilo é um pouco mais prática, visto que uma vez definida uma regra para um parágrafo por exemplo, todos os parágrafos do arquivo html estarão sujeitos à este estilo, veja o exemplo:

<html>
   <head>
      <title>Teste 2</title>
      <style type="text/css">
         h1 {border-width: 1; border: solid; text-align: center}
         p {text-align: center}
      </style>
   </head>
   <body>
      <h1>Título</h1>
      <p>Paragrafo 1.</p>
      <p>Paragrafo 2.</p>
   </body>
</html>

Estilos Anexados

Para finalizar, os estilos anexados são os mais práticos porque uma vez escrita as regras elas podem ser aplicadas à qualquer página do site sem a necessidade de ter cada uma dentro das tags <head> e </head>. Para isto funcionar, basta adicionar um link para a folha de estilos como no exemplo abaixo:

<html>
   <head>
      <title>Teste 3</title>
      <link rel="stylesheet" href="estilo.css" type="text/css">
   </head>
   <body>
      <p>Paragrafo.</p>
   </body>
</html>

Salve o código acima em qualquer diretório de seu computador.

p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}

Salve agora o trecho acima como estilo.css dentro do mesmo diretório que você utilizou para salvar o trecho html.

Apartir de agora, todos os tutoriais sobre css podem ser testados usando as técnicas acima.

Até o próximo tutorial!
🙂

Os códigos deste post estão disponíveis em:
https://github.com/jonasvm/sdevlab-cursos/tree/master/sdevlab-css1
Contribua!

2 comentários sobre “SdevLab – Tutorial | CSS folha de estilos

  1. Pingback: SdevLab – Tutorial | CSS Font | Sanoj's devLab
  2. Pingback: SdevLab – Curso | Aprenda CSS 1 Online | Sanoj's devLab

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s