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)
18
respostas

Dúvidas no main h1

<!DOCTYPE html>
<html>
    <head>
        <title>Biografia - João da Silva</title>
        <meta charset="utf-8">
        <link rel="icon" href="favicon.png">
        <link rel="stylesheet" href="site.css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">

    </head>
    <body>
        <main>
            <h1>Sobre mim</h1>


            <p>Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade</em>, <em>durabilidade</em> e que <em>agregam valor</em> para meus clientes.</p>

            <p>Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.</p>

            <h2>Como trabalho</h2>
            <blockquote>
                <p>João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas! </p>
                <cite>José Souza, Fiat</cite>
            </blockquote>

            <p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. <strong>Não trabalho com escopo fechado</strong>: o cliente é que decide quando o produto está pronto.</p>

            <p>Também não trabalho com prazos fechados: <strong>qualidade é importante demais para ser sacrificada</strong>.</p>

            <h2>Experiência</h2>
            <blockquote>
                <p>João domina as tecnologias como ninguém</p>
                <cite>Manoel Santos, Petrobrás</cite>
            </blockquote>

            <p>Já desenvolvi projetos para grandes empresas como <a href="http://www.bmw.com">BMW</a>,<a href="http://www.uol.com.br">UOL</a> e <a href="http://www.ibm.com">IBM </a>. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.</p>

            <p>Também já fui contratado para transformar grandes portais, como <a href="http://www.terra.com.br">Terra</a> e <a href="http://www.g1.globo.com">G1</a>, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.</p>

            <h2>Comunidade</h2>

            <p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei <a href="portfolio.html"> diversas palestras</a> e mantenho um <a href="blog.html"> blog</a>.</p>

        <img src="C:\Users\SUPORTE\Documents\LOGICA\HTML e CSS\Projeto Aula 1\eu.jpg" alt="Foto de João da Silva">

        <aside>
            <h1>João da Silva</h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="portfolio.html">Portfolio</a></li>
                        <li><a href="bio.html">Sobre mim</a></li>
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
        </aside>

        </main>

        <footer>

            &copy João da Silva 2014

        </footer>
    </body>
</html>

Esse código acima é o HTML, a tag main está no mesmo local da aula e aparentemente tudo está de acordo.

body {
    font-family: "Crimson Text", "Times New Roman", serif;
    background-color: #F2FFFC;
    font-size: 120%;
}

h1, h2 {
    font-family: "Open Sans Condensed", "Arial", sans-serif;
}

main h1 {
    text-align: center;
    background-color: #851944;
    color: #FFF;
}

p {
    text-align: justify;
}

Esse é o código CSS, eu atribuo ao h1 principal (main) as regras de negócio referente a cor e tal. Porém ele identifica o h1 dentro do aside como um h1 principal. Já fiz vários testes, já tentei ver outros posts aqui no forúm e nada deu certo. Por favor, me ajudem XD

18 respostas

Hugo, você está testando no local certo? as vezes você pode estar vendo um arquivo no navegador mas não é onde você está realizando as alterações.

Olá, Hugo. Você já tentou criar um id para o titulo e aplicar o css só nele? Por exemplo:

Luiz, será de grande ajuda. Meu email é hugonaaman@gmail.com, fica a vontade pra me mandar um email de teste. Te respondo com os arquivos zip

Olá Hugo, ele identifica o H1 no ASIDE, pois o ASIDE também está dentro da Tag Main, logo ambos são H1 de MAIN.

Tente fazer o que o Daniel Sugeriu criando um ID ou CLASSE para o h1 em especifico. Ou retirando o ASIDE de dentro do MAIN, assim também resolve o problema.

Retirei o ASIDE de dentro do MAIN e não funcionou, será algum erro no css?

Mantenha o ASIDE fora do MAIN e tente colocar desta forma no seu CSS:

main > h1 {
    text-align: center;
       background-color: #851944;
        color: #FFF;
}

Bem, é sempre melhor utilizar ID e Classes para isto. De verdade deixa seu Código muito mais organizado. Provavelmente você não foi introduzido a este conceito ainda então dê uma pesquisada no Google mesmo como funciona e tente aplicar.

Não vi nada ainda sobre ID e Classes, por isso não utilizei.

<!DOCTYPE html>
<html>
    <head>
        <title>Biografia - João da Silva</title>
        <meta charset="utf-8">
        <link rel="icon" href="favicon.png">
        <link rel="stylesheet" href="site.css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">

    </head>
    <body>
        <main>
            <h1>Sobre mim</h1>


            <p>Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade</em>, <em>durabilidade</em> e que <em>agregam valor</em> para meus clientes.</p>

            <p>Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.</p>

            <h2>Como trabalho</h2>
            <blockquote>
                <p>João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas! </p>
                <cite>José Souza, Fiat</cite>
            </blockquote>

            <p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. <strong>Não trabalho com escopo fechado</strong>: o cliente é que decide quando o produto está pronto.</p>

            <p>Também não trabalho com prazos fechados: <strong>qualidade é importante demais para ser sacrificada</strong>.</p>

            <h2>Experiência</h2>
            <blockquote>
                <p>João domina as tecnologias como ninguém</p>
                <cite>Manoel Santos, Petrobrás</cite>
            </blockquote>

            <p>Já desenvolvi projetos para grandes empresas como <a href="http://www.bmw.com">BMW</a>,<a href="http://www.uol.com.br">UOL</a> e <a href="http://www.ibm.com">IBM </a>. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.</p>

            <p>Também já fui contratado para transformar grandes portais, como <a href="http://www.terra.com.br">Terra</a> e <a href="http://www.g1.globo.com">G1</a>, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.</p>

            <h2>Comunidade</h2>

            <p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei <a href="portfolio.html"> diversas palestras</a> e mantenho um <a href="blog.html"> blog</a>.</p>

        <img src="C:\Users\SUPORTE\Documents\LOGICA\HTML e CSS\Projeto Aula 1\eu.jpg" alt="Foto de João da Silva">

        </main>

        <aside>
            <h1>João da Silva</h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="portfolio.html">Portfolio</a></li>
                        <li><a href="bio.html">Sobre mim</a></li>
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
        </aside>
        <footer>
            &copy João da Silva 2014
        </footer>
    </body>
</html>

Fiz todas as alterações possíveis e ainda continua aparecendo da mesma forma :|

body {
    font-family: "Crimson Text", "Times New Roman", serif;
    background-color: #F2FFFC;
    font-size: 120%;
}

h1, h2 {
    font-family: "Open Sans Condensed", "Arial", sans-serif;
}

main > h1 {
    text-align: center;
    background-color: #851944;
    color: #FFF;
}

p {
    text-align: justify;
}

Então Hugo, Testei a solução do José e ela funciona, mas uma segunda opção é:

<h1 id="principal">Titulo</h1>

E no css:

#principal {
      text-align: center;
        background-color: #851944;
        color: #FFF;
}

Não se preocupe com essa sintaxe já que mais para frente ela será explicada detalhadamente no curso, eu escolhi o id mas com o class="principal" também seria uma opção válida. Espero que ajude :)

Eu tô quebrando a cabeça desde ontem pra resolver esse problema e até agora nada. Eu já até pensei que o problema seria o editor de texto que estou usando: Sublime Text. Mas pelo visto não é. Acabei de fazer as alterações propostas pelo Daniel enquanto dou prosseguimento à algumas tarefas do curso, porém no momento quase nada que eu faço no CSS é aplicado na minha página HTML. Segue os respectivos códigos abaixo.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Biografia - João da Silva</title>
        <meta charset="utf-8">
        <link rel="icon" href="favicon.png">
        <link rel="stylesheet" href="site.css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">

    </head>
    <body>
        <main>
            <h1 id="principal">Sobre mim</h1>


            <p>Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade</em>, <em>durabilidade</em> e que <em>agregam valor</em> para meus clientes.</p>

            <p>Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.</p>

            <h2>Como trabalho</h2>
            <blockquote>
                <p>João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas! </p>
                <cite>José Souza, Fiat</cite>
            </blockquote>

            <p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. <strong>Não trabalho com escopo fechado</strong>: o cliente é que decide quando o produto está pronto.</p>

            <p>Também não trabalho com prazos fechados: <strong>qualidade é importante demais para ser sacrificada</strong>.</p>

            <h2>Experiência</h2>
            <blockquote>
                <p>João domina as tecnologias como ninguém</p>
                <cite>Manoel Santos, Petrobrás</cite>
            </blockquote>

            <p>Já desenvolvi projetos para grandes empresas como <a href="http://www.bmw.com">BMW</a>,<a href="http://www.uol.com.br">UOL</a> e <a href="http://www.ibm.com">IBM </a>. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.</p>

            <p>Também já fui contratado para transformar grandes portais, como <a href="http://www.terra.com.br">Terra</a> e <a href="http://www.g1.globo.com">G1</a>, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.</p>

            <h2>Comunidade</h2>

            <p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei <a href="portfolio.html"> diversas palestras</a> e mantenho um <a href="blog.html"> blog</a>.</p>

        <img src="C:\Users\SUPORTE\Documents\LOGICA\HTML e CSS\Projeto Aula 1\eu.jpg" alt="Foto de João da Silva">

        </main>

        <aside>
            <h1>João da Silva</h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="portfolio.html">Portfolio</a></li>
                        <li><a href="bio.html">Sobre mim</a></li>
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
        </aside>



        <footer>
            &copy João da Silva 2014
        </footer>
    </body>
