Tuesday, October 5, 2010

CSS - The Basics


Thinking about CSS, but want to learn what you need to know, or need to learn before jumping onto the CSS bandwagon? Let me begin by saying that CSS can reduce your time at the computer. But knowledge do you need to learn and is CSS compatible with the search engines and your browsers? These are some of the questions I'll try to answer,as well as, explain a little about what CSS is all about.

What is CSS?

CSS stands for Cascading Style Sheets. CSS is a set of formatting instructions that controls the looks of a web page or pages. Some of the browsers that support CSS is: (Firefox,IE3 or later, NN4 or later). You may be saying, great this will definitely save me some time. Not so fast, you also need to know that though, the majority of the browsers understand CSS, they do not fully support all of it's capabilities.

XHTML - XHTML is EXtensible HyperText Markup Language. XHTML Is HTML with stricter rules-that adds conformity and, is 100% XML compliant. So you should be familiar with or become more comfortable with HTML, XHTML, and the style properties of CSS.

What can you do with CSS

You can build your layout,adjusting size and color of your headings or body text, as well as positioning your pictures. This translates into like pages being programmed once, without the choice of inputting the same coding into each of your web pages manually. Translated, elimination of duplicate formatting.

How to get the Search Engines to See Your Copy

It has been said that the Search Engines still have some problems with understanding CSS. But if you want to use CSS, is there a way to get the search engines to see what you want.

1. Keep your text clean, if you have to much garbage in your web page, than the spiders will have a difficult time in determining what is relevant and what is not. Thus, CSS keeps your web page clean, without the redundant coding needed for each individual element of code. Here is an example of how to code a headline; with the CSS code below.

Example: "h1"Title"/h1" (replace beginning and end quotes with )

"CSS code: H1 {font family: Arial size: 18 px; bold;}" (leave off quotes)

Syntax of CSS

First, CSS can be written within any text editor. But the text file must be saved with a CSS extension.

The syntax of CSS consists of the selector and the declaration. The selector is the identifier within the body of your web page; the declaration is the code that identifies the style that you want to put into place as to property and rule. Lets say you want all your H1 headlines to be green, with the font Arial. the code for CSS would be as follows:
Note: Do not include quotes around the code.

"selector {property: rule;}"

"H1 {color: green; font-family: Arial;}"

Note: Notice that the property and rule must be enclosed in {}.

Placement of CSS

There are three places to put your CSS code:

In the Head (Internal), in an external file, or within an individual tag (Inline style).

Internal -is used within a single web page that may have a unique style.

Inline - mixes code with content. Sometimes you may need to use it, but this style does seem to eliminate the need of even using a CSS style sheet.

External - The CSS is separate from the body of the web page and is linked with the web page. Thus, to link an external file into a web page you will need to use the link tag.
Example: <link rel="stylesheet" type="text/css" href="NameofCSS.css"> (Goes in the head section after the title tag)

Which way do you go? If you have a large site or a site that will be expanding, an external file would be a better way to quickly and easily manipulate all your web pages at once.

Watch out for Spam

But with anything on the Internet, CSS can be used for the good and the bad. And obviously, if you want to keep your site up and running for a long time, some CSS techniques should be avoided. Why? Because some CSS techniques can be considered spam by the search engines and thus, ban your site if you use the techniques. The blackhat tactics include such things as: 1) using CSS to hide text-from headlines to body from the human eye; 2) hiding and bolding or italicizing copy for search engine spiders benefit only.

To conclude, CSS can and is a viable way to making your web pages easier to maintain-if the majority of your pages follow the same format. If you are not all that familiar with CSS, then take the time to look at w3schools.com tutorial. It's very informative and can get you started with CSS..

Vickie J Scanlon -- Visit her site at: http://www.myaffiliateplace.biz for free tools, articles, ebooks, how to info, affiliate opportunities, travel and tech accessories, software and computers for the online business. Or check her blog – My Affiliate Place Blog (http://myaffiliateplace.blogspot.com/) .

Article Source: http://EzineArticles.com/?expert=Vickie_Scanlon