If you are looking to build your own website, you really need to have at least some knowledge of CSS code in order to layout your site. Although it can seem complicated at first, it can be easy to get the hang of eventually. Of course, that’s not to say there aren’t websites already out there that are using styles you like the look of and want to emulate.
When you see a website that particularly catches your eye, you needn’t spend hours writing the code from scratch – in fact, you can often download the CSS they used and replicate it yourself. Once you have found a website that you like the look of, follow these simple steps in order to access the necessary code.
Viewing Source Code
Once you have pointed your browser to that particularly web page, you will need to access its source code in order to download it. There are a number of ways to do this – for example, if you are using Firefox as a browser you can simply hold down ‘ctrl’ and ‘U’ and the source code will appear. Similarly, the most recent versions of Internet Explorer allow you to right click on the page and ‘view source’. If neither of these options are working, you can usually look at the source code by selecting ‘View’ from the top menu.
Although very occasionally the styles of webpages are kept within the pages themselves, most of the time they are added to the core HTML of the page with ‘includes’. These are designated bits of code that tell the webpage to use an external style for layout. A typical ‘include’ may look like this:
You can find the ‘includes’ in the CSS source code by pressing ‘ctrl’ and ‘F’ to execute a find, then typing CSS.
Once you have located the ‘includes’, you can add them onto the end of your chosen website’s URL to view the style sheet. For example, if you were looking to replicate the style from www.thispersonswebsite.com and the above code was found as the ‘include’, you would type www.thispersonswebsite.com/css/styles.css into your navigation bar. Once you select to search on this domain, you should see the style sheet of the website will all the various bits of code necessary for replicating the look.
You can now simply select ‘File’ and ‘Save As’ from the drop down menu to save the CSS style code to your desktop or another area of your computer. Alternatively, you can copy and paste the entire code if you are wary of leaving any behind when you save it.
It is worth remembering that a web page may use a number of different styles and layouts. If this is the case and there are different .css files for each web page, you will need to download and save each one. Once you have down this, you will be free to play around with the look and feel of your own website using this code.