• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero Blog

NameHero Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories

How To Copy CSS Rules From A Website

Bhagwad Park

Published on: October 22, 2018

Categories: WordPress 1

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.

Get the Top Element for the Selection

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

Styles Not Applicable

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:

Manage Extension Options

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

Allow Access to file URLs

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:

New Tab for CSS Used

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:

Traversing the DOM

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

Copy CSS to Clipboard

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 Profile Picture
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!

Reader Interactions

Comments

  1. Guilherme Rizzo says

    March 11, 2020 at 2:41 am

    The CSS Used extension is great! Thank you so much!
    There’s also CSS Scan Pro, which is very easy to use, you just hover over the element and get the code (without opening the Dev Tools).

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

Speed up your site: solving the WordPress slowdown

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • Website Performance
  • Web Hosting
  • Resellers
  • Website Development
  • Website Security
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Knowledgebase
  • Announcements
  • Affiliates
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 NameHero, LLC. All rights reserved.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA