Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Dale Sublett
Dale Sublett
14,231 Points

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

Dale Sublett
Dale Sublett
14,231 Points

.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; }

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,967 Points

Can you post a snapshot of your workspace?

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,967 Points

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

Dale Sublett
Dale Sublett
14,231 Points

<!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

Dale Sublett
Dale Sublett
14,231 Points
Dale Sublett
Dale Sublett
14,231 Points

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?