In this lesson we would like to give you a better idea of CSS and provide more examples of how it can be used for pure, light-coded and effective web design. First, let's define CSS. CSS stands for "cascading style sheets". The World Wide Web Consortium, also referred to as W3C, defines CSS as follows:
"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."
(http://www.w3.org/Style/)
Color: #5500DD;
Font-size: 12px;
Font-family: Verdana;
Font-weight: bold;
Next, we give this style a particular custom name (further referred to as "class"):
Mystyle
{
Color: #5500DD;
Font-size: 12px;
Font-family: Verdana;
Font-weight: bold;
}
…or, alternatively, we associate it with a particular HTML tag:
h1
{
Color: #5500DD;
Font-size: 12px;
Font-family: Verdana;
Font-weight: bold;
}
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.
<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 lets you avoid using JavaScript and still emulate rollover effects with grace in a small file, but one of the greatest benefits is providing more textual content for spiders to read. Using CSS to dictate rollover effects instead of separate images will give you an effective advantage in the search engine battle, especially if the textual links are your key phrases.
Example link
Make it work by help of mouse. To gain the effect you want feel free to use the code below:
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!
"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."
(http://www.w3.org/Style/)
How style sheets work?
First, define a style. For instance, you want to define text as deep blue 12px size Verdana font in bold:Color: #5500DD;
Font-size: 12px;
Font-family: Verdana;
Font-weight: bold;
Next, we give this style a particular custom name (further referred to as "class"):
Mystyle
{
Color: #5500DD;
Font-size: 12px;
Font-family: Verdana;
Font-weight: bold;
}
…or, alternatively, we associate it with a particular HTML tag:
h1
{
Color: #5500DD;
Font-size: 12px;
Font-family: Verdana;
Font-weight: bold;
}
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:<strong><font color="#FF0000" size="24px">Main Heading of My Site</font></strong>
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>
(with a <link rel="stylesheet" href="mystyle.css"> in the HEAD and provided a style is declared for the H1 heading in “mystyle.css”).
CSS rollovers vs. JavaScript rollovers
Rollover menu effects are very popular. However, they commonly require JavaScript implementation. Fortunately, rollovers can be made via CSS that do not require any scripting and are fully readable by the spiders.CSS lets you avoid using JavaScript and still emulate rollover effects with grace in a small file, but one of the greatest benefits is providing more textual content for spiders to read. Using CSS to dictate rollover effects instead of separate images will give you an effective advantage in the search engine battle, especially if the textual links are your key phrases.
CSS static-text popup effect
Let's create static-text popup purely through the power of CSS. It can be achieved like this:<a href="http://www.mysite.com/css/">Links<span>Some text here Some text here Some text here </span></a>
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: div#links a span {display: none;}
Images can be the element inside the hyperlinks too. Here's one example from the source of this document: <a href="http:// www.mysite.com /css/">Links<img src="picturename.gif">
To prevent the image from showing up when the page loads, make a command: div#links a img {height: 0; width: 0; border-width: 0;}
From the other hand we make them visual thanks to the: div#links a:hover img {position: absolute; top: 190px; left: 55px; height: 50px; width: 50px;}
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:<style type="text/css">
.thumbnail{
position: relative;
z-index: 0;
}
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
</style>
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.CSS button effect instead of JavaScript
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.Example link
Make it work by help of mouse. To gain the effect you want feel free to use the code below:
a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}
a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}
a:hover
{
position: relative;
top: 1px;
left: 1px;
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.
