O que é CSS e o que ele faz? Guia Para Iniciante

Indicação
css code

Após ter descoberto o que é HTML e como ele funciona, deve ter ficado curioso para saber como deixamos as páginas bem estilizadas com o CSS. Por isso agora vamos abordar qual é o seu surgimento, como funciona e como integrar o CSS ao HTML, com um guia descomplicado de fácil entendimento!

Conteúdo

O que é CSS?

O CSS ou Cascading Style Sheet (Folhas de Estilo em Cascata) é usado para criar páginas web agradáveis visualmente, estilizando os elementos escritos em uma linguagem de marcação, como o HTML.

Origem

Foi desenvolvido pela W3C em 1996 para suprir as necessidades de estilização de uma página, já que a atual linguagem de marcação HTML não foi feita para suportar tags de formatação de conteúdo.

Sua primeira função foi separar o código de estilo e conteúdo da página, facilitando para os desenvolvedores, pois assim tornavam os documentos mais fáceis de serem escritos e atualizados.

CSS3

CSS3 foi lançado em 2010, e é a versão mais atual. Também veio com novas melhorias com relação às versões anteriores, dando mais flexibilidade e controle ao desenvolvedor ou webdesigner.

Como o CSS funciona

Ele tem uma sintaxe simples, nomeada em inglês para especificar as propriedades de cada elemento de uma página. A estrutura funciona com as partes de seleção e partes de declaração, só selecionar o elemento que querer e declarar os estilos que ira adicionar. Como no exemplo abaixo:

				
					/* seleção "p" paragrafo. Dentro das {} as declarações
na estrutura propriedade e valor seguido de um ; */

p {
    color: red;
}
				
			

Como integrar o CSS no HTML?

Também temos um artigo completo sobre como linkar o CSS no HTML.

Elementos Básicos do CSS

Os seletores podem ser tags do HTML, #id e .classe

Tags

São todas as tags do HTML, isso ira selecionar todos os elementos de uma página referente a mesma tag. Ex: body <body>, h1 <h1>, span <span>, p <p>. No exemplo abaixo o título ira ficar com a cor vermelha:

Classes

Ira selecionar apenas elementos referentes a essa mesma classe. Para criar é bem simples basta seguir na sua folha de estilo .nome-da-sua-classe, e adicionar na tag HTML class=”nome-da-sua-classe” lembrando que uma tag html pode ter mais de uma classe. Você pode entender como nomear as classes de forma eficiente com a metodologia BEM, ou também, pode seguir um exemplo abaixo para entender melhor:

ID

O uso dos IDs são parecidos com as classes com a diferença que só pode haver um ID na tag e seu seletor é #id, para declarar na tag basta usar o parâmetro id=“. siga o exemplo abaixo:

				
					<!-- Seletor: tags do HTML -->
<h1>Helo World!</h1>
<style>
    h1 {
        color: red;
    }
</style>

<!-- Seletor: classes -->
<h1 class="classe1">Helo World!</h1>
<style>
    .classe1 {
        color: red;
    }
</style>

<!-- tag HTML com mais de uma classe -->
<h1 class="classe1 classe2">Helo World!</h1>
<style>
    .classe1 {
        color: red;
    }
    .classe2 {
        font-size: : 20px;
    }
</style>


<!-- Seletor: IDs -->
<h1 id="id1">Helo World!</h1>
<style>
    #id1 {
        color: red;
    }
</style>
				
			

CSS Interno, Externo e Inline

CSS Interno: Deve ser adicionado na seção <head> com as tags <style type=”text/css”>seu conteúdo</style>. Esse método trás vantagens, pois todo o seu código estará na mesma página, assim não precisara fazer requisição de arquivos externos, mas também pode dificultar a sua edição devido ao tamanho do código e também causar lentidão na página.

CSS Externo: Você deve criar um arquivo externo do tipo .css e escrever todo o seu estilo dentro deste documento, e então chamar dentro das tags <head> com a tag <link rel=”stylesheet” type=”text/css” href=”seu-arquivo.css” />. Este traz vantagens na hora da edição de códigos extensos e tempo de carregamento.

CSS Inline: Neste o estilo é aplicado diretamente na tag html com o atributo style=”seu estilo”. Pode servir para uma edição rápida, mas no geral não é recomendada, pois, pode deixar seu código bagunçado e lento.

Siga os exemplos abaixo:

				
					<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Exemplo CSS</title>
		
		<!-- Método CSS interno  -->
		<style type="text/css">/* seu conteúdo */</style>
		
		<!-- Método CSS externo, em um arquivo .css  -->
		<link rel="stylesheet" type="text/css" href="seu-arquivo.css" />
		
	</head>
	<body>
	    <!-- Método CSS Inline  -->
		<h1 style="/* seu conteúdo */">Exemplo CSS</h1>
	</body>
</html>
				
			

Encontrou dificuldades na hora de aprender? Para compreender este tutorial é recomendado que saiba o básico sobre HTML, se você não souber acesse o tutorial O que é HTML?

Também iremos indicar mais três posts para seguir depois que se sentir confortável pelo seu avanço:

Caso ainda tenha dúvida entre em contato conosco.

Desenvolvemos um editor HTML online para você! Focado em iniciantes e pessoas que queiram fazer testes rápidos, tudo isso de graça! Então se já começou aprender HTML, CSS e quer começar a treinar e desenvolver as suas habilidades é ideal para você, acesso no link abaixo:

Como se tornar um Desenvolvedor Web?

Não é necessário ter um diploma ou formação específica para ser um desenvolvedor web. Porque o importante é obter conhecimentos teóricos sobre programação e também práticos, pois assim irá adquirir experiência para entrar no mercado.

Sei que deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Pratique, acesse o editor HTML
mokup phone
Aprenda a desenvolver para a web de graça!

Cadastrar agora

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.

Pesquisa
*A busca não retorna histórias,
para isso visite a página histórias
Digite aqui para obter os resultados da pesquisa!
Ebook Criar com HTML e CSS - Mukup

Cadastrar agora

Aprenda a desenvolver para a web de graça! Mais ebook de bônus.

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.