How To Create Quality Articles With Inline CSS


When I write an article—or any web page, for that matter—I like to begin with a basic XHTML document I know contains valid code. I copy/paste the basic document into a text editor, write the content, and then style the content for display with CSS. As a final step before publishing an article, I always validate the document at W3C to insure that the code is error free.

When I create a new article, I can often leverage previous work I have done by reusing already developed and tested code and CSS styling. This is particularly true when using inline CSS: I can copy the CSS properties and values I need from existing style sheets and simply paste them into the the new article's HTML inline CSS. After reading this tutorial, you will be able to use this approach for your articles, too. I call this approach to article creation "copy 'n paste."

Note: with the exception of some <b></b> and <code></code> tags, this tutorial has been styled entirely by using the HTML style attribute for inline CSS.

Tools For Creating Web Pages


There are many great tools available today for creating web pages. These include basic to advanced text and HTML editors, full-blown web development packages, and at least one browser toolbar designed specifically for the web developer. However, you can create your articles with just a basic text editor.

Perhaps the most common basic editor is Microsoft’s venerable Notepad. Other editors include TextPad and EditPad Pro. The more advanced text editors, such as EditPad Pro, have features that make them good HTML development environments, too. My personal preference for a basic text editor is TextPad. Other editors might be just as good or in some respects better, but I am used to this one.

The Basic Article Template


Below is a basic, standards-based XHTML template. The template uses a Document Type Definition (DTD) of XHTML 1.0 Transitional, just like WordPress and other up-to-date CMS systems use. The basic template and a text editor is all you need to begin writing your article.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>


The skeletal article template below includes additional HTML tags and some inline CSS styling. Together, the HTML and CSS create the article environment. The template also includes "meta" tags for keywords and description. You can copy/paste this template into a text editor and modify the CSS to create a "global" look and feel of your own.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Basic Article Template</title>
<meta name="keywords" content="xhtml, inline css, template" />
<meta name="description" content="This is an XHTML template that will pass W3C validation—in the green." />
</head>

<body>
<!--Article Begins Here-->
<div style="background-color:#fffef2; font-family:Verdana, Arial, Helvetica, sans-serif; padding:1.5em; text-align:left;">
<!--Sub Title Begins Here-->
<div style="font-size:1.25em; color:maroon; font-weight:bold; text-align:center; margin-bottom:1em;">Subtitle</div>
<!--Sub Title Ends Here-->
<!--Article Content Begins Here-->
<b>Article Content Goes Here</b>
<!--Article Content Ends Here-->
</div>
<!--Article Ends Here-->
</body>

</html>

Copy the code from either of the templates above into your favorite text editor, such as Notepad or TextPad. Save the code as basic-template.txt or basic-article-template.txt.

Open up a browser window and go to the W3C Markup Validation Service at http://validator.w3.org/. Once on the validator page, select the "Validate by Direct Input" tab and copy/paste the basic document into the text box. Click the "Check" button to validate the code. The code should pass the check—in the green.

The syntax rules for HTML and XHTML are different in some ways. You must use the correct syntax for the DTD you use or your code will not pass at W3C. This is so even though the browser you use might display your page as expected: browsers are very forgiving with respect to non-standard code.

It is very common to find that online web pages fail W3C validation with massive numbers of errors. Sometimes this is because the wrong—or no— DTD is specified for a page; at other times, the failure might be due to using non-standard or deprecated code. It is very important that you start with a valid, basic template and correct any validation errors that show up as you go along.

Why Use Inline CSS?


You can dramatically improve the effectiveness of your articles by dressing up their visual presentation. When you do this, your articles will be HTML tags are used to organize the article content; the CSS is used to tell browsers how to display the content. Simply, HTML code specifies what content is to be displayed. The inline CSS defines how the content is to be displayed.

When you use inline CSS in an (X)HTML document, a new approach is possible to writing your articles for the Web:

Normally, I would remove the CSS completely from the article body and use an external or internal style sheet instead. The fundamental goal of CSS, after all, is to separate content from display. W3Schools states that
“An inline style loses many of the advantages of style sheets by mixing content with presentation.”
That being said, you may not always be able to use an internal or external style sheet. An article directory or ezine service may not allow the use of style sheets but may allow the use of inline CSS.

There is one advantage of using inline CSS: inline CSS will override an external or internal style sheet—so you can be sure the styling you want will be applied to your content. More information about CSS can be found at W3Schools.

The Article Template


The XHTML document shown below is a "fleshed out" article template. I will be showing you how to use this template during the rest of the tutorial. The template implements many of the features you may find useful for your own articles. The template includes standards-based and validated code for You will want to fill in the title, description, and keywords so that, if you submit your article to a directory service, you can simply copy/paste them into the appropriate text boxes. The template also illustrates how an image can be used to display a signature block for your articles.

Note: the latin text used for the article text was generated at http://www.lipsum.com/.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Article Template</title>
<meta name="keywords" content="xhtml, css, template" />
<meta name="description" content="This is an XHTML template that will pass W3C validation&mdash;in the green." />
</head>
<body style="background-color:#fffef2;">
<div style="background-color:#fffef2; font-family:Verdana, Arial, Helvetica, sans-serif; padding:1.5em; text-align:left;"><div style="font-size:1.25em; color:maroon; font-weight:bold; text-align:center; margin-bottom:1em;">XHTML Article Template</div><div style="color:#000000; text-align:left; font-size:.75em; padding-bottom:1em;"><b>Figure 1:</b> Left Caption</div><div><img src="http://www.selectdigitals.com/images/style/5.gif" alt="left" style="float:left; padding-left:.5em; padding-right:1.75em;" /></div>Donec vitae augue. In sodales mattis ligula. In neque velit, eleifend vel, rhoncus a, sagittis a, tortor. Fusce vehicula iaculis orci. <span style="background-color:#FFFF00">Nunc elementum.</span> Nulla at turpis vitae erat facilisis viverra. Morbi vehicula arcu vel est porta semper.Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla imperdiet quam vitae tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec dui nisl, elementum nec, sollicitudin vel, rutrum sed, nisi. Suspendisse luctus adipiscing nisl. Morbi pharetra eleifend justo. Nulla fringilla tellus a eros. Donec volutpat sapien a leo. In vel neque.
<br />
<br />
<br />
<div style="text-align:left; color:maroon; font-size: 1.2em; font-weight:bold; border-top: double; padding-top:1em; font-style:italic;">Section Header</div>
<br />
<br />
<div style="color:#000000; text-align:right; font-size:.75em; padding-bottom:1em;"><b>Figure 2:</b> Right Caption</div><div><img src="http://www.selectdigitals.com/images/style/6.gif" alt="right" style="float:right; padding-left:.5em; padding-right:.5em;" /></div>Nunc vel enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur eleifend, nulla non dapibus vehicula, nulla lacus sodales diam, non luctus elit ipsum at nisi. Proin imperdiet sem a augue semper tempus. <span style="font-weight:bold; font-style:italic;">Morbi laoreet luctus magna.</span> Sed commodo pulvinar nibh. Suspendisse eu odio. Vestibulum ac est. Morbi sem. Donec mollis massa at tellus. Nulla varius erat eget mi. Cras quis tellus eu orci congue pharetra. Suspendisse vel quam. Proin viverra. Donec eget velit. Curabitur non nunc. Aliquam massa. In venenatis bibendum nisl.
<br />
<br />
<br />
<div style="text-align:left; color:maroon; font-size: 1.2em; font-weight:bold; border-top: solid; font-style:italic;">&nbsp;</div>
<br />
<br />
<div style="color:#000000; text-align:center; font-size:.75em; margin-bottom:1em"><b>Figure 3:</b> Center-Aligned signature-Block Image</div><img src="http://www.selectdigitals.com/images/review/signature-block-no-stroke.jpg" alt="Center-Aligned signature-Block Image" style="display: block; margin-left: auto; margin-right: auto;" />
</div>
</body>
</html>


Copy the article template above into your text editor. Save the file as article-template.txt. Next go to http://validator.w3.org/ and paste in the code as you did with the basic XHTML document. Click the "Check" button. Did the code pass in the green? If not, I want to hear about it!

Do you still have the template in your text editor? If not, open the file again and save it as article-template.html. Unless you are using Notepad, your editor will probably allow you to view the file in a browser. If not, use your browser to open the file. You can also view a copy of the template online.

Everything between the <body> and </body> tags is part of the article. Your articles will also be written between the body tags.

Within the article code, you will see several <br /> tags. These are used in the template to produce the necessary line returns in a browser while working locally on the article. You can upload the entire template to your web site, as is; but you may need to remove unnecessary <br /> tags or CRLFs before pasting the article body into a blog's visual editor or an article directory's submission box. If you do not do this, the article layout might not look as you expected when it is published. If you preview your articles before clicking the submit button, you will be able to spot and correct spacing problems of this sort. Parts of the template already have extra carriage returns removed. That is why the code and text in parts of the template seem to be piled together.

Note the "space + forward slash" in the <br /> tag. Closing some tags with a space and slash is part of the XHTML standard. Not all tags require this closing syntax. The "empty tags"—<hr>, <br>, <img>— require this syntax and the W3C validator will generate errors to remind you, if you forget.

When you write standards-based code, you must also remember to use lower-case text for the tags (<img> and not <IMG>, for example). Using the wrong case for a single tag can generate multiple validation errors—not just one. More about XHTML syntax can be found at W3Schools.

The Article Environment


I create what I call the article environment by enclosing the entire article content between one <div></div> tag pair. I use inline CSS within the <div> tag to create the global styling, or the "look and feel" for the article as a whole. The global styling is accomplished by using the HTML style attribute, style=" ", inside the <div> tag. The syntax for the style attribute looks like this: style="property: value;" Any CSS property and value may be used within the quotes.

The global styling I used in the template includes the following properties: Here is the code for the global styling:

<div style="background-color:#fffef2; font-family:Verdana, Arial, Helvetica, sans-serif; padding:1.5em; text-align:left;">

Your article goes here

</div>



This code creates an article environment with a light background, Verdana as the first choice font, a space (padding) around the article content, and specifies that the text will be left justified. If you begin your article using the basic template, you can copy/paste this code into the template and modify the property values to create your own look and feel. Although the code is valid, you should make it a practice to validate your template or article as you go along. I will never ask you to blindly accept my code as valid; instead, I have shown you a way to independently validate any code I suggest.

The Subtitle


Every marketer knows the value of a good headline. A good headline can capture the interest of even a casual web surfer. The same applies to your article title. Ideally, you should be able to explain what your article is about with a title of 40 to 60 characters. For an article on my web page or blog, I make the title big and colorful. You will not always have control over the styling of your title: article directories and ezines will style the title for you.

If you need more text to adequately convey the primary message expressed by your title, you can optionally use a subtitle. Use a smaller font-size and, perhaps, a different color for your sub-title to make sure that your main title still dominates the article. The subtitle serves to develop further interest and pulls the visitor deeper into the page. The code to create the subtitle in the article template is at the top and between between the first <div></div> tag pair. Here is the code for the subtitle:

<div style="font-size:1.25em; color:maroon; font-weight:bold; text-align:center; margin-bottom:1em;">XHTML Article Template</div>


If you are building your own article template from scratch, you can copy/paste this code between the first <div></div> tags. Just replace "XHTML Article Template" with whatever you want to use for your subtitle. Test and verify!

Are you beginning to see a pattern to the "copy 'n paste" approach to article creation?

