If you're a web developer, you probably appreciate a well-designed and attractive website. And you might see a color scheme or font on a specific website that you want to incorporate into
your blog or web app. But you'll need a browser extension to see the website's color scheme and other CSS features. The CSS overview feature in Chrome Dev Tools lets you see these CSS properties. In this post, we'll go over how to use the CSS overview feature in Chrome Developer Tools. We'll also learn how to use CSS overview to get the colors and other CSS properties you want to use in creating a web page. Let's get started.
💃 The CSS overview panel is one of the newest features of Chrome Developer Tools. It serves as a preview tool that allows you to see the different CSS properties used in creating a web page. It displays CSS properties such as: Chrome Developer Tools is also known as Chrome Dev Tools. Chrome Dev Tools are a suite of web developer tools that come pre-installed in the Chrome browser. Check out this article to know more about Chrome developer tools. Here are some of the advantages
of using Chrome Dev Tools: It enables you to create better websites in a shorter amount of time. It enables you to make changes to your code, test it, and inspect it. Chrome Dev Tools give developers more control over their web applications and browsers. It enables you to assess the general performance of a website. You can access Chrome Developer tools in three different ways:
Once you click on the shortcut keys, the developer tools open. When you press
The steps below will walk you through how to use the CSS overview feature to get the CSS properties used on a web page. We've already covered the various methods for accessing Chrome developer tools. You should be familiar with them now. As a quick reminder, you can open Chrome dev tools by pressing Click on the three vertical dots located on the top-right of Chrome dev tools. Select "More Tools" from the drop-down menu. You'll discover a variety of options when you click "More Tools." From the various options, select the CSS overview feature. Step 3 - Click on Capture OverviewWhen you click on CSS Overview, you'll see a list of its functions. Functions such as:
Click on the Capture Overview button. A menu with five sections appears after clicking the Capture Overview button. The five sections are:
Let's go over each of the five sections one by one to see how they work. CSS Overview SummaryThe Overview summary contains a list of the CSS elements used in building the web page. The Overview summary displays a summary of the CSS on your website, such as:
The example above shows the various CSS elements used to build the web page. ColorsThe color panel displays all the colors used in creating the web page. It has a palette of colors for the background, text, fill, and borders. It also highlights low-contrast texts issues on the web page. An illustration of the color panel.The image above shows you the different colors used in creating the web page. The beauty of the Color panel is that each color is clickable. If you click on a particular color in the Color panel, a list of elements that use that color appears. When you click on each element, it takes you to the element panel for inspection. I clicked
on color You can also hover over an element in the lists of elements displayed. When you move your cursor over the element, it highlights the element on the web page. When I
hover my mouse over the Just a quick note: hovering refers to moving your cursor over anything. It means to place a cursor over text, an image, or other objects on the screen without clicking on them. Font InfoThe font info panel displays the typefaces used in the development of the website. It shows you the The above image shows you the different typefaces used in creating the web page. Unused DeclarationsYou can find CSS styles that do not affect the web page by using unused declarations. An illustration of the unused declaration panel.The image above shows the number of unused declarations on the web page. The vertical alignment applied to the element that isn't inline or a table cell will not affect the page. You can also click on the occurrences to see a list of elements affected, like the font info and color panel. The media query panel displays a list of all the media queries used in creating the web page. You will be able to examine the various widths and screen resolutions used in creating the web page. An illustration of the media query panel.The above example displays the number of media queries used in creating the web page. It lists the screen resolutions used in order of occurrence, from highest to lowest. If you click on the occurrences, you will see a list of the affected elements. ConclusionWhen it comes to evaluating CSS attributes on a web page, the CSS overview tool comes in handy. It allows front-end developers and designers to inspect the CSS properties on a web page. Thank you for reading 💙. If you would like to chat or have any questions, please feel free to contact me anytime on Twitter: @cessss_ and linkedIn: Success. Also, follow my blog to read some of my other stuff @cesscode. Happy coding! 💙 Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started How do I open a CSS file in Chrome?New in Chrome: CSS Overview. Open up DevTools ( Command + Option + I on Mac; Control + Shift + I on Windows). Head over to DevTool Settings ( ? or Function + F1 on Mac; ? or F1 on Windows). Click open the Experiments section.. Enable the CSS Overview option.. How do I view CSS in browser?First, enable Inspections by entering about:flags in the URL bar, then tick Show "View Source" and "Inspect Element" in the context menu. Then, right click and press Inspect Element to view the CSS selectors for that element.
How do I show CSS in Chrome inspect?Press Ctrl + Shift + i for Windows/Linux (or command + option + i for Mac). Right-click on an element on your website page and select Inspect. Now that you are familiar with accessing Google Chrome Developer Tools, you will be able to inspect CSS elements to modify them live.
How do I access CSS files?How do I access my site's CSS file?. Go to Settings >Design >Themes & Styles.. Next, click on the "Open Template Editor" button located under "Edit Template". Look to the top right of the page and click on the "Go to Folder" menu.. Select your theme folder's CSS folder.. |