</html>

CSS:

body {
    font-family: "Crimson Text", "Times New Roman", serif;
    background-color: #F2FFFC;
    font-size: 120%;
}

h1, h2 {
    font-family: "Open Sans Condensed", "Arial", sans-serif;
}

#principal{
    text-align: center;
    background-color: #851944;
    color: #FFF;
}

p {
    text-align: justify;
}

blockquote{
    background-color: #D9E5E3;
}

aside{
    background-color: #3C1D3D;
    color:#F2FFFC ;
}

footer{
    background-color: #000;
    color:#F2FFFC;
}
nav a{
    color: #F2FFFC;
}

Você verificou se existe algum erro na especificação do caminho que aponta para o seu css?

Olha eu já coloquei até referenciando o disco local na hora de chamar o arquivo site.css e não funcionou.

        <link rel="stylesheet" href="C:\Users\SUPORTE\Documents\LOGICA\HTML e CSS\site.css">

Não entendi muito bem sua sugestão, Daniel.

Tente deixar só

        <link rel="stylesheet" href="site.css">

Isso é, caso não tenha colocado seu arquivo css dentro de uma pasta epecifica, por exemplo:

<link rel="stylesheet" href="css/site.css">

Boa tarde Hugo,

Fiz um teste no CodePen e bastou alterar o main h1 para main > h1 ;)

MAAAAAAAAS semanticamente o <h1> geralmente é único, então o ideal é que o restante dos cabeçalhos utilizem os outros <h2>, <h3>, <h4> ...

Espero ter ajudado!

Abraços!

Daniel, deixei só o caminho pro arquivo site.css. Continua da mesma forma. Luiz Fernando já havia feito isso, não funcionou. Fiz de novo agora e não funcionou também. O que eu acho estranho é que mesmo aplicando novas regras de negócio ao código, como cor do footer, cor do menu de navegação e etc... o código ainda assim, não aplica essas novas alterações.

Luiz Fernando o Sublime Text, editor de texto que to usando, me proporciona a opção de ao clicar com o botão direito, abrir no navegador o arquivo html. Logo, não tem como eu estar abrindo um arquivo diferente.

Hugo,

Alterei no CodePen pra deixar igual ao segundo bloco de código que você disponibilizou, e ele está pegando o valor do #principal normalmente, por aqui no fórum será um pouco complicado a gente conseguir te ajudar já que aparentemente é algo que está acontecendo só na sua máquina, se quiser tentar me mandar os arquivos zipados e eu vejo aqui na minha máquina.

Responde ai que eu passo meu e-mail.

Como o Luiz disse é possível que seja algo na sua máquina, mas só por desencargo tente usar um comando inline no html.

<style type="text/css">
h1 {
    text-align: center;
    background-color: #851944;
    color: #FFF;
}
</style>

Só por desencargo acho que vale a pena tentar, embora eu não goste desse estilo já que dificulta a compreensão.

solução!

Prezado Hugo,

Conforme conversamos via e-mail, verificamos que houve apenas um erro de estrutura do CSS, segue a explicação:

Você tem 2 <h1> na sua página, uma fica no <main> e outro no <aside>.

No seu CSS estava apenas h1 {...}, sendo assim o CSS aplica esses atributos para TODOS OS <h1> , se você colocar main h1 {...} ele irá aplicar os atributos APENAS PARA OS <h1> DENTRO DO <main>, o do <aside> ficará sem esses atributos.