“Style sheets describe how documents are presented on screens, in print, or perhaps how they are pronounced […] By attaching style sheets to structured documents on the Web (e.g. HTML), authors and readers can influence the presentation of documents without sacrificing device-independence or adding new HTML tags.”
“Cascading Style Sheets (CSS) is a style sheet mechanism that has been specifically developed to meet the needs of Web designers and users.”
How style sheets work?
First, define a style. For instance, you want to define text as deep blue 12px size Verdana font in bold:
Next, we give this style a particular custom name (further referred to as “class”):
…or, alternatively, we associate it with a particular HTML tag:
Styles can be declared in the HTML document itself with the help of the <style> tag anywhere in the document. However, it’s preferable to keep them out of your page in a separate file with the “.css” extension (“mystyle.css”) to further reduce the size of your HTML file. To be able to use the styles declared by that file in your HTML document, you must provide a link to “mystyle.css” within the HEAD area of your html document:
<link rel=”stylesheet” href=”mystyle.css”>
With the link described above in your HEAD area, all HTML tags that have styles defined for them in the “mystyle.css” will yield these styles when shown in browser.
How can CSS help with optimization?
Imagine there’s some HTML code used to print a heading on your page:
Now look how the same effect can be achieved using styles:
<span class=”mystyle”> Main Heading of My Site </span>
The HTML code for the CSS tag is half as long as the code without the CSS. This, as you already know, is an advantage with search engine spiders as it can give more weight to your content because of the improved content-to-code ratio.
And even better:
<h1> Main Heading of My Site </h1>
CSS static-text popup effect
Let’s create static-text popup purely through the power of CSS. It can be achieved like this:
As you can see the “popup” text is a span element inside the hyperlink. And one more thing to do is to give the command and prevent the text from showing up when the page loads:
Images can be the element inside the hyperlinks too. Here’s one example from the source of this document:
To prevent the image from showing up when the page loads, make a command:
From the other hand we make them visual thanks to the:
CSS image popup effect
Any beautiful picture you want to enlarge for the Web page visitors can be processed via CSS popup effect like this:
border: 1px dashed gray;
left: 60px; /*position where enlarged image should offset horizontally */
The effect will come in forth when the user moves its mouse over the specified image. You can include this “image popup” code on the HTML page.
3-d button is another CSS creative design issue we’d like to recommend. This captivating effect gives the possibility to hit the button when mouse over it. See the picture below.
Make it work by help of mouse. To gain the effect you want feel free to use the code below:
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
border-color: #000 #aaa #aaa #000;
Where CSS should be used with caution?
When you code your page using CSS you should always keep in mind that search engines don’t like to index hidden context. Thus, you should avoid using “display:none“, “visibility:hidden” or similar definitions to hide sections stuffed with keywords. Such actions are definitely spamming and are not recommended.
Another technique you should avoid is producing the same color text and background with the help of CSS. Such technique is used by the spammers to hide keywords from the human visitors and can hurt your pages.
One more crucial thing – use HTML tags for their intended purpose. E.g., you shouldn’t use CSS to change the function of the tag if you don’t use it. There are classes instead.
The usage of CSS reduces to a minimum the size of the HTML code and provides the best opportunity to effectively use keywords in important HTML heading tags (h1, h2, etc.). But remember – the time when CSS was invisible to search engines has gone by. Today’s engines can easily read cascading style sheets and thus they are aware of what they once were not!
What you should remember from this lesson:
- CSS is a perfect means for increasing your content-to-code ratio, lowering HTML file size, and compromising between clean visual design and clean code for spiders.
- You should avoid using CSS to visually hide sections stuffed with words or produce the same color text and background.