Hello
World!

Each website is unique with it’s own look and feel for the various parts and pieces. This cut and paste section looks only at what you might have within your content section. So if you will have boxes for lists or little aside information, you will need to add them so you can see how they will look in the overall page layout.

This is the H1 Heading

Above this paragraph should be the H1 heading for your web page. If it is not visible, the design settings for the H1 tag is set to display:none which many WordPress Themes use to hide the blog title text and replace it with a graphic. Do not use H1 within your blog post area.

If the design in the H1 heading looks like your blog title or blog post title, then that is the style set for that HTML tag and you should not use it within your blog post area.

Inside of this test data section are most of the basic HTML and XHTML and CSS styles that you might use within your WordPress Theme. You need to know what that will look like as part of structuring your styles.

This is the H2 Heading

Above this paragraph should be the H2 heading for your web page. WordPress Themes use the h2 heading for various purposes. Logically, it should be either the post title or the first heading in the post content.

However, it is used all over WordPress Themes including the subtitle, tag line, post title, comment area, sidebar area, and even in the footer. Be specific when styling each h2 headings to ensure you are not styling all of them.

This is the H3 Heading

Is this the same heading as is in your post title or is this the section headings found within your sidebar? Or is it different? This is the post content heading for the HTML tag h3, as is the one below, H4, for section headings within your post to divide up topics. If there is an H3 or H4 tag in your sidebar, you will need to identify the parent HTML and CSS container for the sidebar and style those appropriate in your blog’s stylesheet.

For more information in searching for your styles in your WordPress blog, see CSS: Studying Your CSS Styles.

Also notice how the links in that paragraph are styled so you can style links within your post content area. Links have three styles. There is the link color, link hover color, and visited link color. Be sure and design for each style.

This is the H4 Heading

In this section under the H4 heading, we’re going to look at what the post content, the meat and potatoes of your site looks like. In general, you will have multiple paragraphs, so we will add another paragraph so you can adjust the spacing in between them to the look you want.

boudoir-EDEN-ALLEY_1011-183

Paragraphs are not just for typing your blog babble, they can also hold frame and hold other information within your content area to help make the point you want to make in your writing. For instance, you will commonly have three types of lists.

And we’ve just tested a paragraph before and after a general list along with a nested list to help you see what at least three levels of the list will look like. Make sure that each level of the list is styled to match your specific needs. You might want to use the default disc or circle, or you might want to add graphic bullets to your list, too.

This is the H5 Heading

While the H5 heading is not always used, maybe you might find a need for it if your H1 and H2 and H3 headings are used. You might need one to two levels of subheadings in your post content, so this one gives you another option.

We also need to look at the other two lists and then add some images and other styles to flesh out your WordPress Theme sandbox.

This is the H3 Heading

CSI-HANSEL-GRETAL-106-WEBBacon ipsum dolor amet corned beef dolor veniam, adipisicing chuck ea aute alcatra eiusmod cillum duis short ribs minim flank spare ribs. Pastrami corned beef minim aute dolore prosciutto voluptate deserunt veniam dolor id. Short ribs ut jerky, velit commodo tenderloin laborum fatback nostrud enim corned beef. Ullamco aliquip pariatur, cupim turkey mollit ipsum eiusmod kevin. Laboris bacon ex, aliquip pig porchetta laborum filet mignon rump duis ipsum. Anim alcatra sed, eiusmod quis ipsum pastrami filet mignon corned beef adipisicing sunt mollit reprehenderit. Ham hock aute enim swine, doner mollit ribeye porchetta frankfurter. Nisi irure dolore pariatur. Minim et voluptate t-bone kielbasa jowl kevin brisket lorem tenderloin irure bacon. Tempor veniam cupim qui, frankfurter bresaola culpa. Short ribs biltong brisket, meatloaf exercitation ex aliqua shank t-bone cupidatat ham drumstick. Meatball eu capicola, elit sunt jerky ut bresaola turkey labore excepteur. Magna sausage alcatra bacon, in pig reprehenderit spare ribs turducken aliquip ut lorem capicola pancetta pork chop. Fatback eiusmod et meatloaf aliquip ex. Qui turducken pancetta shankle veniam rump irure ea. Meatloaf ground round id, biltong leberkas fugiat salami. Eu brisket pork flank ipsum. Qui landjaeger salami andouille, ut t-bone elit pork chop pastrami in consectetur tempor strip steak est ground round. Sint culpa reprehenderit esse, lorem ribeye porchetta frankfurter. Culpa nostrud enim, in in ball tip pancetta landjaeger. In commodo shankle jowl nostrud kielbasa elit deserunt porchetta eiusmod. Venison alcatra beef eu drumstick sed in pork loin consectetur nostrud sunt pariatur mollit incididunt andouille. Officia capicola ball tip nisi ullamco flank venison in et qui commodo ut deserunt chuck. In labore in occaecat dolor brisket veniam enim. Jowl sed fugiat beef. Swine cow do in, ham dolore est in. Voluptate incididunt officia leberkas deserunt pork corned beef. Shankle exercitation andouille ham hock, swine kielbasa deserunt cupidatat ipsum ut incididunt chuck est beef filet mignon. Doner veniam sunt, tenderloin chuck filet mignon id esse ut hamburger anim. Non jowl ham, irure proident lorem corned beef labore sint incididunt frankfurter duis. Est hamburger reprehenderit ut spare ribs capicola tempor eiusmod minim.

ALEX-ALLEY_1111-097-WEB

 

