search

brackets-archive / bracketsIssues

Archive of issues in brackets.
0 stars 0 forks source link

[CLOSED] Css code wont run on the live preview for some reason. #11004

Open core-ai-bot opened 3 years ago

core-ai-bot commented 3 years ago

Issue by ebot1515 Saturday Nov 19, 2016 at 22:48 GMT Originally opened as https://github.com/adobe/brackets/issues/12928

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.

core-ai-bot commented 3 years ago

Comment by petetnt Sunday Nov 20, 2016 at 01:27 GMT

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?

core-ai-bot commented 3 years ago

Comment by swmitra Tuesday Nov 22, 2016 at 06:40 GMT

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.

core-ai-bot commented 3 years ago

Comment by ebot1515 Friday Nov 25, 2016 at 22:47 GMT

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

core-ai-bot commented 3 years ago

Comment by ebot1515 Friday Nov 25, 2016 at 22:48 GMT

sorry for the delay. My internet was down.

core-ai-bot commented 3 years ago

Comment by ebot1515 Friday Nov 25, 2016 at 22:49 GMT

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

core-ai-bot commented 3 years ago

Comment by ficristo Saturday Dec 03, 2016 at 16:36 GMT

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