| Writing your quality articles using Cascading Style | | | | require a preceding period in the CSS file. These |
| Sheets(CSS) will insure that your articles will be both | | | | include p, h, body, li, and others. That being said, |
| easy to read and aesthetically pleasing to the viewer. | | | | these tags can be modified by appending an |
| A CSS style sheet allows the HTML code for your | | | | additional class name to them. For example, if I |
| articles to be cleaner, table-less, easily customizable, | | | | wanted to make the next paragraph blue, I could add |
| and "liquid." | | | | a "blue" class attribute to the opening HTML "p" tag |
| Removing the display attributes of your articles from | | | | and then add this code to the CSS file:p.blue |
| the HTML code allows you to concentrate on using | | | | {color:#0000FF |
| the HTML for organizing your document's content. | | | | } |
| When you use CSS, a new approach is possible to | | | | ** This would be a blue paragraph if this HTML were |
| writing your articles for the Web: | | | | displayed in color. ** |
| - First, you write your article in a very basic HTML | | | | Selections Using ID Names |
| document, using simple HTML code. At this stage, | | | | The CSS syntax for an ID is a little different from |
| use only the most common HTML tags. Focus on | | | | that used for a class. In the CSS file, ID names are |
| organizing your article's content first. | | | | proceeded with a pound sign (#). The example below |
| - Next, you identify parts of your document for | | | | "floats" my 288px by 59px logo image to the left of |
| special display formatting. | | | | the following paragraph: the text flows around the |
| - Finally, you define the formatting in the CSS file. | | | | image. I added an ID attribute with a name of "logo" |
| Once you work through this process, you can reuse | | | | to the HTML "div" start tag I used to demarcate the |
| both the HTML document and the CSS file as | | | | image information. Here is the CSS code I used: |
| templates for your future, quality articles. | | | | #logo |
| This article will provide the tips, tricks, and sample | | | | {float:left |
| code to give you a head start in creating your own | | | | } |
| quality articles and templates using CSS. If this all | | | | The HTML and CSS code would combine to produce |
| seems complex and intimidating at first, don't | | | | the following results: |
| despair--read on. I will explain the basic HTML and | | | | ***LOGO WOULD FLOAT HERE*** Text here would |
| CSS terminology throughout the article. | | | | flow around the logo. |
| THE BASIC HTML DOCUMENT | | | | Selections Using Span Tags |
| The basic HTML document is divided into several | | | | If you want to format just a bit of content, you can |
| sections: html, head, and body. | | | | use span tags |
| Tags are used to demarcate document sections, or | | | | In the article.css file, I defined a background-color |
| "elements." Content lies between the tags. For | | | | attribute for a "highlight" class that will put a yellow |
| example, the article you are now reading lies | | | | background behind selected text. For the next |
| between the body tags of an html document. | | | | paragraph, I used span tags to bracket the text, |
| Tags usually exist in pairs, a start tag and and end | | | | "separate attributes." Here is the CSS code: |
| tag. The start tag is surrounded by less-than and | | | | .highlight |
| greater-than angle brackets. An end tag is bracketed | | | | {background-color:yellow |
| with the same symbols but the first character of the | | | | } |
| tag is a forward slash (/). For example, HTML code | | | | As a result, and if this were in color, the phrase |
| for a paragraph element would include the start and | | | | "separate attributes" would be highlighted with a |
| end "p" tags with the content sandwiched between | | | | yellow background. |
| the two. | | | | LOOKS AND LAYOUT |
| The basic tag pairs found in web pages are: | | | | A careful selection of the "global" characteristics used |
| - html -- These tags tell a browser that this is an | | | | for the body element of your web page will insure |
| HTML document and define the start and end of the | | | | that your articles will be both easy to read and |
| document. | | | | aesthetically pleasing to the viewer. These |
| - head -- The head element can contain information | | | | characteristics include font, font color, page |
| about the document. Although the browser does not | | | | background color, and page margins. |
| present the information to a viewer, the information | | | | I use the "body" code in the CSS file to define the |
| can be "seen" and used by search engines. | | | | default body display attributes. Here is the CSS body |
| - title -- The title tags define the title element that | | | | code from the article.css file:body |
| will be used by a browser for the document's title. | | | | {background: #fffef2;color: black;line-height: |
| - body -- The document's content is placed between | | | | normal;margin: 3% 25% 3% 25%; |
| the body tags. | | | | } |
| In HTML 4.01, not all tags exist in pairs. The | | | | Fonts |
| "!DOCTYPE" and "meta" tags do not use an end tag, | | | | In the CSS body code, I specify the font family I |
| for instance. | | | | want to use. The first font listed, Verdana, will be |
| The first line of code in the basic document is the | | | | used by a browser if it exists on a viewer's PC. If |
| Document Type Definition (DTD). The !DOCTYPE tag | | | | Verdana is not available, the other fonts will be |
| tells the browser which HTML or XHTML specification | | | | checked, in order. If none of the specific fonts are |
| the document uses. HTML 4.01 specifies three | | | | available, the browser will default to any available |
| document types: Strict, Transitional, and Frameset. | | | | sans-serif font. |
| The first meta tag in the basic HTML document | | | | If you use a commonly available font/font-family for |
| provides information about how the page-content | | | | your articles, the chances are good that a reader will |
| characters are encoded so that a browser can | | | | see the article as expected. Otherwise, your article |
| interpret them correctly. | | | | might not look the way it should. |
| If you want your articles to be widely seen on the | | | | Verdana was designed for easy readability on |
| Internet, you need to be particularly interested in the | | | | computer monitors and, for this reason, is my font |
| meta tags for keywords and description. These can | | | | of choice. Since Verdana is commonly available on |
| be seen and used by search engines. | | | | PCs, using this as the default font will also increase |
| Use the "keyword name" and its related "content" in | | | | the likelihood that my article text will be displayed as |
| a meta tag to list your keywords or keyword | | | | I intended. |
| phrases. | | | | Page Background |
| Keywords ought to be appropriate for the article | | | | I set the background color to a light color, the font |
| content. They should also reflect what internet | | | | color to black, and the line height, or spacing |
| surfers actually type into a search engine's query box | | | | between lines, to normal. The background color I like |
| when hunting for the information you are offering. | | | | to use (#fffef2) shows colored text and graphics to |
| Keyword research is a study in itself. Freeware is | | | | good advantage. |
| available on the Internet that can help you determine | | | | Margins |
| the best keywords to use in your article and | | | | I like to adjust the article on my page to show |
| keyword list. Keywords or keyword phrases within | | | | content in roughly the middle half of the page. I think |
| the meta tag need to be separated from each other | | | | it is easier for the eye to process than content that |
| with a comma. | | | | goes edge to edge. I use the CSS margin attribute |
| Although not all search engines will utilize the | | | | to adjust this. The margin attribute defines the top, |
| description meta tag for their search results, you still | | | | right, bottom, and left margins respectively (margin: |
| need to include a good description for those that do. | | | | top right bottom left). |
| If you had just a few characters to describe your | | | | In the CSS body code above, I set the left and right |
| article, or to entice a surfer to select yours from the | | | | margins to 25% of the available display width. Using |
| results of a search, what would you write? What | | | | 25% places about 60 characters per line of text on |
| you would write is what should go into the | | | | my 1024x768 pixel full-screen display. I also set a |
| description. | | | | small 3% margin above and below the content. |
| USING CASCADING STYLE SHEETS (CSS) | | | | Lists |
| I have already suggested several reasons why | | | | If you use a list in your article, you can use the CSS |
| today's preferred method of creating web pages is | | | | file to customize the way your list looks. Two |
| to separate a page's content from it's display | | | | important considerations of list design are the list |
| properties. It's time for a demonstration of how this | | | | bullet and the spacing between list elements. The |
| can be accomplished. | | | | example below shows how to change the bullet |
| In the past, HTML tags included attributes to define | | | | graphic and element spacing of an unordered list:li |
| how the content was to be displayed by a browser. | | | | {list-style-position: inside;list-style-image: url |
| Today, CSS is used to concentrate these attributes | | | | ([ none;margin-bottom: 1em |
| in a single, separate file. Simple HTML code specifies | | | | } |
| *what* content is to be displayed; the CSS code | | | | I added two list attributes to customize the list: |
| defines *how* the content is to be displayed. | | | | 1. list-style-image - used to specify the URL to a |
| Before CSS can be used to format an HTML | | | | bullet image (not shown below), and |
| document, the name and location of the CSS file | | | | 2. margin-bottom - used to provide some extra |
| must be known to the browser. The browser gets | | | | space between list items. |
| this information through the HTML "link" tag that is | | | | For a complete description of possible list |
| coded between the head tags. | | | | attributes--as well as great tutorials on using HTML |
| Once the CSS file is linked, the browser will check | | | | and CSS--you can visit |
| the CSS file for display attributes. For example, if the | | | | Entity Names |
| browser encounters an "h1" tag in the HTML code, it | | | | Some characters have special meaning in HTML |
| will check the CSS file for "h1" formatting. Here is the | | | | documents. When you want to use these characters |
| "h1" formatting information I included in the article.css | | | | in your text, you can use their "entity names" to |
| file I use for my article titles:h1 | | | | prevent browsers from misinterpreting them for |
| {color:maroon;text-align:center | | | | HTML code. I used entity names extensively for my |
| } | | | | web version of this article to display many symbols, |
| When a browser encounters an "h1" tag in the HTML | | | | particularly in the code samples. |
| code, it would display the title centered and maroon. | | | | Most commonly, I use entity names in my HTML |
| SELECTING CONTENT FOR FORMATTING | | | | code for quote marks. By doing this, I get the look |
| Content formatting can be applied to an HTML | | | | and feel I want in my text when I use quotes. For |
| document only after the content to be formatted | | | | example, when I want to use distinctly different left |
| has been identified to the browser. An easy way to | | | | and right quote-marks in my web-based titles and |
| do this is to place a "class" or "id" attribute within a | | | | headlines, I use specific entity names to do so. |
| start tag. The same class name can be used many | | | | Careful attention to the entity names you use can |
| times on a web page; each id name should be used | | | | add "that extra touch of class" to your articles. |
| just once per page. | | | | For HTML 4.01, there are entity names for both |
| Once content is identified, the class or id name can | | | | ASCII and extended characters and symbols. I use |
| be referred to in the CSS file and the browser will | | | | an entity name to insert a copyright symbol at the |
| apply any formatting attributes found there. | | | | bottom of all of my web pages. You can find a |
| Selections Using Class Names | | | | complete list of entity names at w3schools. |
| As an example of using the class name, I used the | | | | I use Dreamweaver 8 for my HTML and CSS editing. |
| following CSS for in an article about writing ad | | | | With Dreamweaver, I can validate my code as I |
| headlines. In the HTML code, I used divisions tags | | | | write it. I have optioned the validator to warn me |
| with a class name of "headline" to demarcate the | | | | when entity name substitution might be appropriate. |
| headline text. I added the following code to the CSS | | | | Validating Your HTML and CSS Code |
| file: | | | | I like to write valid HTML code for the "!DOCTYPE" |
| .headline | | | | version I use. If you click on the w3 validation icon at |
| {font-size: 24px;color: | | | | the bottom of my full-color, web-site version of this |
| red;font-weight:bold;text-align:center | | | | article, you will see that the HTML code for the |
| } | | | | article is valid and error free. You can use the |
| In the CSS file, I specified the font-size, color, | | | | validator accessible through w3schools to check your |
| font-weight, and text-align attributes. The class name | | | | code, too. |
| was added to the CSS file by preceeding the name | | | | CONCLUSIONS |
| with a period. I used a semicolon to separate | | | | When you separate your article's content from the |
| attributes in the list. The HTML and CSS code | | | | code browsers use to display your article, you can |
| combine to produce a bold, 24px, red headline | | | | focus on using simple, basic HTML code to organize |
| centered in the HTML page. | | | | your content. A Cascading Style Sheets(CSS) can |
| It should be noted that there are some basic HTML | | | | accomplish the separation. |
| tags that are their own class names and do not | | | | |