How to Find CSS in a Web Page

Save

Cascading Style Sheets is a language that determines the look, feel and layout of a website that uses HTML, XHTML, or XML. Although those wishing to learn CSS can use tutorials, they should supplement this knowledge by looking at the CSS of web pages they admire for real world examples. Most often, designers and coders place the CSS in an external .css file and link to it from the HTML page. Knowledge of CSS identifiers will help to find the css of a Web page.

  • Find a Web page that has a design element you wish to emulate. Right-click on the background of the site. Avoid clicking on any links or pictures as this will give you a different menu.

  • Choose "View Source" if you are using Internet Explorer and "View Page Source" if you are using Firefox. A new window will pop up with all the code for that page.

  • Search the document for <style type="text/css">. This is the code that tells the browser that CSS language will follow. All the information between that tag and </style> is the internal CSS for the Web page, which means it only applies to that page.

  • Look between the <head> and </head> tags for a link to an external style sheet. The code should look something like this: <link rel="stylesheet" type="text/css" href=style.css" />. The "type" may vary but the "link rel='stylesheet'" will stay the same and is your key to locating the external CSS file.

  • Hightlight, right-click and copy the name of the CSS file, which in the above case would be "style.css." Paste this bit after the root of the website. For example, if the page you are surfing is located at http://mysite.com/about.html, you would paste the code after "http://mysite.com" to make "http://mysite.com/style.css." If the name is hyper-linked, simply click to access the CSS file.

Tips & Warnings

  • Some websites do not store the CSS file in the root directory. In this case, navigate to the home page of the website and try pasting the name of the CSS file after that link.
  • Firefox offers an extension called "Firebug," which allows you isolate specific areas and find the CSS that controls that area.
Promoted By Zergnet

Comments

Resources

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!