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.
Hybridsjs unpkg how to#
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. For this example, we'll stick with our own page, but you We begin by loading a website into Chrome. The context menu contains a command, "Inspect": 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". Selecting the Inspect command opens Chrome's "Developer Tools" in the right half of the browser window. 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 The bottom panel displays the styles that are currently applied to the headline, listing the font, font attributes, color and other styles: The top panel shows the HTML elements of the page, with the h1 headline above highlighted. Chrome will now display a standard color picker, preset to the current color of the h1 headline, #555555: Let's change the text color of the headline: Click the little gray square right to the tag color. Text is now displayed in blue, likewise the color tag and preview square in the style declaration are updated with the new color value: Select another color, for example blue, in the picker and hit to dismiss the picker. 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. Activating and deactivating cascading style definitions Besides by reloading, style changes in the developer tools can also be undone using the common shortcuts ⌘ + Z (Mac) and Ctrl + Z (PC). 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 as 36px, but is shown as font-size: 36px. Our site imports two stylesheets, and starter-template.css and both define a font size for h1. However, the starter-template.css is loaded after 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, Chrome tells us that this style has been overridden and is currently not applied to the element.Ĭhrome allows us to disable style definitions by simply deselecting them.
0 kommentar(er)
