How To Copy CSS Rules From A Website

Often while browsing, we see a site or a design that make us go “Wow, I want that on MY site”! In my earlier tutorial on how to change the font color in WordPress, we used Chrome “Inspect Element” tool to preview various CSS changes. And for simple modifications like font color, the inspection tool is more than sufficient.

However, these days CSS rules are highly complex. It’s not easy to isolate which CSS is being applied to a certain element and its children. CSS can also be highly conditional, when we apply specific rules only under certain situations like screen size. Couple that with other things like resolving conflicts between multiple CSS rules for children etc, and it can be impossible to manually extract the CSS for a given element and its children.

Manual experimentation can also be time-consuming, especially when it comes to CSS elements for structure and layout like flex grids, floats, etc. These are not always obvious and there are hidden interactions that can be very difficult to nail down. You can often go down a rabbit hole, just trying to figure out what combination of rules causes a certain effect!

Luckily, we have a Chrome extension that can help us with just that.

Complex CSS Rules Example

Take a look at the design element on this site. Each post has two images before the content side by side. One for an advertisement, and one for the featured post.

And when I view these elements using the “Inspect Element” functionality in Chrome, this is what I see:

Some rules are canceled, some are grayed. And this doesn’t give you the CSS for the child elements either. It’s possible of course, to go manually down the list and write down all the applicable rules. But that can be very tedious. Especially if some CSS selectors are long, and filled with elements that are not applicable to the current selection.

Step 1: Install the CSS Used Extension

I try and have as few extensions on Chrome as possible. But sometimes you have no choice, but to install one. Plus, you can always disable it afterwards. Download and install the “CSS Used” extension by visiting the page and clicking “Add to Chrome”.

It’s a small file, so you won’t have to wait long.

Step 2: Enable File URL Permissions

Before you use the extension, you need to set a few permissions first. After installation, a new icon for it will appear next to your address bar. Right-click it and select “Manage extensions” as shown below:

Now scroll down until you find the option labeled “Allow access to file URLs” as shown here:

Enable this and close the page.

Step 3: Reload HTML and Open Developer Tools

Once you’ve made all these changes, reload the original page whose CSS you wanted to copy, select the HTML element, right-click, and select “Inspect Element” as before. In the new page, click the arrow buttons on the right- hand side to show a new tab for “CSS Used” like this:

When you click this, the extension will start traversing the DOM tree. It can take a while depending on the complexity of the CSS. Modern web pages have thousands of CSS rules for each and every page, and this extension is examining them all:

When it’s done, it will generate the CSS in the box and allow you to copy the rules in one go:

Paste the text into your text editor and you’re done! You may find that there are lots of redundant CSS rules that you don’t need, and you should delete these. Then play around with them until you get the exact look that you want!

Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!