Developing a quote generator using CSS

Good evening,

Lately, I've been delving into the world of HTML and CSS to better understand them.

I'm currently working on incorporating a dynamically changing quotation from a database of famous quotes into my HTML. While I have everything set up to display the quote, I want to add some unique CSS styling to it using a more "programming-y" approach.

Here's what I have in mind:

  1. Define a .dailyquote{} class in the CSS file.
  2. Insert the quote in the HTML as: 
    <div class = "dailyquote"> Quote_text#Quote_Author</div>
  3. Utilize CSS to display the Quote_text until it reaches # and then apply styles specifically to the author part of the content, such as float:right or adjusting font size. Keep HTML simple with minimal markup while handling styling predominantly through CSS.

The challenge is that I'm not quite sure how to implement this functionality purely in CSS. As a programmer by background, I believe I might need some sort of loop structure and conditional statements like an if() condition.

Is achieving this level of sophistication in CSS possible, or am I mistakenly treating CSS as a full-fledged programming language when perhaps I should be focusing more on HTML?

htmlcss

Answer №1

That coding is not quite right for quoting text. It should look more like this:

<blockquote>
<p>As my colleague Oli Studholme from HTML5 Doctor has pointed out, people rarely quote word-for-word 
– so the exactness of quoted text isn't crucial – and in publications, 
citations usually appear within the quotation itself – it's a common practice.</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

Could something similar be achieved?

No.

Am I confusing CSS with a programming language?

You are indeed.

You should create correct HTML for your content, then use CSS to style its appearance.

In general, it's recommended to handle such transformations on the server side (using a server-side scripting language).

Answer №2

In the realm of programming languages, CSS stands apart as it does not incorporate the concept of loops.

To enhance the HTML structure, consider utilizing 

<blockquote class="dailyquote">
in place of a div. Additionally, enclose the author's name within a <cite> element for improved semantics. For more details, refer to this resource

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

Subsequently, apply appropriate styling, such as:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The make-xx-column() mixins in Bootstrap are malfunctioning

After careful examination, it looks like some of the Bootstrap mixins are not functioning as expected. Specifically, the .make-md-column() and .make-sm-column() seem to have no effect at all. Initially, I suspected that WebEssentials was not compiling the ...

csstwitter-bootstrapless

The window.onload function is ineffective when implemented on a mail client

Within my original webpage, there is a script that I have created: <script> var marcoemail="aaaaaa"; function pippo(){ document.getElementById("marcoemailid").innerHTML=marcoemail; } window.onload = pippo; </script> The issue a ...

javascriptjqueryhtmlemail

What is the best method for integrating custom CSS into Extjs 6?

Transitioning from Extjs 4.2 to Extjs 6.2 has presented a challenge for me. In the past, I would include a custom css file in the head using a simple link placed after the Extjs inclusion. <link rel="stylesheet" href="/custom.css" type="text/css" chars ...

cssextjsextjs6

Resolving problems with image dimensions in Angularjs and ionic framework

I'm attempting to achieve a design where the first image occupies 50% of the screen's height and 100% of its width, while the second image does the same. Please refer to the image below: https://i.sstatic.net/nwmRP.jpg ...

javascriptcssangularjsimage

Create buttons to increase or decrease values using Bootstrap and JavaScript

