Não consigo aplicar meu CSS no HTML

Front-end CSS
#1

Olá pessoal.

Estou estudando web com o livro de HTML5 e CSS3 da casa do Código e não estou conseguindo aplicar alguns efeitos do CSS no HTML. As classes “tip” e “help” do html não estão sendo alteradas pelos comandos do CSS, o restante está funcionando.

HTML:

  <title>botao</title>
</head>
<body>
	<div class="button">BOTÃO</div>
	<br>
	<div class="boxWithPadding">elemento com paddind</div>
	<br>
	<div class='boxWithoutPadding'>elemento sem padding</div>
	<br>
	<section>
	<h1>Pseudo elementos</h1>
	</section>
	<br>	
	<section>
	<div class='help'>
		Preencha o campo com um e-mail válido, assim poderemos entrar em contato com você para informar o resultado do nosso concurso.
	</div>
	</section>

	<p class="tip"
		Você sabia que...
	</<p>
	<br>
	<blockquote>
		O problema com citações na Internet é que você não pode
		confirmar a sua veracidade.
	</blockquote>
</body>
</html>

CSS:

. button{
border: 1px solid #123;
height: 26px;
padding: 10px 10px 10px 10px;
width: 90px;
background-color: #17c;
text-align: center;
vertical-align: middle;

}

.boxWithPadding{
	border: 2px solid #8AF;
	background-color: limegreen;
	padding: 10px 25px;
	width: 250px;
	box-sizing: border-box;
}

.boxWithoutPadding {
	background-color: darkred;
	width: 250px;
}

section {
	border: 4px solid #FFAACC;
	width: 400px;
	height: 100px;
	margin: 40px;
}

h1 {
	text-align: center;
	background-color: #692469;
	font-size: 1.5em;
}

h1 {
	font-size: 1.2em;
	left: -10px;
	padding: 15px 0;
	position: relative;
	text-align: center;
	width: 420px;
}

h1::before{
	border-color: transparent #692469 #eb0a33 #000;
	border-style: solid;
	border-width: 5px;
	content: "";
	left: 0;
	position: absolute;
	top: -10px;
}

h1::after{
	border: 5px solid #532899;
	content: "";
	position:  absolute;
	top: -20px;
	right: 0;
}


h1::after{
	border-color: transparent #692469 #eb0a33 #000;
	border-style: solid;
	border-width: 5px;
	content: "";
	right: 0;
	position: absolute;
	top: -10px;

.help{
	border: 3px solid #17A;
	background-color: #00F;
}

.help::before {
	border-color: transparent #000 transparent transparent;
	border-style: solid;
	border-width: 14px;
	content: "";
	left: -28px;
	margin-top: -14px;
	position: absolute;
	top: -20px;
}

.tip{
	content: "\261E";
	margin-right: 10px;
}

blockquote {
	color: #444;
	font-style: italic;
}
#2

Muito obrigado antecipadamente.

#3

Ola amigo, tudo bem?

Dando uma olhada no html que você postou, dá pra notar que tem alguns erros de sintaxe.
No seu <p> que tem a class “tip”, faltou fechar ele de forma correta, ex: <p class="tip">....</p>

No seu css tem mais alguns: a primeira classe ali: .button, tem um espaço entre o ponto(.) e o nome da class
. button{}. Pro css entender que é uma class tem que ser tudo junto: .button{}

Outra coisa no css, depois desse seletor aqui: "h1::after{, faltou a chave “}” pra fechar o bloco.

Acho que é isso.

valeu!

#4

Valeu guilherme.nascimento muito obrigado cara.

Está quase redondinho agora só o

content: "\261E";

que se trata de uma mão apontando para o “você sabia…” que não funciona. Você sabe o que pode ser?

Muito agradecido desde já a quempuder ajudar.

#5

Então, pelo que eu sei essa property content é só para pseudo-elementos. No caso do seu css acho que dá para resolver modificando a class .tip, adicionando o pseudo element ::before, ex: .tip::before.

Se quiser da uma olhada nesse link aqui:
https://developer.mozilla.org/pt-BR/docs/Web/CSS/content

:wink:

#6

O MEU TAMBEM NÃO FUNCIONA ;-; NÃO SEI MAIS OQUE FAZER

<!DOCTYPE html>

    <html lang="en">

        <head>

            <title>Document</title>

        </head>

        

        <body>

            <div id="box">.</div>

        </body>

        <script>

            var el = document.getElementById('box');

            el.style.width = 100;

            el.style.height = 200;

            el.style.backgroundColor = 'red';

        </script>

    </html>
#7

Cria um novo tópico e explique o seu problema.