Luke Bennett

Style sample

Written by Luke Bennett on May 18, 2019


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

This paragraph is for checking line length and showing how text wraps. It has to be very long so that it will wrap even on wide screen devices. Is the text very legible? Should it be larger or smaller? Maybe a different typeface? What about line height of paragraphs, a little too much is better than not enough. Check the margin and padding while you’re at it.

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

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

Level 2 heading

Here’s a bit more text to see what it looks like under a h2.

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

Level 3 heading

  1. What about an ordered list?
  2. Three items should be enough for testing right?
  3. Yes I think three is probably enough

You’re not going to use this on every website, about about styling code text? This should be in a monospace font.

You might also want to do syntax highlighting, so here is a block of javascript for you to layout.

// Javascript code with syntax highlighting.
var fun = function lang(l) {
  dateformat.i18n = require("./lang/" + l);
  return true;
};

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:

un monsieur truste en costume

Further paragraphs of text. And yet more text. A bit more text too, for good measure.

Further paragraphs of text. And yet more text. A bit more text too, for good measure.

Here’s a screenshot-type image, with a caption:

A caption goes here.

Further paragraphs of text. And yet more text, followed by a horizontal rule.


Another heading

Further paragraphs of text. And yet more text.

Further paragraphs of text. And yet more text.

Tables

But here’s one anyway:

Name Instruments Period
Josh Homme lead vocals, guitar, piano, bass 1996 – present
Troy Van Leeuwen guitar, lap steel guitar, keyboards, synthesizers, percussion, backing vocals, bass 2002 – present
Michael Shuman bass, synthesizers, backing vocals 2007 – present
Dean Fertita keyboards, synthesizers, guitar, percussion, backing vocals 2007 – present
Jon Theodore drums, percussion, samplers 2013 – present

Former members

Name Instruments
Alfredo Hernández drums, percussion 1998 – 1999
Nick Oliveri bass, co-lead and backing vocals 1998 – 2004
Mark Lanegan co-lead and backing vocals, keyboards 2001 – 2005
Dave Grohl drums, percussion 2001 – 2002
Joey Castillo drums, percussion 2002 – 2012
Alain Johannes bass, backing vocals, guitars 2005 – 2007
Natasha Shneider keyboards, backing vocals 2005 – 2006