Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Inline não funciona

Estou com dificuldades em colocar um texto em bold na página principal.

Seria o texto "Barbearia Alura"

segue index.html

<div class="principal">
    <h2 class="titulo-centralizado-sobre">Sobre a Barbearia Alura</h2>

    <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o
        seu
        cabelo e barba.
        Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>

    <p id="missao"><em>Nossa missão é: <strong id="conteudoMissao">"Proporcionar auto-estima e qualidade de vida aos
        clientes"</strong>.</em></p>

    <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda.
        O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.
    </p>
</div>

segue style-home.css

header {
    background: #BBBBBB;
    padding: 20px 0;
}

nav {
    position: absolute;
    top: 110px;
    right: 0;
}

nav li {
    display: inline;
    margin: 0 0 0 15px;
}

nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

nav a:hover {
    color: #C78C19;
    text-decoration: underline;
}

#banner {
    width: 100%;
}

.principal {
    background: #CCCCCC;
    padding: 30px;
}

.titulo-principal {
    padding-left: 20px;
}

.titulo-centralizado-sobre {
    text-align: center;
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.titulo-centralizado-beneficios {
    text-align: center;
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

#missao {
    font-size: 20px;
    font-style: italic;
}

.itens {
    font-style: italic
}

.beneficions {
    background: #FFFFFF;
    padding: 20px;
    display: block;
}

.listaBeneficios {
    vertical-align: top;
    display: inline-block;
    width: 20%;
    margin-right: 15%;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

.ïmagembeneficios {
    width: 50%;

    margin-left: 15%;

}

.caixa {
    position: relative;
    width: 940px;
    margin: 0 auto;
}

footer {
    text-align: center;
    background: url("bg.jpg");
    padding: 40px 0;
}

.copyright {
    color: #FFFFFF;
    font-size: 13px;
    margin: 20px 0 0;
}

p {
    text-align: center;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

#conteudoMissao {
    color: red;
    font-weight: bold;
}

#localizacao {
    text-align: center;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

#strong {
    font-weight: bold;
}
4 respostas

Fala ai Rafael, tudo bem? O problema está no seu seletor para o strong:

#strong {
    font-weight: bold;
}

Você está selecionado um elemento que tenha o id igual à strong.

Para fazer seletor por tag, apenas coloquei o nome da tag:

strong {
    font-weight: bold;
}

No caso teria que remover o # (seletor de id).

Espero ter ajudado.

Eu entendi e funcionou, porém agora surgiu outra dúvida: porque eu preciso colocar o "strong {font-weight: bold; }" no meu arquivo style-home.css? Ao meu entender de acordo com a aula, tudo que é colocado inline direto no arquivo html não precisaria de uma configuração no arquivo CSS, porque teoricamente o inline sobrepõe os outros (id, class e tag).

solução!

Provavelmente você deve estar utilizando algum Reset para seu CSS.

É provável que esse Reset tenha resetado o bold do strong.

Espero ter ajudado.

Olá Rafael, tudo certo?

Sobre a segunda pergunta, o inline css, declarado no próprio html se sobrepõe ao css declarado em um arquivo css, seja por classe ou id. Porém você não utilizou css inline no seu exemplo de html, você usou classes e id. O seu exemplo com declaração inline seria mais ou menos desse jeito:

<strong id="conteudoMissao" style="font-weight: bold; color: red; ">Proporcionar auto-estima e qualidade de vida aos clientes"</strong>

Conseguiu entender? Espero que sim :)

Bons estudos!