The ability to change styles on the fly like this allows you to try out style modifications without touching your project's source code - and can come in extremely handy. Try typing red, and watch the element change in the main window: Red color In the filter field, type "color," and look for the color rule, which contains a small white square and the value rgb(255, 255, 255) : On Chrome Color - Chrome On Firefox Color - FirefoxĬlicking on the value for color allows you to modify it. Let's say you want to change the white color of the selected text. In the Styles inspector ("Styles" in Chrome, "Rules" in Firefox), you can filter the various styles to find exactly what you want to modify. I strongly advise making the Styles section taller while working with it, and, on Firefox, deactivating the three panel view by clicking this button in the Styles inspector header: Deactivate three-panel view In the lower half of the Inspector, you should see the Styles section: On Chrome Styles inspector - Chrome On Firefox Styles inspector - Firefox If you have changed your selection since the previous section, reselect the "Discover our paths catalog" text element. You can also use browser inspectors to view and modify the code responsible for a page's styles, which define the appearance of its elements. Now find out what the style inspector looks like on your web browser: Now that you know how to inspect the structural elements of a web page, let's use the text element you just selected to look at another important aspect of the Elements inspector: styles. You can also activate inspection on selection, which allows you to hover and click on page elements to inspect them: Inspect on selection Try it out on the text that says "Discover our paths catalog:" Right-click + Inspect The corresponding code You can also find the line responsible for an element by right-clicking that element, then clicking Inspect. If you hover over the various children here, you'll see elements highlight on the page, letting you know which line of code is responsible for which visual element: Highlighted logo Highlighted menu In the screenshot below, I opened them all until I found one with the multiple child elements that you see in the header: Dive into the structure The structure of this page is such that there are multiple single-child elements. You'll notice that the div element contains a single child: a header element. Let's dive further into the structure of the header by clicking on the arrow next to the line: Open the header This highlighting tells you that the line you're hovering over corresponds to the page header. The page header will highlight: Highlighted header A parent element can have multiple children: the page header element on this page contains child elements: the OpenClassrooms logo, some links, a Search button, and the buttons related to signing in.Īs you hover over various lines of code, the corresponding elements are highlighted on the displayed page. The code you see in the inspector is HTML code - the language used to define a web page's structure.Ī web page consists of elements - text, images, buttons. You'll find the option in the "Customize and control DevTools" menu: Customize DevTools Re-anchored DevTools To make things easier to read, I prefer to anchor the DevTools on my screen's right-hand side. The shortcuts are the same for both Chrome and Firefox, and all of the procedures in this section are identical, just with some subtle differences between the icons (but you'll find everything in the same places on both browsers). The inspector will open at the bottom of your screen. To inspect this page's structure, you're going to need the Elements inspector. Let's start by opening in Chrome: OpenClassrooms - Paths In this chapter, you'll be using the Chrome and Firefox developer tools - affectionately known as the DevTools - to analyze a page from the OpenClassrooms website! Explore the Inspector - HTMLįrom an OpenClassrooms web page, find out what the HTML inspector looks like on your web browser:
0 Comments
Leave a Reply. |