Get groovy with CSS!!!

Everyone loves to see beautiful sites on web. Everyone loves to see simple yet creative pages having appealing look-n-feel. How do we get our sites look groovy? with CSS.

Cascading Style Sheets (CSS), add style to your HTML. It defines how the page should look. Only style. Styles are generally stored in the Stylesheets.

All HTML files are stored in .htm/.html file formats, simillarly styles written are stored in the stylesheet formats i.e .css format

We can either embed stylesheets inside the code or can have an external stylesheet. External stylesheets are encouraged as they reduce a lot of rework and proves handy when dealing with frequent change in the code/design.

E.g <a href=”Some Link here” style=”text-decoration:none”> See the style tag</a> 

In the above piece of code, we are adding style for an anchor tag ‘text-decoration’ which will result in the anchor tag having no decoration like underline, bold etc etc.

Trap: The above style is only applicable for the specific tag for which we have defined.

There are other ways on how we can use styles in our HTML code.

<head>
 <style type=”text/css”>
a {   text-decoration: none;  }
</style>
</head>

Funda: This particular piece applies the style to all the anchor tags in the page. Moving forward if one wants to change the style of anchor tag, we need to change only at one place i.e is in the style and it will be reflected throughout the page.

Even simpler, we can seperate out the style from the html code and put in some different file i.e Stylesheet. Out html code will contain some anchor tags.

We need to create a file –> style.css

Add the path of the stylesheet to our html code –> <head><link type=”stylesheet” href=”style.css” mce_href=”style.css”></head>

Thats all we have to do to make our styles appear in our html page. Simple? 

okay, so now we are ready to groove with CSS.
Next tutorial details on how to play with colors and designs.
Keep hacking!!!!

Sridhar

Advertisements

About srinix

I am Sridhar, a matured nut, on this planet with water, air and love ;)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: