![\"\"](\"https:\/\/foodiepro.com\/wp-content\/uploads\/2012\/01\/boards.jpg\")
<\/p>\n<\/p>\n
Above this paragraph should be the H1 heading for your web page. Do not use H1 within your blog post area.<\/p>\n
Inside of this test data section, you’ll find most of the basic HTML and XHTML and CSS styles that you might use within your WordPress Theme.<\/p>\n
H2 headings should be used to separate chunks of your post text. \u00a0It also helps search engines to scan your content easily and serve up keyword-rich content to people searching for you. \u00a0Always start with H2 and then if you need to divide up a chunk of content further, use your H3.<\/p>\n
H3 headings aren’t used as often, but can be helpful in breaking down your post content further. \u00a0People, and search engines, tend to scan information first and then, if they deem the content to be something they’re interested in, they’ll go back and read the body text. \u00a0For more information, check out this Copyblogger article about SEO copywriting techniques that readers love<\/a>.<\/p>\n 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<\/a>.\u00a0You can also change the link color, along with dozens of other color and typography options, in the Foodie Pro Customizer.<\/p>\n In this section under the H4 heading, we\u2019re 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.<\/p>\n 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.<\/p>\n And we\u2019ve 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.<\/p>\n 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.<\/p>\n We also need to look at the other two lists and then add some images and other styles to flesh out your\u00a0WordPress site.<\/p>\n And here is another paragraph to show the relationship between the various parts and pieces.<\/p>\n A centered image is a little different. It is centered in the middle and the text is pushed above and below it. This is the way we prefer food bloggers to use images: full-width and centered.<\/p>\n How to add the CSS styles for images is discussed in the Codex article, Using Images<\/a>.<\/p>\n You will need to test the looks of the different font styles, too. This is bold and THIS IS BOLD.<\/b> This is italic and THIS IS ITALIC.<\/i> This is bold and italic and THIS IS BOLD AND ITALIC.<\/i><\/b> 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.<\/p>\n Let\u2019s look at the blockquote, one of the most common tags used in most blogs. It is designed to \u201cframe\u201d a quote from another blog, website, or reference that you are \u201cquoting\u201d from. For the most part, there are three examples of usage:<\/p>\n 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 \u201creally\u201d stand out, just separate itself from the content so we know it\u2019s not your words.<\/p><\/blockquote>\n Each website is unique with it\u2019s 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.<\/p>\nThis is the H4 Heading<\/h4>\n
\n
<ul><\/code> tag<\/li>\n<ol><\/code> tag<\/li>\n<dl><\/code> tag\n\n
\n
<dt><\/code> sets up the word or phrase to be \u201cdefined\u201d, usually set in bold, and<\/li>\n<dd><\/code> sets up the definition, which is usually in a normal or slightly smaller font and indented under the definition.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\nThis is the H5 Heading<\/h5>\n
\n
\n
This is another H3 Heading<\/h3>\n
![\"\"](\"https:\/\/foodiepro.com\/wp-content\/uploads\/2017\/01\/carrotcake-200x300.jpg\")
Let’s take a look at how images work in the theme. Typically, most food bloggers are going to use full-width centered images within the body of a post, but we’ll explore the right and left alignment options here just in case. This photo is using the medium image size and is aligned to the right. In order to clear the space below this image, I’m going to use the “clear” div class in the text editor for this post. Otherwise, things would look very misaligned.<\/p>\n<\/div>\n![\"\"](\"https:\/\/foodiepro.com\/wp-content\/uploads\/2017\/01\/nuts-200x300.jpg\")
This image is also using the medium image size option, but is aligned to the left. Notice the appropriate amount of padding surrounding the images? That’s Foodie Pro at work for you!<\/p>\n<\/div>\n![\"\"](\"https:\/\/foodiepro.com\/wp-content\/uploads\/2012\/01\/spice.jpg\")
<\/p>\nTesting Font Looks \u2013 H3 Heading<\/h3>\n
This is code and THIS IS CODE.<\/code> And now let\u2019s look at what the PRE tag, also known as the preformatted tag, looks like:<\/p>\nThis is the pre tag.\nIt should be formatted as written\n so if you add spaces to the front of the line\n it will show the spaces and the <code> as written<\/pre>\n
Your CSS Here \u2013 H3 Heading<\/h3>\n