menu on the top-right and then select Show media queries: Or, when DevTools has focus, press Ctrl+Shift+M (Windows, Linux) or Command+Shift+M (macOS). To open DevTools, you can right-click in a webpage and then select Inspect.Ĭlick the Toggle device emulation ( ) button. Use the following steps to debug or test the Media Queries you defined in your CSS. Using separate layouts allows for a one-column layout for mobile devices and multi-column layouts when there's more screen real estate available. The most common use case is to give your page a different CSS layout depending on the dimensions of the viewport. Media Queries are a way to make your website react to changes in the configuration settings for each user. The Box Model defaults to pixels, but it also accepts other values, such as 25%, or 10vw. The - means that the element doesn't have a value for margin-left. The element's padding is highlighted in the viewport.ĭepending on the size of your DevTools window, you may need to scroll to the bottom of the Styles panel to display the Box Model.ĭouble-click the left margin in the Box Model, which currently has a value of. In the Box Model diagram in the Styles panel, hover on padding. Right-click the Change My Margin! text, and then select Inspect. Use the Box Model interactive diagram in the Styles panel to change the width, height, padding, margin, or border length of an element. The next screenshot shows the result of toggling the :hover pseudostate on an element. The background color changes like it did in the first step, even though you aren't actually hovering over the element. Right-click the Hover Over Me! text, and then select Inspect. DevTools supports :active, :focus, :hover, and :visited. Use the Styles panel to permanently apply a CSS pseudostate to an element. The color_me class is applied to the element using the. If the Add A Class To Me! element has any other classes applied to it, you can also toggle each class from here. A checkbox appears below the Add new class text box, where you can toggle the class on and off. Type color_me in the Add new class text box and then press Enter. DevTools shows a text box where you can add CSS classes to the page element that you're inspecting. Right-click the Add A Class To Me! text, and then select Inspect.Ĭlick. To display how an element looks when a CSS class is applied to or removed from an element, see the Styles panel. The background-color:honeydew declaration is applied to the element using the element.style section of the Styles panel: After you pick a color, an inline style declaration that's applied to the element is displayed In the DOM Tree, Type honeydew or select it from the drop-down list of colors and then press Enter. Type background-color or select it from the drop-down list and then press Enter. Right-click the Add A Background Color To Me! text, and then select Inspect.Ĭlick element.style near the top of the Styles panel. Open the CSS Examples demo page in a new window or tab. Use the Styles panel when you want to change or add CSS declarations to an element.įirst, we recommend doing the preceding View the CSS for an element tutorial. On the page view, paste the padding value in the Value of padding: text box. In the aloha class, find the value for the padding style and copy it. This rule is displayed, because it's being applied to the Inspect Me! element. In the Inspect Me! element, find the aloha class rule.

The Inspect Me! element is highlighted in the Styles panel. In DevTools, on the Elements tool, select the Styles panel. On the page view, enter the data-message value that you copied in the Value of data-message: text box.

In the Inspect Me! element, find the value of the data-message attribute and copy it. In the DOM Tree panel under the Elements tool, the Inspect Me! element is highlighted. Right-click the Inspect Me! text, and then select Inspect. To open the examples, right-click the link, or press and hold Ctrl (for Windows, Linux) or Command (for macOS) and then click the link. Follow the interactive tutorial sections in this article to learn the basics of using DevTools to view and change the CSS for a page.

Clean text css window