Siaar Group Inspiring Online

Published by on Tuesday, November 2, 2010 at 6:30:00 PM

How to Create Quality Articles With Inline CSS

Inline cssLearn how to style your own articles using inline CSS and a standards-based article template. With inline CSS, article marketers and content producers can present content-rich articles to their target audience. Using a standards-based template and checking for code errors as the article is written will insure that it is error free when submitted for publication.

By Royce Tivel 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 new article's HTML 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

easier to read,
easier to understand, and
visually pleasing.

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.

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. For example, article directory and ezine services do not allow the use of style sheets. However, at least one article directory does allow 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.


I use a very basic, standards-based XHTML document and a basic text editor to write and test my articles.

The document includes code and styling for the main elements of a content-rich XHTML web page and becomes a template for future articles when I am through. The template includes standards-based and validated code for

global styling,
section headers,
images, and
image captions.

When I submit an article to an article directory or ezine, I simply copy/paste the title, keywords, and description into the appropriate submission boxes. Everything between the body tags of the XHTML template is part of the article content and can be dropped into the article submission text box with little or no clean up.

Within the article code, I add line breaks (br) to produce the necessary line breaks in a browser while working locally on the article. Before the article is published, I remove extra line breaks and line returns that are not needed; if this is not done, the article layout might not look as expected when it is published. I always check for and correct any spacing problems by previewing an article before clicking the submit button.


Immediately after the body start tag, I place the code I need to create the article environment. I use one HTML div start and end tag pair to enclose the entire article content. I then use inline CSS within the div start tag to create the global styling, or the "look and feel" for the article as a whole. The global styling is accomplished by coding the HTML style attribute inside the div start tag. Any CSS property and value may be used between the quotes of the style attribute.

The global styling I typically use includes the following properties and values:

background-color: #fffef2
text-align: left
padding: 1.5em

These properties and values will cause a browser to display an article with a light background (#fffef2), with Verdana as the first-choice font, with a space (padding) around the article content, and with left-justified text.

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.


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. I use a smaller font-size and usually a different color for the subtitle to make sure that the main title still dominates the article. The subtitle serves to develop further interest and pulls the visitor deeper into the article. I implement the subtitle with a second div tag pair and code it just below the first div start tag (used for the global styling). Here are the styling properties and values I often use for my subtitles:

text-align: center
color: maroon
font-size: 1.25em
font-weight: bold
margin-bottom: 1em


For long articles or tutorials, I like to organize my content by using section headers. I place the code for a section header between a div start and end tag pair. I style my section headers by including the following CSS properties and values between the quotes of the HTML style attribute (coded within a div start tag):

text-align: left
color: maroon
font-size: 1.2em
font-weight: bold
border-top: double
padding-top: 1em
font-style: italic

The text for the section header goes between the div start and end tags. Both the top border (the section divider) and the text (section name) will be styled based on the properties and values. The padding will space the section name the desired distance below the top border.

Sometimes you may not need text for a section header. You can leave out the text (I replace it with a non-breaking space, nbsp) and use a value of solid for the border-top property to emulate a horizontal line (hr).


I like to use my own styling for images and captions. I use separate div tag pairs for the image and the caption. I place the code for the caption directly in front of the code for an image.

For a center-aligned caption, I usually use the following properties and values:

text-align: center
color: #000000
margin-bottom: 1em

For a center-aligned image, I use these properties and values:

display: block
margin-left: auto
margin-right: auto

If the image is not stored locally, I use the full URL to the image.

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 padding. 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 I use in my article templates:

Left-Aligned Caption

color: #000000
text-align: left
padding-bottom: 1em

Left-Aligned Image

float: left
padding-right: 1.75em
Right-Aligned Caption
color: #000000
text-align: right
padding-bottom: 1em

Right-Aligned Image

float: 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 and 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. Here is the styling I use for an image below the top of a paragraph (use left or right as appropriate):

float: left or right


I have already described how to craft the global environment for an article. Sometime, you might want to apply special styling to a much smaller part of your article. In my article template, I use the span start and end tags to identify text for special styling. I then add the CSS properties and values I need by including them between the quotes of a style attribute coded within the span start tag.


If you can't use an internal or external style sheet, you may be still be able to create a "stand out" article using inline CSS. If you start with a basic standards-based XHTML template, you can then preview your article as you create it and then check it for errors with the W3C Markup Validation Service. Be sure to check out W3Schools for extensive documentation and tutorials on using both CSS and XHTML.

For a full XHTML version of this article, including code you can copy and use for your own article templates, be sure to visit

At the, you can also read a detailed review of a new article directory service, Website-Articles, that removes the article-submission restrictions found at other directories and ezines and empowers article marketers and content producers to publish content-rich, attention-grabbing articles.

About the Author: Royce Tivel has written extensively about digital photography, Adobe, radio-controlled(RC) airplanes, WordPress, travel, and more. Visit his web site for additional content on these subjects, including many images related to his articles published at EzineArticles.

Article Source: id=1958790
Published by IzajAhmed Shaikh.
You Might Like More articles
  1. Netflix will launch streaming video app on Google ...
  2. Free SEO Tools - Easy Site Validation W3C Tools
  3. Promote to over 10 million individuals across the ...
  4. iTunes Software Downloads - What's Hot and What's ...
  5. Latest Mobile Phone - Samsung Galaxy 5 – Best to B...
  6. How to Reverse Lookup a Cell Phone Number
  7. Gary pool seo
  8. Free Digital Photo Software for Basic Photo Editin...
  9. Using Web Page Design Software to Monetize Your We...
  10. Computer Terms And Their Meanings


I am, Mr. IzajAhmed Shaikh, Computer Professional, and Pro. Blogger, who belongs to Shahabad, Karnataka India. My basic Qualifications are B.Sc., and M.C.M. done from University of Pune, formerly known as, Poona University, also like to write articles based on my personal experiences.