The best way to learn how the styling works is to vary a property value and then preview the results. You may need to "play" with the code in order to achieve the look and feel you want. This a much better way to learn inline CSS styling than to read several paragraphs describing what the properties and values do. In fact, I often have to do this to achieve the visual results I want. This tutorial includes CSS reference material and links to additional information that you will find useful when styling your own articles.

The “em”


I have used the "em" as the unit of measurement throughout the article template. Specifying a value in ems results in a value based on a font size. For example, if the font size for the article text is 14px, one em would equal 14px. I specified a value of 1.25em for the subtitle font-size property. This results in a font size of 1.25 X 14 = 17.5px. There are many reasons for using the em, and my explanation has been greatly simplified. For more detailed information about the use of ems for sizing, I would suggest a visit to a definitive article by Richard Rutter.

Section Headers


For long articles or tutorials like this one, I like to organize my content by using section headers. The code below was used to generate the first section header in the article template.

<div style="text-align:left; color:maroon; font-size: 1.2em; font-weight:bold; border-top: double; padding-top:1em; font-style:italic;">Section Header</div>


By now, you know how to use the code. Copy and paste the code into your article where you want to place a header, change the text, and style to suit—and then test and verify.

Sometimes you may not need text for a section header, such as the second section header in the article template. The header code below has been modified to emulate a horizontal rule:

<div style="text-align:left; color:maroon; font-size: 1.2em; font-weight:bold; border-top: solid; font-style:italic;">&nbsp;</div>


Images And Captions


I like to use my own styling for images and captions. The code below shows how I styled the center-aligned signature block image and caption at the end of the article template. I also used the same code for the signature block at the end of this tutorial (Figure 3). For captions, use a smaller font-size than for your normal body text. I used a font-size of .75em for the article template.

<div style="color:#000000; text-align:center; font-size:.75em; margin-bottom:1em"><b>Figure 3:</b> Center-Aligned Signature-Block Image</div><img src="http://www.selectdigitals.com/images/review/signature-block-no-stroke.jpg" alt="Center-Aligned Signature-Block Image" style="display: block; margin-left: auto; margin-right: auto;" />


The signature block of the article template consists of the combination of three images and some text. I first created images for my signature, email address, and mug shot. Using an HTML editor, I added the images and text and styled the whole until I got the signature block looking the way I wanted. I then took a screen shot of the whole and cropped it to the size I wanted. I saved the image as a JPEG. I would suggest using the same background color for the image as is used for the web page. If you do this, your readers will not be aware that the signature block is an image. An advantage of using an image for a signature block is that you can display your email address without receiving tons of junk email as a result.

Figure 1: Left Caption
left
Left and right-aligned images require a little more attention to display them neatly—particularly if you desire to add captions. A left or right image and caption at the top of a paragraph can be neatly displayed if attention is given to the the padding (Figure 1, 2). If it is desired to float a small image below the top of the paragraph, you will need to add the caption as part of the image. Because I use left-aligned text, the text does not flow around right-aligned images as neatly as for a left-aligned image. Here is the code for the left and right-aligned images and captions used in the article template:

<div style="color:#000000; text-align:left; font-size:.75em; padding-bottom:1em;"><b>Figure 1:</b> Left Caption</div><div><img src="http://www.selectdigitals.com/images/style/5.gif" alt="left" style="float:left; padding-left:.5em; padding-right:1.75em;" />

<div style="color:#000000; text-align:right; font-size:.75em; padding-bottom:1em;"><b>Figure 2:</b> Right Caption</div><div><img src="http://www.selectdigitals.com/images/style/6.gif" alt="right" style="float:right; padding-left:.5em; padding-right:.5em;" /></div>



Note: unless you are storing an image with your article, you must use the full URL to the image.

Figure 2: Right Caption
right
Placing and styling images and captions is often a trial-and-error process for me: I make a styling adjustment and preview the results until I get the look I want.

For images and captions you want to use at the top of a paragraph, place the code directly in front of the first word of the paragraph. If you do use a caption with an image placed at the top of a paragraph, use only one image & caption pair per paragraph.

