Pequenas Dúvidas

  • HTML
  • CSS
  • JS
  • PHP
  • MySQL
  • Marketing Digital
  • Photoshop
Home Diferenças entre ID, CLASSE e INLINE em CSS

Diferenças entre ID, CLASSE e INLINE em CSS

Exemplo de um CSS

O CSS é utilizado para formatar tags do HTML e existem algumas formas de associar uma determinada formatação a uma tag, nessa postagem, vou postar três formas:

A primeira forma é definir um ID para a tag e então associar essa tag para em um CSS, como por exemplo:

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Um pouco sobre CSS</title>
</head>
<body>
	<a id="menu" href="#" title="Menu">Menu</a>
</body>
</html>

CSS:

#menu {
	color: #006699;
	text-decoration: none;
}

Com isso eu deixo a cor do meu link diferente da cor padrão e removo o sublinhado também padrão dos links.

Sobre o ID em CSS:

  • O símbolo para utilizar no CSS é o # (sustenido, jogo da velha, sharp, etc…)
  • Deve obrigatoriamente começar por uma letra
  • Ao adicionar um ID para um elemento, nenhum outro elemento poderá ter o mesmo ID nessa página.
  • Tem mais “força” que formatações aplicadas através de uma classe e pode sobrescrever formatações da classe.
  • É sensitivo, ou seja: Menu é diferente de menu que também é diferente de MENU

 

OBS: O fato de ele ser sensitivo não significa que você pode ter mais de uma tag com o mesmo ID, mesmo a tag possuindo a diferença de escrita.

A classe funciona diferente do ID, pois permite que mais de uma tag possa receber a mesma formatação. Vamos ao exemplo:

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Um pouco sobre CSS</title>
</head>
<body>
    <a class="menus" href="#" title="Menu">Menu</a><br />
    <a class="menus" href="#" title="Menu">Menu</a><br />
    <a class="menus" href="#" title="Menu">Menu</a><br />
    <a class="menus" href="#" title="Menu">Menu</a>
</body>
</html>

CSS:

.menus {
	color: #006699;
	text-decoration: none;
}

Dessa forma, todos as tags que receberem a classe menu irão ficar com as mesmas formatações.

Sobre a Classe em CSS:

  • O símbolo para utilizar a classe é o . (ponto)
  • Deve obrigatoriamente começar por uma letra
  • Também é sensitivo

Por último o CSS INLINE, esse tipo de aplicação não é recomendado (exceto em raros casos), pois é o CSS que você escreve no próprio HTML, como mostrado no exemplo abaixo:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Um pouco sobre CSS</title>
</head>
<body>
	<a href="#" style="color: #006699; text-decoration: none;" title="Menu">Menu</a>
</body>
</html>

Sobre o CSS INLIE:

  • Tem mais força que CSS ID e a Classe e pode sobrescrever ambos*

 

* Desde que não tenha um atributo com a declaração: !important, uma vez que essa declaração passa a dar mais força sobrescrevendo qualquer outro CSS (até mesmo outro !important).

Até a próxima =D

jan 8, 2015Rodrigo Sarri
Removendo espaços em branco em arquivos com Adobe DreamweaverDimensões de imagens no Facebook para fan pages
Comentários: 2
  1. Hosting
    5 years ago

    Agora, e possivel usar a mesma classe widget como gancho para aplicar o mesmo conjunto de estilos para cada um deles. Mas, e se for preciso ter um deles maior que os outros, mas continuar com um estilo que compartilhe dos outros atributos?

    RespostaCancelar
    • Rodrigo Sarri
      5 years ago

      Coloque um sobrescrevendo o outro, o ID sempre tem mais força que a classe.

      RespostaCancelar

Deixe uma resposta Cancelar resposta

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

7 years ago 2 Comentários CSSclass, classe, css, html, id, inline, style
Posts recentes
  • Como abrir arquivos php no navegador? 21 de dezembro de 2015
  • Utilizando o F12, a ferramenta do desenvolvedor 7 de dezembro de 2015
  • Como recortar qualquer imagem usando a ferramenta caneta do Photoshop 3 de dezembro de 2015
  • Enviar dados de um formulário sem atualizar a página com JQUERY (ajax) 7 de abril de 2015
  • Separar as palavras de uma frase em PHP 9 de fevereiro de 2015
Categorias
  • Adobe Dreamweaver
  • CSS
  • Dicas
  • facebook
  • HTML
  • JQUERY
  • JS
  • Marketing Digital
  • MySQL
  • Photoshop
  • PHP
  • Sem categoria
Nuvem de tags
phpcssjqueryhtmljavascriptcss3inlinematrizlayoutfacebookfan pagedimensõesstyleimagensremover espaço em brancoclassdreamweaveradobetruqesdicaclasseidpáginacadastrar site no googleimplodeadicionar item de segurança banco de dadosvalidar emailarrayrandacertar horahorário de verãofuso horáriogerar número aleatóriovalidar campos phpmysqlsitemapcomo cadastrar site no buscadorcadastrar site no bingcadastrar site no yahoositemap para videossitemap para imagenscadastro no banco de dados phpsitemap para smartphonesitemap para googlecomo construir um sitemap
Outras postagens
PHP upload de imagens
Criando um simples script de upload (com validações de arquivo) em PHP
7 years ago
Google Yahoo Bing - como cadastrar seu site nos principais buscadores
Cadastrar seu site ou Blog nos principais buscadores
7 years ago
Como dividir uma matriz (array), separar por vírgulas e colocar aspas simples em PHP?
7 years ago
Buscar
2018 © Pequenas Dúvidas - Aprenda um pouco de HTML CSS JS PHP MySQL e Marketing Digital