Sometimes you’ll need your blog posts to have a clean, imageless design. This can be to create design unity on a minimalist layout, create an easy to read, printable text or simply to ensure maximum display compatibility. Whatever the reason you’re looking to create imageless blog posts with clean, basic formatting, the technique is a standard simple process. You can create these posts using just basic HTML and CSS on any type of blog. To get started all you need is web hosting that permits HTML and CSS so you can create a basic-style blog.
Create the HTML Header
Start your imageless blog post with a basic declarative HTML header. For this you will simply use the HEAD element with a title, after marking your Document type with the DOCTYPE declaration.
For your DOCTYPE element, simply define which version of HTML you’ll want the user’s browser to check your code against. For example, “DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” lets your user’s device know you’re using HTML version 40.1 and that English should be the default read language.
Follow up the HEAD element with a TITLE element, encompassing a plain text title for your blog post. Close the TITLE and HEAD elements, respectively.
Create your Post’s Body Section
Using the basic HTML element BODY, open a new section under your header. Type a line or two of plain text to serve as a placeholder for your BODY section and for future testing purposes.
To use standard Header sizes to create larger, bolder fonts for your posts title simply use the H1 or H2 tag followed by SPAN to define which text will be enlarged. Type your title in plain text and close the header size and span to prepare your posts text for normal sizing.
Making the Paragraphs and Spacing
Once you’ve got your blog’s first paragraph typed, it’s time to implement the Paragraph (p) tag to make your next paragraph indented. If you want an extra line of space between your blog’s paragraphs then follow the closing “/p” tag with a “b” and “/b” for a line break. Consider using drop caps on your first paragraph for an added decorative effect.
Styling your Blog Post Without Images
You can create stylistic elements and decorate your post without the use of images. For a clean, decorated post try taking advantage of the following HTML and CSS. Insert these tags in the beginning of your BODY section, or wherever you want them to determine how your content displays.
Use font-family to define the font your text should be displayed in. A common font for web blogs is Arial, sans-serif. Your web hosting package may have added capabilities to display Google and other upgraded fonts as well. Define the size of your font with font-size and a numerical value in pixels (px.)
Use the Color tag to define your font’s HTML color, and line-height to further direct the spacing. Margin and Padding tags will allow you to create margins and spaces around your text, separating it from the background or manually centering it in respect to other content on your site.
Set the background color of your blog post with the background: #; tag. Use an HTML color selector to find the value of your desired color. Consider using a white or light background for a cleaner design that makes your font easy to read.
Create the Footer for your Clean, Imageless Blog Post
Footers not only bring a clean-looking close to your blog post, they are practical because they can give your reader useful information. You can use a footer to summarize content, or display your content information. Many blogs use footers for call to action statements, requesting reader comments or emails.
Create a footer for your post by using the Footer tag. After opening the footer, include a paragraph tag and whatever styling you prefer. To post a link where readers can email you, use the A HREF tag for the link formatting and the mailto: tag followed by your email address. Close the link and mailto tags in reverse order.
Add other styling elements to your footer in the same way you added them to the body of your blog post. Make sure to close the tags before closing your footer with the /footer tag.
Consider testing your new blog post by saving it as an HTML file on your local machine and opening it in any web browser, before uploading it to your web hosting package. This will save you the time of having to make multiple uploads or editing your file once it’s already online.
Imageless blog posts are great for fast loading, distraction-free blogs. They display well on mobile devices including e-readers. They also lend themselves for easy translation by text to speech programs and devices like Google Home and Alexa. Now that you’ve created a clean imageless post for your blog, save the basic template you’ve made and use it again to avoid having to do redundant work.