For a left or right image not at the top of a paragraph, insert the image code within the paragraph and preview the results; change the position of the code until the image displays where you want it to. You may have to change the padding values for the look you want.

Now, if you look at the code for the article template, you can understand why parts of the code seems to be piled together. This is done to place the code where it belongs while avoiding extra carriage returns (more about this later).

Much more could be said about coding images and captions for your articles. However, the article template and this tutorial should give you a good start in using images in your articles.

Styling with <span>


I have already shown you how to craft the global environment for your article. Sometime, you might want to apply special styling to a much smaller part of your article. In the article template, "Nunc elementum." and "Morbi laoreet luctus magna." received special styling. I used the <span> & </span> tag pair to identify the text for special styling. Below is the code that produced the special styling:

<span style="background-color:#FFFF00">Nunc elementum.</span>

<span style="font-weight:bold; font-style:italic;">Morbi laoreet luctus magna.</span>



Entity Names


Entity names prevent browsers from misinterpreting certain text characters. For example, the lesser-than and greater-than signs (<, >) are used to form tags in HTML code. Using the entity names &lt; and &gt; instead of < and > prevents browsers from interpreting the characters as tag brackets. I commonly use these entity names when I display code, as in this article.

Most commonly, I use entity names in my HTML code for quote marks. By doing this, I can get the look and feel I want in my text when I use quotes. Another entity name I often use is &mdash; to create a long dash—like this one. Careful attention to the entity names you use can add “that extra touch of class” to your articles. Entity names can also be used to insert special symbols into text. I use &copy; to insert a copyright symbol, ©, at the bottom of my web site and blog pages.

You can find a complete list of characters and symbols and their replacement names at

http://www.w3schools.com/tags/ref_symbols.asp.

Preparing For Publication


After your article has been written and styled, it might need some clean up before you drop it into a submission box. For this tutorial, I will show how to remove the <br /> tags that were used during the article creation and testing. It should be noted that I could have replaced line feeds with <br /> tags just as easily, if that were required.

I begin the process by deleting everything except the article body (I keep everything between the body tags). I then use my text editor's "Replace / Replace All" function to quickly find and replace each <br /> tag with a CRLF. If you have HTML comments in your article, you need to remove these, too.

During the clean up, I turn off the editor's word wrap function so that the article body appears to be single, long lines of text (Figures 4, 5, 6).

Figure 4 shows the article before editing. Both <br /> tags and returns are shown. There is also a return at the end of each long line that is not shown.

Figure 4: Search & Replace
Search & Replace

Figure 5 shows the article after replacing the <br /> tags: only the returns are shown. You might wonder why I replaced each <br /> tag with a line return rather than simply removing them. It is possible that within one of the long lines of code, you might actually want a return. A return might be part of a long caption or subtitle that you want to display in two lines but may have been coded originally as a <br />.

Figure 5: <br /> Tags Removed
<br /> Tags Removed

Figure 6 shows the article after extra returns have been removed. There is now one return at the end of each long line and one return between each long line. The long lines of code create the basic elements of the article template and the elements are now separated by two carriage returns (the carriage return at the end of each line is not shown). The elements are as follows:
Figure 6: Extra Returns Removed
Extra Returns Removed

After clean up, the article, shown below, is ready to copy and paste into a directory or a blog editor's HTML window like that used by the WordPress TinyMCE editor. The title, keywords, and description could also be copy/pasted into the appropriate submission text boxes from the article template.

