Class selector in CSS

Question

I’m having trouble referencing a <div>, which is in my index.html file, through my . css file.

I have the following structure in my index.html file:

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

I’m trying to make a reference to <div class=""div-address>, however, the adjustments I am making to the . css file are not being applied to this div.

The reference in my . css file is given by:

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

This structure is implemented just below the structure defined in the .css. I did this thinking that my style could override some existing style in the CSS structure of Bootstrap.

NOTE:

1. I’m using the Bootstrap framework
2. The file structure is correct (index.html, css folder, js folder etc.)
3. In the first line of my . css file I am importing the font used for div (@import url("https://fonts.googleapis.com/css?family=Boogaloo|Yesteryear");)

When I put the ". div-address" style in my index.html file, the style is implemented correctly in the div. I must be making a mistake when referring to classes in CSS or something is overwriting my created style in the . css file.

Well, I’m still new to web development and I ask for your help in solving this problem.

Thank you.

Answer 1

I think the best would be to put all your styles that are not part of Bootstrap in a different file, and lynch it after all the links css. Just as:

<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">