Right-click on the button and select “Inspect”:ĭouble-click on the value of the “background-image” property on the right, that is linear-gradient(#fecc4c,#ffac33).Ĭhange the colors to #2ecc71,#2ecc72 and hit ENTER: Let’s change the background of the “Get started (it’s free)” button to my favorite color – #2ecc71.
GOOGLE HTML INSPECTOR COLORS HOW TO
How to Change Styles with the Inspect Tool You can see the text has been changed to “Build real-world projects”. Type in “Build real-world projects” and hit ENTER: In this case, it's the “Build projects” text:ĭouble-click on the “Build projects” text: To do this, right-click on the element you would like to change and click “Inspect”. You can change the text contents of a website with the Inspect tool.Īs an example, I’m going to change the “Build projects” text on the landing page to “Build real-world projects”. How to Manipulate the Elements of a Website with the Inspect Tool
GOOGLE HTML INSPECTOR COLORS CODE
The source code will open and the element will be highlighted for you, like this: In this case, I will right-click on the “Learn to code – for free” text on the landing page. To inspect any element you see on a website, whether it's text, a button, a video, or an image, right-click on the element and click “Inspect”. How to Inspect Specific Elements on a Website If you are on Mac, press Command + SHIFT + C.
You can open the Inspect element tool on Linux by pressing CTRL + SHIFT + C or F12 on Windows. How Do I Open Inspect Element in Chrome with the Keyboard? You can drag these tabs around and place them wherever you want: You will then get access to the tabs of the developer tools such as Elements (the HTML and CSS that makes up the website), Console with which you can run JavaScript, Sources, and many more. Then hover over “More tools” and select “Developer tools”: To open the Chrome Developer Tools, click the vertical dots at the top-right corner of your browser: I'll be using to show you how things work with the Inspect tool. I will also show you how you can manipulate the elements of a website by changing the texts and styles. In this article, you will learn how to open the Chrome Developer Tools so you can get access to the Inspect feature, and how to inspect specific elements on a website. You don’t even need to be a developer at all to use it. The good news is that you don’t need to be the developer of the website to use this powerful tool as it is available to users as well. If you’re a beginner in web development, the Inspect tool is a useful feature you can take advantage of to learn about how websites are built, the fonts, icons, and plugins used, and even who made the website. This is why a lot of developers use the Inspect tool for debugging purposes. You can take things further by changing the elements and styles that make up the website – that is, the HTML, CSS, and JavaScript code of the website. It’s an important part of Chrome Developer Tools that you can use to check the source code of any website.īut it doesn’t end there. The Inspect Element feature of the Google Chrome browser is a powerful yet easy-to-use tool.
0 kommentar(er)
