External StyleSheet (CSS) link to HTML5 file using TextEdit (MAC)

I am taking my first web design class. We are coding in HTML5 and CSS. I have created an index.html document that works correctly when I use and to code the colors, fonts and layout. Now the assignment is to remove the section and replace it with a link to a CSS external stylesheet. After doing this, my HTML file does not appear to be actually linking to my CSS file. Any help you can provide would be sincerely appreciated.

My HTML and CSS files are saved in the same file on my computer. The file names are index.html and javajam.css . I am using a MAC and TextEditor.

Here is my HTML code:

<!DOCTYPE html>
<html lang=“en”>
    <head>
        <title>JavaJam Coffee House Menu</title>
        <meta charset=“utf-8”>
        <link rel=“stylesheet” href=“javajam.css”>
    </head>
    <body id=“wrapper”>
        <h1>JavaJam Coffee House</h1>
        <br>
        <nav>
            <a href=file:///JavaJam/index.html>Home</a>
            &nbsp;
            <a href=file:///JavaJam/menu.html>Menu</a>
            &nbsp;
            <a href=http://music.html>Music</a>
            &nbsp;
            <a href=http://jobs.html>Jobs</a>
        </nav>
        <br>
        <dt>
            <strong>Just Java</strong>
        </dt>
        <dd>Regular house blend, decaffeinated coffee, or flavor of the day.</dd>
        <dd>Endless Cup $2.00</dd>
        <br>
        <dt>
            <strong>Cafe au Lait</strong>
        </dt>
        <dd>House blended coffee infused into a smooth, steamed milk.</dd>
        <dd>Single $2.00 &nbsp Double $3.00</dd>
        <br>
        <dt>
            <strong>Iced Cappuccino</strong>
        </dt>
        <dd>Sweetened espresso blended with icy-cold milk and served in a chilled glass.</dd>
        <dd>Single $4.75 &nbsp Double $5.75</dd>
        <br>
        <br>
        <footer>
            Copyright&copy 2013 JavaJam Coffee House
            <br>
            <a href=“mailto:[email protected]”>[email protected]</a>
        </footer>
    </body>
</html>

Here is my CSS code:

body {
    background-color: #ffffcc;
    color: #330000;
    font-family: Veranda, Arial, sans-serif;
}
h1 {
    background-color: #ccaa66;
    color: #000000;
    line-height: 200%;
    text-align: center;
}
.nav {
    text-align: center;
}
#footer {
    background-color: #ccaa66;
    color: #000000;
    font-size: small;
    font-style: italic;
    text-align: center;
}
#wrapper {
    width: 80%;
    margin-right: auto;
    margin-left: auto
}

Solution

I am also a not an expert, but maybe your fault is the wrong quotation marks are not the right one.

“en” -> "en" ....

Here is the correctly version. I have tested it and it works. I have add type="text/css" media="screen", but I will be without it.

<!DOCTYPE html>
 <html lang="en">
<head>
    <title>JavaJam Coffee House Menu</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" media="screen" href="javajam.css">
</head>
<body id="wrapper">
    <h1>JavaJam Coffee House</h1>
    <br>
    <nav>
        <a href=file:///JavaJam/index.html>Home</a>
        &nbsp;
        <a href=file:///JavaJam/menu.html>Menu</a>
        &nbsp;
        <a href=http://music.html>Music</a>
        &nbsp;
        <a href=http://jobs.html>Jobs</a>
    </nav>
    <br>
    <dt>
        <strong>Just Java</strong>
    </dt>
    <dd>Regular house blend, decaffeinated coffee, or flavor of the day.</dd>
    <dd>Endless Cup $2.00</dd>
    <br>
    <dt>
        <strong>Cafe au Lait</strong>
    </dt>
    <dd>House blended coffee infused into a smooth, steamed milk.</dd>
    <dd>Single $2.00 &nbsp Double $3.00</dd>
    <br>
    <dt>
        <strong>Iced Cappuccino</strong>
    </dt>
    <dd>Sweetened espresso blended with icy-cold milk and served in a chilled glass.</dd>
    <dd>Single $4.75 &nbsp Double $5.75</dd>
    <br>
    <br>
    <footer>
        Copyright&copy 2013 JavaJam Coffee House
        <br>
        <a href="mailto:[email protected]">[email protected]</a>
    </footer>
</body>