Inspect, Edit and Copy CSS Element Styles in Chrome BrowserThe 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 ChromeWe 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 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 styleLet's change the text color of the headline: Click the little gray square right to the tag 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 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 definitionsYou 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 Chrome allows us to disable style definitions by simply deselecting them. Here we deselect the Copy and export CSS style definitionsFor 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:
Selecting "Copy rule" rather than "Copy declaration" yields the complete stylesheet rule for
While this is obviously useful, you will remember that we reverted the font size of Inspecting CSS on iPhones, iPads and Android devicesChrome 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 extensionIn this section we expand on our tutorial and see how to inspect CSS element styles with a dedicated Chrome extension. Stay tuned. |