• slide2 escola
  • bg escola

Últimos Artigos

Recursividade: Que Geringonça é essa?

Matheus Rocha

  Se você trabalha com Desenvolvimento de Softwares ou até mesmo Websites, provavelment...

VER ARTIGO

Você sabe o que são Funções?

Matheus Rocha

Funções são rotinas especializadas em uma ou várias tarefas, e retornam uma saída, de acordo ...

VER ARTIGO

Fundamentos para Design de E-mail Marketing

Leonardo Volpiano

Existem alguns conceitos que são importante seguirmos para preservar a qualidade de quem está...

VER ARTIGO

Position relative, absolute ou fixed?

Matheus Rocha

  Olá, pessoal! Esse é o começo de uma série de artigos onde abordaremos de forma simpl...

VER ARTIGO

Começando com PHP - Formulário sem Refresh

Matheus Rocha

No mundo do Desenvolvimento Web, podemos notar uma divisão clara entre as a finalidade das li...

VER ARTIGO

O que é Flat Design?

Leonardo Volpiano

Flat Design é uma tendência recente, que defende interfaces simples e claros, entre outras ca...

VER ARTIGO

Web Série - Como construir um bom Layout [1]

Matheus Rocha

  Nesta série de artigos, abordaremos conceitos de design voltados para a web e ao fim...

VER ARTIGO

Você sabe o que é área-útil em um site?

Matheus Rocha

De maneira genérica, a área-útil de um site é a área apta à receber interação do usuário. Todo...

VER ARTIGO

Começando com UX - O que é UX?

Matheus Rocha

O que é UX? O termo User Experience foi criado por Donald Norman no início de 1990, quando e...

VER ARTIGO

Primeiros passos com HTML + CSS

Matheus Rocha

  Aqui, trataremos partindo do princípio de que você já conhece as noções básicas de ht...

VER ARTIGO

Html para iniciantes + Workflow - Configurand…

Matheus Rocha

Durante minha jornada como Desenvolvedor Web, tive oportunidade de experimentar, testar, gost...

VER ARTIGO

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”.