CSS class not being recognized in blockquote but works in <p></p>

Get Started
1

Hello everyone,

This is my first post, and I have searched for an answer to this issue on the forums but was not successful. If this has been answer elseware please feel free to direct me to the post, thank you.

Using Ian LLoyd’s Build your own website the right way edition 3 I am working on creating a parallel ( my own twist) on the sample website. In chapter 3 page 112 he suggests that rather than using a series of <p class = “fun”> that I instead add the class statement to the blockquote <blockquote class =“fun”>. Unfortunately the class statement does not seem to work in the blockquote but does with the paragraph statement ( I am a stats user so we call them statements, sorry if I am using the incorrect code terminology). Any help as to why the font and style do not change with the blockquote, but do with the papagraph would be usful, thank you.

<blockquote class= “fun”>
<p> Bubble Under is a group of diving enthusiasts based in
the south-west UK who meet up for diving trips in the
summer months when the weather is good and the bacon
rolls are flowing. We arrange weekends away as small
groups to cut the costs of accommodation and travel and
to ensure that everyone gets a trustworthy dive
buddy.</p>
<p>Although we’re based in the south-west, we don’t stay on
our own turf: past diving weekends away have included
trips up to Scapa Flow in Scotland and to Malta’s
numerous wreck sites.</p>
<p>When we’re not diving, we often meet up in a local pub
to talk about our recent adventures (any excuse,
eh?).</p>
</blockquote>

.fun {
color: #339999;
font-family: Georgia, Times, serif;
letter-spacing: 0.05em;

}

2

Hi farmer37, and welcome to the forums.

In what way is it “not working”? I’ve tried the code above and it looks the same whether the class is applied to the <blockquote> or the <p> tags (as they’re usually called). My guess is that you’ve made a mistake somewhere copying/cutting and pasting - I’ve done the same thing often enough to recognise the symptoms. :slight_smile: Double-check for typos, stray semi-colons etc., and if it’s still not working, post again and we can take it from there.

3

It looks as it should with regards to the book so like was mentioned by the Bear, you have probably made a typo elsewhere or not saved and refreshed the webpage about.html and CSS file style1.css

Since just going by the code sample above that will style the BLOCKQUOTE with the class “fun” an thus apply the CSS to the three P paragraph elements contained within the block quote.

4

Thank you both for your quick responses!

I read the book further and found that my problem was due to what it calls specificity. My code below was overruled in terms of the color change due to my CSS code for <p>

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

So even though I wrote the code correctly, the other code

p{
color: navy;
}

kept the text navy rather than change the color which is what confused me. Ian’s description of this can be found on p 114 in the section specifically speaking. Thanks again and hope this helps if anyone else runs into a similar problem.

5

Glad you found the answer - and well done for solving it yourself. :slight_smile:

For future reference, it’s always a good idea to post all the HTML/CSS for your page - or a link to a live example - so we can help you spot things like that. You can wrap your code in

 tags (the # button on the message window), which keeps it more manageable.
6

@farmer37: if you haven’t already, either download Firebug (an add-on for Firefox) or check out the native dev tools in other browsers like Chrome, Safari or Opera. If you right click on an element, it will reveal the HTML and CSS that apply to that element. It will show you which CSS rle is applying to an element and which others are being overridden. Very handy. :slight_smile: