Geek Answers Handbook

Building a quote class in CSS

Good evening,

I've been trying to get into HTML-CSS lately, just to get to know both of them.

Now I wanted to include a quote in my HTML, which is processed hourly from my machine from a database of famous quotes. I have everything for reading quotes via HTML, but I wanted to do something programming-y to style CSS.

My idea:

  • Create a class .dailyquote{}in the CSS file.
  • Enter a quote in HTML as: <div class = "dailyquote"> Quote_text#Quote_Author</div>
  • When printing CSS Quote_text until it reaches #, ignore #, and then for the rest of the contents of the class, create material for the author of the quote, for example, float:rightor a smaller font size. Minimal work in HTML, everything is done through CSS.

The thing is, I don’t know how to do this in CSS. As a programmer, I believe that I need at least a loop structure and an if () condition.

Is something like this possible or am I accepting CSS as a programming language? Maybe I have to work through HTML?

+4
source share
2 answers

This markup is rather incorrect for the quote. You should use 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

Something like this is possible

No.

or do I accept CSS as a programming language?

Your location is.

You need to create the appropriate HTML code for your content and then use CSS to describe how you want it to appear.

, ( ).

+6

CSS .

HTML: <blockquote class="dailyquote"> div <cite>. . . http://html5doctor.com/cite-and-blockquote-reloaded/

<blockquote class="dailyquote">
    Duis sapien est, consequat nec ultrices quis, rhoncus id diam. Donec ac massa libero.
    <footer><cite>The Author</cite></footer>
</blockquote>

, ,

.dailyquote {
    color: red;
}
    .dailyquote cite {
        display: block;
        color: aqua;
    }
+1

More articles:


All Articles