Create Quality Articles With Inline CSS

0
9

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.

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

  • 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.

USING AN ARTICLE TEMPLATE

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

  • title
  • keywords,
  • description,
  • global styling,
  • subtitle,
  • 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.

CREATING AN ARTICLE ENVIRONMENT (GLOBAL STYLING)

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.

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. 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;

SECTION HEADERS

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).

IMAGES AND CAPTIONS

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;
  • font-size: .75em;
  • 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;
  • font-size: .75em;
  • padding-bottom: 1em;

Left-Aligned Image

  • float: left;
  • padding-left: .5em;
  • padding-right: 1.75em;

Right-Aligned Caption

  • color: # 000000;
  • text-align: right;
  • font-size: .75em;
  • padding-bottom: 1em;

Right-Aligned Image

  • float: right;
  • padding-left: .5em;
  • padding-right: .5em;

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;
  • padding-top: .5em;
  • padding-left: .5em;
  • padding-right: .5em;

SPAN TAGS

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.

CONCLUSIONS

If you can not 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.

Source

Leave a Reply