Styling Text on Chapter 7

thuyhoang · September 26th, 2013, 08:02 AM

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
	<title>Example Cafe - community cafe in Newquay, Cornwall, UK</title>
	<link rel="stylesheet" href="interface.css">    
</head>

<body>
	<img src="images/logo.gif" alt="example cafe logo" width="194" height="80" />
    <nav id="navigation">
    	HOME
        <a href="menu.html">MENU</a>
        <a href="recipes.html">RECIPES</a>
        <a href="opening.html">OPENING</a>
        <a href="contact.html">CONTACT</a>
    </nav>  
    <p>Welcome to example cafe. We will be developing this site throughout the book.</p>
	<img src="images/scrambled_eggs.jpg" alt="Photo of scrambled eggs on an English muffin" width="622" height="370" />    
    <h2>A community cafe serving home cooked, locally sourced, organic food</h2>
    <p>With stunning views of the ocean, Example Cafe offers the perfect environment to unwind and recharge the batteries.</p>
    <p>Our menu offers a wide range of breakfasts, brunches and lunches, including a range of vegetarian options.</p>
    <p>Whether you sip on a fresh, hot coffee or a coolinig smoothie, you never need to feel rushed - relax with friends or just watch the world go by.</p>
    <h2>This weekend's special brunch</h2>
    <p>This weekend, our season of special brunches continues with scrambled egg on an English muffin. Not for the faint-hearted, the secret to these eggs is that they are made with half cream and cooked in butter, with no more than four eggs in the pan at a time.</p>
</body>
</html>

roblarsen · September 26th, 2013, 08:12 AM

Everything there looks okay. Is interface.css being loaded correctly?

thuyhoang · September 26th, 2013, 08:55 AM

It's loading correctly as far as I can tell. Here's the file:

Code:

@charset "utf-8";
/* CSS Document */

/* style sheet for Example Cafe */

body {
	font-family: arial, verdana, sans-serif;
}

h2 {
	font-family: georgia, times, serif;
	color: #666666;
}

p {
	font-size: 90%;
	color: #333333;
{

#navigation a {
	color: #3399cc;
	text-decoration: none;
}

All the elements has been implemented except for the last one.

roblarsen · September 26th, 2013, 09:49 AM

There's an error in your CSS.

Line 18 of your CSS should close the declaration

Code:

p {
	font-size: 90%;
	color: #333333;
{

#navigation a {
	color: #3399cc;
	text-decoration: none;
}

Should be:

Code:

p {
	font-size: 90%;
	color: #333333;
}

#navigation a {
	color: #3399cc;
	text-decoration: none;
}

do you see the difference between the two?

thuyhoang · September 26th, 2013, 09:55 AM

Ok, it's working now. Thanks for finding the problem!