CSS Inspect Element

Most web designers will bookmark websites they come across while surfing the web if they like the look of a particular element within the site.  I have a habit of doing this myself, and when asked to design a website for someone I always recommend they surf the web; looking for ideas for their website.  It is very important not to create a carbon copy of a website, you may like a particular layout or colours used within, be careful not to mirror as the search algorithm has vaults that can detect the duplication resulting in your website being penalised.

If you have read through the HTML tutorials you will be aware how to view the html code via the view source code.  This will give you the code that structure the page and the content within, but all the attributes such as font style, face, colour, area width, height and any background colour or image is all controlled by the cascading style sheets.  To access this go to the specific page you are interested in and right click your mouse, from the options you are presented with select the inspect element option.

A new window should have opened listing all the developer tools for the browser you are using, the elements tab will display all the html code to the left, if you hover over the html you are interested in it will highlight the associated CSS in the right columns, this should help you in understand the attributes of the html.

HTML View Source Code Tutorial

comments powered by Disqus