Brackets: Css code wont run on the live preview for some reason.

Created on 19 Nov 2016 · 6Comments · Source: adobe/brackets

Hi,
i have been coding HTML and CSS for about 2 months with Codecademy. I just finished my lessons on this languages and started to code for the first time (in brackets). But something isn't right, i just started the Navigation bar for an example website so i get to grips with the Program. I click live preview on the program, but my CSS script didn't work. It just didn't change the websites design at all. I was using CSS as an External part of my code (in a folder), because I find it tidier instead of endless scrolling to change something on the website. My links are correct like this:

Here is my code, tell me if somethings wrong (Just only started so really no information):

HTML

<!DOCTYPE html>
<html>
    <head>
        <title> Example Website</title>
        <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
        <link rel="stylesheet" href="main.css"/>
        <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    </head>

    <body>
        <!-- This is the Naigaton section at the top of the Page -->
        <header class="navigation">
            <div class="row">
                <h1 class="col-sm-4"> EXAMPLE title</h1>
                <nav class="col-sm-8 text-right">
                    <p>info</p>
                    <p>more info</p>
                    <p>even more info</p>
                </nav>
            </div>
        </header>
        <!-- This is the main part below the Navigation -->
    </body>


</html>

CSS

body {
    background-color: #696969;
    margin: 0;
    padding: 0;
}

navigation {
    color: rgba(27, 92, 232, 0.77);
}

h1 {
    font-family:  'Raleway' ,sans-serif;
}

Folder sequence

Example website
|
|______Index.html
|______main.css

thanks for the help.

Source

ebot1515

Most helpful comment

Hi @ebot1515!

Your code seems to be working fine for me. Note that the navigation part in the CSS is missing the . in front (should be .navigation) which makes it not point not to the class navigation, but to an (invalid) element navigation.

Can you share your operating system and Brackets version so we can debug the issue further?

petetnt on 20 Nov 2016

👍2

All 6 comments

Hi @ebot1515!

Can you share your operating system and Brackets version so we can debug the issue further?

petetnt on 20 Nov 2016

👍2

Hi @ebot1515 , Can you please share the requested details by @petetnt?
Without those details and a confirmation from your side we can't debug this issue further.

swmitra on 22 Nov 2016

👍1

OK, My operating system is Windows 10 10.0.14393 (Aniversary update). And my brackets version is Release 1.8 build 1.8.0-17108

ebot1515 on 25 Nov 2016

sorry for the delay. My internet was down.

ebot1515 on 25 Nov 2016

guys, once i put the dot behind the navigation in css. Only the blue font changed. Why that?

ebot1515 on 25 Nov 2016

If you want to override the bootstrap rules, your css file need to be places after the bootstrap one.

<!-- Here bootstrap has the precedence and override your rules -->
<link rel="stylesheet" href="main.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>

<!-- Here main has the precedence and override bootstrap rules -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" href="main.css"/>