When I first wrote a Tiny Tip last week, I was apprehensive about how the geeky friends of techpp.com would take it. But Techniqueal‘s comment put my apprehension to rest. He summed up my intentions beautifully –

It is most effective to initially weigh the topics to blog about. blogging about too techie stuff almost all the time promotes “intimidation” especially to users who are not as “geek” as the blog author is. blogging about the basics once in a while creates a friendlier and lighter “atmosphere” to the blogosphere.

Here I present the next Tiny Tip on how to read the CSS file of a website.


First of all, What is CSS?


CSS stands for Cascading Stle Sheets. Style sheets are a very powerful tool for the Web site developer. They give you the chance to be completely consistent with the look and feel of your pages, while giving you much more control over the layout and design than straight HTML ever did.
Whatever “Structure” or “design” or “arrangement” you are seeing on Technically Personal is controlled through CSS. CSS covers fonts, colours, margins, lines, height, width, background images, advanced positions and many other things. You might be wondering what HTML does in that case!

What is the difference between CSS and HTML?

HTML is used to structure content. CSS is used for formatting structured content. Features of CSS include –

  • control layout of many documents from one single style sheet;
  • more precise control of layout;
  • apply different layout to different media-types (screen, print, etc.);
  • numerous advanced and sophisticated techniques.

Back to the topic now. Many a times, when you visit a website, some formatting or some structure or some design will surely catch your eye. As explained above, these things are mostly controlled externally by a CSS file.

How to Read the CSS File of a website?

There are some ways to “download” the CSS files of a website, but do you really need it? I wouldn’t for sure. What I really look for (at the maximum) is how a particular section is structured. So, for that you don’t need to download the file, viewing the file would be sufficient!
Here’s what you should do –

  1. Right click on the browser window where you have opened the website and click on “View Source” or “View Page Source“.
  2. A new window will open showing the HTML source of that webpage.
  3. Look for the instance <LINK rel=”stylesheet” type=”text/css” href=”/default.css”>
  4. You take the url from the page, like http://www.somewebsite.com/ and type default.css after that.
    Result: http://www.somwebesite.com/default.css.
  5. In any browser (except IE), this will result in the CSS file being shown in the browser window. In IE, it usually opens Notepad or your default text editor, and displays it in there.

That is it! You have the CSS file you want to refer!

I didn’t intend to make this post so long, but thought of introducing CSS to those who weren’t aware of it. In case you like to read more about CSS, hop in here.

For geeks, this is an old post of mine, might interest you in case you don’t know about it yet!
How to Resize the Images using CSS without losing the Aspect Ratio?

Tiny Tip Series –
[Tiny Tip] Skip User Accounts Screen in Windows Vista
[Tiny Tip] Reading the CSS File of a Website


Also Read:
 
Founder-Editor

Raju is the founder-editor of Technology Personalized. A proud geek and an Internet freak, who is also a social networking enthusiast. You can follow him on Facebook and on Twitter. Mail Raju PP. Follow rajupp