Newbie frustrated css span class not working

HTML & CSS
1

I’m just starting out using these forums and site point books and I’m having some trouble right out of the gate. I’ve been studying the Build Your Website the Right Way Using HTML & CSS and apparently I’m not doing it the “right way” yet.
I have tried searching the forums and not found the answer. Please forgive if I’m not posting correctly, not sure of all the proper methods yet. I’ve looked at my page with Explorer, Safari and Firefox and it’s not working in any of those browsers.
My code looks the same as what is in the lesson, as far as I can tell.
I know the css is quite a mess right now, but hoping someone can get me on the right track with this problem.
I have used the W3C service to check my code, it found errors to be sure, but I couldn’t tell for sure what was causing my problem.
The <span class =“fun”> is not working for the text “Bubble Under”, but it works for the <blockquote class =“fun”>
the html page is
http://multigrafx.com/mywebsite/about.html
the css is
http://multigrafx.com/mywebsite/style2.css
I’ve been stuck on this for a couple of days, so help would be Very Welcome.

2

you have problems in the css.

.fun p {
color: green;
}
font-family: Georgia, Times, serif;
letter-spacing: 0.05em;
}
blockquote.fun {
font-style: italic;
}

font-family: Georgia, Times, serif;
letter-spacing: 0.05em;

are on the air.

you can also validate your css:
http://jigsaw.w3.org/css-validator/validator?uri=http://multigrafx.com/mywebsite/style2.css&profile=css21&usermedium=all&warning=1&lang=en

it should probably be


.fun p {
color: green;
font-family: Georgia, Times, serif;
letter-spacing: 0.05em;
}

blockquote.fun {
font-style: italic;
}
3

Thanks for quick reply!
I made the change as you suggested, it changed the blockqoute, but the span is still not working

4

is this the effect you want?

/*
CSS for Bubble Under site
*/
 body  {
	font-family: Ariel, Verdana, Helvitica, sans-serif;
	background-color: #e2edff;
line-height: 125%;
padding: 15px;
border: 4px solid navy;
  }

li {
	font-size: small;
}

p {
	font-size: small;
	color: navy;
}
#tagline p {
font-style: italic;
font-family: Georgia, Times, serif;
background-color: #bed8f3;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .8em;

}
em {
	text-transform: uppercase;
}
h1, h2, h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1  {
 font-size: x-large;
 background-color: navy;
 color: white;
 padding-top: 2em;
 padding-bottom: .2em;
 padding-left: .4em;
  }
  h2 {
	color: navy;
	font-size: 130%;
	font-weight: normal;
	padding-top: 15px;
}
h2, ul {
margin-top: 15px;
}
a {
font-weight: bold;
}
a:link {
color: black;
}
a:visited {
color: navy;
}
a:hover {
text-decoration: none;
color: white;
background-color: navy;
}
a:active {
color: aqua;
background-color: navy;
}
.fun, .fun p {
color: green;
font-family: Georgia, Times, serif;
letter-spacing: 0.05em;
}
blockquote.fun {
font-style: italic;
}
.attentiongrab {
width: 50%;
font-weight: bold;
}
#navigation {
width: 180px;
border: 1px dotted navy;
background-color: #7da5a8;
}
.highlight {
border: 5px solid silver;
}

i don’t really get the outcome you look for. maybe more details will help. but you need to correct the css.

5

I was trying to get the Bubble Under text right under the h2 About Us to appear green using the span selector. The change you made to the .fun class did the trick!
Now I just need to learn why I had it wrong from the lessons. You got it working tho, Thanks!

6

you’re welcome :slight_smile: