CSS and Bootstrap precedence confusion

Question

I have a custom CSS I use with bootstrap. All along I've had my CSS written first before bootstrap then I realised that you're supposed to have Bootstrap first before CSS. Now I'm having problems with my rendering, for example font sizes and colours , particularly with Bootstrap's class=sidenav which I have customised in my CSS file.

<link rel="stylesheet" href="/template/style.css">
bootstrap CSS

For the above, my webpage loads as I want it to (so far). My hover codes in my CSS work properly. But when I try to customise other things, they don't work.

bootstrap CSS
<link rel="stylesheet" href="/template/style.css">

For the above, my webpage loads with my styling except the font size is different but the colours for sidenav are the same as the first scenario. (ie. According to my custom CSS file) My hover codes in my CSS works properly.

However if I try a different (the correct) href for example <link rel="stylesheet" href="/website/template/style.css"> the colours for my sidenav disappear but the font size goes according to my CSS. My hover codes in my CSS don't work properly.

What is going on?

Answer 1

Looking at the path of your href=, I think its not able to render in html because its incorrect.

If you are pointing to the same directory where your index.html file is, you should not need to add the / in front of template.

Try using:

<link rel="stylesheet" href="./template/styles.css">

The./ points to the current directory. Or you can try

<link rel="stylesheet" href="template/styles.css">

Answer 2

I think something like this is your issue.

Given this order:

<link rel="stylesheet" href="styles1.css" />
<link rel="stylesheet" href="styles2.css" />

# style1.css
.my-class .very-specific .class-selector { color: red; }

# style2.css
.my-class .class-selector { color: blue; }

The color will be outputted as red, because the first CSS file was more specific.