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

Não consigo aplicar css

Boa tarde,por que eu não consigo aplicar css dentro desse codigo html? durante a aula foi falado que podia, caso não quisesse usar um arquivo externo. Ênfase no text align, no meu código ele não puxou o comando... Obrigado desde já.

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title>
            Projeto 1.0
        </title>
        <meta charset="utf-8">
        <h1>
            text-align
        </h1>




    </head>

    <body>
        <header> <h1>Salve familia</h1></header>
    </body>
</html>
5 respostas

Olá Samuel.

Tudo bem ?

Bom pelo que eu entendi do seu código, você tentou fazer o css já na mesma página que seu html.

Sugiro algumas alterações para solucionar o seu problema.

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title>
            Projeto 1.0
        </title>
        <meta charset="utf-8">
        <style>
            h1{
            text-align: center;
            }
        </style>
    </head>
    <body>
        <header> 
            <h1>Salve familia</h1>
        </header>
    </body>
</html>

Espero ter ajudado e bons estudos XD.

Ajudou muito, consegui identificar o erro, mas se não se importa, pode me dizer o por que de ter chamado o style? e não o h1, pode ser uma duvida meio besta mas isso me deixou curioso kkkk

solução!

Relaxa Samuel, claro que eu te explico.

Besteira é não perguntar.

Quando você usa a tag style você está dizendo pro navegador que tudo o que estiver naquela parte deve ser lido como um CSS.

Caso você queira editar direto na tag o correto seria assim:

<h1 style="text-align:center;">texto</h1>

O ideal quando você estiver editando é sempre separar o CSS do HTML, fazendo a importação, como é mostrada na aula, isso vai facilitar na manutenção do seu código com o tempo.

Um outro motivo pra não se fazer uma css-inline é porque no css você quer alterar mais de um item, fazendo no exemplo que eu mostrei agora do H1, você só altera aquele H1, vou dar um outro exemplo agora usando a tag p.

<p style="color:red;">Oi!</p>
<p>Tchau!</p>

Repare que apenas um dos parágrafos ficou com o texto em vermelho, mas vamos dizer que eu quero que todos os meus parágrafos fiquem da cor vermelha, imagina que eu não tenha apenas 2 parágrafos, mas vinte.

<p style="color:red;">Oi!</p>
<p>Tchau!</p>
<p>Tchau!</p>
<p>Tchau!</p>
<p>Tchau!</p>
<p>Tchau!</p>
<p>Tchau!</p>
<p>Tchau!</p>

Repara eu teria que replicar o style="color:red;" em cada uma das tags, não é algo fácil e nem viável de se trabalhar. Agora se eu fizer:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title>
            Projeto 1.0
        </title>
        <meta charset="utf-8">
        <style>
            h1{
            text-align: center;
            }
p{
    color:red;
}
        </style>
    </head>
    <body>
        <header> 
            <h1>Salve familia</h1>
        </header>
    <main>
        <section>
            <p >Oi!</p>
<p>Tchau!</p>
<p>Tchau!</p>
<p>Tchau!</p>
<p>Tchau!</p>
<p>Tchau!</p>
<p>Tchau!</p>
<p>Tchau!</p>            
        <section>
    </main>
    </body>
</html>

Fica muito melhor, mas vamos dizer que por algum motivo em específico você precisou colocar um style ali em um parágrafo, veja o que ocorre:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title>
            Projeto 1.0
        </title>
        <meta charset="utf-8">
        <style>
            h1{
            text-align: center;
            }
p{
    color:red;
}
        </style>
    </head>
    <body>
        <header> 
            <h1>Salve familia</h1>
        </header>
    <main>
        <section>
            <p style="color:blue;">Oi!</p>
<p>Tchau!</p>
<p>Tchau!</p>
<p>Tchau!</p>
<p>Tchau!</p>
<p>Tchau!</p>
<p>Tchau!</p>
<p>Tchau!</p>            
        <section>
    </main>
    </body>
</html>

Repare que somente aquele que teve a edição do style, ficou em azul, isso porque o navegador dá como prioridade o CSS feito inline.

Esta ai mais um motivo para se trabalhar com o CSS ou em script separado ou dentro da tag style.

Espero ter ajudado XD

muito obrigado, ajudou bastante!!

De nada ! XD

Sucesso ai nos estudos :D .