What is the proper way to make this button function properly? I tested adding this line of javascript code, however it prompts an alert without clicking on the buttons as well. document.querySelector(".btnminus").addEventListener(onclick,ale ...

javascripthtmlbuttonbootstrap-5

Tips for utilizing a variable within a variable containing HTML code

Is it possible to incorporate variables in a JavaScript function that includes HTML code? Let's consider the following example: function SetCFonts() { var Color = $('#CColor').val(); var Font = $('#CFont').val(); var S ...

javascripthtmlcssvariables

What is the best way to implement multiple store filters in VueJS?

Just dipping my toes into the world of VueJS with my very first major project. I've incorporated 2 filters in this project for my elements - one is a search bar and the other involves checkboxes. Taking a look at my code, you'll notice a computed ...

javascripthtmlvue.js

Ionic ion-view missing title issue

I'm having trouble getting the Ionic title to display on my page: http://codepen.io/hawkphil/pen/oXqgrZ?editors=101 While my code isn't an exact match with the Ionic example, I don't want to complicate things by adding multiple layers of st ...

javascripthtmlcssangularjsionic-framework

Increasing the upward motion of the matrix raining HTML canvas animation

Recently, I've been experimenting with the Matrix raining canvas animation here and I was intrigued by the idea of making it rain upwards instead of downwards. However, my attempts to achieve this using the rotate() method resulted in skewing and stre ...

javascripthtmlcanvas

Ensure that the two background images are identical in size and content

Can someone assist me with achieving vertical equality for two background images like in this example image? Currently, I have the following styling applied: background-repeat: no-repeat, repeat-x, repeat-y; background-position: 925px center; However, t ...

cssimageimage-scaling

Submit a list of checkboxes selected to Google Sheets separated by commas

Is there a way to modify the script I'm using to enter data from an HTML form into a Google Sheet so that my checkbox fields will be entered as a list, separated by commas? If all boxes were checked in the example form below, I would like the cell fo ...

javascripthtmlformsgoogle-apps-scriptcheckbox

Exploring the power of Vue.js by utilizing nested components within single file components

I have been attempting to implement nested single file components, but it's not working as expected. Below is a snippet of my main.js file : import Vue from 'vue' import BootstrapVue from "bootstrap-vue" import App from './App.vue&apos ...

javascripthtmlcsstwitter-bootstrapvue.js

Steps to create a fixed navigation bar at the top of the page

Is it possible to create a navigation bar that remains fixed at the top of the page? I'm not referring to using the "position: fixed;" property... The issue with my current navbar is that when zooming out, it loses its position at the top... How ca ...

csshtmlwebweb-development-server

Is there a way to automatically send 404 errors to index.html and update the URL to the homepage URL?

I transformed a large and intricate website into a concise one-page site, necessitating users to be guided from 404 errors to the index.html page. To accomplish this, I added the following code snippet to my .htaccess file: ErrorDocument 404 /index.html ...

html.htaccesshttp-redirectapache2

Combine multiple .less files into a single .less file without the need for recompilation

I currently have 3 different .less files (1file.less, 2file.less, 3file.less) that I want to combine into a single file called base.less. To import these files into base.less, I am using the @import "1file.less" method. However, upon inspecting the pa ...

cssless

Exporting Python Pandas Data Frame to an HTML file

I'm attempting to save a Python Pandas Data Frame as an HTML page. I also want to ensure that the table can be filtered by the value of any column when saved as an HTML table. Do you have any suggestions on how to accomplish this? Ultimately, I want t ...

pythonhtmlpandas

Issue encountered in SQL PHP form script at line 23

I'm currently working on some code to insert data into different tables, but there seems to be an issue on line 23. This code is part of a college project registration form. <?php $con = mysql_connect(","",""); if (!$con) { die('Could not c ...

phphtmlsql

Creating an HTML element using jQuery isn't just about designing; it

When creating HTML elements using an Ajax call from the server-side, it can be challenging to align them properly on a responsive web page. Below is an example of how elements are generated with an Ajax call: var html = ""; $.ajax({ type: " ...

htmljquerycsstwitter-bootstrap

Creating mobile-friendly buttons: a step-by-step guide

How can I make my button responsive? I have a button on an image within a slider. It looks good and works fine on desktop, but on mobile it appears too big and gets overlapped with the slider radio icons, causing the "read more" link button to not redirect ...

htmlcssresponsive-design

The image tag is being used to show the exact location, however, there is no

How can I load a previously uploaded image via ID in the controller? The controller passes the correct location to the view, but the view does not display the image. When I inspect the view page, it shows the correct ID and location but does not render the ...

phphtmlimagesrccodeigniter-4