Building a quotation class in CSS [closed]

Question

Good evening,

Lately I've been trying to get into HTML-CSS, just to familiarise myself with them both.

Now, I wanted to include a quotation in my HTML, one that is parsed hourly from my machine from a database of famous quotes. I've got everything up for reading the quotation through HTML, but I wanted to do something programming-y for the CSS styling of it.

My idea was:

1. Create a .dailyquote{} class in the CSS file.
2. Input the quote in the HTML as: <div class = "dailyquote"> Quote_text#Quote_Author</div>
3. Have CSS print Quote_text until it reaches #, ignore the # then, for the remainder of the class content, do styling stuff to the author of the quote, such as float:right or a smaller font size. Minimal work in the HTML, everything done through the CSS.

The thing is, I don't know how to do any of that in CSS. As a programmer I reckon I'll need at least a looping structure and an if() condition.

Is something like that possible or am I mistaking CSS as a programming language? Maybe I'll have to work through the HTML?

Answer 1

That markup is rather wrong for a quotation. You should be using something like:

<blockquote>
<p>As my fellow HTML5 Doctor, Oli Studholme has showed, people seldom quote exactly 
– so sacrosanctity of the quoted text isn’t a useful ideal – and in print etc, 
citations almost always appear as part of the quotation – it’s highly conventional.</p>
<footer>
— <cite><a href="http://www.brucelawson.co.uk/2013/on-citing-quotations-again/">Bruce Lawson</a></cite>
</footer>
</blockquote>

Source: HTML 5 Doctor

Is something like that possible

No.

or am I mistaking CSS as a programming language?

You are.

You need to produce appropriate HTML for your content, and then use CSS to describe how you would like it to appear.

Generally speaking, the best place to transform that sort of data would be on the server (using a server side programming language).