Lição 1
Construindo a tua primeira página web
Se conseguir, imagine como era antes da invenção da Internet. Os sites não existiam, e os livros, impressos em papel e firmemente vinculados, foram a sua principal fonte de informação. Foi preciso um esforço considerável - e leitura - para encontrar a informação exata que se estava à procura.
Hoje podemos abrir um navegador da Web, ir para o seu motor de busca de escolha e procurar. Qualquer informação que se possa imaginar recai na ponta dos dedos. E é provável que alguém em algum lugar tenha construído um site com a sua busca exata em mente.
Dentro deste livro, vou mostrar-lhe como construir os seus próprios sites usando as duas linguagens de computador mais dominantes - HTML e CSS.
Antes de começar a aprender a construir sites com HTML e CSS, é importante compreender as diferenças entre os dois idiomas, a sintaxe de cada idioma e algumas terminologias comuns.
O que é HTML & CSS?
HTML, HyperText Markup Language, fornece estrutura de conteúdo e significado, definindo esse conteúdo como, por exemplo, títulos, parágrafos ou imagens. CSS ou Cascading Style Sheets, é um idioma de apresentação criado para modelar a aparência do conteúdo, usando, por exemplo, tipos de letra ou cores.
Os dois idiomas - HTML e CSS - são independentes um do outro e devem permanecer assim. O CSS não deve ser escrito dentro de um documento HTML e vice-versa. Como regra, o HTML representa sempre o conteúdo e o CSS representa sempre a aparência desse conteúdo.
Com esta compreensão da diferença entre HTML e CSS, vamos mergulhar em HTML com mais detalhes.
Compreendendo os termos comuns de HTML
Ao começar o HTML, provavelmente encontrará novos termos, e muitas vezes estranhos. Ao longo do tempo, vai-se tornando mais familiar com todos eles, mas os três termos HTML comuns pelos quais deve começar são elementos, tags e atributos.
Elementos
Elementos são designadores que definem a estrutura e o conteúdo dos objetos dentro de uma página. Alguns dos elementos mais utilizados incluem múltiplos níveis de títulos (identificados como <h1> através de elementos <h6>) e parágrafos (identificados como o elemento <p>); A lista continua a incluir os elementos <a>, <div>, <span>, <strong> e <em>, e muito mais.
Os elementos são identificados pelo uso de suportes de ângulos inferiores e maiores, <>, em torno do nome do elemento.
Assim, um elemento se parecerá com o seguinte:
<a>
Tags
O uso de contornos inferiores e maiores do que em torno de um elemento cria o que é conhecido como uma etiqueta. As tags geralmente ocorrem em pares de tags de abertura e fechamento.
Uma marca de abertura marca o início de um elemento. Consiste num sinal menor < seguido pelo nome de um elemento, e terminando com um sinal maior >, por exemplo, <div>.
Uma marca de fechamento marca o fim de um elemento. Consiste num sinal menor < seguido por uma barra inclinada / e o nome do elemento, terminando com um sinal maior >, por exemplo, </ div>.
O conteúdo que cai entre as tags de abertura e de fechamento é o conteúdo desse elemento. Um link âncora, por exemplo, terá uma tag de abertura de <a> e uma tag de fechamento de </a>. O que cai entre essas duas tags será o conteúdo do link de âncora.
Então, as tags de âncora ficam algo parecido a isto:
<a>...</a>
Atributos
Os atributos são propriedades usadas para fornecer informações adicionais sobre um elemento. Os atributos mais comuns incluem o atributo id, que identifica um elemento, o atributo de classe, que classifica um elemento, o atributo src, que especifica uma fonte para conteúdo incorporável, e o atributo href, que fornece uma referência de hiperlink para um recurso vinculado.
Os atributos são definidos dentro da etiqueta de abertura, após o nome de um elemento. Geralmente, os atributos incluem um nome e um valor. O formato desses atributos consiste no nome do atributo seguido por um sinal de igual e, em seguida, por um valor de atributo cotado. Por exemplo, um elemento <a> que inclua um atributo href pareceria o seguinte:
<a href="http://shayhowe.com/">Shay Howe</a>
O código anterior exibirá o texto "Shay Howe" na página Web e vai conduzir os usuários a http://shayhowe.com/, depois de clicar no texto "Shay Howe". O elemento âncora é declarado com as tags de abertura <a> e fechando </a> abrangendo o texto, e o atributo e valor de referência de hiperlinks são declarados com href = "http://shayhowe.com" na tag de abertura.
Agora que tem conhecimento de quais são os elementos, tags e atributos HTML, vamos dar uma olhada na nossa primeira página web. Se alguma coisa parece nova aqui, sem preocupações - vamos decifrá-lo à medida que avançamos.
Configurando a Estrutura do Documento HTML
Os documentos HTML são documentos de texto simples guardados com uma extensão de arquivo .html em vez de uma extensão de arquivo .txt. Para começar a escrever HTML, precisa primeiro de um editor de texto simples que esteja com vontade de usar. Infelizmente, isso não inclui o Microsoft Word ou Páginas, pois esses são editores de texto rico. Dois dos editores de texto simples mais populares para escrever HTML e CSS são Dreamweaver e Sublime Text. Alternativas gratuitas também incluem Notepad ++ para Windows e TextWrangler para Mac.
Todos os documentos HTML possuem uma estrutura necessária que inclui a seguinte declaração e elementos: <! DOCTYPE html>, <html>, <head> e <body>.
A declaração do tipo de documento, ou <! DOCTYPE html>, informa os navegadores da web que a versão do HTML está sendo usada e é colocada no início do documento HTML. Como usaremos a versão mais recente do HTML, a nossa declaração de tipo de documento é simplesmente <! DOCTYPE html>. Após a declaração do tipo de documento, o elemento <html> significa o início do documento.
Dentro do elemento <html>, o elemento <head> identifica a parte superior do documento, incluindo quaisquer metadados (informações que acompanham a página). O conteúdo dentro do elemento <head> não é exibido na própria página da web. Em vez disso, pode incluir o título do documento (que é exibido na barra de título na janela do navegador), links para qualquer arquivo externo ou qualquer outro metadado benéfico.
Todo o conteúdo visível dentro da página Web entrará no elemento <body>. Uma quebra de uma estrutura de documento HTML típica será parecida a isto:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a web page.</p>
</body>
</html>
O código anterior mostra o documento que começa com a declaração do tipo de documento, <! DOCTYPE html>, seguido diretamente pelo elemento <html>. Dentro do elemento <html> vêm os elementos <head> e <body>. O elemento <head> inclui a codificação de caracteres da página através da tag <meta charset = "utf-8"> e o título do documento através do elemento <title>. O elemento <body> inclui um título através do elemento <h1> e um parágrafo através do elemento <p>. Como o título e o parágrafo estão juntos no elemento <body>, eles estão visíveis na página da Web.
Quando um elemento é colocado dentro de outro elemento, também conhecido como nested, é uma boa ideia ignorar esse elemento para manter a estrutura do documento bem organizada e legível. No código anterior, ambos os elementos <head> e <body> foram juntos e recuados - dentro do elemento <html>. O padrão de recuo para elementos continua à medida que novos elementos são adicionados dentro dos elementos <head> e <body>.
Elementos de fecho automático
No exemplo anterior, o elemento <meta> tinha apenas uma tag e não incluiu uma tag de fecho. Não tenha medo, foi intencional. Nem todos os elementos consistem em abrir e fechar tags. Alguns elementos simplesmente recebem o seu conteúdo ou comportamento de atributos dentro de uma única tag. O elemento <meta> é um desses elementos. O conteúdo do elemento <meta> anterior é atribuído com o uso do atributo e valor do charset. Outros elementos comuns autoclosing (fecho automático) incluem:
<br><img><meta><wbr><embed><input><param><hr><link><source>
A estrutura descrita aqui, fazendo uso dos tipos de documento <! DOCTYPE html> e <html>, <head> e <body>, é bastante comum. Nós queremos manter essa estrutura de documentos à mão, pois vai ser utilizada frequentemente enquanto criamos novos documentos HTML.
Validação de código
Por mais cuidado que se tenha quando escrevemos o nosso código, inevitavelmente cometemos erros. Felizmente, ao escrever HTML e CSS, temos validadores para verificar o nosso trabalho. O W3C construiu validadores HTML e CSS que irão verificar o código de erros. A validação do nosso código não só ajuda a renderizar corretamente em todos os navegadores, mas também nos ensina as melhores práticas para escrever código.
Na prática
Como web designers e desenvolvedores de front-end, temos o luxo de participar numa série de ótimas conferências dedicadas ao nosso ofício. Vamos fazer a nossa própria conferência, Conferência Styles, e criar um site para isso ao longo das seguintes lições. Aqui vamos nós!
Vamos abrir o nosso editor de texto, crie um novo arquivo chamado index.html e guarde-o num local onde não se esqueça. Eu vou criar uma pasta no Ambiente de trabalho chamada "conferência de estilos" e guardar esse arquivo lá; Sinta-se livre para fazer o mesmo.
Dentro do arquivo index.html, vamos adicionar a estrutura do documento, incluindo o tipo de documento
<! DOCTYPE html>e os elementos<html>,<head>e<body>.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>
- Dentro do elemento
<head>, vamos adicionar os elementos<meta>e<title>. O elemento<meta>deve incluir o atributo e o valor do charset apropriado, enquanto o elemento<title>deve conter o título da página - digamos "Styles Conference".
<head>
<meta charset="utf-8">
<title>Styles Conference</title>
</head>
- Dentro do elemento
<body>, vamos adicionar elementos<h1>e<p>. O elemento<h1>deve incluir o título que desejamos incluir: vamos usar "Conferência Styles" novamente - e o elemento<p>deve incluir um parágrafo simples para apresentar a nossa conferência.
<body>
<h1>Styles Conference</h1>
<p>Every year the brightest web designers and front-end developers descend on Chicago to discuss the latest technologies. Join us this August!</p>
</body>
- Agora é hora de ver como ficou! Vamos encontrar o nosso arquivo index.html (dentro da pasta "conferência de estilos" no Ambiente de trabalho). Ao clicar duas vezes neste arquivo ou arrastá-lo para um navegador da Web, ele vai abrir para que o possamos analisar.
Vamos mudar um pouco as engrenagens, afastando-nos do HTML, dê uma olhada no CSS. Lembre-se, HTML definirá o conteúdo e a estrutura de nossas páginas web, enquanto o CSS definirá o estilo visual e a aparência de nossas páginas web.
Compreendendo os termos comuns do CSS
Além dos termos HTML, existem alguns termos comuns do CSS que talvez queira familiarizar-se. Esses termos incluem seletores, propriedades e valores. Tal como acontece com a terminologia em HTML, quanto mais se trabalha com CSS, mais esses termos se tornarão uma segunda natureza.
Seletores
À medida que os elementos são adicionados a uma página Web, eles podem ser denominados usando o CSS. Um seletor designa exatamente qual elemento ou elementos dentro do nosso HTML para segmentar e aplicar estilos (como cor, tamanho e posição). Os seletores podem incluir uma combinação de qualificadores diferentes para selecionar elementos exclusivos, tudo dependendo da especificidade que desejamos ter. Por exemplo, podemos querer selecionar cada parágrafo numa página, ou talvez desejamos selecionar apenas um parágrafo específico numa página.
Os seletores geralmente segmentam um valor de atributo, como um valor id ou classe, ou segmentam o tipo de elemento, como <h1> ou <p>.
Dentro do CSS, os seletores são seguidos com suportes curly, {}, que abrangem os estilos a serem aplicados ao elemento selecionado. O seletor aqui está segmentando todos os elementos <p>.
p { ... }
Propriedades
Uma vez que um elemento é selecionado, uma propriedade determina os estilos que serão aplicados a esse elemento. Os nomes das propriedades caem após um seletor, dentro dos suportes curly, {}, e imediatamente antes a dois pontos,:. Existem inúmeras propriedades que podemos usar, como fundo, cor, tamanho da letra, altura e largura, e as novas propriedades são frequentemente adicionadas. No código a seguir, vamos definir as propriedades de cor e tamanho da letra a serem aplicadas a todos os elementos <p>.
p {
color: ...;
font-size: ...;
}
Valores
Até agora, selecionámos um elemento com um seletor e determinámos o estilo que gostaríamos de aplicar com uma propriedade. Agora, podemos determinar o comportamento dessa propriedade com um valor. Os valores podem ser identificados como o texto entre os dois pontos, e o ponto-e-vírgula; Aqui vamos selecionar todos os elementos <p> e definir o valor da propriedade de cor como laranja e o valor da propriedade tamanho da letra para ser 16 pixels.
p {
color: orange;
font-size: 16px;
}
Para rever, no CSS, o nosso conjunto de regras começa com o seletor, que é seguido imediatamente por suportes curly. Estes suportes curly são declarações que consistem em pares de propriedades e valores. Cada declaração começa com uma propriedade, que é seguida por dois pontos, o valor da propriedade e, finalmente, um ponto e vírgula.
É uma prática comum induzir os pares de propriedades e valores dentro dos suportes curly. Tal como acontece com o HTML, estas indentações ajudam a manter o nosso código organizado e legível.
Conhecer alguns termos comuns e a sintaxe geral do CSS é um excelente começo, mas temos mais alguns itens para aprender antes de avançar para o mais profundo. Especificamente, precisamos de examinar mais de perto como funcionam os seletores dentro do CSS.
Trabalhando com os Seletores
Os seletores, como mencionado anteriormente, indicam quais os elementos HTML que estão a ser desenhados. É importante entender completamente como usar os seletores e como eles podem ser alavancados. O primeiro passo é familiarizar-se com os diferentes tipos de seletores. Começaremos com os seletores mais comuns: tipo, classe e seletores de ID.
Selectores de tipo
CSS
div { ... }
HTML
<div>...</div>
<div>...</div>
Seletores de classe
Os seletores de classe permitem-nos selecionar um elemento com base no valor do atributo da classe do elemento. Os seletores de classe são um pouco mais específicos do que os seletores de tipo, pois selecionam um grupo específico de elementos ao invés de todos os elementos de um tipo.
Os seletores de classe permitem-nos aplicar os mesmos estilos a diferentes elementos ao mesmo tempo usando o mesmo valor de atributo de classe em vários elementos.
Dentro do CSS, as classes são indicadas por um período de liderança,., Seguido pelo valor do atributo da classe. Aqui, o seletor de classe selecionará qualquer elemento que contenha o valor do atributo da classe de awesome, incluindo elementos de divisão e parágrafo.
CSS
.awesome { ... }
HTML
<div class="awesome">...</div>
<p class="awesome">...</p>
Selectores de ID
Os seletores de identidade são ainda mais precisos do que os seletores de classe, pois visam apenas um elemento exclusivo por vez. Assim como os seletores de classe usam o valor do atributo de classe de um elemento como seletor, os seletores ID usam o valor do atributo id de um elemento como seletor.
Independentemente do tipo de elemento que aparece, os valores de atributo id só podem ser usados uma vez por página. Se forem utilizados, eles devem ser reservados para elementos significativos.
Dentro do CSS, os seletores ID são indicados por um sinal de hash principal, #, seguido do valor do atributo id. Aqui, o seletor ID só selecionará o elemento que contém o valor do atributo id de shayhowe.
CSS
#shayhowe { ... }
HTML
<div id="shayhowe">...</div>
Seletores adicionais
Os seletores são extremamente poderosos, e os seletores descritos aqui são os seletores mais comuns que encontraremos. Esses seletores também são apenas o começo. Existem muitos seletores mais avançados e estão prontamente disponíveis. Quando se sentir confortável com esses seletores, não tenha medo de procurar alguns dos seletores mais avançados.
Tudo bem, tudo está começando a se unir. Nós adicionamos elementos a uma página dentro do nosso HTML, e podemos selecionar esses elementos e aplicar estilos usando o CSS. Agora vamos conectar os pontos entre o nosso HTML e CSS, e obter esses dois idiomas trabalhando juntos.
Referindo CSS
Para que o nosso CSS fale com o nosso HTML, precisamos fazer referência ao nosso arquivo CSS dentro do nosso HTML. A melhor prática para referenciar o nosso CSS é incluir todos os nossos estilos numa única folha de estilo externa, que é referenciada a partir do elemento <head> do nosso documento HTML. O uso de uma única folha de estilo externa permite-nos usar os mesmos estilos em todo um site e rapidamente fazer alterações em todo o site.
Outras opções para adicionar CSS
Outras opções para referenciar CSS incluem o uso de estilos internos e inline. Pode encontrar essas opções na natureza, mas geralmente são mal vistos, pois tornam os sites pesados.
Para criar a nossa folha de estilo CSS externa, queremos usar o nosso editor de texto de escolha novamente para criar um novo arquivo de texto simples com uma extensão de arquivo .css. O nosso arquivo CSS deve ser salvo na mesma pasta ou numa subpasta, onde o nosso arquivo HTML está localizado.
Dentro do elemento <head> do documento HTML, o elemento <link> é usado para definir a relação entre o arquivo HTML e o arquivo CSS. Como estamos ligando ao CSS, usamos o atributo rel com um valor de folha de estilo para especificar o seu relacionamento. Além disso, o atributo href (ou referência de hiperligação) é usado para identificar a localização ou o caminho do arquivo CSS.
Considere o seguinte exemplo de um elemento <head> de documento HTML que faz referência a uma única folha de estilo externa.
<head>
<link rel="stylesheet" href="main.css">
</head>
Para que o CSS seja processado corretamente, o caminho do valor do atributo href deve se correlacionar diretamente com o local onde o nosso arquivo CSS é salvo. No exemplo anterior, o arquivo main.css é armazenado no mesmo local que o arquivo HTML, também conhecido como diretório raiz.
Se o nosso arquivo CSS estiver dentro de um subdiretório ou subpasta, o valor do atributo href precisa de se correlacionar com este caminho de acordo. Por exemplo, se o nosso arquivo main.css fosse armazenado dentro de um subdiretório denominado folhas de estilo, o valor do atributo href seria stylesheets / main.css, usando uma barra invertida para indicar a mudança para um subdiretório.
Neste ponto, as nossas páginas estão a começar a ganhar vida, lenta mas seguramente. Nós não mergulhamos no CSS demais, mas pode ter notado que alguns elementos têm estilos padrão que não declaramos no nosso CSS. Esse é o navegador que impõe os seus próprios estilos CSS preferidos para esses elementos. Felizmente, podemos substituir esses estilos com bastante facilidade, e é o que faremos em seguida usando resfriamentos CSS.
Usando CSS Resets
Todo o navegador Web possui os seus próprios estilos padrão para diferentes elementos. Como o Google Chrome processa títulos, parágrafos, listas e assim por diante pode ser diferente de como o Internet Explorer faz. Para garantir a compatibilidade entre navegadores, os reinícios CSS tornaram-se amplamente utilizados.
CSS redefine cada elemento HTML comum com um estilo predefinido e fornece um estilo unificado para todos os navegadores. Esses reinícios geralmente envolvem a remoção de tamanho, margens, preenchimentos ou estilos adicionais e tonificando esses valores. Como o CSS cai de cima para baixo - mais sobre isso em breve - o nosso reset precisa de estar no topo da nossa folha de estilos. Isso garante que esses estilos sejam lidos primeiro e que todos os diferentes navegadores da Web estejam a trabalhar a partir de uma linha de base comum.
Há um monte de resets diferentes disponíveis para uso, todos os quais têm os seus próprios pontos fortes. Um dos resets mais populares é o reinício de Eric Meyer, que foi adaptado para incluir estilos para os novos elementos HTML5.
Se está a sentir-se um pouco mais aventureiro, também há Normalize.css, criado por Nicolas Gallagher. O Normalize.css concentra-se não na utilização de uma reinicialização total para todos os elementos comuns, mas sim na definição de estilos comuns para esses elementos. Isso requer uma compreensão mais forte do CSS, bem como a consciência do que gostaria que os seus estilos fossem.
Navegador cruzado Compatibilidade & Testes
Como mencionado anteriormente, diferentes navegadores tornam os elementos de diferentes maneiras. É importante reconhecer o valor na compatibilidade e nos testes do navegador cruzado. Os sites não precisam de ficar exatamente iguais em todos os navegadores, mas devem estar próximos. Quais os navegadores que deseja suportar, e até que ponto, é uma decisão que vai precisar de fazer com base no que é melhor para o seu site.
Ao todo, há um punhado de coisas para estar atento ao escrever CSS. A boa notícia é que tudo é possível, e com um pouco de paciência, descobriremos tudo.
Na prática
Voltando para onde ficámos pela última vez no nosso site da conferência, vejamos se podemos adicionar um pouco de CSS.
Dentro da nossa pasta "conferência de estilos", vamos criar uma nova pasta chamada "ativos". Vamos armazenar todos os recursos para o nosso site, como as nossas folhas de estilo, imagens, vídeos e assim por diante, nesta pasta. Para as nossas folhas de estilo, vamos em frente e adicionamos outra pasta chamada "folhas de estilo" dentro da pasta "ativos".
Utilizando o nosso editor de texto, vamos criar um novo arquivo chamado main.css e salvá-lo na pasta "folhas de estilo" que acabámos de criar.
Se olhar-mos para o nosso arquivo index.html num navegador da Web, podemos ver que os elementos
<h1>e<p>cada um têm estilos CSS padrão. Especificamente, eles têm um tamanho de letra e espaçamento únicos em torno deles. Usando a reinicialização de Eric Meyer, podemos diminuir esses estilos, permitindo que cada um deles seja desenhado a partir da mesma base. Para fazer isso, vamos ao site do Eric, copiem a reinicialização e colem-na no topo do nosso arquivo main.css.
/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Com o nosso arquivo main.css a começar a ganhar forma, vamos conectá-lo ao nosso arquivo index.html. Abrimos o arquivo index.html no nosso editor de texto, vamos adicionar o elemento
<link>no nosso elemento<head>, logo após o elemento<title>.Porque estamos a referenciar uma folha de estilo dentro do elemento
<link>, vamos adicionar o atributo de relação, rel, com um valor de folha de estilo.Queremos também incluir uma referência de hiperlink, usando o atributo href, para o nosso arquivo main.css. Lembre-se, o nosso arquivo main.css é salvo na pasta "folhas de estilo", que está dentro da pasta "ativos". Portanto, o valor do atributo href, que é o caminho para o nosso arquivo main.css, tem que ser
assets / stylesheets / main.css.
<head>
<meta charset="utf-8">
<title>Styles Conference</title>
<link rel="stylesheet" href="assets/stylesheets/main.css">
</head>
É hora de verificar o nosso trabalho e ver se o nosso HTML e CSS estão a correr bem. Agora, abrimos o nosso arquivo index.html (ou atualizar a página se já estiver aberta) dentro de um navegador da Web deve mostrar resultados ligeiramente diferentes do que antes.
Demo & Source Code
Abaixo, pode visualizar o site da Conferência Styles no seu estado atual, bem como baixar o código-fonte do site no seu estado atual.
LINK
Resumo
Por enquanto, tudo bem! Demos alguns passos importantes nesta lição.
Basta pensar, agora conhece os conceitos básicos de HTML e CSS. À medida que continuamos e passa mais tempo escrevendo HTML e CSS, você ficará muito mais confortável com os dois idiomas.
Para recapitular, até agora falámos do seguinte:
The difference between HTML and CSS
Getting acquainted with HTML elements, tags, and attributes
Setting up the structure of your first web page
Getting acquainted with CSS selectors, properties, and values
Working with CSS selectors
Referencing CSS in your HTML
The value of CSS resets
Agora vamos dar uma olhada no HTML e aprender um pouco sobre a semântica.
Recursos e Links
Common HTML terms via Scripting Master
CSS Terms & Definitions via Impressive Webs
CSS Tools: Reset CSS via Eric Meyer
Normalize.css via Nicolas Gallagher
An Intro to HTML & CSS via Shay Howe