<div style="background-color:#fffef2; font-family:Verdana, Arial, Helvetica, sans-serif; padding:1.5em; text-align:left;"><div style="font-size:1.25em; color:maroon; font-weight:bold; text-align:center; margin-bottom:1em;">XHTML Article Template</div><div style="color:#000000; text-align:left; font-size:.75em; padding-bottom:1em;"><b>Figure 1:</b> Left Caption</div><div><img src="http://www.selectdigitals.com/images/style/5.gif" alt="left" style="float:left; padding-left:.5em; padding-right:1.75em;" /></div>Donec vitae augue. In sodales mattis ligula. In neque velit, eleifend vel, rhoncus a, sagittis a, tortor. Fusce vehicula iaculis orci. <span style="background-color:#FFFF00">Nunc elementum.</span> Nulla at turpis vitae erat facilisis viverra. Morbi vehicula arcu vel est porta semper.Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla imperdiet quam vitae tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec dui nisl, elementum nec, sollicitudin vel, rutrum sed, nisi. Suspendisse luctus adipiscing nisl. Morbi pharetra eleifend justo. Nulla fringilla tellus a eros. Donec volutpat sapien a leo. In vel neque.

<div style="text-align:left; color:maroon; font-size: 1.2em; font-weight:bold; border-top: double; padding-top:1em; font-style:italic;">Section Header</div>

<div style="color:#000000; text-align:right; font-size:.75em; padding-bottom:1em;"><b>Figure 2:</b> Right Caption</div><div><img src="http://www.selectdigitals.com/images/style/6.gif" alt="right" style="float:right; padding-left:.5em; padding-right:.5em;" /></div>Nunc vel enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur eleifend, nulla non dapibus vehicula, nulla lacus sodales diam, non luctus elit ipsum at nisi. Proin imperdiet sem a augue semper tempus. <span style="font-weight:bold; font-style:italic;">Morbi laoreet luctus magna.</span> Sed commodo pulvinar nibh. Suspendisse eu odio. Vestibulum ac est. Morbi sem. Donec mollis massa at tellus. Nulla varius erat eget mi. Cras quis tellus eu orci congue pharetra. Suspendisse vel quam. Proin viverra. Donec eget velit. Curabitur non nunc. Aliquam massa. In venenatis bibendum nisl.

<div style="text-align:left; color:maroon; font-size: 1.2em; font-weight:bold; border-top: solid; font-style:italic;">&nbsp;</div>

<div style="color:#000000; text-align:center; font-size:.75em; margin-bottom:1em"><b>Figure 3:</b> Center-Aligned signature-Block Image</div><img src="http://www.selectdigitals.com/images/review/signature-block-no-stroke.jpg" alt="Center-Aligned signature-Block Image" style="display: block; margin-left: auto; margin-right: auto;" /></div>



As a "sanity check" before submitting the article, you could drop the submission-ready article between the body tags of the basic XHTML document and validate the code. Don't expect this version to look like your published version will: remember, you removed the <br /> tags. Now, with confidence, you can drop the article into the submission box, do a final preview, and hit the submit button.

I wish you the very best of luck with your own article template.



CSS Properties and Values. Links to more information.
W3C-Standard Color Names
http://www.w3schools.com/colors/colors_names.asp

font-style
http://www.w3schools.com/cssref/pr_font_font-style.asp

font-size

I use the em to define the font sizes I use. W3C describes the em this way:
“1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses”
http://www.w3schools.com/cssref/pr_font_font-size.asp

http://www.clagnut.com/blog/348/

font-weight
http://www.w3schools.com/cssref/pr_font_weight.asp

border-top
border-top-width
http://www.w3schools.com/css/css_border.asp

padding

For this tutorial, I have used "em" values for these padding properties: http://www.w3schools.com/css/css_padding.asp

text-align

I prefer to use left justification for my body text. I have often found the word spacing in justified text to be very ugly. http://www.w3schools.com/cssref/pr_text_text-align.asp

display

I use the display property for my center-aligned images. There are many other possibilities, including various table values. http://www.w3schools.com/cssref/pr_class_display.asp




 


Figure 3: Center-Aligned Signature-Block Image
Royce Tivel


Return to Selectdigitals.com


Valid XHTML 1.0 Transitional

© Copyright 2009-2017 by Royce Tivel. All Rights Reserved.