Chapter 3: Trying Out the CSS Editor

mohamad · June 24th, 2014, 11:29 PM

Hi there,

Could not get "look around" link to turn to orange when mouse over the link.

Default.aspx

Code:

<%@ Page Language="VB" %>

<!DOCTYPE html>

<script runat="server">

    Protected Sub Page_Load(sender As Object, e As EventArgs)

    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style1 {
            color: #990033;
        }
    </style>
    <link href="Styles/Styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <form id="form1" runat="server">
    <div id="PageWrapper"> 
        <header>Header Goes Here</header>
        <nav>Menu Goes Here</nav>
        <br />
        <section id="MainContent">
   
        <h1>Hi there visitor and welcome to Planet Wrox</h1>

        </section>
        <aside ="Sidebar">Sidebar Goes Here</aside>
       <br />
         <p>
             We're glad you're<span class="auto-style1"> paying a visit</span> to <a href="http://www.PlanetWrox.com">www.PlanetWrox.com</a>, the coolest music community site on the internet.

         </p>
        
        <p>
            Feel free to have a<a href="Default.aspx"> look around</a>; there are lots of interesting <strong>reviews and concert pictures</strong> to be found here.

Styles.css

Code:

* 
{
    font-family: Arial;
}

header {
    background-color: #C0C0C0;
    width: 844px;
    height: 86px;
}

h1 {
    font-size: 20px;
    padding: 0;
    margin: 0 0 10px 0;
}

.Introduction {
    font-style: italic;
    color: #003399;
}

#PageWrapper {
    width: 844px;
    margin: auto;
}

nav {
    width: 844px;
}

/*#region Main Content */

section#MainContent 


{
    width: 664px;
    float: left;
}

section#MainContent a 
{
    color: #4CFF00;
    text-decoration: underline;
}

    section#MainContent a:visited 
    {
        color: #FF0000;
        text-decoration: underline;
    }

    section#MainContent a:hover 
    {
        color: #FFA500;
        text-decoration: underline;
    }

/*#endregion*/

aside 
{
    background-color: Gray;
    width: 180px;
    float: left;
}

footer {
    background-color: #C0C0C0;
    width: 844px;
    clear: both;
}

Cheers,
Mohamad

Imar · June 25th, 2014, 12:54 AM

Your paragraphs and links are outside your MainContent section element and are thus not affected by the styles. Move them into the section and it should work.

Cheers,

Imar