Primeiros passos com HTML + CSS

Escrito por Matheus Rocha.

aprenda css na escola web



 

Aqui, trataremos partindo do princípio de que você já conhece as noções básicas de html ou pelo menos já tenha codificado seu primeiro “Hello World”. Para incorporar nosso CSS ao nosso arquivo HTML é necessário utilizar a tag <link> que é exatamente um dos tipos de tags citadas neste artigo - elas não contém “tag de fechamento”.

O atributo href da tag link é responsável por representar o caminho onde o arquivo à ser importado, está salvo. Essas importações podem ser tanto externas (vir de oturo servidor) quanto internas, solicitando um diretório (pasta) do próprio site e por sua vez, o arquivo. No caso em questão, o meu.css está em uma pasta chamada css no mesmo local que se encontra o documento HTML.

Sem mais delongas, vamos lá:

No nosso arquivo html temos:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="stylesheet" href="/css/meu.css">
  5. <title>Título do meu site</title>
  6. </head>
  7. <body>
  8. <h1 id=”nome” class=”titulos-home”>João Cléber Inácio Não sei das Quantas<h1><BR>
  9. <h2 id=”cidade” class=”titulos-home”>Goiânia<h1><BR>
  10. <h3 id=”estado” class=”titulos-home”>Goiás<h1><BR>
  11. </body>
  12. </html>

 

O atributo stylesheet que indica que este documento incorporado se trata de uma folha de estilos (css). As tags <BR>’s indicam uma quebra de linha. Não aprofundarei nas variações desta tag pois não é o foco. Saiba que existem quebras-de-linha de diferentes tamanhos em diferentes versões do HTML nativo no qual estamos codificando.

No nosso arquivo css temos:

  1. .titulos-home{
  2. color:#444;
  3. }
  4. #nome{
  5. text-decoration:underline;
  6. }
  7. #cidade{
  8. font-weight:bold;
  9. }
  10. #estado{
  11. text-transform:uppercase;
  12. }

 

Desta forma, nosso documento html já começa a tomar forma

[.](pontos) representam os atributos “class” das tags h1, h2 e h3 do nosso documento

[#](quadrados ou hashtags) representam os atributos “id” de cada elemento. Cada id deverá ser único na página. Elementos com ids duplicados na mesma página, podem acarretar problemas e irão.

[;]ponto-e-vírgula) Indicam o fim de cada instrução css. Provavelmente ao fim de algum projeto, por mais simples que seja, seu arquivo .css terá inúmeras linhas com estas.

  1. font-weight:bold;

Esta propriedade font-weight é quem define a largura das letras do elemento. O valor setado foi bold e significa que nossas letras agora, serão em negrito.

e assim se segue para cada uma das declarações..

Existem inúmeras propriedades css e inúmeros tipos de valor, porém muitos se assemelham e são reutilizados quando utilizarmos pseudo-classes e (ou) propriedades compartilhadas. Todo desenvolvedor web que se preze, procura aprender ao máximo as tags HTML e o seu funcionamento. Cada Tag possui um valor-padrão para cada propriedade representada no css. Quando definimos uma, sobrescrevemos a “padrão” do elemento.

 

Atenção na hora de codificar

 

Procure manter seu código organizado. Imagine que alguém que provávelmente nunca conheceu você e nem conhecerá, dará manutenção em seu código. Ou melhor, se imagine nesta condição do segundo-indivíduo, onde você terá que lidar com instruções que foram criadas por outra pessoa, com outra mente e provavelmente até em outro “tempo”.