Multiple blockquote’s

You probably want to do it with class, not id, like this:

<style type="text/css">
.blockquote1{color:green}
.blockquote2{color:orange}
</style>

<blockquote class="blockquote1">green text here</blockquote>
<blockquote class="blockquote2">orange text here</blockquote>

hi Haochi,
I put the:

.blockquote1{color:green}
.blockquote2{color:orange}

in the style.css and the

<blockquote class="blockquote1">green text here</blockquote>
<blockquote class="blockquote2">orange text here</blockquote>

lines in my post but i still get the “normal” blockquote colour (blue) and no green or orange..?

Yes you can!!

You do it with CSS.

You give the blockquote element a class attribute in your (X)HTML or post, and define the class in the style.css file of your theme. You can also use inline CSS but then you have to write the CSS in each blockquote which is not recommended because, if you ever want to change the style, you have to go back and change each blockquote in every post individually.

I recommend you do it somewhat like this

The (X)HTML you write like this:

<blockquote class="green">content</blockquote>

and

<blockquote class="red">content</blockquote>

In your style.css file you ad:

.green { color: green; }
.red { color: red; }

You can also define the color in hexadecimal numbers ( #008000 for green and #ff0000 for red ) or even in RGB, although that’s not commonly used.

Remember, when writing CSS, that a class name always starts with a period followed by a letter and can’t contain any spaces ( .red ) you can’t start with a number after the period.
good: .red { background-color: red; }
wrong: .1st color { background-color: red; } (number in wrong place and has a space)
good: .color_1{ background-color: red; }

You don’t have to limit yourself to just a color. You can give the blockquote (or any other element) a background image: .red { background-image: url(/red.jpg); }, a border: .red { border: 1px solid #008000; }, different background color: .red { background-color: #FFFF00; } or a combination of them.

On my own website, VanBerghem.Com, I styled my blockquotes as followed:

blockquote {
	border: 1px solid #FF6600;
	background-color: #CCCCCC;
	background-image: url(/imagepath/quote.gif);
	background-repeat: no-repeat;
	padding: 20px 15px 10px 30px;
	margin: 10px auto 0px;
	}

You can see it in action here

I hope this answered your question.

If somehow it isn’t working check if there are no semicolons (;) missing.
You need to have one after every value before you go on to the next property.

like this:

.orange { color: orange; }

check in the previous rule if there is none missing

@jberghem
thx a lot, that works!

you can see my blockquotes at https://www.primatip.nl

thx again!

The site looks good. Great job in applying the CSS. If I can just make one comment; Use <div>’s instead of <blockquotes>. You see you are using them to divide different parts of the page/post. (div=divider) Blockquotes are a large qoutes spanning over more than just a sentence. Since you aren’t quoting an other source you shouldn’t use the

.

Before we had CSS people had started to use the (X)HTML tags for what they looked like instead of using them to define the the content between the tags. It’s a very common mistake which has turned into “bad practice”. Try to use the tags for what they mean not for what they look like. If you don’t like what the correct (X)HTML tags look like, change the way they look with CSS.

Feel free to contact me if you have any questions or just want to know more.