Inspect, Edit and Copy CSS Element Styles in Chrome Browser

The Internet is big, really big. A current (2020) estimate puts the total number of active websites at around two billion. If you want your website, blog or online shop to stand out from the crowd, you'll have to walk the extra mile. People are visual animals - websites with clear typography, beautiful color schemes and palettes and easy navigation will win easily over bland or confusing run-of-the-mill designs.

These days website design is based on Cascading Style Sheets or CSS. Thousands of blog posts and millions of printed pages have been written about CSS and many concepts and practices can be intimidating, especially for first time website owners. A gentle and more hands-on approach to learning styling with CSS is by looking at existing websites and then adapt their stylesheets for your own purposes. We do this by loading the website into a browser and then examine the styling of selected elements. This process is called inspecting CSS styles and in this tutorial we will show you how to use Chrome to inspect elements. Besides being a great learning tool, CSS inspection can also be used to edit and modify styles directly from within the browser. This makes it easy to find, debug and fix CSS errors and to try out style variations, for example by changing fonts, text sizes, backgrounds or colors.

Throughout this tutorial we will be using Google's Chrome which is by far the most popular browser by market share. However, all recent browsers (Safari, Firefox, Edge etc.) can similarly be used to inspect, edit and modify CSS styles. The screenshots show Chrome Version 91 on macOS Catalina.

Getting started - Inspect CSS in Chrome

We begin by loading a website into Chrome. For this example, we'll stick with our own page, softmatic.com, but you can of course use any other site here:

The quickest way to actually inspect an element is by right-clicking while the mouse pointer is over the element; here we right-click while hovering over the headline "Mac Barcode Software". The context menu contains a command, "Inspect":

Selecting the Inspect command opens Chrome's "Developer Tools" in the right half of the browser window. The top panel shows the HTML elements of the page, with the h1 headline above highlighted. The bottom panel displays the styles that are currently applied to the headline, listing the font, font attributes, color and other styles:

Next to the styles Chrome shows the file and line number where the styles are declared; clicking the filename opens the respective stylesheet in a panel (You can also see the individual files when clicking the Sources tab in the top most toolbar.)

Changing headline text color style

Let's change the text color of the headline: Click the little gray square right to the tag color. Chrome will now display a standard color picker, preset to the current color of the h1 headline, #555555:

Select another color, for example blue, in the picker and hit <Enter> to dismiss the picker. The headline text is now displayed in blue, likewise the color tag and preview square in the style declaration are updated with the new color value:

It's important to note that this style change is only applied to the loaded page within the browser; it is not stored or written to the stylesheet. As soon as you reload the page, the original style will be used again and all changes will be lost.

Try changing other values, like the font, the border or the line spacing. You can also add style rules by clicking the "+" button in the toolbar directly above the declarations. Besides by reloading, style changes in the developer tools can also be undone using the common shortcuts ⌘ + Z (Mac) and Ctrl + Z (PC).

Activating and deactivating cascading style definitions

You will notice that some styles in the lower panel are struck out with a horizontal line through the text. For example, the font size for h1 is defined in bootstrap.min.css as 36px, but is shown as font-size: 36px;. Our site imports two stylesheets, bootstrap.min.css and starter-template.css and both define a font size for h1. However, the starter-template.css is loaded after bootstrap.min.css so the style definition in the second file (font-size: 20pt;) takes preference over the style as defined in the first file. This is called cascading and this is where CSS got it's name from (for more on cascading, see this). By striking out the declaration from bootstrap.min.css, Chrome tells us that this style has been overridden and is currently not applied to the element.

Chrome allows us to disable style definitions by simply deselecting them. Here we deselect the h1 font-size definition from starter-template.css (note that it is now struck-out) which automatically activates the earlier definition in bootstrap.min.css, resulting in larger text for the headline:

Copy and export CSS style definitions

For use in your own stylesheets, CSS style declarations can be exported by copying them to the clipboard. Right-click in the panel with the desired styles brings up the context menu. Select "Copy declarations":

The declarations from our example site; the deactivated style for the font size has been commented out by Chrome:

font-family: "Myriad Pro","Trebuchet MS";
/* font-size: 20pt; */
font-weight: normal;
padding-top: 12px;
padding-bottom: 12px;
color: #065fd4;
border-bottom: 1px solid #dddddd;

Selecting "Copy rule" rather than "Copy declaration" yields the complete stylesheet rule for h1 headlines, like so:

h1{
  font-family: "Myriad Pro","Trebuchet MS";
  /* font-size: 20pt; */
  font-weight: normal;
  padding-top: 12px;
  padding-bottom: 12px;
  color: #065fd4;
  border-bottom: 1px solid #dddddd;
}

While this is obviously useful, you will remember that we reverted the font size of h1 to 36px by disabling the h1 declaration further up. But this is not reflected in the declarations that Chrome copied to the clipboard. Chrome will also not copy pseudo classes and styles for states like :hover or :active. We'll see further down how to copy and export the final or "computed" styles of an element by using a dedicated Chrome extension to inspect CSS. In the meantime, clicking on the Computed-tab will indeed show the correct size of 36px for h1 but Chrome won't let us export those styles.

Inspecting CSS on iPhones, iPads and Android devices

Chrome has another nifty feature built-in that helps with testing CSS styles on mobile devices. Clicking the "Phone" button in the top toolbar opens the "Device Toolbar" directly above the loaded website. In device mode, Chrome will now simulate the form factors of smartphones and tablets:

The list of pre defined devices and form factors contains a variety of iOS and Android smartphones and several tablets. Here we selected an iPhone X to test the CSS of our site.

This can be very useful to verify the responsiveness of a website, that is if the site adapts properly to the smaller screens of mobile devices. While this feature is a great time saver, keep in mind that Chrome can only approximate the processing speed or memory constraints of a smartphone, see here for background info. Simulating hardware will only get you so far and final testing should always be done on a real mobile device.

As a sidenote, some years ago Google began penalizing websites that do not respond properly when used on a mobile. You can verify that your site conforms to today's mobile first paradigm with Google's Mobile Friendly Test.

Inspecting CSS element styles with a Chrome extension