Curriculum
Course: HTML and CSS 101
Login

Curriculum

HTML and CSS 101

HTML Basics

0/18

CSS Basics

0/14

CSS Intermediate

0/17

CSS Advanced

0/12

Web Projects

0/1
Video lesson

Inspecting CSS

This lesson will help you understand how to inspect CSS in a web page which will be useful in the debugging.

 

Starter Code to practice in Editor

Copy the following code and then start practicing in your favorite editor.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Dhanu Sir">
    <!-- Visit https://dhanusir.com -->
    <title>Dhanu Sir Website Bootcamp - Inspecting CSS with Browser Dev Tools</title>

    <style>
      /* CSS here */


    </style>
  </head>
  <body>
    <h1>Inspecting CSS with Browser Dev Tools</h1>

    <section class="welcome">
      <h2>Welcome to my Website</h2>
      <p>
        This is the welcome section of the website and appears at the top of the website.
      </p>
    </section>

    <section class="about">
      <h2>About Us</h2>
      <p>
        This is the about section of the website and appears at the middle of the website.
        This contains information about our website.
      </p>
    </section>

    <footer>
      <p>
        Copyright © 2024. DhanuCademy
      </p>
    </footer>
  </body>
</html>

 

Points to Remember

  • To access “Browser Tools”, go to the top right and click on the three dots icon, then go to more tools, then select “Developer Tools”.

  • The shortcut to open “Developer Tools” is “Ctrl + Shift + i” in Windows/Linux and “Cmd + Shift + i” in macOS.

  • Under the “Elements” tab in “Developer Tools”, we can see the HTML code of the Web page.

  • Any changes we make in the “Developer Tools” are reflected immediately on the Web page but that change is temporary.

  • “User Agent Stylesheet” is the CSS that is added by the Browser.