O que é e como começar com HTML e CSS? \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto**
Termina em Tempo restante da oferta: 23 Horas
01 Min
31 Seg
Tempo restante da oferta: 23 01 31
[Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26)
[ ](https://www.treinaweb.com.br) Explorar
[ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login)
[ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) O que é e como começar com HTML e CSS? [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) [ HTML ](https://www.treinaweb.com.br/blog/categoria/html)
# O que é e como começar com HTML e CSS?
Quer iniciar seus estudos em HTML e CSS e não sabe por onde começar? Veja o que preparamos pra você.
[ Marylene Guedes ](https://www.treinaweb.com.br/blog/autor/marylene-guedes) 9 anos atrás
Mesmo se você for iniciante no meio da programação provavelmente já deve ter ouvido falar sobre HTML. O HTML é uma linguagem muito fácil de se aprender e em pouco tempo você já poderá criar um website com facilidade. Com um pouquinho mais de tempo e dedicação, você poderá estilizar suas páginas utilizando o CSS, conseguindo um resultado mais profissional.
O HTML e o CSS são utilizados para criar páginas web e atuam de forma complementar. Neste artigo você poderá conhecer mais sobre eles e como iniciar seus estudos, principalmente se você está dando os primeiros passos nessa área.
[  ](https://www.treinaweb.com.br/ebook/guia-HTML/)
## O que é HTML?
O HTML é a linguagem base para se desenvolver qualquer site. É uma linguagem baseada em marcação, onde marcamos os elementos para definir quais informações a página vai exibir. A linguagem HTML foi criada na década de 1990 e suas especificações são controladas pela W3C (World Wide Web Consortium).
[  ](https://www.treinaweb.com.br/lp/aula-gratis/)
## O que é CSS?
O CSS é uma linguagem de folha de estilo composta por “camadas”, criado com o propósito de estilizar as páginas HTML, ou seja, definir a aparência das páginas, para deixá-las visualmente mais bonitas e agradáveis, podendo alterar a fonte, cor, posicionamento dos elementos, layout e muito mais.
Uma das maiores vantagens de se utilizar o CSS é que ele efetua a separação entre o formato da página e o conteúdo de um documento, proporcionando assim uma maior flexibilidade e controle de como as características serão exibidas, além de reduzir a duplicação no conteúdo estrutural de uma página.
[  Curso Visão Computacional - Detecção Facial Conhecer o curso ](https://www.treinaweb.com.br/curso/visao-computacional-deteccao-facial)
## Quem usa HTML e CSS?
Todos os sites utilizam HTML e CSS de uma forma ou de outra. Você se lembra da época do Orkut quando enviávamos recados e depoimentos? Nessa época gostávamos de deixar eles mais bonitinhos… Com fontes, cores, diferentes tamanhos, negrito, itálico, e mais uma infinidade de tags que podiam ser utilizadas… Sim, aquilo era HTML.
## Sintaxe do HTML
A sintaxe do HTML foi criada para ser de fácil entendimento tanto para nós quanto para a máquina, além disso você não precisa de nada mais do que um editor simples. Como vimos, HTML é uma linguagem de marcação.
Essas marcações são chamadas de tags, que são abertas e depois fechadas. É com as tags que dizemos para o navegador o que é um título, parágrafo, botão, formulário, dentre outros.
Primeiramente vamos ver como é a estrutura básica do HTML:
```html
Título da página
Seu código aqui
```
Essa é a estrutura que sempre será utilizada. Se quisermos exibir na página o nosso clássico “Hello World”, temos que escrever o texto dentro de um parágrafo e colocá-lo dentro da tag “body”.
```html
Hello World
```
Para criar um texto com link, você pode definir a url que será acessada ao clicar, através do atributo **href**:
```html
TreinaWeb
```
[  Curso Bootstrap - Trabalhando com formulários Conhecer o curso ](https://www.treinaweb.com.br/curso/bootstrap-trabalhando-com-formularios)
## Sintaxe do CSS
Com o CSS você pode criar folhas de estilo, que são muito úteis e fáceis de serem utilizadas. Por exemplo, vamos criar uma folha de estilo chamada **style.css** e com os seguintes atributos:
```css
strong {
color: blue;
}
h1 {
font-style: italic;
}
```
```html
TreinaWeb
Hello World
Seja bem-vindo ao TreinaWeb!
```
Quando abrirmos a página ele vai nos mostrar a frase “Hello World”. A palavra “World” está dentro da tag “strong”, então ela vai se comportar da maneira que estilizamos no arquivo CSS: em negrito e na cor azul. Já a frase “Seja bem-vindo ao TreinaWeb!” aparecerá em itálico, conforme colocamos no nosso arquivo CSS.
## Mercado de trabalho
A maioria das páginas da Internet são escritas em HTML e estilizadas usando CSS, daí podemos ver a sua incontornável importância. Você pode começar a aprender a criar suas próprias páginas e, mais para frente, ter a capacidade de desenvolver telas para sites, aplicativos mobile, sistemas web e desktop.
Saber HTML e CSS é pré-requisito para qualquer desenvolvedor, mesmo se você não desenvolve diretamente para a Web, aconselho a leitura de nosso artigo sobre [como crescer no front-end](https://www.treinaweb.com.br/blog/como-crescer-no-front-end/ "como crescer no front-end").
## Como aprender HTML e CSS?
Como você já pode ver nesse artigo, o HTML e o CSS são extremamente importante de serem estudados e são de fácil aprendizagem. O HTML5 e o CSS3 são as versões mais atuais.
Aqui no TreinaWeb temos o curso “Desenvolvimento web com HTML5 e CSS3 Básico” que foi desenvolvido com o objetivo de ser uma porta de entrada para você entrar para o mundo do desenvolvimento, seja web ou mobile.
[  Curso Java - Fundamentos de Struts 2 Conhecer o curso ](https://www.treinaweb.com.br/curso/java-fundamentos-struts2)
## Conheça nossa metodologia
Nosso ambiente de aprendizagem é 100% online. Nossa metodologia de ensino é baseada em vídeo aulas, apostilas, exercícios aula-a-aula e exemplos completos. Você estuda no seu tempo e ao final pode baixar o seu certificado digital ou solicitar o certificado impresso.
Na parte escrita, fornecemos um material totalmente atualizado e completo para que você possa usufruir do conteúdo, utilizando-se de textos e imagens. Já as vídeo-aulas são bem explicativas e práticas, abordando todo o conteúdo passo-a-passo, para que você entenda tudo da melhor maneira possível.
Além disso, você encontrará exercícios para poder fixar, praticar e aplicar todo o conteúdo aprendido. São exercícios que são propostos em cada aula do curso. Eles podem variar entre alguns formatos, como por exemplo questões de escolha única, questões de múltipla escolha e complemento de trechos de código.
Se ainda assim você tiver alguma dúvida, você poderá pedir ajuda aos nossos professores através de tickets de atendimento. Funciona como um canal direto entre você e o professor, onde você poderá realizar perguntas que serão respondidas muito brevemente!
Além disso, ainda pelo sistema suporte, você também poderá consultar todas as perguntas que já foram respondidas a outros alunos! =)
## Quais conhecimentos preciso ter para iniciar este curso?
Você não precisa de nenhum conhecimento prévio para iniciar neste curso, apenas sua força de vontade. =)
## Gostou do que viu?
Se entusiasmou com o HTML e o CSS? Gostaria de conhecê-los com mais detalhes? Sim, você pode dar uma espiadinha. Acesse o link do curso de HTML5 e CSS3 e veja algumas aulas de exemplo.
Bons estudos!
[  Formação Desenvolvedor Front-end Júnior Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-front-end-junior)
- [ #Desenvolvimento ](https://www.treinaweb.com.br/blog/tag/desenvolvimento)
Autor
## Marylene Guedes
Responsável pelo sucesso do cliente na TreinaWeb. Graduada em Gestão de Tecnologia da Informação pela FATEC Guaratinguetá, além de estudante de UX/UI.
[Todos os artigos](https://www.treinaweb.com.br/blog/autor/marylene-guedes)
## Continue estudando
Transforme leitura em prática com os cursos e formações da TreinaWeb.
[Ver cursos](https://www.treinaweb.com.br/cursos)
Continue lendo
## Artigos relacionados
-  [ CSS ](https://www.treinaweb.com.br/blog/categoria/css)
4 anos atrás
## [ Position, estilizando elementos com CSS. ](https://www.treinaweb.com.br/blog/position-estilizando-elementos-com-css)
Neste artigo nos iremos aprender sobre position em elementos no CSS, e sua importância para estilizações das nossas páginas web.
Ler artigo
-  [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript)
9 anos atrás
## [ O que é e como começar com JavaScript? ](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-javascript)
Quer iniciar seus estudos em JavaScript e não sabe por onde começar? Veja o que preparamos pra você.
Ler artigo
-  [ CSS ](https://www.treinaweb.com.br/blog/categoria/css)
4 anos atrás
## [ Media queries, o que são e como usar no CSS? ](https://www.treinaweb.com.br/blog/media-queries-o-que-sao-e-como-usar-no-css)
Neste artigo, nós iremos aprender sobre o uso de media queries no CSS e iremos aprender como utilizá-los em nossas aplicações web.
Ler artigo
-  [ CSS ](https://www.treinaweb.com.br/blog/categoria/css)
8 anos atrás
## [ Os principais frameworks CSS ](https://www.treinaweb.com.br/blog/os-principais-frameworks-css)
Neste artigo veremos alguns dos principais frameworks CSS do mercado e algumas de suas características.
Ler artigo
-  [ CSS ](https://www.treinaweb.com.br/blog/categoria/css)
3 anos atrás
## [ Entendendo o shorthand no CSS ](https://www.treinaweb.com.br/blog/entendendo-o-shorthand-no-css)
Vamos aprender o que é shorthand no CSS, entender o conceito e aprender a deixar nossos estilos mais limpo e de fácil manutenção
Ler artigo
-  [ CSS ](https://www.treinaweb.com.br/blog/categoria/css)
10 anos atrás
## [ Criando contadores apenas com CSS ](https://www.treinaweb.com.br/blog/criando-contadores-apenas-com-css)
Você sabia que é possível criar contadores apenas com CSS? Com isso, alguns desenvolvedores conseguem até criar jogos sem nenhuma linha de JavaScript!
Ler artigo
-  [ CSS ](https://www.treinaweb.com.br/blog/categoria/css)
8 anos atrás
## [ Trabalhando com Sprites no CSS ](https://www.treinaweb.com.br/blog/trabalhando-com-sprites-no-css)
Veja como trabalhar com sprites no CSS.
Ler artigo
-  [ CSS ](https://www.treinaweb.com.br/blog/categoria/css)
10 anos atrás
## [ Começando com o novo CSS Grid Layout ](https://www.treinaweb.com.br/blog/comecando-com-o-novo-css-grid-layout)
Aprenda um pouco mais sobre o CSS Grid Layout, agora com suporte completo pelo Firefox e Chrome.
Ler artigo
-  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end)
4 anos atrás
## [ Guia da linguagem HTML ](https://www.treinaweb.com.br/blog/guia-da-linguagem-html)
Esse guia é perfeito pra você que está começando ou quer entender melhor como podemos trabalhar com a linguagem HTML .
Ler artigo
-  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end)
3 anos atrás
## [ Os Pré-Processadores CSS ](https://www.treinaweb.com.br/blog/os-pre-processadores-css)
Nesse artigo veremos o que são, pra que servem e quais os pré-processadores CSS mais utilizados. Aprenda a dar super poderes ao CSS
Ler artigo
-  [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas)
9 anos atrás
## [ TW Entrevista 01: Maujor ](https://www.treinaweb.com.br/blog/tw-entrevista-01-maujor)
Fizemos uma série de entrevistas com desenvolvedores chamada “TW Entrevista”. O primeiro entrevistado é o Maujor, o dinossauro das CSS. Confira!
Ler artigo
-  [ PHP ](https://www.treinaweb.com.br/blog/categoria/php)
9 anos atrás
## [ Como começar com PHP? ](https://www.treinaweb.com.br/blog/como-comecar-com-php)
Quer iniciar seus estudos em PHP e não sabe por onde começar? Veja o que preparamos pra você.
Ler artigo
## Um ano de acesso total para você viver de programação.
Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho.
- **1 ano** de acesso a **todos os cursos**
- Cursos novos **toda semana**
- Suporte **direto com professores**
- Plano de carreira **personalizado**
- **Certificados digitais** inclusos
- **Aplicativos** para Android e iOS, com **acesso offline**
**Garantia incondicional de satisfação**
Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro.
### Acesso completo a todos os cursos e dezenas de Formações.
12 meses
Economize R$ 840,00 54% OFF
de 12x R$ 129,00 por apenas
12x R$ 59,00
sem juros no cartão de crédito ou R$ 599,00 à vista
Oferta termina em **23h 01min 31s**
- Acesso imediato e ilimitado durante 1 ano.
- Plano de carreira personalizado.
- Suporte direto com professores.
- E muito mais!
[Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26)
[ ](https://www.treinaweb.com.br)
Escola online de programação, tecnologia e IA.
- [ ](https://www.facebook.com/TreinaWeb/)
- [ ](https://www.instagram.com/treinaweb/)
- [ ](https://www.youtube.com/user/TreinaWeb)
- [ ](https://twitter.com/treinaweb)
- [ ](https://www.linkedin.com/company/treinaweb)
- [ ](https://github.com/treinaweb)
## Inscreva-se em nossa newsletter
Receba lançamentos, promoções e novidades.
Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se
## Cursos
- [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs)
- [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end)
- [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end)
- [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile)
- [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados)
- [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing)
- [ IA ](https://www.treinaweb.com.br/categoria/ia)
- [ E mais ](https://www.treinaweb.com.br/categoria/e-mais)
- [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos)
## Conteúdo
- [ Formações ](https://www.treinaweb.com.br/formacoes)
- [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos)
- [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto)
- [ Planos ](https://www.treinaweb.com.br#assinatura)
- [ Depoimentos ](https://www.treinaweb.com.br#depoimentos)
- [ Comunidade ](https://www.treinaweb.com.br#comunidade)
- [ Corpo docente ](https://www.treinaweb.com.br#docente)
## A empresa
- [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre)
- [ Perguntas frequentes ](https://www.treinaweb.com.br#faq)
- [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb)
- [ Cursos para empresas ](https://www.treinaweb.com.br/empresas)
- [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso)
- [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco)
- [ Artigos ](https://www.treinaweb.com.br/blog)
- [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers)
- [ Contato ](https://www.treinaweb.com.br/contato)
- [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade)
- [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso)
## Baixe nosso aplicativo
[ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile)
Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58