Style Sample

This is a style sample made by Luke Bennett. The purpose of this post is to make it easier to style the website by displaying all common HTML elements in one place.

This paragraph is for checking line length and showing how text wraps. It needs to be very long to wrap on wide-screen devices. Is the text legible? Should it be larger or smaller? Perhaps a different typeface? Consider line height; a bit too much is better than not enough. Also, check margins and padding.

• This is an unordered list
• There are three bullet points here
• Do they look okay?

What about bold text? Or maybe some italics. Don’t forget some nice “curly quotes” (not all fonts support these, so it’s something to consider).

Level 2 heading

Here's some additional text to see what it looks like under a h2.

Does the margin at the top and bottom of the heading look good to you?

Level 3 heading

1. What about an ordered list?
2. Is three items enough for testing?
3. Yes, I think three is probably enough.

Planning on styling code text? It should be in a monospace font.

You might also want to implement syntax highlighting. Here’s a block of JavaScript for layout purposes.

// Javascript code with syntax highlighting.
export function formatToAustralianDate(date: string) {
	const [day, month, year] = new Intl.DateTimeFormat('en-AU', {
		day: 'numeric',
		month: 'long',
		year: 'numeric',
	})
		.format(new Date(date))
		.split(' ');
	return `${day} ${month} ${year}`;
}

Next up, blockquotes.

This is what a blockquote looks like.

I’ll add a second paragraph here that is long enough to cause line wrapping. Once again, check for padding and margin, font size etc.

Here’s a full-width image:

Further paragraphs of text follow, separated by a horizontal rule.

How about some tables?

Members of Queens of the Stone Age

Current

Former

Touring musicians