[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"topic:css-introduction-and-history":6,"blog-categories":94,"course-tree":118},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},{"id":8,"title":9,"slug":10,"content":11,"course":12,"subcategory":15,"author":18,"reading_time_minutes":24,"cornerstone":25,"schema_type":26,"faq_json":5,"video_url":5,"canonical_url":27,"meta_title":28,"meta_description":29,"og_image":5,"toc_json":30,"code_examples":68,"quiz":5,"exercises":80,"published_at":5,"updated_at":89,"prev":5,"next":90},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history","\u003Ch2 id=\"css-introduction-what-is-css\">CSS Introduction: What Is CSS?\u003C\u002Fh2>\u003Cp>\u003Cstrong>CSS (Cascading Style Sheets)\u003C\u002Fstrong> is the language used to describe the presentation of a web page. HTML defines the \u003Cem>structure and meaning\u003C\u002Fem> of content (headings, paragraphs, links, images), while CSS defines \u003Cem>how that content looks\u003C\u002Fem>: colors, fonts, spacing, layout, animation and responsive behavior. This \u003Cstrong>CSS introduction\u003C\u002Fstrong> gives you the foundation for everything else in this course.\u003C\u002Fp>\u003Cp>The three core web technologies work together like this:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>HTML\u003C\u002Fstrong> - the skeleton (structure and content).\u003C\u002Fli>\u003Cli>\u003Cstrong>CSS\u003C\u002Fstrong> - the skin and clothing (design and layout).\u003C\u002Fli>\u003Cli>\u003Cstrong>JavaScript\u003C\u002Fstrong> - the muscles (behavior and interactivity).\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"what-does-cascading-style-sheets-mean\">What Does 'Cascading Style Sheets' Mean?\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>Cascading\u003C\u002Fstrong> - when several rules target the same element, the browser uses a defined algorithm (the cascade) to decide which rule wins. It considers importance, origin, specificity and source order.\u003C\u002Fli>\u003Cli>\u003Cstrong>Style\u003C\u002Fstrong> - the visual rules applied to elements.\u003C\u002Fli>\u003Cli>\u003Cstrong>Sheets\u003C\u002Fstrong> - rules are usually stored in separate \u003Ccode>.css\u003C\u002Fcode> files that can be reused across many pages.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"why-learn-css\">Why Learn CSS?\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>Separation of concerns\u003C\u002Fstrong> - content stays in HTML, design stays in CSS.\u003C\u002Fli>\u003Cli>\u003Cstrong>Consistency\u003C\u002Fstrong> - one stylesheet can style an entire website with thousands of pages.\u003C\u002Fli>\u003Cli>\u003Cstrong>Maintainability\u003C\u002Fstrong> - change a brand color once and it updates everywhere.\u003C\u002Fli>\u003Cli>\u003Cstrong>Performance\u003C\u002Fstrong> - cached CSS files load once and are reused.\u003C\u002Fli>\u003Cli>\u003Cstrong>Responsive design\u003C\u002Fstrong> - one codebase adapts to phones, tablets and desktops.\u003C\u002Fli>\u003Cli>\u003Cstrong>Accessibility\u003C\u002Fstrong> - good CSS supports readable text, sufficient contrast, focus styles and user preferences such as dark mode and reduced motion.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"a-short-history-of-css\">A Short History of CSS\u003C\u002Fh2>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Year\u003C\u002Fth>\u003Cth>Milestone\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>1994\u003C\u002Ftd>\u003Ctd>Håkon Wium Lie, working at CERN, proposes Cascading HTML Style Sheets. Bert Bos joins the effort soon after.\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>1996\u003C\u002Ftd>\u003Ctd>CSS Level 1 (CSS1) becomes a W3C Recommendation: fonts, colors, margins, text and basic box properties.\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>1998\u003C\u002Ftd>\u003Ctd>CSS2 adds absolute\u002Frelative\u002Ffixed positioning, z-index, media types and more selectors.\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>2000s\u003C\u002Ftd>\u003Ctd>Browser inconsistencies (especially old Internet Explorer) make CSS hard; CSS 2.1 later fixes and clarifies the spec.\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>1999 onward\u003C\u002Ftd>\u003Ctd>CSS3 is developed as independent \u003Cem>modules\u003C\u002Fem> (selectors, backgrounds, borders, transitions, animations, media queries).\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>2010s\u003C\u002Ftd>\u003Ctd>Responsive design, Flexbox, CSS Grid and custom properties (CSS variables) reach browsers and transform layout.\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>2020s\u003C\u002Ftd>\u003Ctd>Modern features arrive: cascade layers, container queries, the :has() selector, native CSS nesting, color-mix(), subgrid and view transitions.\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Cp>Note: there is no 'CSS4' officially. CSS is now developed as a living set of modules, each with its own level, maintained by the W3C CSS Working Group.\u003C\u002Fp>\u003Ch2 id=\"trending-css-topics-you-will-meet-in-this-course\">Trending CSS Topics You Will Meet in This Course\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>CSS Flexbox\u003C\u002Fstrong> and \u003Cstrong>CSS Grid\u003C\u002Fstrong> for modern layouts.\u003C\u002Fli>\u003Cli>\u003Cstrong>CSS variables (custom properties)\u003C\u002Fstrong> for themes and design tokens.\u003C\u002Fli>\u003Cli>\u003Cstrong>Responsive design\u003C\u002Fstrong> with media queries and container queries.\u003C\u002Fli>\u003Cli>\u003Cstrong>Dark mode\u003C\u002Fstrong> using prefers-color-scheme.\u003C\u002Fli>\u003Cli>\u003Cstrong>CSS nesting\u003C\u002Fstrong> and the \u003Cstrong>:has() selector\u003C\u002Fstrong> ('parent selector').\u003C\u002Fli>\u003Cli>\u003Cstrong>CSS animations and transitions\u003C\u002Fstrong> for micro-interactions.\u003C\u002Fli>\u003Cli>\u003Cstrong>Utility frameworks\u003C\u002Fstrong> such as Tailwind CSS, and component libraries like Bootstrap, which are all built on core CSS.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"your-first-css-example\">Your First CSS Example\u003C\u002Fh2>\u003Cp>Below, HTML provides a heading and a paragraph, and CSS styles them. Edit the values in the live editor and watch the result change instantly.\u003C\u002Fp>\u003Ch2 id=\"three-ways-to-add-css-preview\">Three Ways to Add CSS (Preview)\u003C\u002Fh2>\u003Col>\u003Cli>\u003Cstrong>External stylesheet\u003C\u002Fstrong> - a separate .css file linked with the link element (recommended).\u003C\u002Fli>\u003Cli>\u003Cstrong>Internal stylesheet\u003C\u002Fstrong> - a style element inside the HTML head.\u003C\u002Fli>\u003Cli>\u003Cstrong>Inline styles\u003C\u002Fstrong> - the style attribute on a single element (use sparingly).\u003C\u002Fli>\u003C\u002Fol>\u003Cp>You will set these up step by step in the workspace lesson.\u003C\u002Fp>\u003Ch2 id=\"common-beginner-mistakes\">Common Beginner Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Thinking CSS is a programming language. It is a declarative styling language: you describe the result, not the steps.\u003C\u002Fli>\u003Cli>Mixing content and design by overusing inline styles.\u003C\u002Fli>\u003Cli>Not testing in more than one browser or screen size.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh2>\u003Cul>\u003Cli>CSS controls the visual presentation of HTML.\u003C\u002Fli>\u003Cli>The cascade decides which rule wins when rules conflict.\u003C\u002Fli>\u003Cli>CSS evolved from simple text styling (1996) to a full layout and design system with Flexbox, Grid, variables and container queries.\u003C\u002Fli>\u003Cli>Learning core CSS first makes frameworks like Tailwind and Bootstrap much easier.\u003C\u002Fli>\u003C\u002Ful>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><!DOCTYPE html>\n<html lang='en'>\n<head>\n  <meta charset='UTF-8'>\n  <title>My First CSS<\u002Ftitle>\n  <style>\n    body {\n      font-family: Arial, sans-serif;\n      background-color: #f4f6f8;\n      margin: 0;\n      padding: 40px;\n    }\n    h1 {\n      color: #2c3e50;\n      border-bottom: 3px solid #3498db;\n      padding-bottom: 8px;\n    }\n    p {\n      color: #555;\n      font-size: 18px;\n      line-height: 1.6;\n    }\n  <\u002Fstyle>\n<\u002Fhead>\n<body>\n  <h1>Hello, CSS!<\u002Fh1>\n  <p>This paragraph is styled with CSS. Try changing the colors and sizes.<\u002Fp>\n<\u002Fbody>\n<\u002Fhtml>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><h1>Same HTML, no CSS<\u002Fh1>\n<p>Without CSS, the browser uses its default styles: black text, white background, serif font.<\u002Fp>\n<ul>\n  <li>Plain<\u002Fli>\n  <li>Unstyled<\u002Fli>\n  <li>Default<\u002Fli>\n<\u002Ful>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  :root {\n    --brand: #8e44ad;\n    --radius: 12px;\n  }\n  .card {\n    background: white;\n    border: 2px solid var(--brand);\n    border-radius: var(--radius);\n    padding: 20px;\n    max-width: 320px;\n    font-family: system-ui, sans-serif;\n  }\n  .card h2 {\n    color: var(--brand);\n    margin-top: 0;\n  }\n<\u002Fstyle>\n<div class='card'>\n  <h2>Modern CSS<\u002Fh2>\n  <p>This card uses CSS variables (custom properties), a modern feature you will master later.<\u002Fp>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":13,"slug":14},"CSS","css",{"name":16,"slug":17},"CSS Fundamentals & Setup","css-fundamentals-setup",{"slug":19,"display_name":20,"job_title":5,"short_bio":5,"expertise_tags":21,"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":22,"posts":23},"badar-khalil","Badar Khalil",[],[],[],4,false,"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fcss-introduction-and-history","CSS Introduction & History: Complete Beginner Guide","Learn what CSS is, how it works with HTML, its history from CSS1 to modern CSS (Grid, Flexbox, variables, container queries) with live code examples.",[31,36,40,44,48,52,56,60,64],{"id":32,"text":33,"level":34,"children":35},"css-introduction-what-is-css","CSS Introduction: What Is CSS?",2,[],{"id":37,"text":38,"level":34,"children":39},"what-does-cascading-style-sheets-mean","What Does 'Cascading Style Sheets' Mean?",[],{"id":41,"text":42,"level":34,"children":43},"why-learn-css","Why Learn CSS?",[],{"id":45,"text":46,"level":34,"children":47},"a-short-history-of-css","A Short History of CSS",[],{"id":49,"text":50,"level":34,"children":51},"trending-css-topics-you-will-meet-in-this-course","Trending CSS Topics You Will Meet in This Course",[],{"id":53,"text":54,"level":34,"children":55},"your-first-css-example","Your First CSS Example",[],{"id":57,"text":58,"level":34,"children":59},"three-ways-to-add-css-preview","Three Ways to Add CSS (Preview)",[],{"id":61,"text":62,"level":34,"children":63},"common-beginner-mistakes","Common Beginner Mistakes",[],{"id":65,"text":66,"level":34,"children":67},"key-takeaways","Key Takeaways",[],[69,74,77],{"id":70,"language":71,"code":72,"is_editable":73},187,"html","\u003C!DOCTYPE html>\n\u003Chtml lang='en'>\n\u003Chead>\n  \u003Cmeta charset='UTF-8'>\n  \u003Ctitle>My First CSS\u003C\u002Ftitle>\n  \u003Cstyle>\n    body {\n      font-family: Arial, sans-serif;\n      background-color: #f4f6f8;\n      margin: 0;\n      padding: 40px;\n    }\n    h1 {\n      color: #2c3e50;\n      border-bottom: 3px solid #3498db;\n      padding-bottom: 8px;\n    }\n    p {\n      color: #555;\n      font-size: 18px;\n      line-height: 1.6;\n    }\n  \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Ch1>Hello, CSS!\u003C\u002Fh1>\n  \u003Cp>This paragraph is styled with CSS. Try changing the colors and sizes.\u003C\u002Fp>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>",true,{"id":75,"language":71,"code":76,"is_editable":73},188,"\u003Ch1>Same HTML, no CSS\u003C\u002Fh1>\n\u003Cp>Without CSS, the browser uses its default styles: black text, white background, serif font.\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>Plain\u003C\u002Fli>\n  \u003Cli>Unstyled\u003C\u002Fli>\n  \u003Cli>Default\u003C\u002Fli>\n\u003C\u002Ful>",{"id":78,"language":71,"code":79,"is_editable":73},189,"\u003Cstyle>\n  :root {\n    --brand: #8e44ad;\n    --radius: 12px;\n  }\n  .card {\n    background: white;\n    border: 2px solid var(--brand);\n    border-radius: var(--radius);\n    padding: 20px;\n    max-width: 320px;\n    font-family: system-ui, sans-serif;\n  }\n  .card h2 {\n    color: var(--brand);\n    margin-top: 0;\n  }\n\u003C\u002Fstyle>\n\u003Cdiv class='card'>\n  \u003Ch2>Modern CSS\u003C\u002Fh2>\n  \u003Cp>This card uses CSS variables (custom properties), a modern feature you will master later.\u003C\u002Fp>\n\u003C\u002Fdiv>",[81],{"id":82,"title":83,"slug":84,"prompt":85,"starter_code":86,"expected_output":87,"language":71,"order_index":88},81,"Style Your First Heading","style-your-first-heading","Using the starter code, make the h1 text color tomato, set its font-size to 40px, and center it with text-align: center. Then make the paragraph text color gray.","\u003Cstyle>\n  h1 {\n    \u002F* TODO: add color, font-size and text-align *\u002F\n  }\n  p {\n    \u002F* TODO: add color *\u002F\n  }\n\u003C\u002Fstyle>\n\u003Ch1>Welcome to CSS\u003C\u002Fh1>\n\u003Cp>I am learning CSS step by step.\u003C\u002Fp>","A centered, 40px tomato-colored heading and a gray paragraph.",1,"2026-09-29T18:29:09+00:00",{"id":91,"slug":92,"title":93},83,"css-syntax-how-browsers-apply-styles","CSS Syntax & How Browsers Apply Styles",{"data":95},[96,99,103,108,113],{"name":13,"slug":14,"description":97,"post_count":34,"subcategories":98},"Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",[],{"name":100,"slug":71,"description":101,"post_count":34,"subcategories":102},"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":104,"slug":105,"description":106,"post_count":88,"subcategories":107},"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":109,"slug":110,"description":111,"post_count":88,"subcategories":112},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":114,"slug":115,"description":116,"post_count":88,"subcategories":117},"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":119},[120,440],{"id":88,"name":100,"slug":121,"icon":5,"icon_url":5,"short_description":122,"meta_title":123,"meta_description":124,"og_image":125,"locale":126,"subcategories":127},"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",[128,153,189,213,289,323,337,365,389,405],{"id":88,"name":129,"slug":130,"order_index":88,"topics":131},"HTML Fundamentals & Setup","html-fundamentals-setup",[132,135,138,142,145,149],{"id":34,"title":133,"slug":134,"order_index":88,"cornerstone":25,"reading_time_minutes":34},"HTML Editors & Environment Setup","html-editors-and-environment-setup",{"id":88,"title":136,"slug":137,"order_index":88,"cornerstone":25,"reading_time_minutes":88},"HTML Introduction & History","html-introduction-and-history",{"id":139,"title":140,"slug":141,"order_index":139,"cornerstone":25,"reading_time_minutes":34},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":24,"title":143,"slug":144,"order_index":24,"cornerstone":25,"reading_time_minutes":34},"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":146,"title":147,"slug":148,"order_index":146,"cornerstone":25,"reading_time_minutes":34},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":150,"title":151,"slug":152,"order_index":150,"cornerstone":25,"reading_time_minutes":34},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":34,"name":154,"slug":155,"order_index":34,"topics":156},"Text & Content Basics","text-content-basics",[157,161,165,169,173,177,181,185],{"id":158,"title":159,"slug":160,"order_index":158,"cornerstone":25,"reading_time_minutes":34},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":162,"title":163,"slug":164,"order_index":162,"cornerstone":25,"reading_time_minutes":34},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":166,"title":167,"slug":168,"order_index":166,"cornerstone":25,"reading_time_minutes":88},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":170,"title":171,"slug":172,"order_index":170,"cornerstone":25,"reading_time_minutes":34},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":174,"title":175,"slug":176,"order_index":174,"cornerstone":25,"reading_time_minutes":34},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":178,"title":179,"slug":180,"order_index":178,"cornerstone":25,"reading_time_minutes":34},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":182,"title":183,"slug":184,"order_index":182,"cornerstone":25,"reading_time_minutes":34},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":186,"title":187,"slug":188,"order_index":186,"cornerstone":25,"reading_time_minutes":34},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":139,"name":190,"slug":191,"order_index":139,"topics":192},"Links, Media & Navigation","links-media-navigation",[193,197,201,205,209],{"id":194,"title":195,"slug":196,"order_index":194,"cornerstone":25,"reading_time_minutes":34},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":198,"title":199,"slug":200,"order_index":198,"cornerstone":25,"reading_time_minutes":34},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":202,"title":203,"slug":204,"order_index":202,"cornerstone":25,"reading_time_minutes":88},17,"HTML Favicon Setup","html-favicon-setup",{"id":206,"title":207,"slug":208,"order_index":206,"cornerstone":25,"reading_time_minutes":34},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":210,"title":211,"slug":212,"order_index":210,"cornerstone":25,"reading_time_minutes":34},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":24,"name":214,"slug":215,"order_index":24,"topics":216},"Structuring Content","structuring-content",[217,222,227,232,237,241,245,249,253,257,261,265,269,273,277,281,285],{"id":218,"title":219,"slug":220,"order_index":221,"cornerstone":25,"reading_time_minutes":34},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":223,"title":224,"slug":225,"order_index":226,"cornerstone":25,"reading_time_minutes":34},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":228,"title":229,"slug":230,"order_index":231,"cornerstone":25,"reading_time_minutes":34},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":233,"title":234,"slug":235,"order_index":236,"cornerstone":25,"reading_time_minutes":88},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":238,"title":239,"slug":240,"order_index":218,"cornerstone":25,"reading_time_minutes":34},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":242,"title":243,"slug":244,"order_index":223,"cornerstone":25,"reading_time_minutes":88},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":246,"title":247,"slug":248,"order_index":228,"cornerstone":25,"reading_time_minutes":34},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":250,"title":251,"slug":252,"order_index":233,"cornerstone":25,"reading_time_minutes":34},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":254,"title":255,"slug":256,"order_index":238,"cornerstone":25,"reading_time_minutes":34},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":258,"title":259,"slug":260,"order_index":242,"cornerstone":25,"reading_time_minutes":139},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":262,"title":263,"slug":264,"order_index":246,"cornerstone":25,"reading_time_minutes":34},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":266,"title":267,"slug":268,"order_index":250,"cornerstone":25,"reading_time_minutes":34},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":270,"title":271,"slug":272,"order_index":254,"cornerstone":25,"reading_time_minutes":88},77,"HTML Symbols","html-symbols",{"id":274,"title":275,"slug":276,"order_index":274,"cornerstone":25,"reading_time_minutes":88},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":278,"title":279,"slug":280,"order_index":278,"cornerstone":25,"reading_time_minutes":34},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":282,"title":283,"slug":284,"order_index":282,"cornerstone":25,"reading_time_minutes":88},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":286,"title":287,"slug":288,"order_index":286,"cornerstone":25,"reading_time_minutes":88},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":158,"name":290,"slug":291,"order_index":146,"topics":292},"Forms & User Input","forms-user-input",[293,298,303,308,313,318],{"id":294,"title":295,"slug":296,"order_index":297,"cornerstone":25,"reading_time_minutes":34},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":299,"title":300,"slug":301,"order_index":302,"cornerstone":25,"reading_time_minutes":88},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":304,"title":305,"slug":306,"order_index":307,"cornerstone":25,"reading_time_minutes":88},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":309,"title":310,"slug":311,"order_index":312,"cornerstone":25,"reading_time_minutes":34},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":314,"title":315,"slug":316,"order_index":317,"cornerstone":25,"reading_time_minutes":34},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":319,"title":320,"slug":321,"order_index":322,"cornerstone":25,"reading_time_minutes":34},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":162,"name":324,"slug":325,"order_index":150,"topics":326},"Graphics & Visuals","graphics-visuals",[327,332],{"id":328,"title":329,"slug":330,"order_index":331,"cornerstone":25,"reading_time_minutes":139},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":333,"title":334,"slug":335,"order_index":336,"cornerstone":25,"reading_time_minutes":139},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":166,"name":338,"slug":339,"order_index":158,"topics":340},"Multimedia","multimedia",[341,346,351,356,361],{"id":342,"title":343,"slug":344,"order_index":345,"cornerstone":25,"reading_time_minutes":34},57,"HTML Media Overview","html-media-overview",45,{"id":347,"title":348,"slug":349,"order_index":350,"cornerstone":25,"reading_time_minutes":34},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":352,"title":353,"slug":354,"order_index":355,"cornerstone":25,"reading_time_minutes":34},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":357,"title":358,"slug":359,"order_index":360,"cornerstone":25,"reading_time_minutes":34},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":362,"title":363,"slug":364,"order_index":294,"cornerstone":25,"reading_time_minutes":34},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":170,"name":366,"slug":367,"order_index":162,"topics":368},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[369,373,377,381,385],{"id":370,"title":371,"slug":372,"order_index":299,"cornerstone":25,"reading_time_minutes":34},62,"HTML Geolocation API","html-geolocation-api",{"id":374,"title":375,"slug":376,"order_index":304,"cornerstone":25,"reading_time_minutes":34},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":378,"title":379,"slug":380,"order_index":309,"cornerstone":25,"reading_time_minutes":34},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":382,"title":383,"slug":384,"order_index":314,"cornerstone":25,"reading_time_minutes":34},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":386,"title":387,"slug":388,"order_index":319,"cornerstone":25,"reading_time_minutes":34},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":174,"name":390,"slug":391,"order_index":166,"topics":392},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[393,397,401],{"id":394,"title":395,"slug":396,"order_index":328,"cornerstone":25,"reading_time_minutes":34},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":398,"title":399,"slug":400,"order_index":333,"cornerstone":25,"reading_time_minutes":34},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":402,"title":403,"slug":404,"order_index":342,"cornerstone":25,"reading_time_minutes":34},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":178,"name":406,"slug":407,"order_index":170,"topics":408},"Reference & Practice","reference-practice",[409,413,417,421,425,429,433,437],{"id":410,"title":411,"slug":412,"order_index":88,"cornerstone":25,"reading_time_minutes":34},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":414,"title":415,"slug":416,"order_index":34,"cornerstone":25,"reading_time_minutes":34},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":418,"title":419,"slug":420,"order_index":139,"cornerstone":25,"reading_time_minutes":34},72,"HTML Events Reference","html-events-reference",{"id":422,"title":423,"slug":424,"order_index":24,"cornerstone":25,"reading_time_minutes":34},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":426,"title":427,"slug":428,"order_index":146,"cornerstone":25,"reading_time_minutes":34},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":430,"title":431,"slug":432,"order_index":150,"cornerstone":25,"reading_time_minutes":34},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":434,"title":435,"slug":436,"order_index":158,"cornerstone":25,"reading_time_minutes":139},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":82,"title":438,"slug":439,"order_index":162,"cornerstone":25,"reading_time_minutes":88},"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":34,"name":13,"slug":14,"icon":5,"icon_url":5,"short_description":441,"meta_title":442,"meta_description":443,"og_image":5,"locale":126,"subcategories":444},"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.",[445,462,494],{"id":182,"name":16,"slug":17,"order_index":446,"topics":447},0,[448,449,450,454,458],{"id":8,"title":9,"slug":10,"order_index":88,"cornerstone":25,"reading_time_minutes":24},{"id":91,"title":93,"slug":92,"order_index":34,"cornerstone":25,"reading_time_minutes":24},{"id":451,"title":452,"slug":453,"order_index":139,"cornerstone":25,"reading_time_minutes":139},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":455,"title":456,"slug":457,"order_index":24,"cornerstone":25,"reading_time_minutes":139},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":459,"title":460,"slug":461,"order_index":146,"cornerstone":25,"reading_time_minutes":146},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":194,"name":463,"slug":464,"order_index":446,"topics":465},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[466,470,474,478,482,486,490],{"id":467,"title":468,"slug":469,"order_index":186,"cornerstone":25,"reading_time_minutes":146},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":471,"title":472,"slug":473,"order_index":194,"cornerstone":25,"reading_time_minutes":24},96,"CSS Backgrounds","css-backgrounds",{"id":475,"title":476,"slug":477,"order_index":198,"cornerstone":25,"reading_time_minutes":146},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":479,"title":480,"slug":481,"order_index":202,"cornerstone":25,"reading_time_minutes":146},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":483,"title":484,"slug":485,"order_index":206,"cornerstone":25,"reading_time_minutes":150},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":487,"title":488,"slug":489,"order_index":210,"cornerstone":25,"reading_time_minutes":146},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":491,"title":492,"slug":493,"order_index":221,"cornerstone":25,"reading_time_minutes":150},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":186,"name":495,"slug":496,"order_index":446,"topics":497},"Selectors & the Cascade","selectors-the-cascade",[498,502,506,510,514,518,522,526],{"id":499,"title":500,"slug":501,"order_index":150,"cornerstone":25,"reading_time_minutes":24},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":503,"title":504,"slug":505,"order_index":158,"cornerstone":25,"reading_time_minutes":24},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":507,"title":508,"slug":509,"order_index":162,"cornerstone":25,"reading_time_minutes":24},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":511,"title":512,"slug":513,"order_index":166,"cornerstone":25,"reading_time_minutes":150},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":515,"title":516,"slug":517,"order_index":170,"cornerstone":25,"reading_time_minutes":146},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":519,"title":520,"slug":521,"order_index":174,"cornerstone":25,"reading_time_minutes":146},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":523,"title":524,"slug":525,"order_index":178,"cornerstone":25,"reading_time_minutes":24},93,"CSS Specificity Explained","css-specificity-explained",{"id":527,"title":528,"slug":529,"order_index":182,"cornerstone":25,"reading_time_minutes":146},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important"]