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)
