2

Não estou conseguindo fazer referência a uma <div>, que está no meu arquivo index.html, através do meu arquivo .css.

Tenho a seguinte estrutura no meu arquivo index.html:

<!-- Content -->
<div class="container">
    <div class="row">
        <div class="div-address">
            <h3>Endereço 1</h3>
            <p>Endereço 1</p>
        </div>
    </div>
</div>

Estou tentando fazer referência à <div class=""div-address>, porém, os ajustes que estou fazendo no arquivo .css não estão sendo aplicados a esta div.

A referência no meu arquivo .css é dada por:

.div-address{
  border: 1px solid;
  font-family: 'Boogaloo', cursive;
}

Esta estrutura está implementada logo abaixo da estrutura definida no arquivo .css. Fiz isso pensando que meu estilo poderia sobrescrever algum estilo já existente na estrutura CSS do Bootstrap.

NOTA:

  1. Estou usando o framework Bootstrap
  2. A estrutura de arquivo está correta (index.html, pasta css, pasta js etc.)
  3. Na primeira linha do meu arquivo .css estou importando a font utilizada para o div (@import url("https://fonts.googleapis.com/css?family=Boogaloo|Yesteryear");)

Quando eu coloco o estilo ".div-address" no meu arquivo index.html, o estilo é implementado corretamente na div. Devo estar cometendo algum erro quando à referência de classes no CSS ou algo está sobrescrevendo meu estilo criado no arquivo .css.

Bom, ainda sou novato em desenvolvimento Web e peço a ajuda dos senhores para solucionar este problema.

Obrigado.

7
  • 2
    Estás a incluir esse arquivo .css na página com <link rel="stylesheet" type="text/css" href="etc...?
    – Sergio
    Commented 1/01/2017 às 22:07
  • Olá @Sergio, estou sim "<link href="css/bootstrap.css" rel="stylesheet">". Minha estrutura de arquivos está correta. Digo isso porque consegui implementar alguns ajustes através do arquivo .css. Commented 1/01/2017 às 22:09
  • Ok, então estás a mudar o ficheiro do boostrap diretamente/manualmente? ele é estático ou é compilado? tipo de less para css ou stylus para css?
    – Sergio
    Commented 1/01/2017 às 22:10
  • Olá @Samir, estou implementando meus estilo após todos os estilos definidos no arquivo .css. Commented 1/01/2017 às 22:11
  • @SamirBraga , quais referências? Poderia ser mais específico? Eu ainda sou novato nesse assunto. Commented 1/01/2017 às 22:24

1 Resposta 1

1

Acho que o melhor seria colocar todos seus estilos que não façam parte do Bootstrap em um arquivo diferente, e lincá-lo após todos os links css. Tal como:

<link href="css/bootstrap.css" rel="stylesheet"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.‌​7.0/css/font-awesome‌​.min.css"    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jque‌​ry.min.js"></script> 
<script src="js/bootstrap.min.js"></script>

<!-- Aqui vem seu estilo -->
<link href="css/meu-arquivo-de-estilo.css" rel="stylesheet"> 
3
  • Entendi, não sabia que dava pra fazer isso. Acredito que deva funcionar. Vou tentar aqui e já respondo. Obrigado! Commented 1/01/2017 às 22:39
  • Funcionou @Samir, muito obrigado! Gostaria de saber apenas se essa é uma boa prática? Perco em desemprenho se eu implementar esta estrutura com mais de um arquivo CSS? Percebi que o meu arquivo pessoal herdou do arquivo css do Bootstrap. Acredito que seja pelo falo de ter sido declarado após o link do css do bootstrap. Mais uma vez obrigado! Commented 1/01/2017 às 22:45
  • @HudsonRodrigues, isso depende de algumas coisas, do tamanho do arquivo, de como as regras são sobrepostas, etc. Sugiro que pesquise sobre performance front-end, é um assunto muito interessante e útil :). Commented 1/01/2017 às 22:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .