sábado, 3 de maio de 2008

CSS

A long time I have had the intention to start writing posts in English. I have English speakers accessing my blog in technical post - like Krisna, and to increase my accesses (and to increase my refunds in Google Adsense), I will rewrite the most accessed posts and the most starred posts into English. I will mark all these posts with an English label. So, let's start it!

For the first English post, I will talk a little bit about CSS files.

The Cascading Style Sheets (or CSS) are files to describe style (colors, margins, font, alignments, positions, etc) in HTML files. You can find more information in Google.

It's so easy to start learning it. It basically describes the style of the HTML page or just some components. Try it:


<style>
Table { Background-color: blue;}
.myStyle {Background-color: red;}
#myTable{ Background-color: green;}
</style>

<table><tr><td>A</td></tr></table>
<table class="myStyle"><tr><td>B</td></tr></table>
<table id="myTable"><tr><td>C</td></tr></table>



This code is building an HTML with 3 tables. All table tags will use background color blue as standard. But all tables classified as myStyle (for that reason we use the dot before the name) will have background red. This rule will overload the previous blue rule. Finally, the table called myTable(see "#" symbol) will have a green background.

We can use levels too:


<style>
body div a{
text-align: center;}
</style>



This piece of code describes that all A tags, inside a DIV tag, inside a BODY tag will be centralized. Let's see some examples using events:


<style>
A:hover{Background-color: green;}
A:visited{Background-color: red;}
</style>



With this, when you put the mouse under a hyperlink the link background color will be set to green and the visited links will be marked with red background.

These commands can be inserted directly in HTML files, using STYLE tag, but I prefer an external file (it's just a cosmetic organization). You can use it:


<style type="text/css">@import url("my.css");</style>

or the most popular:

<link href="my.css" type="text/css" rel="stylesheet"/>



Now, browse in the web and study the existent CSS files. Sample: in my blog you can find this CSS file. A good tool to start playing with CSS is the Web Developer plugin for Firefox because you can edit CSS commands on the fly, when you are accessing the web page. Firebug is another great Firefox plugin for CSS: you can see the current style for each object, indentify overloads and what file is responsible for each CSS rule. See the image below:





For advanced users, you can use conditional HTML command for different browsers or create new CSS commands, like hover event in TR tag and more!

Did you like this post? Please, vote!

Some Notes:

  • This site is like a CSS competition. With the same HTML, the users must create a CSS file to show a completly new layout;

  • CSS is very much used in floating DIVs. Take a look at this site;

  • I used the Google Code Prettify to show pieces of code;

  • If you have some questions, let me know: use the comment links;

  • I'm using Outbrain system to allow voting in my posts. Please, vote =)

  • Talking about Firefox... WTF is that? (see the page comments)