[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"course-tree":6,"blog-categories":434,"topic:browser-devtools-for-css":458},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8,334],{"id":9,"name":10,"slug":11,"icon":5,"icon_url":5,"short_description":12,"meta_title":13,"meta_description":14,"og_image":15,"locale":16,"subcategories":17},1,"HTML","html-tutorial","Welcome to our HTML Tutorial for Beginners, a complete guide designed to help you learn HTML from the ground up.\n\nHTML, which stands for HyperText Markup Language, is the standard language used to structure content on the web. Whether you want to become a web developer, build your own website, or continue learning CSS and JavaScript, understanding HTML is an essential first step.\n\nThis HTML course takes you through the fundamentals step by step, using simple explanations and practical examples. ","HTML Tutorial for Beginners - Learn HTML Step by Step","Learn HTML from scratch with our beginner-friendly HTML tutorial. Understand HTML tags, elements, forms, tables, links, images, semantic HTML and more with practical examples.","https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fcourses\u002Fog\u002F01M2GK0XN45C0B937NF9XFAD4S.webp","en",[18,46,82,106,182,216,230,258,282,298],{"id":9,"name":19,"slug":20,"order_index":9,"topics":21},"HTML Fundamentals & Setup","html-fundamentals-setup",[22,27,30,34,38,42],{"id":23,"title":24,"slug":25,"order_index":9,"cornerstone":26,"reading_time_minutes":23},2,"HTML Editors & Environment Setup","html-editors-and-environment-setup",false,{"id":9,"title":28,"slug":29,"order_index":9,"cornerstone":26,"reading_time_minutes":9},"HTML Introduction & History","html-introduction-and-history",{"id":31,"title":32,"slug":33,"order_index":31,"cornerstone":26,"reading_time_minutes":23},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":35,"title":36,"slug":37,"order_index":35,"cornerstone":26,"reading_time_minutes":23},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":39,"title":40,"slug":41,"order_index":39,"cornerstone":26,"reading_time_minutes":23},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":43,"title":44,"slug":45,"order_index":43,"cornerstone":26,"reading_time_minutes":23},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":23,"name":47,"slug":48,"order_index":23,"topics":49},"Text & Content Basics","text-content-basics",[50,54,58,62,66,70,74,78],{"id":51,"title":52,"slug":53,"order_index":51,"cornerstone":26,"reading_time_minutes":23},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":55,"title":56,"slug":57,"order_index":55,"cornerstone":26,"reading_time_minutes":23},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":59,"title":60,"slug":61,"order_index":59,"cornerstone":26,"reading_time_minutes":9},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":63,"title":64,"slug":65,"order_index":63,"cornerstone":26,"reading_time_minutes":23},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":67,"title":68,"slug":69,"order_index":67,"cornerstone":26,"reading_time_minutes":23},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":71,"title":72,"slug":73,"order_index":71,"cornerstone":26,"reading_time_minutes":23},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":75,"title":76,"slug":77,"order_index":75,"cornerstone":26,"reading_time_minutes":23},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":79,"title":80,"slug":81,"order_index":79,"cornerstone":26,"reading_time_minutes":23},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":31,"name":83,"slug":84,"order_index":31,"topics":85},"Links, Media & Navigation","links-media-navigation",[86,90,94,98,102],{"id":87,"title":88,"slug":89,"order_index":87,"cornerstone":26,"reading_time_minutes":23},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":91,"title":92,"slug":93,"order_index":91,"cornerstone":26,"reading_time_minutes":23},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":95,"title":96,"slug":97,"order_index":95,"cornerstone":26,"reading_time_minutes":9},17,"HTML Favicon Setup","html-favicon-setup",{"id":99,"title":100,"slug":101,"order_index":99,"cornerstone":26,"reading_time_minutes":23},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":103,"title":104,"slug":105,"order_index":103,"cornerstone":26,"reading_time_minutes":23},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":35,"name":107,"slug":108,"order_index":35,"topics":109},"Structuring Content","structuring-content",[110,115,120,125,130,134,138,142,146,150,154,158,162,166,170,174,178],{"id":111,"title":112,"slug":113,"order_index":114,"cornerstone":26,"reading_time_minutes":23},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":116,"title":117,"slug":118,"order_index":119,"cornerstone":26,"reading_time_minutes":23},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":121,"title":122,"slug":123,"order_index":124,"cornerstone":26,"reading_time_minutes":23},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":126,"title":127,"slug":128,"order_index":129,"cornerstone":26,"reading_time_minutes":9},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":131,"title":132,"slug":133,"order_index":111,"cornerstone":26,"reading_time_minutes":23},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":135,"title":136,"slug":137,"order_index":116,"cornerstone":26,"reading_time_minutes":9},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":139,"title":140,"slug":141,"order_index":121,"cornerstone":26,"reading_time_minutes":23},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":143,"title":144,"slug":145,"order_index":126,"cornerstone":26,"reading_time_minutes":23},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":147,"title":148,"slug":149,"order_index":131,"cornerstone":26,"reading_time_minutes":23},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":151,"title":152,"slug":153,"order_index":135,"cornerstone":26,"reading_time_minutes":31},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":155,"title":156,"slug":157,"order_index":139,"cornerstone":26,"reading_time_minutes":23},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":159,"title":160,"slug":161,"order_index":143,"cornerstone":26,"reading_time_minutes":23},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":163,"title":164,"slug":165,"order_index":147,"cornerstone":26,"reading_time_minutes":9},77,"HTML Symbols","html-symbols",{"id":167,"title":168,"slug":169,"order_index":167,"cornerstone":26,"reading_time_minutes":9},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":171,"title":172,"slug":173,"order_index":171,"cornerstone":26,"reading_time_minutes":23},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":175,"title":176,"slug":177,"order_index":175,"cornerstone":26,"reading_time_minutes":9},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":179,"title":180,"slug":181,"order_index":179,"cornerstone":26,"reading_time_minutes":9},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":51,"name":183,"slug":184,"order_index":39,"topics":185},"Forms & User Input","forms-user-input",[186,191,196,201,206,211],{"id":187,"title":188,"slug":189,"order_index":190,"cornerstone":26,"reading_time_minutes":23},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":192,"title":193,"slug":194,"order_index":195,"cornerstone":26,"reading_time_minutes":9},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":197,"title":198,"slug":199,"order_index":200,"cornerstone":26,"reading_time_minutes":9},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":202,"title":203,"slug":204,"order_index":205,"cornerstone":26,"reading_time_minutes":23},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":207,"title":208,"slug":209,"order_index":210,"cornerstone":26,"reading_time_minutes":23},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":212,"title":213,"slug":214,"order_index":215,"cornerstone":26,"reading_time_minutes":23},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":55,"name":217,"slug":218,"order_index":43,"topics":219},"Graphics & Visuals","graphics-visuals",[220,225],{"id":221,"title":222,"slug":223,"order_index":224,"cornerstone":26,"reading_time_minutes":31},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":226,"title":227,"slug":228,"order_index":229,"cornerstone":26,"reading_time_minutes":31},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":59,"name":231,"slug":232,"order_index":51,"topics":233},"Multimedia","multimedia",[234,239,244,249,254],{"id":235,"title":236,"slug":237,"order_index":238,"cornerstone":26,"reading_time_minutes":23},57,"HTML Media Overview","html-media-overview",45,{"id":240,"title":241,"slug":242,"order_index":243,"cornerstone":26,"reading_time_minutes":23},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":245,"title":246,"slug":247,"order_index":248,"cornerstone":26,"reading_time_minutes":23},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":250,"title":251,"slug":252,"order_index":253,"cornerstone":26,"reading_time_minutes":23},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":255,"title":256,"slug":257,"order_index":187,"cornerstone":26,"reading_time_minutes":23},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":63,"name":259,"slug":260,"order_index":55,"topics":261},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[262,266,270,274,278],{"id":263,"title":264,"slug":265,"order_index":192,"cornerstone":26,"reading_time_minutes":23},62,"HTML Geolocation API","html-geolocation-api",{"id":267,"title":268,"slug":269,"order_index":197,"cornerstone":26,"reading_time_minutes":23},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":271,"title":272,"slug":273,"order_index":202,"cornerstone":26,"reading_time_minutes":23},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":275,"title":276,"slug":277,"order_index":207,"cornerstone":26,"reading_time_minutes":23},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":279,"title":280,"slug":281,"order_index":212,"cornerstone":26,"reading_time_minutes":23},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":67,"name":283,"slug":284,"order_index":59,"topics":285},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[286,290,294],{"id":287,"title":288,"slug":289,"order_index":221,"cornerstone":26,"reading_time_minutes":23},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":291,"title":292,"slug":293,"order_index":226,"cornerstone":26,"reading_time_minutes":23},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":295,"title":296,"slug":297,"order_index":235,"cornerstone":26,"reading_time_minutes":23},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":71,"name":299,"slug":300,"order_index":63,"topics":301},"Reference & Practice","reference-practice",[302,306,310,314,318,322,326,330],{"id":303,"title":304,"slug":305,"order_index":9,"cornerstone":26,"reading_time_minutes":23},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":307,"title":308,"slug":309,"order_index":23,"cornerstone":26,"reading_time_minutes":23},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":311,"title":312,"slug":313,"order_index":31,"cornerstone":26,"reading_time_minutes":23},72,"HTML Events Reference","html-events-reference",{"id":315,"title":316,"slug":317,"order_index":35,"cornerstone":26,"reading_time_minutes":23},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":319,"title":320,"slug":321,"order_index":39,"cornerstone":26,"reading_time_minutes":23},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":323,"title":324,"slug":325,"order_index":43,"cornerstone":26,"reading_time_minutes":23},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":327,"title":328,"slug":329,"order_index":51,"cornerstone":26,"reading_time_minutes":31},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":331,"title":332,"slug":333,"order_index":55,"cornerstone":26,"reading_time_minutes":9},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":23,"name":335,"slug":336,"icon":5,"icon_url":5,"short_description":337,"meta_title":338,"meta_description":339,"og_image":5,"locale":16,"subcategories":340},"CSS","css","Master CSS from basics to advanced. Learn styling, layouts, Flexbox, Grid, and responsive design with practical examples.","CSS Course - Learn CSS from Scratch to Advanced","Learn CSS (Cascading Style Sheets) step by step. Master selectors, layouts, Flexbox, Grid, animations, and responsive web design with hands-on examples.",[341,366,398],{"id":75,"name":342,"slug":343,"order_index":344,"topics":345},"CSS Fundamentals & Setup","css-fundamentals-setup",0,[346,350,354,358,362],{"id":347,"title":348,"slug":349,"order_index":9,"cornerstone":26,"reading_time_minutes":35},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":351,"title":352,"slug":353,"order_index":23,"cornerstone":26,"reading_time_minutes":35},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":355,"title":356,"slug":357,"order_index":31,"cornerstone":26,"reading_time_minutes":31},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":359,"title":360,"slug":361,"order_index":35,"cornerstone":26,"reading_time_minutes":31},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":363,"title":364,"slug":365,"order_index":39,"cornerstone":26,"reading_time_minutes":39},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":87,"name":367,"slug":368,"order_index":344,"topics":369},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[370,374,378,382,386,390,394],{"id":371,"title":372,"slug":373,"order_index":79,"cornerstone":26,"reading_time_minutes":39},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":375,"title":376,"slug":377,"order_index":87,"cornerstone":26,"reading_time_minutes":35},96,"CSS Backgrounds","css-backgrounds",{"id":379,"title":380,"slug":381,"order_index":91,"cornerstone":26,"reading_time_minutes":39},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":383,"title":384,"slug":385,"order_index":95,"cornerstone":26,"reading_time_minutes":39},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":387,"title":388,"slug":389,"order_index":99,"cornerstone":26,"reading_time_minutes":43},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":391,"title":392,"slug":393,"order_index":103,"cornerstone":26,"reading_time_minutes":39},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":395,"title":396,"slug":397,"order_index":114,"cornerstone":26,"reading_time_minutes":43},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":79,"name":399,"slug":400,"order_index":344,"topics":401},"Selectors & the Cascade","selectors-the-cascade",[402,406,410,414,418,422,426,430],{"id":403,"title":404,"slug":405,"order_index":43,"cornerstone":26,"reading_time_minutes":35},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":407,"title":408,"slug":409,"order_index":51,"cornerstone":26,"reading_time_minutes":35},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":411,"title":412,"slug":413,"order_index":55,"cornerstone":26,"reading_time_minutes":35},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":415,"title":416,"slug":417,"order_index":59,"cornerstone":26,"reading_time_minutes":43},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":419,"title":420,"slug":421,"order_index":63,"cornerstone":26,"reading_time_minutes":39},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":423,"title":424,"slug":425,"order_index":67,"cornerstone":26,"reading_time_minutes":39},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":427,"title":428,"slug":429,"order_index":71,"cornerstone":26,"reading_time_minutes":35},93,"CSS Specificity Explained","css-specificity-explained",{"id":431,"title":432,"slug":433,"order_index":75,"cornerstone":26,"reading_time_minutes":39},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"data":435},[436,439,443,448,453],{"name":335,"slug":336,"description":437,"post_count":23,"subcategories":438},"Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",[],{"name":10,"slug":440,"description":441,"post_count":23,"subcategories":442},"html","Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":444,"slug":445,"description":446,"post_count":9,"subcategories":447},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",[],{"name":449,"slug":450,"description":451,"post_count":9,"subcategories":452},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":454,"slug":455,"description":456,"post_count":9,"subcategories":457},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[],{"data":459},{"id":363,"title":364,"slug":365,"content":460,"course":461,"subcategory":462,"author":463,"reading_time_minutes":39,"cornerstone":26,"schema_type":469,"faq_json":5,"video_url":5,"canonical_url":470,"meta_title":471,"meta_description":472,"og_image":5,"toc_json":473,"code_examples":534,"quiz":5,"exercises":548,"published_at":5,"updated_at":561,"prev":562,"next":563},"\u003Ch2 id=\"browser-devtools-for-css-your-most-powerful-debugging-tool\">Browser DevTools for CSS: Your Most Powerful Debugging Tool\u003C\u002Fh2>\u003Cp>\u003Cstrong>Browser DevTools\u003C\u002Fstrong> (Developer Tools) are built into Chrome, Edge, Firefox and Safari. For CSS work, they let you inspect any element, see exactly which rules apply, edit styles live and debug layout problems in seconds. Learning \u003Cstrong>DevTools for CSS\u003C\u002Fstrong> early will save you countless hours.\u003C\u002Fp>\u003Ch2 id=\"how-to-open-devtools\">How to Open DevTools\u003C\u002Fh2>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Method\u003C\u002Fth>\u003Cth>Windows \u002F Linux\u003C\u002Fth>\u003Cth>Mac\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>Inspect Element\u003C\u002Ftd>\u003Ctd>Right-click > Inspect\u003C\u002Ftd>\u003Ctd>Right-click > Inspect\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Open DevTools\u003C\u002Ftd>\u003Ctd>F12 or Ctrl+Shift+I\u003C\u002Ftd>\u003Ctd>Cmd+Option+I\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Select an element\u003C\u002Ftd>\u003Ctd>Ctrl+Shift+C\u003C\u002Ftd>\u003Ctd>Cmd+Shift+C\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Cp>In Safari, first enable the Develop menu in Settings > Advanced.\u003C\u002Fp>\u003Ch2 id=\"the-elements-inspector-panel\">The Elements (Inspector) Panel\u003C\u002Fh2>\u003Cp>The Elements panel shows the live \u003Cstrong>DOM\u003C\u002Fstrong>, which is the HTML after the browser has parsed and modified it. You can click any node, edit text, change attributes, add or remove classes, and even drag elements to reorder them. Changes are temporary and disappear on reload.\u003C\u002Fp>\u003Ch2 id=\"the-styles-pane\">The Styles Pane\u003C\u002Fh2>\u003Cp>The Styles pane lists every CSS rule that matches the selected element, from highest to lowest priority.\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Strikethrough\u003C\u002Fstrong> means a declaration was overridden by a more specific or later rule.\u003C\u002Fli>\u003Cli>\u003Cstrong>Warning icons\u003C\u002Fstrong> flag invalid or unsupported properties and values.\u003C\u002Fli>\u003Cli>\u003Cstrong>Checkboxes\u003C\u002Fstrong> let you toggle each declaration on and off.\u003C\u002Fli>\u003Cli>\u003Cstrong>Click any value\u003C\u002Fstrong> to edit it; use the Up and Down arrow keys to nudge numbers (hold Shift for steps of 10).\u003C\u002Fli>\u003Cli>\u003Cstrong>Click the + button\u003C\u002Fstrong> to add a new rule with a selector.\u003C\u002Fli>\u003Cli>\u003Cstrong>File and line links\u003C\u002Fstrong> take you to the exact source line in your stylesheet.\u003C\u002Fli>\u003Cli>\u003Cstrong>:hov and .cls buttons\u003C\u002Fstrong> force states such as :hover, :focus and :active, or add classes.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"the-computed-pane\">The Computed Pane\u003C\u002Fh2>\u003Cp>The Computed pane shows the \u003Cstrong>final calculated value\u003C\u002Fstrong> of every property after the cascade. Use the filter box and click the arrow next to a property to see which rule set it. This is the best way to answer 'why is this element 24px wide?'.\u003C\u002Fp>\u003Ch2 id=\"the-box-model-diagram\">The Box Model Diagram\u003C\u002Fh2>\u003Cp>DevTools draws the box model (content, padding, border, margin) with numbers. Hover over the diagram to highlight each area on the page, and double-click a value to edit it. It is the fastest way to solve spacing and overflow issues.\u003C\u002Fp>\u003Ch2 id=\"color-picker-and-value-helpers\">Color Picker and Value Helpers\u003C\u002Fh2>\u003Cul>\u003Cli>Click a color swatch to open the picker with an eyedropper tool.\u003C\u002Fli>\u003Cli>Shift+click a swatch to switch between HEX, RGB and HSL formats.\u003C\u002Fli>\u003Cli>The picker shows a \u003Cstrong>contrast ratio\u003C\u002Fstrong> to help check accessibility (WCAG).\u003C\u002Fli>\u003Cli>Shadow, font and easing editors help tune box-shadow, fonts and animation curves visually.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"flexbox-and-grid-debugging\">Flexbox and Grid Debugging\u003C\u002Fh2>\u003Cp>In the Elements panel, elements using display: flex or display: grid show a badge. Click it to overlay the layout on the page: you can see grid lines, gaps, areas and flex item alignment. The Layout pane lists all grids and flex containers, so you can toggle overlays quickly. Container queries and subgrid are also labeled in modern DevTools.\u003C\u002Fp>\u003Ch2 id=\"responsive-design-mode-device-toolbar\">Responsive Design Mode (Device Toolbar)\u003C\u002Fh2>\u003Cp>Press \u003Cstrong>Ctrl+Shift+M\u003C\u002Fstrong> (Cmd+Shift+M on Mac) to toggle the device toolbar. You can:\u003C\u002Fp>\u003Cul>\u003Cli>Pick preset phones and tablets or enter custom dimensions.\u003C\u002Fli>\u003Cli>Drag the viewport edges to find where your layout breaks.\u003C\u002Fli>\u003Cli>Throttle network speed and simulate touch.\u003C\u002Fli>\u003Cli>See media query breakpoints as colored bars above the viewport.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"emulating-user-preferences-rendering-tab\">Emulating User Preferences (Rendering Tab)\u003C\u002Fh2>\u003Cp>Open the Command Menu (Ctrl+Shift+P) and type 'Rendering'. You can emulate \u003Cstrong>prefers-color-scheme (dark mode)\u003C\u002Fstrong>, prefers-reduced-motion, print media, forced colors and vision deficiencies (such as color blindness). These are essential for modern, accessible CSS.\u003C\u002Fp>\u003Ch2 id=\"network-and-sources-panels-for-css\">Network and Sources Panels for CSS\u003C\u002Fh2>\u003Cul>\u003Cli>Network panel: confirm the stylesheet loads with status 200 and check for 404 errors from wrong paths.\u003C\u002Fli>\u003Cli>Sources panel: edit CSS files directly and set up Workspaces or Local Overrides so edits persist.\u003C\u002Fli>\u003Cli>Coverage tool: find unused CSS to reduce file size.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"saving-your-changes\">Saving Your Changes\u003C\u002Fh2>\u003Cp>Live edits in DevTools are not saved to your files. When you find the right fix, copy the declarations into your CSS file, or use the Changes tab, which lists every edit you have made in the session.\u003C\u002Fp>\u003Ch2 id=\"a-practical-debugging-workflow\">A Practical Debugging Workflow\u003C\u002Fh2>\u003Col>\u003Cli>Right-click the problem element and choose Inspect.\u003C\u002Fli>\u003Cli>Check the Styles pane: is your rule listed? Is it crossed out?\u003C\u002Fli>\u003Cli>If missing, check the selector and file path. If crossed out, check specificity and order.\u003C\u002Fli>\u003Cli>Look at the Computed pane and the box model for unexpected size, margin or display values.\u003C\u002Fli>\u003Cli>Toggle declarations off one by one to find the culprit.\u003C\u002Fli>\u003Cli>Resize with the device toolbar to test responsiveness.\u003C\u002Fli>\u003Cli>Copy the fixed code back into your stylesheet and reload.\u003C\u002Fli>\u003C\u002Fol>\u003Ch2 id=\"common-problems-and-what-devtools-shows\">Common Problems and What DevTools Shows\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>Style not applying\u003C\u002Fstrong> - rule is missing or crossed out (specificity or typo).\u003C\u002Fli>\u003Cli>\u003Cstrong>Unexpected gap\u003C\u002Fstrong> - margin collapse or default browser margin visible in the box model.\u003C\u002Fli>\u003Cli>\u003Cstrong>Horizontal scrollbar\u003C\u002Fstrong> - an element wider than the viewport; hover nodes to find it.\u003C\u002Fli>\u003Cli>\u003Cstrong>Text unreadable in dark mode\u003C\u002Fstrong> - emulate prefers-color-scheme and check contrast.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh2>\u003Cul>\u003Cli>Right-click > Inspect is the fastest way to see and edit styles.\u003C\u002Fli>\u003Cli>Styles shows the rules; Computed shows the final values.\u003C\u002Fli>\u003Cli>Use the box model, layout badges and device toolbar to debug layout.\u003C\u002Fli>\u003Cli>Live edits are temporary: copy fixes back into your code.\u003C\u002Fli>\u003C\u002Ful>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: sans-serif; padding: 20px; }\n  .card { width: 280px; padding: 20px; margin: 16px 0; border: 3px solid #3498db; border-radius: 10px; background: #f0f8ff; }\n  .card h3 { margin: 0 0 8px; color: #2c3e50; }\n  .card p { margin: 0; color: #555; }\n  .card.highlight { border-color: #e67e22; }\n<\u002Fstyle>\n<div class='card'>\n  <h3>Inspect me!<\u002Fh3>\n  <p>Right-click this card and choose Inspect. Look at the box model diagram.<\u002Fp>\n<\u002Fdiv>\n<div class='card highlight'>\n  <h3>Second card<\u002Fh3>\n  <p>Toggle the border-color declaration in the Styles pane.<\u002Fp>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .nav { display: flex; gap: 12px; padding: 12px; background: #2c3e50; }\n  .nav a { color: white; text-decoration: none; padding: 8px 14px; background: #34495e; border-radius: 6px; }\n  .nav a:hover { background: #1abc9c; }\n  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }\n  .grid div { background: #ecf0f1; padding: 20px; text-align: center; }\n<\u002Fstyle>\n<nav class='nav'><a href='#'>Home<\u002Fa><a href='#'>About<\u002Fa><a href='#'>Contact<\u002Fa><\u002Fnav>\n<div class='grid'><div>1<\u002Fdiv><div>2<\u002Fdiv><div>3<\u002Fdiv><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  p { color: gray; }\n  .warning { color: orange; }\n  p.warning { color: red; }\n<\u002Fstyle>\n<p class='warning'>Which color wins? Inspect this paragraph and see which declarations are crossed out.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  :root { color-scheme: light dark; }\n  body { background: #ffffff; color: #111111; font-family: sans-serif; padding: 20px; }\n  @media (prefers-color-scheme: dark) {\n    body { background: #121212; color: #f1f1f1; }\n  }\n<\u002Fstyle>\n<h2>Dark Mode Test<\u002Fh2>\n<p>Open DevTools, use the Rendering tab, and emulate prefers-color-scheme: dark to see this page switch themes.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":335,"slug":336},{"name":342,"slug":343},{"slug":464,"display_name":465,"job_title":5,"short_bio":5,"expertise_tags":466,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":467,"posts":468},"badar-khalil","Badar Khalil",[],[],[],"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fbrowser-devtools-for-css","Browser DevTools for CSS: Inspect Element & Debug Styles","Master browser DevTools for CSS: Inspect Element, Styles and Computed panes, box model, Flexbox\u002FGrid overlays, device mode and debugging tips.",[474,478,482,486,490,494,498,502,506,510,514,518,522,526,530],{"id":475,"text":476,"level":23,"children":477},"browser-devtools-for-css-your-most-powerful-debugging-tool","Browser DevTools for CSS: Your Most Powerful Debugging Tool",[],{"id":479,"text":480,"level":23,"children":481},"how-to-open-devtools","How to Open DevTools",[],{"id":483,"text":484,"level":23,"children":485},"the-elements-inspector-panel","The Elements (Inspector) Panel",[],{"id":487,"text":488,"level":23,"children":489},"the-styles-pane","The Styles Pane",[],{"id":491,"text":492,"level":23,"children":493},"the-computed-pane","The Computed Pane",[],{"id":495,"text":496,"level":23,"children":497},"the-box-model-diagram","The Box Model Diagram",[],{"id":499,"text":500,"level":23,"children":501},"color-picker-and-value-helpers","Color Picker and Value Helpers",[],{"id":503,"text":504,"level":23,"children":505},"flexbox-and-grid-debugging","Flexbox and Grid Debugging",[],{"id":507,"text":508,"level":23,"children":509},"responsive-design-mode-device-toolbar","Responsive Design Mode (Device Toolbar)",[],{"id":511,"text":512,"level":23,"children":513},"emulating-user-preferences-rendering-tab","Emulating User Preferences (Rendering Tab)",[],{"id":515,"text":516,"level":23,"children":517},"network-and-sources-panels-for-css","Network and Sources Panels for CSS",[],{"id":519,"text":520,"level":23,"children":521},"saving-your-changes","Saving Your Changes",[],{"id":523,"text":524,"level":23,"children":525},"a-practical-debugging-workflow","A Practical Debugging Workflow",[],{"id":527,"text":528,"level":23,"children":529},"common-problems-and-what-devtools-shows","Common Problems and What DevTools Shows",[],{"id":531,"text":532,"level":23,"children":533},"key-takeaways","Key Takeaways",[],[535,539,542,545],{"id":536,"language":440,"code":537,"is_editable":538},205,"\u003Cstyle>\n  body { font-family: sans-serif; padding: 20px; }\n  .card { width: 280px; padding: 20px; margin: 16px 0; border: 3px solid #3498db; border-radius: 10px; background: #f0f8ff; }\n  .card h3 { margin: 0 0 8px; color: #2c3e50; }\n  .card p { margin: 0; color: #555; }\n  .card.highlight { border-color: #e67e22; }\n\u003C\u002Fstyle>\n\u003Cdiv class='card'>\n  \u003Ch3>Inspect me!\u003C\u002Fh3>\n  \u003Cp>Right-click this card and choose Inspect. Look at the box model diagram.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv class='card highlight'>\n  \u003Ch3>Second card\u003C\u002Fh3>\n  \u003Cp>Toggle the border-color declaration in the Styles pane.\u003C\u002Fp>\n\u003C\u002Fdiv>",true,{"id":540,"language":440,"code":541,"is_editable":538},206,"\u003Cstyle>\n  .nav { display: flex; gap: 12px; padding: 12px; background: #2c3e50; }\n  .nav a { color: white; text-decoration: none; padding: 8px 14px; background: #34495e; border-radius: 6px; }\n  .nav a:hover { background: #1abc9c; }\n  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }\n  .grid div { background: #ecf0f1; padding: 20px; text-align: center; }\n\u003C\u002Fstyle>\n\u003Cnav class='nav'>\u003Ca href='#'>Home\u003C\u002Fa>\u003Ca href='#'>About\u003C\u002Fa>\u003Ca href='#'>Contact\u003C\u002Fa>\u003C\u002Fnav>\n\u003Cdiv class='grid'>\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003C\u002Fdiv>",{"id":543,"language":440,"code":544,"is_editable":538},207,"\u003Cstyle>\n  p { color: gray; }\n  .warning { color: orange; }\n  p.warning { color: red; }\n\u003C\u002Fstyle>\n\u003Cp class='warning'>Which color wins? Inspect this paragraph and see which declarations are crossed out.\u003C\u002Fp>",{"id":546,"language":440,"code":547,"is_editable":538},208,"\u003Cstyle>\n  :root { color-scheme: light dark; }\n  body { background: #ffffff; color: #111111; font-family: sans-serif; padding: 20px; }\n  @media (prefers-color-scheme: dark) {\n    body { background: #121212; color: #f1f1f1; }\n  }\n\u003C\u002Fstyle>\n\u003Ch2>Dark Mode Test\u003C\u002Fh2>\n\u003Cp>Open DevTools, use the Rendering tab, and emulate prefers-color-scheme: dark to see this page switch themes.\u003C\u002Fp>",[549,555],{"id":363,"title":550,"slug":551,"prompt":552,"starter_code":553,"expected_output":554,"language":440,"order_index":9},"Debug the Missing Style","debug-the-missing-style","The button should have a green background, but it stays gray. Use the DevTools Styles pane (or read the code) to find out why the rule is overridden, then fix the CSS without using !important.","\u003Cstyle>\n  #action.btn { background: gray; color: white; padding: 10px 20px; border: none; }\n  .btn { background: green; }\n\u003C\u002Fstyle>\n\u003Cbutton id='action' class='btn'>Save\u003C\u002Fbutton>","The button has a green background.",{"id":403,"title":556,"slug":557,"prompt":558,"starter_code":559,"expected_output":560,"language":440,"order_index":23},"Find the Box Model Values","find-the-box-model-values","Inspect the box below. In a comment, write the content width, padding, border and margin values shown in the DevTools box model diagram, then change the padding to 30px.","\u003Cstyle>\n  .box { width: 200px; padding: 20px; border: 5px solid teal; margin: 15px; background: #e0f7f4; }\n\u003C\u002Fstyle>\n\u003Cdiv class='box'>Inspect my box model\u003C\u002Fdiv>","Content 200px, padding 20px, border 5px, margin 15px; then padding updated to 30px.","2026-09-29T18:29:10+00:00",{"id":359,"slug":361,"title":360},{"id":403,"slug":405,"title":404}]