Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Overriding bootstrap .btn styling......unvisited links are styled properly, but I can't figure out why my :visited state

Overriding bootstrap .btn styling......unvisited links are styled properly, but I can't figure out why my :visited state is overriding the unvisited style. I only want the Orange color to apply if the user has visited the link, otherwise, use the other stying.

Code has been posted

.btn { margin-left: 10px; margin-right: 10px; background-color: darkgrey; color: darkred; }

.btn:visited { color: orange; }

.btn:hover { /* Applies to links under the pointer */ font-weight: bold; background-color: darkgrey; color: darkred; }

Can you post a snapshot of your workspace?

If you are not using a Treehouse workspace then index.html will probably do. I was just trying to reproduce the behavior.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Dan's Cakes</title>

<style>

    img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 40%;
        padding: 70px 0;
    }

    .welcome {
        text-align: center;
        color: darkred;
    }

    .nav-center {
        text-align: center;
    }
</style>

<!--link to bootstrap css-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--link for icons-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<!--link to css stylesheet-->
<link href="restaurantStyles.css" rel="stylesheet" type="text/css" />

</head> <body> <div class="container"> <header id="header"> <div class="jumbotron name-font"> <h1 class="display-4">Dan's Cakes</h1> <hr class="my-4"> <p class="lead">BIG NEWS!! Dan's Cakes will be opening a new restaurant VERY soon!!!!</p>

    </div>
</header>
<hr />
<nav class="nav-center">
    <a href="index.html" class="btn badge-pill"><i class="fas fa-home"></i>Home</a>
    <a href="menu.html" class="btn badge-pill">Menu</a>
    <a href="contact.html" class="btn badge-pill">Contact Us</a>
</nav>
<hr />
<h2 class="welcome">Welcome to Dan's cakes!! We specialize in donuts and sweet treats! Take a look at our menu.</h2>
<br />
    <!--added the carousel-->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner text-center">

        <div class="carousel-item active">
            <h2>WE'RE OPENING A NEW LOCATION!!!</h2>
        </div>
        <div class="carousel-item">
            <h2>We're rolling out our seasonal menu,</h2> 
            <h2>with special options for this season.</h2>
        </div>
        <div class="carousel-item">
            <h2>The Drink of the Month is SG Special Brew</h2>
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<!--restaurant image-->
<img src="images/bakery.jpg" style="display: block;margin-left: auto;margin-right: auto;width: 50%;" />
<!--restaurant description-->
<h3 class="welcome">
    Dan's Cakes has been specalizing in breakfast pastries since 1987. Our menu may be small, but our promise
    to serve the most appetizing pastries is our largest priority. Our small menu allows us to focus solely on 
    the purest ingredients and delivering perfection, every..single..day. 
</h3>
<br />
<footer>
    <p>1123 Silk Way, Anchorage, AK, 99501</p>
    <p>907-998-0122</p>
</footer>

<!--links to bootstrap js, jquery and popper-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="validate.js"></script>

</body> </html>

1 Answer

Work space as in my code editor with my files?

Or as in my index.html page and how my bootstrap and external css files are ordered?