Base Elements for Styling

Whenever I create a theme, or even convert one like I did with this site, I like to test all the elements. This is a kitchen sink type of post with all the common html elements.

This type of post should give you a good idea of what the all the different font styles look like in a theme.

Here are the styles for this site.

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

A Sample Code Block

 function Car( model ) {
    this.model = model;
    this.color = "silver";
    this.year  = "2012";
    this.getInfo = function () {
        return this.model + " " + this.year;

A Paragraph

This is a paragraph of text which has all the most common html elements in it such as the strong element which is used to give text strong importance. You could of course use the b element which represents a span of text stylistically different from normal text, without conveying any special importance or relevance. The mark element which represents highlighted text, i.e., a run of text marked for reference purposes. The HTML em element marks text that has stress emphasis. You could of course use the i element which represents a range of text that is set off from the normal text for some reason, for example, technical terms, foreign language phrases, or fictional character thoughts. It is typically displayed in italic type.

An Ordered list

  1. List item one
  2. List item two
  3. List item three

A Definition List

A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteer

A Blockquote

Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product or service.

An Unordered list

  • List item one
  • List item two
  • List item three

A Code Block

.header h1 a { 
  display: block; 
  width: 300px; 
  height: 80px; 

This wraps your code in a pre tags and code tags.

A Table

Heading (th) Heading (th) Heading (th) Heading (th)
Footer Note
data data data data
data data data data
data data data data

You might enjoy:

Next post No more posts


comments powered by Disqus