[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"course-tree":6,"blog-categories":646,"topic:css-reset-and-normalize":670},{"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,370,394,430,462,494,526,558,586,614],{"id":129,"name":342,"slug":343,"order_index":344,"topics":345},"UI Components","ui-components",0,[346,350,354,358,362,366],{"id":347,"title":348,"slug":349,"order_index":255,"cornerstone":26,"reading_time_minutes":43},148,"CSS Buttons: Variants, States, Sizes and Accessible Button Design","css-buttons",{"id":351,"title":352,"slug":353,"order_index":263,"cornerstone":26,"reading_time_minutes":43},149,"CSS Card Component: Layouts with Flexbox, Grid, Container Queries and Subgrid","css-cards",{"id":355,"title":356,"slug":357,"order_index":267,"cornerstone":26,"reading_time_minutes":51},150,"CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible Navigation","css-navbar-dropdowns",{"id":359,"title":360,"slug":361,"order_index":271,"cornerstone":26,"reading_time_minutes":43},151,"HTML and CSS Forms and Inputs: Styled, Accessible and Validated Form Controls","css-forms-inputs",{"id":363,"title":364,"slug":365,"order_index":275,"cornerstone":26,"reading_time_minutes":43},152,"CSS Tooltips and Popovers: Popover API, Anchor Positioning and Accessible Overlays","css-tooltips-popovers",{"id":367,"title":368,"slug":369,"order_index":279,"cornerstone":26,"reading_time_minutes":43},153,"Pagination and Breadcrumbs: Accessible Navigation Patterns with HTML, CSS and Schema","pagination-breadcrumbs",{"id":75,"name":371,"slug":372,"order_index":344,"topics":373},"CSS Fundamentals & Setup","css-fundamentals-setup",[374,378,382,386,390],{"id":375,"title":376,"slug":377,"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":379,"title":380,"slug":381,"order_index":23,"cornerstone":26,"reading_time_minutes":35},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":383,"title":384,"slug":385,"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":387,"title":388,"slug":389,"order_index":35,"cornerstone":26,"reading_time_minutes":31},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":391,"title":392,"slug":393,"order_index":39,"cornerstone":26,"reading_time_minutes":39},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":79,"name":395,"slug":396,"order_index":344,"topics":397},"Selectors & the Cascade","selectors-the-cascade",[398,402,406,410,414,418,422,426],{"id":399,"title":400,"slug":401,"order_index":43,"cornerstone":26,"reading_time_minutes":35},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":403,"title":404,"slug":405,"order_index":51,"cornerstone":26,"reading_time_minutes":35},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":407,"title":408,"slug":409,"order_index":55,"cornerstone":26,"reading_time_minutes":35},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":411,"title":412,"slug":413,"order_index":59,"cornerstone":26,"reading_time_minutes":43},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":415,"title":416,"slug":417,"order_index":63,"cornerstone":26,"reading_time_minutes":39},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":419,"title":420,"slug":421,"order_index":67,"cornerstone":26,"reading_time_minutes":39},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":423,"title":424,"slug":425,"order_index":71,"cornerstone":26,"reading_time_minutes":35},93,"CSS Specificity Explained","css-specificity-explained",{"id":427,"title":428,"slug":429,"order_index":75,"cornerstone":26,"reading_time_minutes":39},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"id":87,"name":431,"slug":432,"order_index":344,"topics":433},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[434,438,442,446,450,454,458],{"id":435,"title":436,"slug":437,"order_index":79,"cornerstone":26,"reading_time_minutes":39},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":439,"title":440,"slug":441,"order_index":87,"cornerstone":26,"reading_time_minutes":35},96,"CSS Backgrounds","css-backgrounds",{"id":443,"title":444,"slug":445,"order_index":91,"cornerstone":26,"reading_time_minutes":39},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":447,"title":448,"slug":449,"order_index":95,"cornerstone":26,"reading_time_minutes":39},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":451,"title":452,"slug":453,"order_index":99,"cornerstone":26,"reading_time_minutes":43},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":455,"title":456,"slug":457,"order_index":103,"cornerstone":26,"reading_time_minutes":39},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":459,"title":460,"slug":461,"order_index":114,"cornerstone":26,"reading_time_minutes":43},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":91,"name":463,"slug":464,"order_index":344,"topics":465},"Box Model & Spacing","box-model-spacing",[466,470,474,478,482,486,490],{"id":467,"title":468,"slug":469,"order_index":119,"cornerstone":26,"reading_time_minutes":51},102,"The CSS Box Model: Content, Padding, Border and Margin","css-box-model",{"id":471,"title":472,"slug":473,"order_index":124,"cornerstone":26,"reading_time_minutes":51},103,"CSS Margin and Margin Collapse","css-margin-and-margin-collapse",{"id":475,"title":476,"slug":477,"order_index":129,"cornerstone":26,"reading_time_minutes":43},104,"CSS Padding: Shorthand, Percentages and Best Practices","css-padding",{"id":479,"title":480,"slug":481,"order_index":111,"cornerstone":26,"reading_time_minutes":59},105,"CSS Width, Height, Min-Width, Max-Width, Min-Height & Max-Height","css-width-height-min-max",{"id":483,"title":484,"slug":485,"order_index":116,"cornerstone":26,"reading_time_minutes":39},106,"CSS box-sizing: content-box vs border-box","css-box-sizing",{"id":487,"title":488,"slug":489,"order_index":121,"cornerstone":26,"reading_time_minutes":51},107,"CSS Overflow: hidden, scroll, auto, clip and Text Truncation","css-overflow",{"id":491,"title":492,"slug":493,"order_index":126,"cornerstone":26,"reading_time_minutes":51},108,"CSS Units: px, rem, em, %, vw, vh and dvh","css-units",{"id":95,"name":495,"slug":496,"order_index":344,"topics":497},"Typography & Text","typography-text",[498,502,506,510,514,518,522],{"id":499,"title":500,"slug":501,"order_index":131,"cornerstone":26,"reading_time_minutes":51},109,"CSS Text Properties: Alignment, Spacing, Decoration and Wrapping","css-text-properties",{"id":503,"title":504,"slug":505,"order_index":135,"cornerstone":26,"reading_time_minutes":51},110,"CSS Fonts and font-family: Font Stacks, Weights and System Fonts","css-fonts-font-family",{"id":507,"title":508,"slug":509,"order_index":139,"cornerstone":26,"reading_time_minutes":51},111,"Web Fonts: Google Fonts, @font-face and Variable Fonts","web-fonts",{"id":511,"title":512,"slug":513,"order_index":143,"cornerstone":26,"reading_time_minutes":51},112,"CSS Text Effects: text-wrap balance, line-clamp, Ellipsis and More","css-text-effects",{"id":515,"title":516,"slug":517,"order_index":147,"cornerstone":26,"reading_time_minutes":55},113,"Styling Links","styling-links-css",{"id":519,"title":520,"slug":521,"order_index":167,"cornerstone":26,"reading_time_minutes":51},114,"Styling Lists & Tables","styling-lists-and-tables-css",{"id":523,"title":524,"slug":525,"order_index":171,"cornerstone":26,"reading_time_minutes":63},115,"Icons (SVG & Icon Fonts)","icons-svg-and-icon-fonts",{"id":99,"name":527,"slug":528,"order_index":344,"topics":529},"Display, Position & Layout Basics","display-position-layout-basics",[530,534,538,542,546,550,554],{"id":531,"title":532,"slug":533,"order_index":175,"cornerstone":26,"reading_time_minutes":51},116,"Display & Inline-block","display-and-inline-block",{"id":535,"title":536,"slug":537,"order_index":179,"cornerstone":26,"reading_time_minutes":43},117,"Position (relative, absolute, fixed, sticky)","position-relative-absolute-fixed-sticky",{"id":539,"title":540,"slug":541,"order_index":190,"cornerstone":26,"reading_time_minutes":43},118,"Z-index & Stacking Contexts","z-index-and-stacking-contexts",{"id":543,"title":544,"slug":545,"order_index":195,"cornerstone":26,"reading_time_minutes":39},119,"Float & Clear (Legacy, and Why to Avoid It)","float-and-clear",{"id":547,"title":548,"slug":549,"order_index":200,"cornerstone":26,"reading_time_minutes":43},120,"Centering Techniques","centering-techniques",{"id":551,"title":552,"slug":553,"order_index":205,"cornerstone":26,"reading_time_minutes":51},121,"aspect-ratio & object-fit","aspect-ratio-and-object-fit",{"id":555,"title":556,"slug":557,"order_index":210,"cornerstone":26,"reading_time_minutes":55},122,"Website Layout Basics","website-layout-basics",{"id":114,"name":559,"slug":560,"order_index":344,"topics":561},"The Modern CSS Toolkit","the-modern-css-toolkit",[562,566,570,574,578,582],{"id":563,"title":564,"slug":565,"order_index":215,"cornerstone":26,"reading_time_minutes":55},129,"CSS Variables (Custom Properties)","css-variables-custom-properties",{"id":567,"title":568,"slug":569,"order_index":224,"cornerstone":26,"reading_time_minutes":55},130,"Math Functions (calc, min, max, clamp)","math-functions-calc-min-max-clamp",{"id":571,"title":572,"slug":573,"order_index":229,"cornerstone":26,"reading_time_minutes":51},131,"Native CSS Nesting","native-css-nesting",{"id":575,"title":576,"slug":577,"order_index":238,"cornerstone":26,"reading_time_minutes":51},132,"Cascade Layers (@layer)","cascade-layers-at-layer",{"id":579,"title":580,"slug":581,"order_index":243,"cornerstone":26,"reading_time_minutes":59},133,"Dark Mode (prefers-color-scheme, light-dark())","dark-mode-prefers-color-scheme-light-dark",{"id":583,"title":584,"slug":585,"order_index":248,"cornerstone":26,"reading_time_minutes":55},134,"CSS Reset & Normalize","css-reset-and-normalize",{"id":119,"name":587,"slug":588,"order_index":344,"topics":589},"Responsive Design","responsive-design",[590,594,598,602,606,610],{"id":591,"title":592,"slug":593,"order_index":253,"cornerstone":26,"reading_time_minutes":59},135,"Mobile-First & the Viewport","mobile-first-and-the-viewport",{"id":595,"title":596,"slug":597,"order_index":187,"cornerstone":26,"reading_time_minutes":55},136,"Media Queries","media-queries",{"id":599,"title":600,"slug":601,"order_index":192,"cornerstone":26,"reading_time_minutes":55},137,"Responsive Images & Video","responsive-images-and-video",{"id":603,"title":604,"slug":605,"order_index":197,"cornerstone":26,"reading_time_minutes":59},138,"Fluid Typography with clamp()","fluid-typography-with-clamp",{"id":607,"title":608,"slug":609,"order_index":202,"cornerstone":26,"reading_time_minutes":59},139,"Container Queries","container-queries",{"id":611,"title":612,"slug":613,"order_index":207,"cornerstone":26,"reading_time_minutes":71},140,"Responsive Navigation Pattern","responsive-navigation-pattern",{"id":124,"name":615,"slug":616,"order_index":344,"topics":617},"Transitions & Animation","transitions-animation",[618,622,626,630,634,638,642],{"id":619,"title":620,"slug":621,"order_index":212,"cornerstone":26,"reading_time_minutes":39},141,"CSS Transitions: Smooth State Changes with transition, @starting-style and allow-discrete","css-transitions",{"id":623,"title":624,"slug":625,"order_index":221,"cornerstone":26,"reading_time_minutes":35},142,"CSS 2D Transforms: translate, rotate, scale, skew and transform-origin","css-2d-transforms",{"id":627,"title":628,"slug":629,"order_index":226,"cornerstone":26,"reading_time_minutes":39},143,"CSS 3D Transforms: perspective, preserve-3d, rotateX\u002FY and backface-visibility","css-3d-transforms",{"id":631,"title":632,"slug":633,"order_index":235,"cornerstone":26,"reading_time_minutes":39},144,"CSS Keyframe Animations: @keyframes, animation shorthand, fill-mode and @property","css-keyframe-animations",{"id":635,"title":636,"slug":637,"order_index":240,"cornerstone":26,"reading_time_minutes":39},145,"CSS Scroll-Driven Animations: animation-timeline, scroll() and view()","css-scroll-driven-animations",{"id":639,"title":640,"slug":641,"order_index":245,"cornerstone":26,"reading_time_minutes":39},146,"CSS View Transitions API: Progressive Enhancement for Page and State Animations","css-view-transitions",{"id":643,"title":644,"slug":645,"order_index":250,"cornerstone":26,"reading_time_minutes":43},147,"Motion Accessibility and Performance: prefers-reduced-motion, will-change and Smooth 60fps Animations","motion-accessibility-prefers-reduced-motion-performance",{"data":647},[648,651,655,660,665],{"name":335,"slug":336,"description":649,"post_count":23,"subcategories":650},"Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",[],{"name":10,"slug":652,"description":653,"post_count":23,"subcategories":654},"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":656,"slug":657,"description":658,"post_count":9,"subcategories":659},"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":661,"slug":662,"description":663,"post_count":9,"subcategories":664},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":666,"slug":667,"description":668,"post_count":9,"subcategories":669},"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":671},{"id":583,"title":584,"slug":585,"content":672,"course":673,"subcategory":674,"author":675,"reading_time_minutes":55,"cornerstone":26,"schema_type":681,"faq_json":5,"video_url":5,"canonical_url":682,"meta_title":683,"meta_description":684,"og_image":5,"toc_json":685,"code_examples":734,"quiz":5,"exercises":758,"published_at":5,"updated_at":773,"prev":774,"next":775},"\u003Ch2 id=\"css-reset-and-normalize-build-a-solid-starting-point\">CSS Reset and Normalize: Build a Solid Starting Point\u003C\u002Fh2>\u003Cp>\u003Cstrong>Focus keyword: CSS reset.\u003C\u002Fstrong> Every browser ships with a default stylesheet, called the user agent stylesheet, that gives headings, lists, buttons and margins their first look. These defaults are slightly different between browsers. A CSS reset or a normalize stylesheet gives you a consistent and predictable base before you write your own styles. In this lesson you will learn the difference between reset and normalize, what a modern reset contains, how to write one in a cascade layer, and which defaults you should never remove.\u003C\u002Fp>\u003Ch3 id=\"trending-keywords-covered-in-this-lesson\">Trending keywords covered in this lesson\u003C\u002Fh3>\u003Cp>CSS reset, modern CSS reset, normalize.css, Eric Meyer reset, user agent stylesheet, box-sizing border-box, CSS reset 2026, reset vs normalize, text-wrap balance, text-wrap pretty, line-height reset, image max-width 100%, form elements inherit font, prefers-reduced-motion reset, @layer reset, :where() zero specificity, focus-visible, list-style accessibility, dvh min-height, text-size-adjust, cross-browser consistency.\u003C\u002Fp>\u003Ch2 id=\"1-the-browser-default-stylesheet\">1. The Browser Default Stylesheet\u003C\u002Fh2>\u003Cp>Open any page with no CSS and you still see styled content: headings are bold and large, paragraphs have margins, links are blue and underlined, the body has an 8px margin and lists have bullets and indentation. This is the \u003Cstrong>user agent stylesheet\u003C\u002Fstrong>. You can see it in DevTools in the Styles panel, labeled as user agent stylesheet. Because browsers differ in details, such as default margins for form controls or fonts in buttons, designs could look slightly different from one browser to another.\u003C\u002Fp>\u003Ch2 id=\"2-reset-vs-normalize-vs-modern-reset\">2. Reset vs Normalize vs Modern Reset\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>Classic reset (Eric Meyer):\u003C\u002Fstrong> removes almost all default styles: margins, padding, font sizes, list styles. Everything is a blank slate, so you must style every element yourself.\u003C\u002Fli>\u003Cli>\u003Cstrong>Normalize.css:\u003C\u002Fstrong> keeps useful defaults and fixes real browser inconsistencies and bugs. Headings stay bold, lists keep bullets, and only the differences are smoothed.\u003C\u002Fli>\u003Cli>\u003Cstrong>Modern reset:\u003C\u002Fstrong> a short, opinionated set of rules that removes only the defaults that cause layout trouble (box model, image sizing, form fonts, margins) and adds a few quality-of-life improvements. Popular examples are the modern resets published by Andy Bell and Josh Comeau. Since browsers are now far more consistent, most projects today choose this option.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"3-essential-rules-of-a-modern-reset\">3. Essential Rules of a Modern Reset\u003C\u002Fh2>\u003Col>\u003Cli>\u003Cstrong>Box sizing:\u003C\u002Fstrong> \u003Ccode>*, *::before, *::after { box-sizing: border-box; }\u003C\u002Fcode>. Padding and border are included in the width, so sizes are predictable.\u003C\u002Fli>\u003Cli>\u003Cstrong>Margins:\u003C\u002Fstrong> \u003Ccode>* { margin: 0; }\u003C\u002Fcode> (or only for headings, paragraphs and figures) so spacing comes from your own system, preferably with gap and logical properties.\u003C\u002Fli>\u003Cli>\u003Cstrong>Line height and text size:\u003C\u002Fstrong> \u003Ccode>body { line-height: 1.5; }\u003C\u002Fcode> for readable text, and \u003Ccode>html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }\u003C\u002Fcode> to stop mobile browsers from resizing text after rotation.\u003C\u002Fli>\u003Cli>\u003Cstrong>Media:\u003C\u002Fstrong> \u003Ccode>img, picture, video, canvas, svg { display: block; max-width: 100%; }\u003C\u002Fcode>. Block display removes the small gap under inline images and max-width keeps them inside their container. Add \u003Ccode>height: auto\u003C\u002Fcode> when images have width and height attributes.\u003C\u002Fli>\u003Cli>\u003Cstrong>Form controls:\u003C\u002Fstrong> \u003Ccode>input, button, textarea, select { font: inherit; color: inherit; }\u003C\u002Fcode> because browsers do not inherit fonts in form controls by default.\u003C\u002Fli>\u003Cli>\u003Cstrong>Text wrapping:\u003C\u002Fstrong> \u003Ccode>p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }\u003C\u002Fcode>, \u003Ccode>h1, h2, h3 { text-wrap: balance; }\u003C\u002Fcode> for even headline lines and \u003Ccode>p { text-wrap: pretty; }\u003C\u002Fcode> to avoid a single word on the last line. These are progressive enhancements.\u003C\u002Fli>\u003Cli>\u003Cstrong>Root stacking:\u003C\u002Fstrong> \u003Ccode>#root, #__next { isolation: isolate; }\u003C\u002Fcode> for single page apps, so z-index values of your page do not leak into overlays.\u003C\u002Fli>\u003Cli>\u003Cstrong>Reduced motion:\u003C\u002Fstrong> turn off animation for users who asked for it with \u003Ccode>@media (prefers-reduced-motion: reduce)\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Fol>\u003Ch2 id=\"4-put-the-reset-in-a-cascade-layer\">4. Put the Reset in a Cascade Layer\u003C\u002Fh2>\u003Cp>Declare a layer such as \u003Ccode>@layer reset, base, components, utilities;\u003C\u002Fcode> and place the reset in \u003Ccode>@layer reset\u003C\u002Fcode>. Because the reset is the first layer, every later rule wins over it no matter how specific the reset selector is. Use \u003Ccode>:where()\u003C\u002Fcode> to give selectors zero specificity, for example \u003Ccode>:where(h1, h2, h3) { margin: 0; }\u003C\u002Fcode>. Both techniques make a reset easy to override.\u003C\u002Fp>\u003Ch2 id=\"5-what-not-to-remove\">5. What Not to Remove\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>Focus outlines:\u003C\u002Fstrong> never use \u003Ccode>outline: none\u003C\u002Fcode> without a replacement. Keyboard users need to see where they are. Use \u003Ccode>:focus-visible\u003C\u002Fcode> to style keyboard focus only.\u003C\u002Fli>\u003Cli>\u003Cstrong>List semantics:\u003C\u002Fstrong> some screen readers stop announcing a list when \u003Ccode>list-style: none\u003C\u002Fcode> is applied. If you remove list markers on a navigation list, add \u003Ccode>role='list'\u003C\u002Fcode> to the ul.\u003C\u002Fli>\u003Cli>\u003Cstrong>Link underlines inside text:\u003C\u002Fstrong> links in paragraphs need more than color to be recognizable.\u003C\u002Fli>\u003Cli>\u003Cstrong>The hidden attribute:\u003C\u002Fstrong> keep \u003Ccode>[hidden] { display: none; }\u003C\u002Fcode> working and do not override it with a display rule.\u003C\u002Fli>\u003Cli>\u003Cstrong>Default font size:\u003C\u002Fstrong> do not set \u003Ccode>html { font-size: 10px }\u003C\u002Fcode>. Use percentages or leave it at 100% so user preferences are respected, and use rem in your styles.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"6-performance-note-on-the-universal-selector\">6. Performance Note on the Universal Selector\u003C\u002Fh2>\u003Cp>Using \u003Ccode>*\u003C\u002Fcode> for box-sizing and margin is safe and fast in modern browsers. The concern is about complex selectors such as \u003Ccode>body * *\u003C\u002Fcode> or heavy rules on every element. Keep your reset simple.\u003C\u002Fp>\u003Ch2 id=\"7-using-normalizecss-or-a-library\">7. Using normalize.css or a Library\u003C\u002Fh2>\u003Cp>You can install normalize.css or a modern reset package and import it into the first layer with \u003Ccode>@import url('normalize.css') layer(reset);\u003C\u002Fcode>. A framework such as Tailwind ships its own base layer, called Preflight, which is a modern reset, so you usually do not need a second reset on top of it. Avoid stacking several resets, because rules can conflict.\u003C\u002Fp>\u003Ch2 id=\"8-suggested-project-order\">8. Suggested Project Order\u003C\u002Fh2>\u003Col>\u003Cli>Declare the layer order.\u003C\u002Fli>\u003Cli>Add the reset layer.\u003C\u002Fli>\u003Cli>Add the base layer: variables, typography, link and heading styles, focus styles.\u003C\u002Fli>\u003Cli>Add layout, components and utilities.\u003C\u002Fli>\u003Cli>Test with default browser fonts, zoom, keyboard navigation and reduced motion enabled.\u003C\u002Fli>\u003C\u002Fol>\u003Ch2 id=\"9-common-mistakes\">9. Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Removing all outlines and breaking keyboard navigation.\u003C\u002Fli>\u003Cli>Stacking a classic reset, normalize and a framework reset at the same time.\u003C\u002Fli>\u003Cli>Setting a pixel font size on html and ignoring user preferences.\u003C\u002Fli>\u003Cli>Forgetting that form controls do not inherit the font family.\u003C\u002Fli>\u003Cli>Resetting margins on everything and not adding a consistent spacing system afterwards.\u003C\u002Fli>\u003Cli>Writing reset selectors with high specificity so they are hard to override.\u003C\u002Fli>\u003Cli>Using a reset that hides list semantics without a role.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh2>\u003Cp>A reset removes the defaults that get in your way, while normalize keeps the useful ones and fixes inconsistencies. A modern reset is small: border-box sizing, zero margins, readable line height, responsive media, inherited form fonts, balanced text wrapping and reduced motion support. Put it in the first cascade layer, keep specificity low with :where(), and never remove accessibility features such as focus outlines.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .col { display: flex; gap: 16px; flex-wrap: wrap; }\n  .col > div { flex: 1 1 240px; border: 1px dashed #888; padding: 8px; }\n  .reset * { margin: 0; padding: 0; }\n  .reset ul { list-style: none; }\n  .reset a { color: inherit; text-decoration: none; }\n  .reset h2 { font-size: 1rem; }\n<\u002Fstyle>\n<div class='col'>\n  <div><h2>Browser defaults<\u002Fh2><p>Paragraph with default margins.<\u002Fp><ul><li>Bullet item<\u002Fli><li>Another item<\u002Fli><\u002Ful><a href='#'>Default link<\u002Fa><\u002Fdiv>\n  <div class='reset'><h2>After a classic reset<\u002Fh2><p>Paragraph with no margin.<\u002Fp><ul><li>No bullet<\u002Fli><li>No indent<\u002Fli><\u002Ful><a href='#'>Plain link<\u002Fa><\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .wrap { display: flex; gap: 16px; flex-wrap: wrap; }\n  .box { width: 200px; padding: 20px; border: 6px solid #264653; background: #8ecae6; margin-bottom: 8px; }\n  .border-box { box-sizing: border-box; }\n<\u002Fstyle>\n<div class='wrap'>\n  <div><div class='box'>content-box: real width is 252px<\u002Fdiv><\u002Fdiv>\n  <div><div class='box border-box'>border-box: width stays 200px<\u002Fdiv><\u002Fdiv>\n<\u002Fdiv>\n<p>Reset rule: *, *::before, *::after { box-sizing: border-box; }<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  @layer reset, base, components;\n\n  @layer reset {\n    *, *::before, *::after { box-sizing: border-box; }\n    * { margin: 0; }\n    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }\n    body { line-height: 1.5; min-height: 100dvh; }\n    img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }\n    input, button, textarea, select { font: inherit; color: inherit; }\n    p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }\n    h1, h2, h3 { text-wrap: balance; }\n    p { text-wrap: pretty; }\n    [hidden] { display: none; }\n  }\n\n  @layer base {\n    body { font-family: system-ui, sans-serif; padding: 16px; }\n    h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3rem); }\n    p + p { margin-top: 1em; }\n  }\n<\u002Fstyle>\n<h1>A modern reset inside @layer reset<\u002Fh1>\n<p>Every later layer wins over the reset, so you can override it with a simple selector.<\u002Fp>\n<p hidden>This paragraph stays hidden.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: system-ui, sans-serif; padding: 16px; }\n  .col { display: flex; gap: 24px; flex-wrap: wrap; }\n  form { display: grid; gap: 8px; max-width: 280px; }\n  .serif { font-family: Georgia, serif; font-size: 20px; }\n  .inherit input, .inherit button, .inherit textarea, .inherit select { font: inherit; color: inherit; }\n<\u002Fstyle>\n<div class='col serif'>\n  <form><strong>Default controls<\u002Fstrong><input placeholder='Name'><select><option>Choose<\u002Foption><\u002Fselect><textarea placeholder='Message'><\u002Ftextarea><button>Send<\u002Fbutton><\u002Fform>\n  <form class='inherit'><strong>font: inherit<\u002Fstrong><input placeholder='Name'><select><option>Choose<\u002Foption><\u002Fselect><textarea placeholder='Message'><\u002Ftextarea><button>Send<\u002Fbutton><\u002Fform>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  @layer reset, base;\n  @layer reset {\n    *, *::before, *::after { box-sizing: border-box; }\n    @media (prefers-reduced-motion: reduce) {\n      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }\n    }\n  }\n  @layer base {\n    body { font: 18px system-ui, sans-serif; padding: 16px; }\n    :where(a, button, input, select, textarea):focus-visible { outline: 3px solid #ffb703; outline-offset: 3px; }\n    .btn { background: #0b5fff; color: #fff; border: 0; padding: 10px 18px; border-radius: 8px; transition: transform .2s; }\n    .btn:hover { transform: translateY(-3px); }\n    nav ul { list-style: none; display: flex; gap: 12px; padding: 0; }\n  }\n<\u002Fstyle>\n<button class='btn'>Press Tab to see the focus ring<\u002Fbutton>\n<nav aria-label='Main'><ul role='list'><li><a href='#'>Home<\u002Fa><\u002Fli><li><a href='#'>Blog<\u002Fa><\u002Fli><\u002Ful><\u002Fnav>\n<p>The focus ring stays, and animation is reduced for users who request it. The list keeps role='list' because list-style was removed.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  @layer reset, base;\n  @layer reset {\n    :where(h1, h2, h3, h4, p, figure, blockquote, ul, ol) { margin: 0; }\n    :where(h1, h2, h3) { text-wrap: balance; line-height: 1.15; }\n    :where(p) { text-wrap: pretty; line-height: 1.6; max-width: 65ch; }\n  }\n  @layer base {\n    body { font-family: system-ui, sans-serif; padding: 16px; }\n    h2 { margin-bottom: .5rem; }\n    p { margin-bottom: 1rem; }\n  }\n<\u002Fstyle>\n<h2>Balanced headlines make short lines look even and calm<\u002Fh2>\n<p>Zero specificity selectors with :where() are easy to override, and the pretty wrapping setting avoids a lonely word on the last line of a paragraph in browsers that support it.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-javascript\">\u003Cpre>\u003Ccode>const resetChecklist = [\n  { rule: 'box-sizing: border-box', why: 'Predictable widths' },\n  { rule: 'margin: 0 on elements', why: 'Spacing comes from your own system' },\n  { rule: 'line-height: 1.5 on body', why: 'Readable text' },\n  { rule: 'img { display: block; max-width: 100% }', why: 'Responsive media, no gap under images' },\n  { rule: 'form controls: font: inherit', why: 'Same font as the page' },\n  { rule: 'prefers-reduced-motion support', why: 'Accessibility' },\n  { rule: 'Keep :focus-visible outlines', why: 'Keyboard navigation' }\n];\n\nresetChecklist.forEach(function (item) {\n  console.log('[x] ' + item.rule + ' -> ' + item.why);\n});\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":335,"slug":336},{"name":559,"slug":560},{"slug":676,"display_name":677,"job_title":5,"short_bio":5,"expertise_tags":678,"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":679,"posts":680},"badar-khalil","Badar Khalil",[],[],[],"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fcss-reset-and-normalize","CSS Reset & Normalize: Modern Reset, box-sizing and Best Practices","Learn CSS reset and normalize: browser default styles, Eric Meyer reset, normalize.css, a modern CSS reset with box-sizing, images, forms and accessibility in @layer.",[686,694,698,702,706,710,714,718,722,726,730],{"id":687,"text":688,"level":23,"children":689},"css-reset-and-normalize-build-a-solid-starting-point","CSS Reset and Normalize: Build a Solid Starting Point",[690],{"id":691,"text":692,"level":31,"children":693},"trending-keywords-covered-in-this-lesson","Trending keywords covered in this lesson",[],{"id":695,"text":696,"level":23,"children":697},"1-the-browser-default-stylesheet","1. The Browser Default Stylesheet",[],{"id":699,"text":700,"level":23,"children":701},"2-reset-vs-normalize-vs-modern-reset","2. Reset vs Normalize vs Modern Reset",[],{"id":703,"text":704,"level":23,"children":705},"3-essential-rules-of-a-modern-reset","3. Essential Rules of a Modern Reset",[],{"id":707,"text":708,"level":23,"children":709},"4-put-the-reset-in-a-cascade-layer","4. Put the Reset in a Cascade Layer",[],{"id":711,"text":712,"level":23,"children":713},"5-what-not-to-remove","5. What Not to Remove",[],{"id":715,"text":716,"level":23,"children":717},"6-performance-note-on-the-universal-selector","6. Performance Note on the Universal Selector",[],{"id":719,"text":720,"level":23,"children":721},"7-using-normalizecss-or-a-library","7. Using normalize.css or a Library",[],{"id":723,"text":724,"level":23,"children":725},"8-suggested-project-order","8. Suggested Project Order",[],{"id":727,"text":728,"level":23,"children":729},"9-common-mistakes","9. Common Mistakes",[],{"id":731,"text":732,"level":23,"children":733},"key-takeaways","Key Takeaways",[],[735,739,742,745,748,751,754],{"id":736,"language":652,"code":737,"is_editable":738},523,"\u003Cstyle>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .col { display: flex; gap: 16px; flex-wrap: wrap; }\n  .col > div { flex: 1 1 240px; border: 1px dashed #888; padding: 8px; }\n  .reset * { margin: 0; padding: 0; }\n  .reset ul { list-style: none; }\n  .reset a { color: inherit; text-decoration: none; }\n  .reset h2 { font-size: 1rem; }\n\u003C\u002Fstyle>\n\u003Cdiv class='col'>\n  \u003Cdiv>\u003Ch2>Browser defaults\u003C\u002Fh2>\u003Cp>Paragraph with default margins.\u003C\u002Fp>\u003Cul>\u003Cli>Bullet item\u003C\u002Fli>\u003Cli>Another item\u003C\u002Fli>\u003C\u002Ful>\u003Ca href='#'>Default link\u003C\u002Fa>\u003C\u002Fdiv>\n  \u003Cdiv class='reset'>\u003Ch2>After a classic reset\u003C\u002Fh2>\u003Cp>Paragraph with no margin.\u003C\u002Fp>\u003Cul>\u003Cli>No bullet\u003C\u002Fli>\u003Cli>No indent\u003C\u002Fli>\u003C\u002Ful>\u003Ca href='#'>Plain link\u003C\u002Fa>\u003C\u002Fdiv>\n\u003C\u002Fdiv>",true,{"id":740,"language":652,"code":741,"is_editable":738},524,"\u003Cstyle>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .wrap { display: flex; gap: 16px; flex-wrap: wrap; }\n  .box { width: 200px; padding: 20px; border: 6px solid #264653; background: #8ecae6; margin-bottom: 8px; }\n  .border-box { box-sizing: border-box; }\n\u003C\u002Fstyle>\n\u003Cdiv class='wrap'>\n  \u003Cdiv>\u003Cdiv class='box'>content-box: real width is 252px\u003C\u002Fdiv>\u003C\u002Fdiv>\n  \u003Cdiv>\u003Cdiv class='box border-box'>border-box: width stays 200px\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>Reset rule: *, *::before, *::after { box-sizing: border-box; }\u003C\u002Fp>",{"id":743,"language":652,"code":744,"is_editable":738},525,"\u003Cstyle>\n  @layer reset, base, components;\n\n  @layer reset {\n    *, *::before, *::after { box-sizing: border-box; }\n    * { margin: 0; }\n    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }\n    body { line-height: 1.5; min-height: 100dvh; }\n    img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }\n    input, button, textarea, select { font: inherit; color: inherit; }\n    p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }\n    h1, h2, h3 { text-wrap: balance; }\n    p { text-wrap: pretty; }\n    [hidden] { display: none; }\n  }\n\n  @layer base {\n    body { font-family: system-ui, sans-serif; padding: 16px; }\n    h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3rem); }\n    p + p { margin-top: 1em; }\n  }\n\u003C\u002Fstyle>\n\u003Ch1>A modern reset inside @layer reset\u003C\u002Fh1>\n\u003Cp>Every later layer wins over the reset, so you can override it with a simple selector.\u003C\u002Fp>\n\u003Cp hidden>This paragraph stays hidden.\u003C\u002Fp>",{"id":746,"language":652,"code":747,"is_editable":738},526,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; padding: 16px; }\n  .col { display: flex; gap: 24px; flex-wrap: wrap; }\n  form { display: grid; gap: 8px; max-width: 280px; }\n  .serif { font-family: Georgia, serif; font-size: 20px; }\n  .inherit input, .inherit button, .inherit textarea, .inherit select { font: inherit; color: inherit; }\n\u003C\u002Fstyle>\n\u003Cdiv class='col serif'>\n  \u003Cform>\u003Cstrong>Default controls\u003C\u002Fstrong>\u003Cinput placeholder='Name'>\u003Cselect>\u003Coption>Choose\u003C\u002Foption>\u003C\u002Fselect>\u003Ctextarea placeholder='Message'>\u003C\u002Ftextarea>\u003Cbutton>Send\u003C\u002Fbutton>\u003C\u002Fform>\n  \u003Cform class='inherit'>\u003Cstrong>font: inherit\u003C\u002Fstrong>\u003Cinput placeholder='Name'>\u003Cselect>\u003Coption>Choose\u003C\u002Foption>\u003C\u002Fselect>\u003Ctextarea placeholder='Message'>\u003C\u002Ftextarea>\u003Cbutton>Send\u003C\u002Fbutton>\u003C\u002Fform>\n\u003C\u002Fdiv>",{"id":749,"language":652,"code":750,"is_editable":738},527,"\u003Cstyle>\n  @layer reset, base;\n  @layer reset {\n    *, *::before, *::after { box-sizing: border-box; }\n    @media (prefers-reduced-motion: reduce) {\n      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }\n    }\n  }\n  @layer base {\n    body { font: 18px system-ui, sans-serif; padding: 16px; }\n    :where(a, button, input, select, textarea):focus-visible { outline: 3px solid #ffb703; outline-offset: 3px; }\n    .btn { background: #0b5fff; color: #fff; border: 0; padding: 10px 18px; border-radius: 8px; transition: transform .2s; }\n    .btn:hover { transform: translateY(-3px); }\n    nav ul { list-style: none; display: flex; gap: 12px; padding: 0; }\n  }\n\u003C\u002Fstyle>\n\u003Cbutton class='btn'>Press Tab to see the focus ring\u003C\u002Fbutton>\n\u003Cnav aria-label='Main'>\u003Cul role='list'>\u003Cli>\u003Ca href='#'>Home\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href='#'>Blog\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fnav>\n\u003Cp>The focus ring stays, and animation is reduced for users who request it. The list keeps role='list' because list-style was removed.\u003C\u002Fp>",{"id":752,"language":652,"code":753,"is_editable":738},528,"\u003Cstyle>\n  @layer reset, base;\n  @layer reset {\n    :where(h1, h2, h3, h4, p, figure, blockquote, ul, ol) { margin: 0; }\n    :where(h1, h2, h3) { text-wrap: balance; line-height: 1.15; }\n    :where(p) { text-wrap: pretty; line-height: 1.6; max-width: 65ch; }\n  }\n  @layer base {\n    body { font-family: system-ui, sans-serif; padding: 16px; }\n    h2 { margin-bottom: .5rem; }\n    p { margin-bottom: 1rem; }\n  }\n\u003C\u002Fstyle>\n\u003Ch2>Balanced headlines make short lines look even and calm\u003C\u002Fh2>\n\u003Cp>Zero specificity selectors with :where() are easy to override, and the pretty wrapping setting avoids a lonely word on the last line of a paragraph in browsers that support it.\u003C\u002Fp>",{"id":755,"language":756,"code":757,"is_editable":738},529,"javascript","const resetChecklist = [\n  { rule: 'box-sizing: border-box', why: 'Predictable widths' },\n  { rule: 'margin: 0 on elements', why: 'Spacing comes from your own system' },\n  { rule: 'line-height: 1.5 on body', why: 'Readable text' },\n  { rule: 'img { display: block; max-width: 100% }', why: 'Responsive media, no gap under images' },\n  { rule: 'form controls: font: inherit', why: 'Same font as the page' },\n  { rule: 'prefers-reduced-motion support', why: 'Accessibility' },\n  { rule: 'Keep :focus-visible outlines', why: 'Keyboard navigation' }\n];\n\nresetChecklist.forEach(function (item) {\n  console.log('[x] ' + item.rule + ' -> ' + item.why);\n});",[759,766],{"id":760,"title":761,"slug":762,"prompt":763,"starter_code":764,"expected_output":765,"language":652,"order_index":9},191,"Write a Modern Reset in a Layer","write-modern-reset-in-layer","Write a short modern reset inside @layer reset with these rules: border-box sizing for all elements, zero margins, body line-height 1.5, images and videos as block elements that never exceed their container, and form controls inheriting font and color. Declare the layer order first.","\u003Cstyle>\n  \u002F* declare your layers and write the reset here *\u002F\n  body { font-family: Georgia, serif; }\n\u003C\u002Fstyle>\n\u003Ch1>Title\u003C\u002Fh1>\n\u003Cp>Paragraph text.\u003C\u002Fp>\n\u003Cinput placeholder='Type here'> \u003Cbutton>Send\u003C\u002Fbutton>","A layer order statement, then an @layer reset block containing box-sizing, margin, line-height, img and video rules and font: inherit for input, button, textarea and select",{"id":767,"title":768,"slug":769,"prompt":770,"starter_code":771,"expected_output":772,"language":652,"order_index":23},192,"Fix Form Controls and Focus Styles","fix-form-controls-and-focus","The form controls use a different font than the page and the focus outline was removed. Make the controls inherit the page font and color, remove the outline: none rule, and add a visible :focus-visible outline instead.","\u003Cstyle>\n  body { font: 20px Georgia, serif; padding: 16px; }\n  input, button, select { outline: none; }\n  form { display: grid; gap: 8px; max-width: 260px; }\n\u003C\u002Fstyle>\n\u003Cform>\u003Cinput placeholder='Email'>\u003Cselect>\u003Coption>Plan\u003C\u002Foption>\u003C\u002Fselect>\u003Cbutton>Subscribe\u003C\u002Fbutton>\u003C\u002Fform>","Controls use font: inherit and color: inherit, outline: none is removed, and a :focus-visible rule gives a clear outline","2026-09-30T18:26:43+00:00",{"id":579,"slug":581,"title":580},{"id":591,"slug":593,"title":592}]