May 18, 2016 - CSS, WordPress    Comments Off on Style test page

Style test page

This is a block of body copy. This block of body copy is here to give an idea of what body copy might look like with regards to texture and style. This is the primary style for the website copy, and all other copy is a variable from this style. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Just so that we have a baseline, this is what some italic text would look like inline. This is how we will style bold text. And there are rare instances where we may include both bold and italic on one element. We will also want to link some pages to other pages. I don’t know why, but some people still have a fondness for underlining content. I find this odd.

This is a content H1 tag

H1 tags are useful for SEO maintenance, but should be used very sparingly. The primary H1 tag on any page should be the title, generated by WordPress.

This is a content H2 tag

Likewise, H2 tags should be used sparingly in copy. The primary H2 tag for any page should be the subtitle and/or the site title. However, there are times when content copy hold a major import and should be drawn out both visually and for SEO.

This is a content H3 tag

This is a content H4 tag

The H3 & H4 tags are your primary ways to differentiate body copy as important without overriding the SEO goodness built by your page title and subtitle. Use with gusto and good judgement.

This is a content H5 tag
This is a content H6 tag

The last two heading types, H5 & H6 are good fall-back differentiators. Often, H5 resembles bolded content and H6 resembles plain content. Keep in mind that both are block elements (they will go on their own line) and that they are informative to SEO.

Preformatted content is rarely used except in situations of documentation. It is primarily for setting
aside things like code to be executed and/or commands to be typed. Unlike standard content, it will not
automatically "break" at a certain line length and <strong>must</strong> have explicit line breaks inserted.

Blockquotes are a great way to set very specific content out as either a “pull” from the primary content or as a quote from a specific individual. These can be useful for both hierarchical and design reasons.

– Catherine OBrien

Sometimes it is useful to create a bullet list:

  • For brief information
    • And the sub-items of that information
  • For a visual break
  • To outline basics before going more in-depth
  • For an actual list of items

Sometimes, an ordered list is more appropriate:

  1. To outline specific steps to take in process
  2. Defining items in order of importance
  3. To create an old-school content outline
    1. In which case you may have subitems
  4. As a table of contents

As you can see, there are many options to consider when styling body content in WordPress, and many options to use.

Here is an export file to use to import this page into a WordPress install so that you don’t have to write all this up. It includes some fields that are specific to my code, but otherwise, you might find it useful.

Comments are closed.