A centered image is a little different. It is centered in the middle and the text is pushed above and below it.

How to add the CSS styles for images is discussed in the Codex article, Using Images.

Testing Font Looks – H3 Heading

You will need to test the looks of the different font styles, too. This is bold and THIS IS BOLD. This is italic and THIS IS ITALIC. This is bold and italic and THIS IS BOLD AND ITALIC. This is code and THIS IS CODE. And now let’s look at what the PRE tag, also known as the preformatted tag, looks like:

This should be back to the normal paragraph style and we hope you have been paying attention to the margins and padding around each element, including the paragraph, so you can position things appropriately to the rest of the content.

This is a simple quote. It is either preceded or followed by a link within the text to the credited source. A blockquote must be designed to stand out from the rest of the text content, but it does not have to “really” stand out, just separate itself from the content so we know it’s not your words.

Your CSS Here – H5 Heading

Let’s look at the blockquote, one of the most common tags used in most blogs. It is designed to “frame” a quote from another blog, website, or reference that you are “quoting” from. For the most part, there are three examples of usage:

SUMMER-MARYAM-258-WEBBacon ipsum dolor amet corned beef dolor veniam, adipisicing chuck ea aute alcatra eiusmod cillum duis short ribs minim flank spare ribs. Pastrami corned beef minim aute dolore prosciutto voluptate deserunt veniam dolor id. Short ribs ut jerky, velit commodo tenderloin laborum fatback nostrud enim corned beef. Ullamco aliquip pariatur, cupim turkey mollit ipsum eiusmod kevin. Laboris bacon ex, aliquip pig porchetta laborum filet mignon rump duis ipsum. Anim alcatra sed, eiusmod quis ipsum pastrami filet mignon corned beef adipisicing sunt mollit reprehenderit. Ham hock aute enim swine, doner mollit ribeye porchetta frankfurter. Nisi irure dolore pariatur. Minim et voluptate t-bone kielbasa jowl kevin brisket lorem tenderloin irure bacon. Tempor veniam cupim qui, frankfurter bresaola culpa. Short ribs biltong brisket, meatloaf exercitation ex aliqua shank t-bone cupidatat ham drumstick. Meatball eu capicola, elit sunt jerky ut bresaola turkey labore excepteur. Magna sausage alcatra bacon, in pig reprehenderit spare ribs turducken aliquip ut lorem capicola pancetta pork chop. Fatback eiusmod et meatloaf aliquip ex. Qui turducken pancetta shankle veniam rump irure ea. Meatloaf ground round id, biltong leberkas fugiat salami. Eu brisket pork flank ipsum. Qui landjaeger salami andouille, ut t-bone elit pork chop pastrami in consectetur tempor strip steak est ground round. Sint culpa reprehenderit esse, lorem ribeye porchetta frankfurter. Culpa nostrud enim, in in ball tip pancetta landjaeger. In commodo shankle jowl nostrud kielbasa elit deserunt porchetta eiusmod. Venison alcatra beef eu drumstick sed in pork loin consectetur nostrud sunt pariatur mollit incididunt andouille. Officia capicola ball tip nisi ullamco flank venison in et qui commodo ut deserunt chuck. In labore in occaecat dolor brisket veniam enim. Jowl sed fugiat beef. Swine cow do in, ham dolore est in. Voluptate incididunt officia leberkas deserunt pork corned beef. Shankle exercitation andouille ham hock, swine kielbasa deserunt cupidatat ipsum ut incididunt chuck est beef filet mignon. Doner veniam sunt, tenderloin chuck filet mignon id esse ut hamburger anim. Non jowl ham, irure proident lorem corned beef labore sint incididunt frankfurter duis. Est hamburger reprehenderit ut spare ribs capicola tempor eiusmod minim.

A second style to the blockquote is one that includes a citation. Under HTML guidelines, this citation should be wrapped in the <cite> tag and then that tag can be styled to be in italics, bold, or whatever look you want in your design.

Take care with the style of the <cite> tag as some WordPress Themes use it in the comments area. I recommend you style it specifically with blockquote cite {style declarations} in your stylesheet.

This is an example of a blockquote which also contains a link to Blog Design and Layout articles on the WordPress Codex, the online manual for WordPress Users, to help you see what links will look link within a blockquote.

Lorelle on WordPress, your guide to all things WordPress and blogging

The citation includes a link and text to help you see what a link and text will look like within the cite tag.

There are many tags that can be found within a blockquote, just as can be found within any container within your web page design, but a last example includes an unordered list. Many bloggers love to quote examples from lists, so this is a good tag series to test.

Each website is unique with it’s own look and feel for the various parts and pieces. This cut and paste section looks only at what you might have within your content section. So if you will have boxes for lists or little aside information, you will need to add them so you can see how they will look in the overall page layout.

Some elements in a WordPress Theme are controlled by the style sheet, while others are controlled by the Template files. Try to work on as much as you can from the style sheet first, then you can mess with the template files.

Remember, any changes you make to the style sheet and template files will be not available if you change themes. If you want them carried over, you will need to copy and paste them into the new Theme folder.

As a last element in the content area and throughout your site, check the hypertext links. These are the links to external websites and/or internal pages within your site. They come in three flavors: active, visited, and hover. Make sure you work on the styles for each of these.

  1. Hi, this is a comment.
    To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.
    Commenter avatars come from Gravatar.

    A WordPress Commenter|Apr 26, 2017
    Reply

Leave a Reply