How to download CSS

Yes it indeed is possible, but for this to work you need to give every div, image, frame, menu, URL's and more the same ID or class as stated in the CSS.

Also, indeed you need to add the same images, with the same names inside the correct folder.
I personally think it is easier to class and ID your own stuff, use your own images inside your own folders and use your OWN personal created CSS file.

Much easier and faster.

This was an important site a decade or so ago as an exposition of the benefits of separating structure from presentation. It was aimed, however, at the graphic designer and is a poor example of coding; not fit as a learning tool.

Its worthy lesson is that structured content comes first and decoration follows. Other than that, there is little for the developer to glean from the site.

cheers,

gary

Thank you gary for your inputs and yeah , that site is all about CSS , but still stands relevant as a good CSS 2
example till date . i think the link which i submitted here has a bit of CSS - 3 too in it though . i'am not sure .

And HellDog , i have never tried downloading a page ever , with images .. so step by step how do i do it ? and yeah , i don't mind using my own images and changing the class names , but just for simplicity sake , how do i download the images to ?

Thank you once again for ur advice .

Regards .

Gautam

If you want to download the images I would right click an image and save it as...
Use the same name as being used in your css files and download it to the same folder as stated in your css.

A lot of the images inside this css file is not being used anymore, yet it is still inside the same CSS file.
For example:

aside:before {
  background: url('../images/starburst.png') center top no-repeat;
  background: url('data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOTIyLjU3NHB4IiBoZWlnaHQ9IjkyMS4wNzJweCIgdmlld0JveD0iMCAwIDkyMi41NzQgOTIxLjA3MiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTIyLjU3NCA5MjEuMDcyIg0KCSB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iNzQ1Ljk0NSw4MjkuMDQyIDUxNS4wNzIsNTc3LjIyMiA1NzIuNjM1LDkxMy45NzIgNDY0LjE0Niw1OTAuMDIgMzc5Ljc2Myw5MjEuMDcyIDQxMi40MjEsNTgwLjk5OSANCgkyMDAuNjgyLDg0OS4xMDggMzY4LjgzNSw1NTEuNzIxIDY2LjM1Miw3MTAuNTI2IDM0MC45MjgsNTA3LjIzOSAwLDUyOS4yOTEgMzMzLjUyLDQ1NS4yNTYgMTMuMTAxLDMzNi43MzEgMzQ3Ljg5Niw0MDQuNzU2IA0KCTEwMy4zOTMsMTY2LjE1MyAzODEuNTc2LDM2NC40NzEgMjU1LjI1Nyw0Ny4wNDUgNDI4LjcyNCwzNDEuMzY2IDQ0Mi40MzYsMCA0ODEuMTk3LDMzOS40MzUgNjMyLjU2NiwzMy4xNTcgNTI5LjkyLDM1OS4wMTIgDQoJNzkyLjc3NiwxNDAuNzgyIDU2Ni40NjgsMzk2LjcxNCA4OTUuMzU2LDMwNC4yNjQgNTg0LjUxNCw0NDYuMDIxIDkyMi41NzQsNDk1LjMzNiA1ODAuOTUxLDQ5OC40MDkgODY5LjcyNCw2ODAuOTY0IA0KCTU1Ni4zODgsNTQ0LjgxNSAiLz4NCjwvc3ZnPg0K') center top no-repeat;
  content: '';
  height: 921px;
  left: 50%;
  margin-left: -461.5px;
  position: fixed;
  top: 60px;
  width: 923px;

The first URL is not being active anymore, if you want you can even delete this whole URL code.
The second URL code is an SVG. If you want to use this you should create your own SVG and use that URL instead of the SVG stated on the website (else you are downloading files from other website).
And example of this SVG (in this case the big white star making rounds behind that blue-ish robot) is this link: Click here.

At first you don't see anything, but if you have Google Chrome or Firefox Mozilla you can check it's elements and will find this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="922.574px" height="921.072px" viewBox="0 0 922.574 921.072" enable-background="new 0 0 922.574 921.072" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace">
<polygon fill="#FFFFFF" points="745.945,829.042 515.072,577.222 572.635,913.972 464.146,590.02 379.763,921.072 412.421,580.999   200.682,849.108 368.835,551.721 66.352,710.526 340.928,507.239 0,529.291 333.52,455.256 13.101,336.731 347.896,404.756   103.393,166.153 381.576,364.471 255.257,47.045 428.724,341.366 442.436,0 481.197,339.435 632.566,33.157 529.92,359.012   792.776,140.782 566.468,396.714 895.356,304.264 584.514,446.021 922.574,495.336 580.951,498.409 869.724,680.964   556.388,544.815 "/>
</svg>

As stated before, I think trying to re-create a website by using their CSS is a lot more work then creating your own.
You have to do a lot of research before realy going to place each puzzle on its spot.
By the way, the svg code mentioned above will create a star shape.

Hope this helps a bit.
Cheers, Henk.

Well 1st of all thank you for your extensive advice I am going to try that for sure . your simply great

kind regards .

Gautam.