[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"course-tree":35,"topic:css-comments-and-code-formatting":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,14,19,25,30],{"name":9,"slug":10,"description":11,"post_count":12,"subcategories":13},"CSS","css","Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",2,[],{"name":15,"slug":16,"description":17,"post_count":12,"subcategories":18},"HTML","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":20,"slug":21,"description":22,"post_count":23,"subcategories":24},"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.",1,[],{"name":26,"slug":27,"description":28,"post_count":23,"subcategories":29},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":31,"slug":32,"description":33,"post_count":23,"subcategories":34},"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":36},[37,360],{"id":23,"name":15,"slug":38,"icon":5,"icon_url":5,"short_description":39,"meta_title":40,"meta_description":41,"og_image":42,"locale":43,"subcategories":44},"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",[45,72,108,132,208,242,256,284,308,324],{"id":23,"name":46,"slug":47,"order_index":23,"topics":48},"HTML Fundamentals & Setup","html-fundamentals-setup",[49,53,56,60,64,68],{"id":12,"title":50,"slug":51,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",false,{"id":23,"title":54,"slug":55,"order_index":23,"cornerstone":52,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",{"id":57,"title":58,"slug":59,"order_index":57,"cornerstone":52,"reading_time_minutes":12},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":61,"title":62,"slug":63,"order_index":61,"cornerstone":52,"reading_time_minutes":12},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":65,"title":66,"slug":67,"order_index":65,"cornerstone":52,"reading_time_minutes":12},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":69,"title":70,"slug":71,"order_index":69,"cornerstone":52,"reading_time_minutes":12},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":12,"name":73,"slug":74,"order_index":12,"topics":75},"Text & Content Basics","text-content-basics",[76,80,84,88,92,96,100,104],{"id":77,"title":78,"slug":79,"order_index":77,"cornerstone":52,"reading_time_minutes":12},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":81,"title":82,"slug":83,"order_index":81,"cornerstone":52,"reading_time_minutes":12},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":85,"title":86,"slug":87,"order_index":85,"cornerstone":52,"reading_time_minutes":23},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":89,"title":90,"slug":91,"order_index":89,"cornerstone":52,"reading_time_minutes":12},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":93,"title":94,"slug":95,"order_index":93,"cornerstone":52,"reading_time_minutes":12},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":97,"title":98,"slug":99,"order_index":97,"cornerstone":52,"reading_time_minutes":12},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":101,"title":102,"slug":103,"order_index":101,"cornerstone":52,"reading_time_minutes":12},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":105,"title":106,"slug":107,"order_index":105,"cornerstone":52,"reading_time_minutes":12},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":57,"name":109,"slug":110,"order_index":57,"topics":111},"Links, Media & Navigation","links-media-navigation",[112,116,120,124,128],{"id":113,"title":114,"slug":115,"order_index":113,"cornerstone":52,"reading_time_minutes":12},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":117,"title":118,"slug":119,"order_index":117,"cornerstone":52,"reading_time_minutes":12},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":121,"title":122,"slug":123,"order_index":121,"cornerstone":52,"reading_time_minutes":23},17,"HTML Favicon Setup","html-favicon-setup",{"id":125,"title":126,"slug":127,"order_index":125,"cornerstone":52,"reading_time_minutes":12},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":129,"title":130,"slug":131,"order_index":129,"cornerstone":52,"reading_time_minutes":12},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":61,"name":133,"slug":134,"order_index":61,"topics":135},"Structuring Content","structuring-content",[136,141,146,151,156,160,164,168,172,176,180,184,188,192,196,200,204],{"id":137,"title":138,"slug":139,"order_index":140,"cornerstone":52,"reading_time_minutes":12},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":142,"title":143,"slug":144,"order_index":145,"cornerstone":52,"reading_time_minutes":12},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":147,"title":148,"slug":149,"order_index":150,"cornerstone":52,"reading_time_minutes":12},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":152,"title":153,"slug":154,"order_index":155,"cornerstone":52,"reading_time_minutes":23},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":157,"title":158,"slug":159,"order_index":137,"cornerstone":52,"reading_time_minutes":12},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":161,"title":162,"slug":163,"order_index":142,"cornerstone":52,"reading_time_minutes":23},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":165,"title":166,"slug":167,"order_index":147,"cornerstone":52,"reading_time_minutes":12},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":169,"title":170,"slug":171,"order_index":152,"cornerstone":52,"reading_time_minutes":12},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":173,"title":174,"slug":175,"order_index":157,"cornerstone":52,"reading_time_minutes":12},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":177,"title":178,"slug":179,"order_index":161,"cornerstone":52,"reading_time_minutes":57},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":181,"title":182,"slug":183,"order_index":165,"cornerstone":52,"reading_time_minutes":12},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":185,"title":186,"slug":187,"order_index":169,"cornerstone":52,"reading_time_minutes":12},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":189,"title":190,"slug":191,"order_index":173,"cornerstone":52,"reading_time_minutes":23},77,"HTML Symbols","html-symbols",{"id":193,"title":194,"slug":195,"order_index":193,"cornerstone":52,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":197,"title":198,"slug":199,"order_index":197,"cornerstone":52,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":201,"title":202,"slug":203,"order_index":201,"cornerstone":52,"reading_time_minutes":23},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":205,"title":206,"slug":207,"order_index":205,"cornerstone":52,"reading_time_minutes":23},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":77,"name":209,"slug":210,"order_index":65,"topics":211},"Forms & User Input","forms-user-input",[212,217,222,227,232,237],{"id":213,"title":214,"slug":215,"order_index":216,"cornerstone":52,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":218,"title":219,"slug":220,"order_index":221,"cornerstone":52,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":223,"title":224,"slug":225,"order_index":226,"cornerstone":52,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":228,"title":229,"slug":230,"order_index":231,"cornerstone":52,"reading_time_minutes":12},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":233,"title":234,"slug":235,"order_index":236,"cornerstone":52,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":238,"title":239,"slug":240,"order_index":241,"cornerstone":52,"reading_time_minutes":12},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":81,"name":243,"slug":244,"order_index":69,"topics":245},"Graphics & Visuals","graphics-visuals",[246,251],{"id":247,"title":248,"slug":249,"order_index":250,"cornerstone":52,"reading_time_minutes":57},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":252,"title":253,"slug":254,"order_index":255,"cornerstone":52,"reading_time_minutes":57},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":85,"name":257,"slug":258,"order_index":77,"topics":259},"Multimedia","multimedia",[260,265,270,275,280],{"id":261,"title":262,"slug":263,"order_index":264,"cornerstone":52,"reading_time_minutes":12},57,"HTML Media Overview","html-media-overview",45,{"id":266,"title":267,"slug":268,"order_index":269,"cornerstone":52,"reading_time_minutes":12},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":271,"title":272,"slug":273,"order_index":274,"cornerstone":52,"reading_time_minutes":12},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":276,"title":277,"slug":278,"order_index":279,"cornerstone":52,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":281,"title":282,"slug":283,"order_index":213,"cornerstone":52,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":89,"name":285,"slug":286,"order_index":81,"topics":287},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[288,292,296,300,304],{"id":289,"title":290,"slug":291,"order_index":218,"cornerstone":52,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":293,"title":294,"slug":295,"order_index":223,"cornerstone":52,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":297,"title":298,"slug":299,"order_index":228,"cornerstone":52,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":301,"title":302,"slug":303,"order_index":233,"cornerstone":52,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":305,"title":306,"slug":307,"order_index":238,"cornerstone":52,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":93,"name":309,"slug":310,"order_index":85,"topics":311},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[312,316,320],{"id":313,"title":314,"slug":315,"order_index":247,"cornerstone":52,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":317,"title":318,"slug":319,"order_index":252,"cornerstone":52,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":321,"title":322,"slug":323,"order_index":261,"cornerstone":52,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":97,"name":325,"slug":326,"order_index":89,"topics":327},"Reference & Practice","reference-practice",[328,332,336,340,344,348,352,356],{"id":329,"title":330,"slug":331,"order_index":23,"cornerstone":52,"reading_time_minutes":12},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":333,"title":334,"slug":335,"order_index":12,"cornerstone":52,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":337,"title":338,"slug":339,"order_index":57,"cornerstone":52,"reading_time_minutes":12},72,"HTML Events Reference","html-events-reference",{"id":341,"title":342,"slug":343,"order_index":61,"cornerstone":52,"reading_time_minutes":12},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":345,"title":346,"slug":347,"order_index":65,"cornerstone":52,"reading_time_minutes":12},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":349,"title":350,"slug":351,"order_index":69,"cornerstone":52,"reading_time_minutes":12},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":353,"title":354,"slug":355,"order_index":77,"cornerstone":52,"reading_time_minutes":57},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":357,"title":358,"slug":359,"order_index":81,"cornerstone":52,"reading_time_minutes":23},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":12,"name":9,"slug":10,"icon":5,"icon_url":5,"short_description":361,"meta_title":362,"meta_description":363,"og_image":5,"locale":43,"subcategories":364},"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.",[365,390,422],{"id":101,"name":366,"slug":367,"order_index":368,"topics":369},"CSS Fundamentals & Setup","css-fundamentals-setup",0,[370,374,378,382,386],{"id":371,"title":372,"slug":373,"order_index":23,"cornerstone":52,"reading_time_minutes":61},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":375,"title":376,"slug":377,"order_index":12,"cornerstone":52,"reading_time_minutes":61},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":379,"title":380,"slug":381,"order_index":57,"cornerstone":52,"reading_time_minutes":57},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":383,"title":384,"slug":385,"order_index":61,"cornerstone":52,"reading_time_minutes":57},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":387,"title":388,"slug":389,"order_index":65,"cornerstone":52,"reading_time_minutes":65},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":113,"name":391,"slug":392,"order_index":368,"topics":393},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[394,398,402,406,410,414,418],{"id":395,"title":396,"slug":397,"order_index":105,"cornerstone":52,"reading_time_minutes":65},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":399,"title":400,"slug":401,"order_index":113,"cornerstone":52,"reading_time_minutes":61},96,"CSS Backgrounds","css-backgrounds",{"id":403,"title":404,"slug":405,"order_index":117,"cornerstone":52,"reading_time_minutes":65},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":407,"title":408,"slug":409,"order_index":121,"cornerstone":52,"reading_time_minutes":65},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":411,"title":412,"slug":413,"order_index":125,"cornerstone":52,"reading_time_minutes":69},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":415,"title":416,"slug":417,"order_index":129,"cornerstone":52,"reading_time_minutes":65},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":419,"title":420,"slug":421,"order_index":140,"cornerstone":52,"reading_time_minutes":69},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":105,"name":423,"slug":424,"order_index":368,"topics":425},"Selectors & the Cascade","selectors-the-cascade",[426,430,434,438,442,446,450,454],{"id":427,"title":428,"slug":429,"order_index":69,"cornerstone":52,"reading_time_minutes":61},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":431,"title":432,"slug":433,"order_index":77,"cornerstone":52,"reading_time_minutes":61},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":435,"title":436,"slug":437,"order_index":81,"cornerstone":52,"reading_time_minutes":61},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":439,"title":440,"slug":441,"order_index":85,"cornerstone":52,"reading_time_minutes":69},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":443,"title":444,"slug":445,"order_index":89,"cornerstone":52,"reading_time_minutes":65},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":447,"title":448,"slug":449,"order_index":93,"cornerstone":52,"reading_time_minutes":65},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":451,"title":452,"slug":453,"order_index":97,"cornerstone":52,"reading_time_minutes":61},93,"CSS Specificity Explained","css-specificity-explained",{"id":455,"title":456,"slug":457,"order_index":101,"cornerstone":52,"reading_time_minutes":65},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"data":459},{"id":383,"title":384,"slug":385,"content":460,"course":461,"subcategory":462,"author":463,"reading_time_minutes":57,"cornerstone":52,"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":514,"quiz":5,"exercises":531,"published_at":5,"updated_at":538,"prev":539,"next":540},"\u003Ch2 id=\"css-comments-syntax-and-purpose\">CSS Comments: Syntax and Purpose\u003C\u002Fh2>\u003Cp>\u003Cstrong>CSS comments\u003C\u002Fstrong> are notes in your stylesheet that the browser ignores. They explain your code, organize sections and let you temporarily disable rules. Clean commenting and consistent formatting make your CSS readable, debuggable and team-friendly.\u003C\u002Fp>\u003Ch2 id=\"css-comment-syntax\">CSS Comment Syntax\u003C\u002Fh2>\u003Cp>CSS has only one comment style: it starts with a slash and an asterisk, and ends with an asterisk and a slash. Comments can span one or many lines.\u003C\u002Fp>\u003Cp>\u003Cstrong>Important:\u003C\u002Fstrong> CSS does \u003Cem>not\u003C\u002Fem> support the double-slash (\u002F\u002F) comment used in JavaScript. Using \u002F\u002F in plain CSS will break the rule that follows it. (Preprocessors such as Sass and SCSS do allow \u002F\u002F comments, but they are compiled away.)\u003C\u002Fp>\u003Ch2 id=\"when-to-use-comments\">When to Use Comments\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>Section headers\u003C\u002Fstrong> - divide the file into logical parts (Base, Layout, Components, Utilities).\u003C\u002Fli>\u003Cli>\u003Cstrong>Explaining why\u003C\u002Fstrong> - describe the reason for a hack, browser fix or magic number, not what the code obviously does.\u003C\u002Fli>\u003Cli>\u003Cstrong>Debugging\u003C\u002Fstrong> - comment out declarations to test the effect.\u003C\u002Fli>\u003Cli>\u003Cstrong>TODO and FIXME notes\u003C\u002Fstrong> - mark work that needs attention.\u003C\u002Fli>\u003Cli>\u003Cstrong>Documentation\u003C\u002Fstrong> - describe variables, components and states for teammates.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"when-not-to-comment\">When NOT to Comment\u003C\u002Fh2>\u003Cul>\u003Cli>Do not restate the obvious, such as a comment 'sets color to red' above color: red.\u003C\u002Fli>\u003Cli>Do not leave large blocks of dead, commented-out code in production.\u003C\u002Fli>\u003Cli>Do not put sensitive information in comments: CSS files are public.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"nested-comments-do-not-work\">Nested Comments Do Not Work\u003C\u002Fh2>\u003Cp>A comment ends at the first closing marker it finds. So you cannot nest one comment inside another; remove or rearrange inner comments before commenting out a large block.\u003C\u002Fp>\u003Ch2 id=\"css-code-formatting-best-practices\">CSS Code Formatting Best Practices\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>One selector and one declaration per line\u003C\u002Fstrong> for readability and clean version-control diffs.\u003C\u002Fli>\u003Cli>\u003Cstrong>Consistent indentation\u003C\u002Fstrong> - 2 spaces is the most common convention (or 4). Pick one.\u003C\u002Fli>\u003Cli>\u003Cstrong>Space after the colon\u003C\u002Fstrong> and before the opening brace.\u003C\u002Fli>\u003Cli>\u003Cstrong>Always end declarations with a semicolon.\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>Lowercase\u003C\u002Fstrong> for selectors, properties and hex colors, and kebab-case for class names (main-nav, not MainNav).\u003C\u002Fli>\u003Cli>\u003Cstrong>Use meaningful class names\u003C\u002Fstrong> that describe purpose, not appearance (.alert-error rather than .red-box).\u003C\u002Fli>\u003Cli>\u003Cstrong>Group related properties\u003C\u002Fstrong> (layout, box model, typography, visual, misc) in a consistent order.\u003C\u002Fli>\u003Cli>\u003Cstrong>Leave a blank line between rules.\u003C\u002Fstrong>\u003C\u002Fli>\u003Cli>\u003Cstrong>Use shorthand where clear\u003C\u002Fstrong>, for example margin: 10px 20px.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"naming-conventions-bem\">Naming Conventions: BEM\u003C\u002Fh2>\u003Cp>\u003Cstrong>BEM (Block, Element, Modifier)\u003C\u002Fstrong> is a popular naming method: \u003Ccode>.card\u003C\u002Fcode> (block), \u003Ccode>.card__title\u003C\u002Fcode> (element), \u003Ccode>.card--featured\u003C\u002Fcode> (modifier). It keeps specificity low and avoids naming collisions.\u003C\u002Fp>\u003Ch2 id=\"organizing-a-stylesheet\">Organizing a Stylesheet\u003C\u002Fh2>\u003Col>\u003Cli>Variables and custom properties (:root)\u003C\u002Fli>\u003Cli>Reset or base styles\u003C\u002Fli>\u003Cli>Layout (containers, grid, header, footer)\u003C\u002Fli>\u003Cli>Components (buttons, cards, forms)\u003C\u002Fli>\u003Cli>Utilities (helpers such as .visually-hidden)\u003C\u002Fli>\u003Cli>Media queries and dark-mode overrides\u003C\u002Fli>\u003C\u002Fol>\u003Ch2 id=\"automatic-formatting-and-linting-tools\">Automatic Formatting and Linting Tools\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>Prettier\u003C\u002Fstrong> - formats CSS automatically on save.\u003C\u002Fli>\u003Cli>\u003Cstrong>Stylelint\u003C\u002Fstrong> - detects errors, duplicate properties and enforces your style rules.\u003C\u002Fli>\u003Cli>\u003Cstrong>EditorConfig\u003C\u002Fstrong> - keeps indentation consistent across editors.\u003C\u002Fli>\u003Cli>\u003Cstrong>Minification\u003C\u002Fstrong> - production builds remove comments and whitespace to reduce file size, so write freely in development.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh2>\u003Cul>\u003Cli>CSS comments use the slash-asterisk syntax only.\u003C\u002Fli>\u003Cli>Comment the why, not the what.\u003C\u002Fli>\u003Cli>Format consistently: indentation, one declaration per line, kebab-case names.\u003C\u002Fli>\u003Cli>Use Prettier and Stylelint to automate quality.\u003C\u002Fli>\u003C\u002Ful>\u003Cdiv class=\"try-it-yourself language-css\">\u003Cpre>\u003Ccode>\u002F* This is a single-line CSS comment *\u002F\n\n\u002F*\n  This is a multi-line comment.\n  Use it for longer explanations.\n*\u002F\n\nh1 {\n  color: navy; \u002F* inline comment after a declaration *\u002F\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  p {\n    color: green;\n    \u002F* font-size: 40px; *\u002F\n    \u002F* Uncomment the line above to see the effect *\u002F\n  }\n<\u002Fstyle>\n<p>Comment out the font-size line to disable it, then remove the comment markers to enable it.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-css\">\u003Cpre>\u003Ccode>\u002F* ==========================================\n   1. VARIABLES\n   ========================================== *\u002F\n:root {\n  --primary: #0d6efd;\n  --text: #222;\n  --space: 16px;\n}\n\n\u002F* ==========================================\n   2. BASE\n   ========================================== *\u002F\nbody {\n  color: var(--text);\n  margin: 0;\n}\n\n\u002F* ==========================================\n   3. COMPONENTS\n   ========================================== *\u002F\n.btn {\n  padding: var(--space);\n  background: var(--primary);\n  color: white;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-css\">\u003Cpre>\u003Ccode>\u002F* BAD: hard to read *\u002F\n.Card{color:red;background:#FFF;margin:0 auto;padding:10px}\n\n\u002F* GOOD: clean and consistent *\u002F\n.card {\n  margin: 0 auto;\n  padding: 10px;\n  color: red;\n  background: #fff;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .card { border: 1px solid #ccc; padding: 16px; max-width: 280px; font-family: sans-serif; }\n  .card__title { margin: 0 0 8px; font-size: 20px; }\n  .card__text { margin: 0; color: #555; }\n  .card--featured { border-color: gold; background: #fffbe6; }\n<\u002Fstyle>\n<div class='card card--featured'>\n  <h3 class='card__title'>BEM Card<\u002Fh3>\n  <p class='card__text'>Block, Element, Modifier naming keeps CSS predictable.<\u002Fp>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":9,"slug":10},{"name":366,"slug":367},{"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\u002Fcss-comments-and-code-formatting","CSS Comments & Code Formatting: Clean CSS Best Practices","Learn how to write CSS comments and format CSS code cleanly: syntax, naming conventions, BEM, property order, Prettier and Stylelint.",[474,478,482,486,490,494,498,502,506,510],{"id":475,"text":476,"level":12,"children":477},"css-comments-syntax-and-purpose","CSS Comments: Syntax and Purpose",[],{"id":479,"text":480,"level":12,"children":481},"css-comment-syntax","CSS Comment Syntax",[],{"id":483,"text":484,"level":12,"children":485},"when-to-use-comments","When to Use Comments",[],{"id":487,"text":488,"level":12,"children":489},"when-not-to-comment","When NOT to Comment",[],{"id":491,"text":492,"level":12,"children":493},"nested-comments-do-not-work","Nested Comments Do Not Work",[],{"id":495,"text":496,"level":12,"children":497},"css-code-formatting-best-practices","CSS Code Formatting Best Practices",[],{"id":499,"text":500,"level":12,"children":501},"naming-conventions-bem","Naming Conventions: BEM",[],{"id":503,"text":504,"level":12,"children":505},"organizing-a-stylesheet","Organizing a Stylesheet",[],{"id":507,"text":508,"level":12,"children":509},"automatic-formatting-and-linting-tools","Automatic Formatting and Linting Tools",[],{"id":511,"text":512,"level":12,"children":513},"key-takeaways","Key Takeaways",[],[515,519,522,525,528],{"id":516,"language":10,"code":517,"is_editable":518},200,"\u002F* This is a single-line CSS comment *\u002F\n\n\u002F*\n  This is a multi-line comment.\n  Use it for longer explanations.\n*\u002F\n\nh1 {\n  color: navy; \u002F* inline comment after a declaration *\u002F\n}",true,{"id":520,"language":16,"code":521,"is_editable":518},201,"\u003Cstyle>\n  p {\n    color: green;\n    \u002F* font-size: 40px; *\u002F\n    \u002F* Uncomment the line above to see the effect *\u002F\n  }\n\u003C\u002Fstyle>\n\u003Cp>Comment out the font-size line to disable it, then remove the comment markers to enable it.\u003C\u002Fp>",{"id":523,"language":10,"code":524,"is_editable":518},202,"\u002F* ==========================================\n   1. VARIABLES\n   ========================================== *\u002F\n:root {\n  --primary: #0d6efd;\n  --text: #222;\n  --space: 16px;\n}\n\n\u002F* ==========================================\n   2. BASE\n   ========================================== *\u002F\nbody {\n  color: var(--text);\n  margin: 0;\n}\n\n\u002F* ==========================================\n   3. COMPONENTS\n   ========================================== *\u002F\n.btn {\n  padding: var(--space);\n  background: var(--primary);\n  color: white;\n}",{"id":526,"language":10,"code":527,"is_editable":518},203,"\u002F* BAD: hard to read *\u002F\n.Card{color:red;background:#FFF;margin:0 auto;padding:10px}\n\n\u002F* GOOD: clean and consistent *\u002F\n.card {\n  margin: 0 auto;\n  padding: 10px;\n  color: red;\n  background: #fff;\n}",{"id":529,"language":16,"code":530,"is_editable":518},204,"\u003Cstyle>\n  .card { border: 1px solid #ccc; padding: 16px; max-width: 280px; font-family: sans-serif; }\n  .card__title { margin: 0 0 8px; font-size: 20px; }\n  .card__text { margin: 0; color: #555; }\n  .card--featured { border-color: gold; background: #fffbe6; }\n\u003C\u002Fstyle>\n\u003Cdiv class='card card--featured'>\n  \u003Ch3 class='card__title'>BEM Card\u003C\u002Fh3>\n  \u003Cp class='card__text'>Block, Element, Modifier naming keeps CSS predictable.\u003C\u002Fp>\n\u003C\u002Fdiv>",[532],{"id":383,"title":533,"slug":534,"prompt":535,"starter_code":536,"expected_output":537,"language":10,"order_index":23},"Clean Up Messy CSS","clean-up-messy-css","Rewrite the messy CSS with one declaration per line, 2-space indentation, lowercase values, and add a comment above the rule that explains what it styles.","\u002F* Reformat this code *\u002F\n.Main-Nav{DISPLAY:flex;GAP:20PX;background:#FFF;padding:10px 20px}",".main-nav rule formatted across multiple lines with a descriptive comment.","2026-09-29T18:29:10+00:00",{"id":379,"slug":381,"title":380},{"id":387,"slug":389,"title":388}]