| When I write an article -- or any web page, for that | | | | subtitle with a second div tag pair and code it just |
| matter -- I like to begin with a basic XHTML | | | | below the first div start tag (used for the global |
| document I know contains valid code. I copy/paste | | | | styling). Here are the styling properties and values I |
| the basic document into a text editor, write the | | | | often use for my subtitles: |
| content, and then style the content for display with | | | | - text-align: center; |
| CSS. As a final step before publishing an article, I | | | | - color: maroon; |
| always validate the document at W3C to insure that | | | | - font-size: 1.25em; |
| the code is error free. | | | | - font-weight: bold; |
| When I create a new article, I can often leverage | | | | - margin-bottom: 1em; |
| previous work I have done by reusing already | | | | SECTION HEADERS |
| developed and tested code and CSS styling. This is | | | | For long articles or tutorials, I like to organize my |
| particularly true when using inline CSS: I can copy the | | | | content by using section headers. I place the code |
| CSS properties and values I need from existing style | | | | for a section header between a div start and end |
| sheets and simply paste them into the new article's | | | | tag pair. I style my section headers by including the |
| HTML inline CSS. | | | | following CSS properties and values between the |
| WHY USE INLINE CSS? | | | | quotes of the HTML style attribute (coded within a |
| You can dramatically improve the effectiveness of | | | | div start tag): |
| your articles by dressing up their visual presentation. | | | | - text-align: left; |
| When you do this, your articles will be | | | | - color: maroon; |
| - easier to read, | | | | - font-size: 1.2em; |
| - easier to understand, and | | | | - font-weight: bold; |
| - visually pleasing. | | | | - border-top: double; |
| HTML tags are used to organize the article content; | | | | - padding-top: 1em; |
| the CSS is used to tell browsers how to display the | | | | - font-style: italic; |
| content. Simply, HTML code specifies *what* content | | | | The text for the section header goes between the |
| is to be displayed; the inline CSS defines *how* the | | | | div start and end tags. Both the top border (the |
| content is to be displayed. | | | | section divider) and the text (section name) will be |
| Normally, I would remove the CSS completely from | | | | styled based on the properties and values. The |
| the article body and use an external or internal style | | | | padding will space the section name the desired |
| sheet instead. The fundamental goal of CSS, after all, | | | | distance below the top border. |
| is to separate content from display. W3Schools | | | | Sometimes you may not need text for a section |
| states that | | | | header. You can leave out the text (I replace it with |
| "An inline style loses many of the advantages of | | | | a non-breaking space, nbsp) and use a value of solid |
| style sheets by mixing content with presentation." | | | | for the border-top property to emulate a horizontal |
| That being said, you may not always be able to use | | | | line (hr). |
| an internal or external style sheet. For example, | | | | IMAGES AND CAPTIONS |
| article directory and ezine services do not allow the | | | | I like to use my own styling for images and captions. |
| use of style sheets. However, at least one article | | | | I use separate div tag pairs for the image and the |
| directory does allow inline CSS. | | | | caption. I place the code for the caption directly in |
| There is one advantage of using inline CSS: inline CSS | | | | front of the code for an image. |
| will override an external or internal style sheet -- so | | | | For a center-aligned caption, I usually use the |
| you can be sure the styling you want will be applied | | | | following properties and values: |
| to your content. | | | | - text-align: center; |
| USING AN ARTICLE TEMPLATE | | | | - color: #000000; |
| I use a very basic, standards-based XHTML | | | | - font-size:.75em; |
| document and a basic text editor to write and test | | | | - margin-bottom: 1em; |
| my articles. | | | | For a center-aligned image, I use these properties |
| The document includes code and styling for the main | | | | and values: |
| elements of a content-rich XHTML web page and | | | | - display: block; |
| becomes a template for future articles when I am | | | | - margin-left: auto; |
| through. The template includes standards-based and | | | | - margin-right: auto; |
| validated code for | | | | If the image is not stored locally, I use the full URL |
| - title | | | | to the image. |
| - keywords, | | | | Left and right-aligned images require a little more |
| - description, | | | | attention to display them neatly -- particularly if you |
| - global styling, | | | | desire to add captions. A left or right image and |
| - subtitle, | | | | caption at the top of a paragraph can be neatly |
| - section headers, | | | | displayed if attention is given to the padding. If it is |
| - images, and | | | | desired to float a small image below the top of the |
| - image captions. | | | | paragraph, you will need to add the caption as part |
| When I submit an article to an article directory or | | | | of the image. Because I use left-aligned text, the |
| ezine, I simply copy/paste the title, keywords, and | | | | text does not flow around right-aligned images as |
| description into the appropriate submission boxes. | | | | neatly as for a left-aligned image. Here is the code |
| Everything between the body tags of the XHTML | | | | for the left and right-aligned images and captions I |
| template is part of the article content and can be | | | | use in my article templates: |
| dropped into the article submission text box with little | | | | Left-Aligned Caption |
| or no clean up. | | | | - color: #000000; |
| Within the article code, I add line breaks (br) to | | | | - text-align: left; |
| produce the necessary line breaks in a browser while | | | | - font-size:.75em; |
| working locally on the article. Before the article is | | | | - padding-bottom: 1em; |
| published, I remove extra line breaks and line returns | | | | Left-Aligned Image |
| that are not needed; if this is not done, the article | | | | - float: left; |
| layout might not look as expected when it is | | | | - padding-left:.5em; |
| published. I always check for and correct any spacing | | | | - padding-right: 1.75em; |
| problems by previewing an article before clicking the | | | | Right-Aligned Caption |
| submit button. | | | | - color: #000000; |
| CREATING AN ARTICLE ENVIRONMENT (GLOBAL | | | | - text-align: right; |
| STYLING) | | | | - font-size:.75em; |
| Immediately after the body start tag, I place the | | | | - padding-bottom: 1em; |
| code I need to create the article environment. I use | | | | Right-Aligned Image |
| one HTML div start and end tag pair to enclose the | | | | - float: right; |
| entire article content. I then use inline CSS within the | | | | - padding-left:.5em; |
| div start tag to create the global styling, or the "look | | | | - padding-right:.5em; |
| and feel" for the article as a whole. The global styling | | | | Placing and styling images and captions is often a |
| is accomplished by coding the HTML style attribute | | | | trial-and-error process for me: I make a styling |
| inside the div start tag. Any CSS property and value | | | | adjustment and preview the results until I get the |
| may be used between the quotes of the style | | | | look I want. For images and captions you want to |
| attribute. | | | | use at the top of a paragraph, place the code |
| The global styling I typically use includes the following | | | | directly in front of the first word of the paragraph. If |
| properties and values: | | | | you do use a caption with an image placed at the |
| - background-color: #fffef2; | | | | top of a paragraph, use only one image and caption |
| - text-align: left; | | | | pair per paragraph. For a left or right image not at |
| - padding: 1.5em; | | | | the top of a paragraph, insert the image code within |
| These properties and values will cause a browser to | | | | the paragraph and preview the results; change the |
| display an article with a light background (#fffef2), | | | | position of the code until the image displays where |
| with Verdana as the first-choice font, with a space | | | | you want it to. You may have to change the padding |
| (padding) around the article content, and with | | | | values for the look you want. Here is the styling I |
| left-justified text. | | | | use for an image below the top of a paragraph (use |
| The best way to learn how the styling works is to | | | | left or right as appropriate): |
| vary a property value and then preview the results. | | | | - float: left or right; |
| You may need to "play" with the code in order to | | | | - padding-top:.5em; |
| achieve the look and feel you want. This a much | | | | - padding-left:.5em; |
| better way to learn inline CSS styling than to read | | | | - padding-right:.5em; |
| several paragraphs describing what the properties | | | | SPAN TAGS |
| and values do. In fact, I often have to do this to | | | | I have already described how to craft the global |
| achieve the visual results I want. | | | | environment for an article. Sometime, you might |
| SUBTITLE | | | | want to apply special styling to a much smaller part |
| Every marketer knows the value of a good headline. | | | | of your article. In my article template, I use the span |
| A good headline can capture the interest of even a | | | | start and end tags to identify text for special styling. |
| casual web surfer. The same applies to your article | | | | I then add the CSS properties and values I need by |
| title. Ideally, you should be able to explain what your | | | | including them between the quotes of a style |
| article is about with a title of 40 to 60 characters. For | | | | attribute coded within the span start tag. |
| an article on my web page or blog, I make the title | | | | CONCLUSIONS |
| big and colorful. You will not always have control over | | | | If you can't use an internal or external style sheet, |
| the styling of your title: article directories and ezines | | | | you may be still be able to create a "stand out" |
| will style the title for you. | | | | article using inline CSS. If you start with a basic |
| If you need more text to adequately convey the | | | | standards-based XHTML template, you can then |
| primary message expressed by your title, you can | | | | preview your article as you create it and then check |
| optionally use a subtitle. I use a smaller font-size and | | | | it for errors with the W3C Markup Validation Service. |
| usually a different color for the subtitle to make sure | | | | Be sure to check out W3Schools for extensive |
| that the main title still dominates the article. The | | | | documentation and tutorials on using both CSS and |
| subtitle serves to develop further interest and pulls | | | | XHTML. |
| the visitor deeper into the article. I implement the | | | | |