Random Quote Machine - Complete

Hi Guys,

I just finished my Random Quote Machine: http://codepen.io/nimaiwalsh/full/akXkQw/

I’m open to all FeedBack :slight_smile:

Good job. The first thing I noticed was that visually, the white text on the green-ish background is both unappealing and makes the text hard to read. I’d recommend a different color scheme.

In terms of the code, you shouldn’t try to style the HTML tag in the CSS since it’s invisible, and the way you used the asterisk selector seems like something that should be avoided. Surely there must be some other way to achieve what you want with the “box-sizing: border-box”, instead of using a blanket universal selector on everything.

It is for setting default page values

It is called css reset. I usually add also

margin: 0;
padding: 0;

The asterisk selector targets every single element in the DOM though, including the ones that go unused, which can have unintentional effects on elements that weren’t meant to be targeted (and might be forgotten about in a large project). For a CSS reset, it’s better to target all of the specific intended elements instead of blanket-targeting all elements that exist in the DOM. This method for a CSS reset is better as it’s more limited & specifc:

html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;

As for styling the HTML tag, what I meant to get at there was that those styles are better placed under a different selector, like the BODY instead (which begins the visible part of the page). Naturally the cascade will still work when those styles are applied to the BODY tag.

1 Like

Thanks for the advice and tips. I will take all this into consideration :slight_smile:

EDIT: I removed any CSS that was applied to the HTML tag, and moved the border-sizing: border-box styling into the body section.

I did a bit googling, and you’re correct - using universal selector (*) can cause unexpected results on form elements (and who knows what else :wink:) so its use is generally discouraged.

In this case it won’t matter, and IMHO it’s OK to use *, but this is one thing to keep in mind if your styling is off and you can’t understand why.

But if you think about, it’s better to learn good habits from the start and use targeted CSS reset even for such small and simple projects.