Eu estou praticando html e css, mas estou com certa dificuldade (para melhor compreensão do caso mostrarei o código).
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>10 maiores religião do mundo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1 class="título">As religião com mais fies do mundo são!</h1>
<section>
<button class="botão1">Cristianismo</button>
<button class="botão2">Islamismo</button>
<button class="botão3">Hinduísmo</button>
<button class="botão5">Silhismo</button>
<button class="botão6">Judaísmo</button>
<button class="botão7">Espiritismo</button>
<button class="botão8">Bahaísmo</button>
<button class="botão9">Xintoísmo</button>
<button class="botão10">Zoroastrismo</button>
</section>
<img src="Sem título 0.png" id="simbolo1" >
<img src="Sem título 1.png" id="simbolo2" >
<img src="Sem título 2.png" id="simbolo3">
<img src="Sem título 3.png" id="simbolo4">
<img src="Sem título 4.png" id="simbolo5">
<img src="Sem título 5.png" id="simbolo6">
<img src="Sem título 6.png" id="simbolo7">
<img src="Sem título 7.png" id="simbolo8">
<img src="Sem título 8.png" id="simbolo9">
<img src="Sem título 9.png" id="simbolo10">
</header>
<script src="main.js"></script>
</body>
</html>
h1 {
.título {
text-align: center;
background-color: blue;
}
}
(.botão1
.botão2
.botão3
.botão4
.botão5
.botão6
.botão7
.botão8
.botão9
.botão10){
text-align: center;
background-color: red;
}
( #simbolo1
#simbolo2
#simbolo3
#simbolo4
#simbolo5
#simbolo6
#simbolo7
#simbolo8
#simbolo9
#simbolo10){
text-align: center;
background-color: red;
}
como você pode ver eu estou mexendo com imagens em arquivos. No entanto eu quero que as imagens fiquem no mesmo documento que outros arquivo sem ficar muito grande, como fazer isto?
