CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
ethacker
ethacker

Reputation: 131

External CSS file not working with Bootstrap CSS

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="author" content="Emily Thacker">
        <title>[Insert Name of Business Here]</title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        <link rel="stylesheet" type="text/css" href="large_css.css">
    </head>
    <body>
    <div class="container-fluid">

    <header class="page-header">
        <h3 class="text-center">[Insert Company Logo here]</h3>
        <div class="btn-group btn-group-justified">
            <a class="btn navigation">Home</a>
            <a class="btn navigation">About</a>
            <div class="btn-group">
                <a class="btn dropdown-toggle navigation" data-toggle="dropdown">
                    Services <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Web</a></li>
                    <li><a href="#">Mobile</a></li>
                    <li><a href="#">App</a></li>
                </ul>
            </div>
            <a class="btn navigation">Contact</a>
        </div>
    </header>


    <section class="">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </section>
    <section>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </section>

    <footer class="modal-footer">
        <li class="list-group-item-heading">list item</li>
        </ul>
        <address>Contact Information</address>
    </footer>
    </div> <!-- closing container -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
    </html>

CSS

body > div > header > div > a.navigation {
    background-color: darkgray;
    color: white;
}

So I'm trying to alter the colors on the navigation bar (anchor tags with btn classes). I've tried increasing specificity, my link to the external css is after the bootstrap cdn, I've cleared the cache, I've used !important. I can't seem to figure out what I'm missing. I'm completely new to bootstrap and am trying to figure out how to incorporate it into my website.

Upvotes: 0

Views: 2912

Answers (2)

manian
manian

Reputation: 1438

Start using IDE & syntax highlighting feature of the IDE.

This is not a direct answer to your question but it will save lots of your development hours in future to avoid these kinds of issues.

I hope you could have spent at least 30 minutes on trying to solve this issue and by posting it SO too. But I found the issue immediately when I looked at your code. This is because the syntax highlighting feature in SO code block's.

I got into these kind of issues many times during initial stages of my career & I spent tons of hours trying to solve the issue & later found that it was just a typo error or syntax error. Then I started using IDE and it now saves lot's of hours to me.

Always use an IDE and try to use the features of IDE. Here are some of the advantages of using IDE. https://stackoverflow.com/a/208221/4874281, Why is debugging better in an IDE?

And here is a list of IDE's that you can choose from, https://www.g2crowd.com/categories/integrated-development-environment-ide

Upvotes: 1

Agu Dondo
Agu Dondo

Reputation: 13609

You forgot to close the tag which includes bootstrap:

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Add the last > at the end.

Upvotes: 4

Related Questions