Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
12
respostas

Dúvida no Ex. 7 da Aula 3 - Outras tags HTML e como aplicar CSS nelas

Não estou conseguindo fazer com que o background color apareça nos "h2" pelo css.

Código...

HTML

<!DOCTYPE html>

<html>
    <head>
        <meta charset= "UTF-8">
        <title>Curriculo</title>
        <link rel="styslesheet" type="text/css" href="curriculo.css">

    </head>
    <body>
        <div id="conteudo"></div>
            <div id="header">
            <h1>Fulano da Silva</h1>

            <h2>Objetivos</h2>
            <p>Crescer na vida</p>

            <h2>Resumo</h2>  
            <a href="mailto:fulano@email.com.br">fulano@email.com.br</a>
        </div>


        <h2>Conhecimentos</h2>
        <p>C, C++, Java, HTML e CSS.</p>

        <h2>Formação Acadêmica </h2>
        <p>Curso Superior em andamento</p>

        <h2>Certificações</h2>
        <p>JAVA</p>

        <h2>Idiomas</h2>
        <p class="exp"> Ingles técnico avançado. </p>
        <h2>Experiências Anteriores</h2>
        <h3><a href="caelum.com.br">Propaganda</a></h3>

        <ul>
            <li>Servlet, JSP, JSF, JPA, Struts, Spring MVC</li>
            <li>Hibernate, JPA, JDBC</li>
            <li>Tomcat, JBoss, Glassfish</li>
            <li>Spring, Seam, Pico</li>
            <li>JUnit, Mockito, EasyMock</li>
        </ul>
    </body>
</html>

Codigo CSS

.exp{

    text-indent: 50px;

}
#email{

    text-decoration: underline;
    font-size: italic;

}
body{
    font-family: sans-serif;
}

#conteudo{
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}
#header{
    text-align: center;
}
h2{
    background-color:blue;
}
12 respostas

E ai Hiago,

Seguinte, coloca seu código aqui pra vermos, tanto o html, como css, mas coloca entre essas aspas, ```, pra que ele apareça certinho aqui.

Clica no botão formatação aqui do lado direito, que explica direitinho.

Ai fica mais fácil de te ajudar.

HTML...

<!DOCTYPE html>


<html>
    <head>
        <meta charset= "UTF-8">
        <title>Curriculo</title>
        <link rel="styslesheet" type="text/css" href="curriculo.css">

    </head>
    <body>
        <div id="conteudo"></div>
            <div id="header">
            <h1>Fulano da Silva</h1>

            <h2>Objetivos</h2>
            <p>Crescer na vida</p>

            <h2>Resumo</h2>  
            <a href="mailto:fulano@email.com.br">fulano@email.com.br</a>
        </div>


        <h2>Conhecimentos</h2>
        <p>C, C++, Java, HTML e CSS.</p>

        <h2>Formação Acadêmica </h2>
        <p>Curso Superior em andamento</p>

        <h2>Certificações</h2>
        <p>JAVA</p>

        <h2>Idiomas</h2>
        <p class="exp"> Ingles técnico avançado. </p>
        <h2>Experiências Anteriores</h2>
        <h3><a href="caelum.com.br">Propaganda</a></h3>

        <ul>
            <li>Servlet, JSP, JSF, JPA, Struts, Spring MVC</li>
            <li>Hibernate, JPA, JDBC</li>
            <li>Tomcat, JBoss, Glassfish</li>
            <li>Spring, Seam, Pico</li>
            <li>JUnit, Mockito, EasyMock</li>
        </ul>
    </body>
</html>
.exp{

    text-indent: 50px;

}
#email{

    text-decoration: underline;
    font-size: italic;

}
body{
    font-family: sans-serif;
}

#conteudo{
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}
#header{
    text-align: center;
}



h2{
    padding: 5px;
}

Obrigado pela dica Leandro!

Hiago, você não especificou a cor de fundo no h2... teria que ficar assim, ex:

h2 {
    background-color: blue;
}

Acho que você esqueceu de definir a background-color pros h2, Hiago!

Esqueci de dizer.. Mesmo colocando o h2 com background no CSS ainda continua sem funcionar, havia tirado para testar o mesmo, e esqueci de colocar de volta..

Oi Hiago, tudo certo?

Testei aqui seu código, e coloquei um background: orange no H2 e parece tudo ok!

Confere o caminho do seu CSS se está tudo ok.

Pelo seu HTML postado, o CSS tem que estar no mesmo diretório do HTML.

Espero ter ajudado,

Abcs

O código está correto, então, Hiago!

Cheque se você não deixou o CSS em um diretório diferente do HTML, ou se o nome do CSS que está no <link> não está diferente do verdadeiro nome do CSS.

Tentei o back-ground de outras cores, nenhuma funcionou. O <link> está correto, estão no mesmo diretório, e a única parte que não funciona é esse h2. Estou usando o sublime text, pode ser algo relacionado a isso?

Não, o problema dificilmente é do editor. Pode postar aqui como está definindo o background? Porque você colocou aqui back-ground, mas lembre que a sintaxe correta é background: cor ou background-color: cor

Oi, Hiago, tudo bem? Testei e analizei seu problema e o erro está no link do seu css.

Ola o rel: styslesheet (stylesheet) está escrito errado.

 <link rel="styslesheet" type="text/css" href="curriculo.css">

Se estiver assim no seu arquivo, tente corrigir isso.

 <link rel="stylesheet" type="text/css" href="curriculo.css">
solução!

Oi, Hiago, tudo bem? Testei e analizei seu problema e o erro está no link do seu css.

Olha o rel: styslesheet (stylesheet) está escrito errado.

 <link rel="styslesheet" type="text/css" href="curriculo.css">

Se estiver assim no seu arquivo, tente corrigir isso.

 <link rel="stylesheet" type="text/css" href="curriculo.css">

Sim, tinha um ''S'' a mais na palavra style, muito obrigado!