Basic CSS3 Styling Part 1

CSS stands for Cascading Style Sheets, it is used to add design or style to standard HTML content. CSS came to existence trough the evolution of standard HTML, as a solution to the complexity and messiness that was present when the same style had to be defined separately every time we wanted to use it.

Now instead of writing 100 lines of code each time we want to use a special font effect for our H1 tags, we can just add that code once in our CSS stylesheet and create the same font effect for all H1 tags on our website.

So, in this article we will learn some basic but useful CSS styling tricks that can make your site look cooler.

Cross Browser Compatibility

 

Much of the CSS functionality is dependent on the internet browsers. And cross browser compatibility is a must since you don’t want your content to be cool for a chrome users but UNREADABLE for people that use Firefox.

And if you want your CSS styles to be properly shown to all people that visit your website you need to add include special CSS codes for all browser types:

1) Firefox based browsers
2) Internet Explorer based browsers
3) Webkit based browsers (chrome, safari)

 

CSS Gradients

Here are the CSS gradient codes for all browser types:

Mozilla CSS

background: -moz-linear-gradient(top, #ccc, #000);

the -moz-linear-gradient command creates a linear gradient -is a command for Mozilla browsers, the top is the starting point, the #ccc (is gray color code) and the #000 (is a black color code). This tells the Mozilla browser to show a linear gradient that starts gray on the top and goes to full black on the bottom.

Webkit (chrome, safari.. etc) CSS

background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));

As you can see, the command for webkit browsers is different, but does the same thing. Goes from gray top to black bottom.

Internet Explorer CSS

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

And as usual, the internet explorer command is the most complex one, but again… it does the same thing. The only difference is that the colors are defined with 6 digits instead of 3.

And here is the Cross Browser Compatible CSS Style:

background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */

as you can see, this is a combination of the last 3 CSS codes.

How To Use This CSS Style:

First you need to add the CSS style in your current stylesheet or to add it as a style inside the HTML page. By adding or cross browser CSS code in <style> tags right before the </head> tag:
<style type="text/css">
.gradient {
width: 200px;
height: 200px;
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
}
</style> 

And then we can go ahead and “activate” this style by using the class=”gradient”


<div class="gradient">
text that you want to be inside the gradient box
</div>

But creating gradients manually is not necessary since there are free tools that you can use to create amazing CSS cros browser compatible gradients faster than ever before!

 

What to remember

You need to remember that these are just the basics, there are million different things you can do with CSS once you start playing with it. Just look at these amazing CSS tables and picture frames. Actually, most of the things that you see on the web these days are either styled in CSS or use CSS in combination with other things.

However, having some css knowledge has been really useful to me as a blogger / webmaster, and if you are in the same position, I think that you should, at least… take the time to learn the basics.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>