How to See and Extract CSS of a Website [Practical Guide]

1. What is CSS?

To properly display any website, browsers receive multiple documents from the web server and interpret them. Each document contains code snippets that impact specific aspects of the webpage.

Since this code runs on the user’s browser, it is called client-side (or front-end) code. It includes what the user sees and interacts with, such as texts, images, lists, headers, links, menus, etc.

Basically, there are three key client-side techniques/languages:

• HTML: defines the structure of the webpage, the hierarchy of its elements, and their content.
• JavaScript: defines how HTML elements change in response to specific interactions or events.
• CSS: defines how HTML elements are visually positioned and displayed.

Accordingly, CSS (Cascading Style Sheets) is a client-side technique that represents the layout and visual appearance of the webpage. It specifies how elements are positioned next to each other, and what their text, background colors, and fonts look like when visited by users.

That said, without styles, browsers will display the raw page elements next to each other without any style or layout.

Typically, CSS code consists of multiple rules, each rule contains two elements:

• Selector: specifies the HTML element/s to be affected by the style.
• Properties: the style to be applied to the selected element/s.

2. Example of CSS Code

We present an example of a CSS rule and how it affects a specific HTML element as shown in the snapshot below.

In this example, we change the background color and font weight of any HTML element that has a class attribute equals selected. Providing this element is a child of a ul element, which is in turn a child of another HTML element that has id attribute equals categories, with this last element being a child of a parent div element.

All other elements that don’t follow this hierarchy won’t be targeted by this rule and won’t have the style implemented.

For more details about how selectors work, we recommend referring to this tutorial by W3Schools.

3. Three Ways for Using CSS Code

To see and understand the webpage style, we need first to know the different methods of how websites can implement CSS rules.

CSS rules can be inserted into web pages in three different ways:

3.1. External CSS

With external style, rules are written in a separate document (external style sheet file) with a .css extension. Then, a link to this document is inserted inside the head section of the HTML webpage.

This .css file is normally loaded as part of the page files and interpreted within the browser when a user visits the website.

CSS rules written in an external file affect all webpages that include a link to this file. Therefore, external style is usually used to change the visual appearance of the whole website.

3.2. Internal CSS

With internal style, rules are directly inserted into the head (or sometimes body) section of the webpage, inside the <style> tag.

In this case, rules affect only HTML elements inside the host webpage. For this reason, it is used to define the visual appearance of a specific webpage that has a unique style.

3.3. Inline CSS

In inline styles, properties are directly injected into an individual HTML element within its style attribute. Here, the style impacts only this element. Thus, it is used to apply a unique style to a single element.

Here, there is no need for a selector, as the properties are already added to a specific HTML element.

Finally, it’s important to mention that the three available styles can be implemented simultaneously on any webpage. But they cascade against each other based on a descending priority: Inline CSS (highest priority) -> Internal CSS -> External CSS.

4.2. View CSS Style using Inspect Element (Developer Tools)

Most browsers have a built-in tool for developers and anyone interested to check the website’s performance and functionality. Typically, we can use this tool to view the CSS code of the website.

How to View CSS Code Using Developer Tool

1. Open the webpage.
2. Right-click anywhere inside the webpage.
3. Choose Inspect, Inspect Element, or other similar options. If not found, click on another area.
4. The Developer Tool will open. If this doesn’t work, search for how to open the developer tool in your browser. The tool has multiple tabs, make sure the first tab Elements (or Inspector) is currently active.
5. This tab has two panels, look inside the left one where the HTML code of the page is listed.
6. Try to locate <head> and <body> sections. Click on the small arrow next to each one to fold/unfold it for a cleaner space.
7. View External CSS files: unfold <head> section and look inside it for <link rel="stylesheet" type="text/css" href="..."> elements (or press CTRL+F to open the search box inside the developer tool, then type stylesheet). Copy the link inside href or open it to view the external CSS stylesheet in a new tab.
   
   
   ——————————————————————————————
8. View Internal CSS rules: unfold <head> (and <body>) sections and look inside them for <style>...</style> elements (or press CTRL+F to open the search box inside the developer tool, then type <style>). Unfold this tag and you will see the Internal CSS rules.
   
   
   ——————————————————————————————
9. View Inline CSS code: unfold <body> section and look inside it for any HTML element that has style attribute (or press CTRL+F to open the search box inside the developer tool, then type style and find the element). The value of this attribute represents the inline CSS for the element.
   
   
   ——————————————————————————————

When opening the external CSS stylesheet or browsing the internal one, and if it was minified or unreadable, copy the CSS code to this CSS Beautifier so it can be easily viewed.

4.3. Find External CSS Files in Inspect Element

Using the developer tool, we can also find the external stylesheets that the browser requests and downloads to render the webpage.

How to Find External CSS Files in Inspect Element

1. Open the webpage.
2. Right-click anywhere inside the webpage.
3. Choose Inspect, Inspect Element, or other similar options. If not found, click on another area.
4. The Developer Tool will open. If this doesn’t work, search for how to open the developer tool in your browser.
5. Select the Network tab.
6. Choose CSS from the filters list in the filter bar (as shown in the screenshot).
7. Reload the webpage (hit CTRL+F5) to force loading all external resources.
8. This will load a list of requests to the external CSS files. Double-click on any link to open it in a new tab and view the CSS rules inside.
9. If the CSS content was unreadable, copy it to a CSS Beautifier so it can be easily viewed.

4.4. Get All CSS Style For an Element

As there are multiple ways to apply style on a webpage, every single HTML element can have CSS rules implemented inline, internally, and externally at the same time.

Therefore, inspecting (manually) all element’s CSS rules is an extremely difficult task, particularly when there are rules that are included in an external stylesheet, which is the default situation in most websites.

How to Get All CSS For an HTML Element

1. Open the webpage.
2. Right-click on the element you need to get its CSS.
3. Choose Inspect, Inspect Element, or other similar options.
4. The Developer Tool will open. If this doesn’t work, search for how to open the developer tool in your browser. The tool has multiple tabs, make sure the first tab Elements (or Inspector) is currently active.
5. The element should be selected by default inside the left panel where the HTML code is listed. If not, try to locate and select it inside this panel.
6. All element’s CSS styles will be shown in the right panel, inside the Styles tab.
7. To view CSS rules for another HTML element, try to locate and select it inside the left-hand panel.

How to Edit the Element’s CSS Style

The developer tool not only allows us to see the element’s underlying style, but also to modify it, remove some rules, and add new ones. This is remarkably useful for website designers and developers to test the instant effect of manipulating CSS rules on the displayed web page.

Modifying the element’s CSS style usually requires some technical knowledge. However, we explain in this snapshot some parts and functionalities of the element’s CSS inspection tool.

Of course, modifications take place temporarily on the displayed webpage inside the browser. When the webpage is refreshed, all styles are restored to their original version as received from the web server.

There is still another user-friendly way to view the CSS style of an element using a code viewer tool, you can find it in the following section!