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

[Dúvida] Alinhando texto com arquivo externo

Olá!

Pessoal, não estou conseguindo centralizar com o arquivo esterno.

Acontece que já olhei algumas postagens aqui do fórum sobre o arquivo externo, mas não consegui resolver mesmo assim.

<!DOCTYPE html>
<html lang="pt-br;">
    <head>
        <title>escreve</title>
        <meta charset="UTF-8;">
        <link rel="stylesheet;" href="style.css">
        <style>

        </style>


    </head>

    <body>
        <h1 style="text-align: center;">Pão doce</h1>

        <p style="font-size:20px; text-align: center;">escrever faz bem</p>
        <p>coisa boa</p>
    </body>
</html>

Acima está o "index.html"

p{text-align: center;}

Este outro é o "style.css"

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeOs arquivos estão na mesma pasta, como mostra a imagem acima. Com isso eu deduzi que eu tivesse errado em alguma pare lá entre as property, perdi mais um tempinho revendo junto ao vídeo e continua não centralizando.

6 respostas

Olá boa noite,

Tente remover o ponto e virgula após o stylesheet. Então vai ficar:

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

Você também pode criar uma classe para o texto coisa boa, no index vai ficar assim:

<p class="coisa-boa">coisa boa</p>

No CSS vai ficar assim:

.coisa-boa {
    text-align: center;
}

Espero ter ajudado!

solução!

Olá, tudo bem? Espero que sim.

Bom, tem algumas correções a serem realizadas em seu código. Então, aqui vai algumas sugestões para um código limpo, organizado e funcional.

  1. Cuidado com o uso do ";" qualquer mínimo detalhe pode fazer algo deixar de funcionar ou "embaralhar" a execução de uma tag. Identifiquei alguns erros nas linhas 2, 5 e 6 referente ao uso incorreto do ;.

  2. Como há o uso de um arquivo externo de estilo em CSS, não tem necessidade a existência do CSS inline. Isso ocorre nas TAGS "h1" e "p".

  3. Há uma TAG "style" vazia nas linhas 7 e 9.

Correção do código HTML, de acordo com minha solução:

<!DOCTYPE html>
<html lang="pt-br">

        <head>
            <meta charset="UTF-8">
            <title>escreve</title>
            <link rel="stylesheet" href="style.css">
        </head>

        <body>
            <h1>Pão doce</h1>
            <p>escrever faz bem</p>
            <p>coisa boa</p>
        </body>

</html>

Correção do arquivo externo de estilo CSS:

h1 {
    text-align: center;
}

p {
    text-align: center;
    font-size:20px; 
}

Espero ter ajudado, abrç!

Gabriel Loyola Mattedi e Thiago Lopes Ramos, obrigado pelas orientações e a ajuda!

Aderi as recomendações e correções que fizeram e funcionou! Agora está com o resultado que eu desejava.

Dei uma fuçada pelos meus arquivos e encontrei a pasta com o index e o style duplicado. Acredito que isso tenha participação no problema também!

Mais uma vez agradeço pela ajuda!

Boa noite. Acontece que o problema citado pelo colega acima, foi alcançado seguindo o passo a passo da aula. Na tela do instrutor, funciona corretamente, onde ele não apaga as referências de estilo na aba "index.html" pois apenas uma linha estava utilizando o "font-size".

Depois de muito tentar e repetir de acordo com a aula, eu ja estava desanimada por que nao conseguia centralizar usando o linkl css, somente o inline. Segui as dicas do Thiago e copiei o codigo CSS dele, deu certo. (obrigada, Thiago :) ) A unica duvida que fica e que a forma como foi passado na aula nao funcionou de jeito algum ! :/ Realmente nao sei o que pode ter sido. Agora consigo dar continuidade com as aulas

Por nada Daniela e Aluno (criador do post), havendo mais dúvidas postem aqui no fórum. Nossa comunidade vai se ajudando na medida do conhecimento de cada um. :)