[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"topic:display-and-inline-block":35,"course-tree":166},{"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},{"id":37,"title":38,"slug":39,"content":40,"course":41,"subcategory":42,"author":45,"reading_time_minutes":51,"cornerstone":52,"schema_type":53,"faq_json":5,"video_url":5,"canonical_url":54,"meta_title":55,"meta_description":56,"og_image":5,"toc_json":57,"code_examples":118,"quiz":5,"exercises":142,"published_at":5,"updated_at":157,"prev":158,"next":162},116,"Display & Inline-block","display-and-inline-block","\u003Ch2 id=\"css-display-property-and-inline-block-complete-guide\">CSS Display Property and Inline-block: Complete Guide\u003C\u002Fh2>\u003Cp>\u003Cstrong>Focus keyword: CSS display property.\u003C\u002Fstrong> The display property is the most important layout switch in CSS. It decides how an element generates boxes, how it sits next to other elements, and how its children are laid out. In this lesson you will learn block, inline and inline-block, display none versus visibility hidden, flow-root, display contents, and the modern flex and grid values. Every code block is editable, so change values and watch the preview.\u003C\u002Fp>\u003Ch3 id=\"trending-keywords-covered-in-this-lesson\">Trending keywords covered in this lesson\u003C\u002Fh3>\u003Cp>display block vs inline, inline-block vs inline, display none vs visibility hidden, display flow-root, display contents, inline-block whitespace gap, vertical-align, CSS box model, outer and inner display type, display flex, display grid, hidden attribute, accessibility tree, CSS reset, layout basics for beginners.\u003C\u002Fp>\u003Ch2 id=\"1-outer-and-inner-display-type\">1. Outer and Inner Display Type\u003C\u002Fh2>\u003Cp>Every element has two display roles. The \u003Cstrong>outer display type\u003C\u002Fstrong> controls how the element behaves in the flow of its parent (block or inline). The \u003Cstrong>inner display type\u003C\u002Fstrong> controls how its children are laid out (flow, flex, grid). Modern CSS lets you write both values, for example \u003Ccode>display: block flex\u003C\u002Fcode> equals \u003Ccode>display: flex\u003C\u002Fcode>, and \u003Ccode>display: inline flex\u003C\u002Fcode> equals \u003Ccode>display: inline-flex\u003C\u002Fcode>. You will mostly use the single keyword form.\u003C\u002Fp>\u003Ch2 id=\"2-display-block\">2. display: block\u003C\u002Fh2>\u003Cul>\u003Cli>Starts on a new line and stretches to fill the full available width of its parent.\u003C\u002Fli>\u003Cli>Respects \u003Ccode>width\u003C\u002Fcode>, \u003Ccode>height\u003C\u002Fcode>, \u003Ccode>margin\u003C\u002Fcode> and \u003Ccode>padding\u003C\u002Fcode> on all four sides.\u003C\u002Fli>\u003Cli>Default for \u003Ccode>div\u003C\u002Fcode>, \u003Ccode>p\u003C\u002Fcode>, \u003Ccode>h1\u003C\u002Fcode> to \u003Ccode>h6\u003C\u002Fcode>, \u003Ccode>section\u003C\u002Fcode>, \u003Ccode>article\u003C\u002Fcode>, \u003Ccode>header\u003C\u002Fcode>, \u003Ccode>footer\u003C\u002Fcode>, \u003Ccode>ul\u003C\u002Fcode>, \u003Ccode>ol\u003C\u002Fcode>, \u003Ccode>li\u003C\u002Fcode> (list-item) and \u003Ccode>form\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Vertical margins of neighbouring blocks can collapse into one margin.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"3-display-inline\">3. display: inline\u003C\u002Fh2>\u003Cul>\u003Cli>Flows inside a line of text and only takes the width of its content.\u003C\u002Fli>\u003Cli>Ignores \u003Ccode>width\u003C\u002Fcode> and \u003Ccode>height\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Horizontal margin and padding work. Vertical padding is drawn but does not push other lines away, and vertical margin has no effect.\u003C\u002Fli>\u003Cli>Default for \u003Ccode>span\u003C\u002Fcode>, \u003Ccode>a\u003C\u002Fcode>, \u003Ccode>strong\u003C\u002Fcode>, \u003Ccode>em\u003C\u002Fcode>, \u003Ccode>code\u003C\u002Fcode>, \u003Ccode>img\u003C\u002Fcode> (replaced inline element) and \u003Ccode>label\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"4-display-inline-block\">4. display: inline-block\u003C\u002Fh2>\u003Cp>Inline-block is the hybrid. The element sits in a line like text, but inside it behaves like a block, so \u003Ccode>width\u003C\u002Fcode>, \u003Ccode>height\u003C\u002Fcode>, vertical margin and padding all work. It is perfect for badges, pills, small buttons, tags and image thumbnails inside text.\u003C\u002Fp>\u003Ch3 id=\"the-whitespace-gap-problem\">The whitespace gap problem\u003C\u002Fh3>\u003Cp>Inline-block elements are treated like words, so the space or line break between them in your HTML becomes a visible gap of about 4px. Fixes: use flexbox instead (best), set \u003Ccode>font-size: 0\u003C\u002Fcode> on the parent and reset it on children, remove whitespace in HTML, or use negative margin. For real layouts prefer \u003Ccode>display: flex\u003C\u002Fcode> with \u003Ccode>gap\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch3 id=\"vertical-align\">vertical-align\u003C\u002Fh3>\u003Cp>Inline-block boxes align to the text baseline by default, which can create extra space under images. Use \u003Ccode>vertical-align: middle\u003C\u002Fcode> or \u003Ccode>top\u003C\u002Fcode>, or make the image \u003Ccode>display: block\u003C\u002Fcode> to remove the small gap under it.\u003C\u002Fp>\u003Ch2 id=\"5-display-none-visibility-hidden-and-opacity-0\">5. display: none, visibility: hidden and opacity: 0\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Ccode>display: none\u003C\u002Fcode>: element is removed from layout and from the accessibility tree. No space is reserved. Child elements cannot be shown.\u003C\u002Fli>\u003Cli>\u003Ccode>visibility: hidden\u003C\u002Fcode>: element is invisible but still takes space. Hidden from screen readers and not focusable. Children can be made visible with \u003Ccode>visibility: visible\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Ccode>opacity: 0\u003C\u002Fcode>: element is transparent but still takes space, still receives clicks and keyboard focus and is still read by screen readers. Use it only for animations.\u003C\u002Fli>\u003Cli>The HTML \u003Ccode>hidden\u003C\u002Fcode> attribute applies \u003Ccode>display: none\u003C\u002Fcode> by default. Be careful, your own \u003Ccode>display\u003C\u002Fcode> rule can override it.\u003C\u002Fli>\u003Cli>For screen-reader-only text use a visually hidden utility class (clip and 1px size), not display none.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"6-display-flow-root\">6. display: flow-root\u003C\u002Fh2>\u003Cp>\u003Ccode>display: flow-root\u003C\u002Fcode> creates a new block formatting context. It makes a parent contain its floated children and stops margin collapse between parent and child. It is the modern, clean replacement for the clearfix hack.\u003C\u002Fp>\u003Ch2 id=\"7-display-contents\">7. display: contents\u003C\u002Fh2>\u003Cp>\u003Ccode>display: contents\u003C\u002Fcode> removes the element's own box but keeps its children, so they behave as if they were direct children of the grandparent. Useful for grid and flex layouts with wrapper elements. Do not use it on buttons, links or other interactive elements because some browsers used to drop their semantics.\u003C\u002Fp>\u003Ch2 id=\"8-display-flex-grid-and-inline-variants\">8. display: flex, grid and inline variants\u003C\u002Fh2>\u003Cp>\u003Ccode>display: flex\u003C\u002Fcode> and \u003Ccode>display: grid\u003C\u002Fcode> create block-level containers. \u003Ccode>display: inline-flex\u003C\u002Fcode> and \u003Ccode>display: inline-grid\u003C\u002Fcode> create inline-level containers. Their children become flex items or grid items, so properties like \u003Ccode>float\u003C\u002Fcode> and \u003Ccode>vertical-align\u003C\u002Fcode> stop working on them. You will study flexbox and grid in detail in later lessons.\u003C\u002Fp>\u003Ch2 id=\"9-other-values-you-will-see\">9. Other values you will see\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Ccode>list-item\u003C\u002Fcode>: block box with a marker (li).\u003C\u002Fli>\u003Cli>\u003Ccode>table\u003C\u002Fcode>, \u003Ccode>table-row\u003C\u002Fcode>, \u003Ccode>table-cell\u003C\u002Fcode>: make any element behave like table parts (use only for real tabular layouts or legacy work).\u003C\u002Fli>\u003Cli>\u003Ccode>ruby\u003C\u002Fcode>: for East Asian annotation text.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"10-common-mistakes\">10. Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Setting width and height on a \u003Ccode>span\u003C\u002Fcode> and wondering why nothing happens.\u003C\u002Fli>\u003Cli>Using \u003Ccode>opacity: 0\u003C\u002Fcode> to hide content that should be removed for screen readers.\u003C\u002Fli>\u003Cli>Fighting inline-block gaps instead of switching to flexbox.\u003C\u002Fli>\u003Cli>Overriding the \u003Ccode>hidden\u003C\u002Fcode> attribute with a display rule.\u003C\u002Fli>\u003Cli>Using \u003Ccode>display: none\u003C\u002Fcode> on content that must stay available to assistive technology.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh2>\u003Cp>Block fills the row, inline flows with text, inline-block gives you inline flow plus box control. Know the difference between display none, visibility hidden and opacity 0, use flow-root to contain floats, and prefer flex and grid for real layouts.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 18px\u002F1.6 system-ui, sans-serif; padding: 16px; }\n  .box { padding: 10px 16px; margin: 8px; color: #fff; }\n  .b { display: block; background: #2a9d8f; width: 240px; }\n  .i { display: inline; background: #e76f51; width: 500px; height: 100px; }\n  .ib { display: inline-block; background: #264653; width: 160px; height: 60px; }\n<\u002Fstyle>\n<div class='box b'>display: block (own line, width works)<\u002Fdiv>\n<span class='box i'>inline (width and height ignored)<\u002Fspan>\n<span class='box i'>inline again<\u002Fspan>\n<div>\n  <span class='box ib'>inline-block<\u002Fspan>\n  <span class='box ib'>width and height work<\u002Fspan>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .row { background: #eee; margin-bottom: 16px; }\n  .tag { display: inline-block; background: #0b5fff; color: #fff; padding: 6px 12px; border-radius: 999px; }\n  .fixed-gap { font-size: 0; }\n  .fixed-gap .tag { font-size: 18px; }\n  .flex { display: flex; gap: 8px; }\n<\u002Fstyle>\n<p>1. Default inline-block (note the small gap):<\u002Fp>\n<div class='row'>\n  <span class='tag'>HTML<\u002Fspan>\n  <span class='tag'>CSS<\u002Fspan>\n  <span class='tag'>JS<\u002Fspan>\n<\u002Fdiv>\n<p>2. font-size: 0 fix (no gap):<\u002Fp>\n<div class='row fixed-gap'>\n  <span class='tag'>HTML<\u002Fspan>\n  <span class='tag'>CSS<\u002Fspan>\n  <span class='tag'>JS<\u002Fspan>\n<\u002Fdiv>\n<p>3. Modern fix: flex with gap:<\u002Fp>\n<div class='row flex'>\n  <span class='tag'>HTML<\u002Fspan>\n  <span class='tag'>CSS<\u002Fspan>\n  <span class='tag'>JS<\u002Fspan>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .demo { display: flex; gap: 8px; }\n  .demo div { width: 120px; height: 70px; background: #e9c46a; display: grid; place-items: center; font-size: 14px; }\n  .none { display: none; }\n  .vis { visibility: hidden; }\n  .op { opacity: 0; }\n<\u002Fstyle>\n<div class='demo'>\n  <div>A<\u002Fdiv>\n  <div class='none'>display: none<\u002Fdiv>\n  <div>B<\u002Fdiv>\n  <div class='vis'>visibility: hidden<\u002Fdiv>\n  <div>C<\u002Fdiv>\n  <div class='op'>opacity: 0<\u002Fdiv>\n  <div>D<\u002Fdiv>\n<\u002Fdiv>\n<p>Look at the gaps: display none leaves no space, visibility hidden and opacity 0 keep the space.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .card { border: 3px solid #264653; padding: 10px; margin-bottom: 24px; }\n  .card img, .thumb { float: left; width: 80px; height: 80px; background: #e76f51; margin-right: 12px; }\n  .contain { display: flow-root; }\n<\u002Fstyle>\n<p>Without flow-root the border collapses around the floated box:<\u002Fp>\n<div class='card'><div class='thumb'><\u002Fdiv><p>Floated child escapes the parent.<\u002Fp><\u002Fdiv>\n<p>With display: flow-root the parent contains the float:<\u002Fp>\n<div class='card contain'><div class='thumb'><\u002Fdiv><p>Floated child is contained. No clearfix needed.<\u002Fp><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .grid { display: grid; grid-template-columns: repeat(3, 100px); gap: 8px; }\n  .grid > * { background: #8ecae6; padding: 12px; }\n  .wrapper { display: contents; }\n<\u002Fstyle>\n<p>The wrapper uses display: contents, so its two children join the grid directly:<\u002Fp>\n<div class='grid'>\n  <div>1<\u002Fdiv>\n  <div class='wrapper'>\n    <div>2<\u002Fdiv>\n    <div>3<\u002Fdiv>\n  <\u002Fdiv>\n  <div>4<\u002Fdiv>\n  <div>5<\u002Fdiv>\n  <div>6<\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .line { background: #f1f1f1; padding: 8px; }\n  .ib { display: inline-block; width: 70px; height: 70px; background: #2a9d8f; color: #fff; margin-right: 6px; }\n  .mid { vertical-align: middle; }\n  .top { vertical-align: top; }\n<\u002Fstyle>\n<div class='line'>Baseline <span class='ib'><\u002Fspan> <span class='ib' style='height:40px'><\u002Fspan><\u002Fdiv>\n<div class='line'>Middle <span class='ib mid'><\u002Fspan> <span class='ib mid' style='height:40px'><\u002Fspan><\u002Fdiv>\n<div class='line'>Top <span class='ib top'><\u002Fspan> <span class='ib top' style='height:40px'><\u002Fspan><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-javascript\">\u003Cpre>\u003Ccode>const elements = [\n  { name: 'div', display: 'block' },\n  { name: 'span', display: 'inline' },\n  { name: 'button', display: 'inline-block' },\n  { name: 'li', display: 'list-item' }\n];\n\nelements.forEach(function (el) {\n  var widthWorks = el.display !== 'inline';\n  console.log(el.name + ' is ' + el.display + ' | width and height work: ' + widthWorks);\n});\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":9,"slug":10},{"name":43,"slug":44},"Display, Position & Layout Basics","display-position-layout-basics",{"slug":46,"display_name":47,"job_title":5,"short_bio":5,"expertise_tags":48,"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":49,"posts":50},"badar-khalil","Badar Khalil",[],[],[],7,false,"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fdisplay-and-inline-block","CSS Display & Inline-block: Block, Inline, None, Flow-root","Learn the CSS display property: block, inline, inline-block, none, flow-root, contents, flex and grid, with live examples, whitespace fixes and accessibility tips.",[58,67,71,75,79,90,94,98,102,106,110,114],{"id":59,"text":60,"level":12,"children":61},"css-display-property-and-inline-block-complete-guide","CSS Display Property and Inline-block: Complete Guide",[62],{"id":63,"text":64,"level":65,"children":66},"trending-keywords-covered-in-this-lesson","Trending keywords covered in this lesson",3,[],{"id":68,"text":69,"level":12,"children":70},"1-outer-and-inner-display-type","1. Outer and Inner Display Type",[],{"id":72,"text":73,"level":12,"children":74},"2-display-block","2. display: block",[],{"id":76,"text":77,"level":12,"children":78},"3-display-inline","3. display: inline",[],{"id":80,"text":81,"level":12,"children":82},"4-display-inline-block","4. display: inline-block",[83,87],{"id":84,"text":85,"level":65,"children":86},"the-whitespace-gap-problem","The whitespace gap problem",[],{"id":88,"text":88,"level":65,"children":89},"vertical-align",[],{"id":91,"text":92,"level":12,"children":93},"5-display-none-visibility-hidden-and-opacity-0","5. display: none, visibility: hidden and opacity: 0",[],{"id":95,"text":96,"level":12,"children":97},"6-display-flow-root","6. display: flow-root",[],{"id":99,"text":100,"level":12,"children":101},"7-display-contents","7. display: contents",[],{"id":103,"text":104,"level":12,"children":105},"8-display-flex-grid-and-inline-variants","8. display: flex, grid and inline variants",[],{"id":107,"text":108,"level":12,"children":109},"9-other-values-you-will-see","9. Other values you will see",[],{"id":111,"text":112,"level":12,"children":113},"10-common-mistakes","10. Common Mistakes",[],{"id":115,"text":116,"level":12,"children":117},"key-takeaways","Key Takeaways",[],[119,123,126,129,132,135,138],{"id":120,"language":16,"code":121,"is_editable":122},399,"\u003Cstyle>\n  body { font: 18px\u002F1.6 system-ui, sans-serif; padding: 16px; }\n  .box { padding: 10px 16px; margin: 8px; color: #fff; }\n  .b { display: block; background: #2a9d8f; width: 240px; }\n  .i { display: inline; background: #e76f51; width: 500px; height: 100px; }\n  .ib { display: inline-block; background: #264653; width: 160px; height: 60px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='box b'>display: block (own line, width works)\u003C\u002Fdiv>\n\u003Cspan class='box i'>inline (width and height ignored)\u003C\u002Fspan>\n\u003Cspan class='box i'>inline again\u003C\u002Fspan>\n\u003Cdiv>\n  \u003Cspan class='box ib'>inline-block\u003C\u002Fspan>\n  \u003Cspan class='box ib'>width and height work\u003C\u002Fspan>\n\u003C\u002Fdiv>",true,{"id":124,"language":16,"code":125,"is_editable":122},400,"\u003Cstyle>\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .row { background: #eee; margin-bottom: 16px; }\n  .tag { display: inline-block; background: #0b5fff; color: #fff; padding: 6px 12px; border-radius: 999px; }\n  .fixed-gap { font-size: 0; }\n  .fixed-gap .tag { font-size: 18px; }\n  .flex { display: flex; gap: 8px; }\n\u003C\u002Fstyle>\n\u003Cp>1. Default inline-block (note the small gap):\u003C\u002Fp>\n\u003Cdiv class='row'>\n  \u003Cspan class='tag'>HTML\u003C\u002Fspan>\n  \u003Cspan class='tag'>CSS\u003C\u002Fspan>\n  \u003Cspan class='tag'>JS\u003C\u002Fspan>\n\u003C\u002Fdiv>\n\u003Cp>2. font-size: 0 fix (no gap):\u003C\u002Fp>\n\u003Cdiv class='row fixed-gap'>\n  \u003Cspan class='tag'>HTML\u003C\u002Fspan>\n  \u003Cspan class='tag'>CSS\u003C\u002Fspan>\n  \u003Cspan class='tag'>JS\u003C\u002Fspan>\n\u003C\u002Fdiv>\n\u003Cp>3. Modern fix: flex with gap:\u003C\u002Fp>\n\u003Cdiv class='row flex'>\n  \u003Cspan class='tag'>HTML\u003C\u002Fspan>\n  \u003Cspan class='tag'>CSS\u003C\u002Fspan>\n  \u003Cspan class='tag'>JS\u003C\u002Fspan>\n\u003C\u002Fdiv>",{"id":127,"language":16,"code":128,"is_editable":122},401,"\u003Cstyle>\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .demo { display: flex; gap: 8px; }\n  .demo div { width: 120px; height: 70px; background: #e9c46a; display: grid; place-items: center; font-size: 14px; }\n  .none { display: none; }\n  .vis { visibility: hidden; }\n  .op { opacity: 0; }\n\u003C\u002Fstyle>\n\u003Cdiv class='demo'>\n  \u003Cdiv>A\u003C\u002Fdiv>\n  \u003Cdiv class='none'>display: none\u003C\u002Fdiv>\n  \u003Cdiv>B\u003C\u002Fdiv>\n  \u003Cdiv class='vis'>visibility: hidden\u003C\u002Fdiv>\n  \u003Cdiv>C\u003C\u002Fdiv>\n  \u003Cdiv class='op'>opacity: 0\u003C\u002Fdiv>\n  \u003Cdiv>D\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>Look at the gaps: display none leaves no space, visibility hidden and opacity 0 keep the space.\u003C\u002Fp>",{"id":130,"language":16,"code":131,"is_editable":122},402,"\u003Cstyle>\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .card { border: 3px solid #264653; padding: 10px; margin-bottom: 24px; }\n  .card img, .thumb { float: left; width: 80px; height: 80px; background: #e76f51; margin-right: 12px; }\n  .contain { display: flow-root; }\n\u003C\u002Fstyle>\n\u003Cp>Without flow-root the border collapses around the floated box:\u003C\u002Fp>\n\u003Cdiv class='card'>\u003Cdiv class='thumb'>\u003C\u002Fdiv>\u003Cp>Floated child escapes the parent.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cp>With display: flow-root the parent contains the float:\u003C\u002Fp>\n\u003Cdiv class='card contain'>\u003Cdiv class='thumb'>\u003C\u002Fdiv>\u003Cp>Floated child is contained. No clearfix needed.\u003C\u002Fp>\u003C\u002Fdiv>",{"id":133,"language":16,"code":134,"is_editable":122},403,"\u003Cstyle>\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .grid { display: grid; grid-template-columns: repeat(3, 100px); gap: 8px; }\n  .grid > * { background: #8ecae6; padding: 12px; }\n  .wrapper { display: contents; }\n\u003C\u002Fstyle>\n\u003Cp>The wrapper uses display: contents, so its two children join the grid directly:\u003C\u002Fp>\n\u003Cdiv class='grid'>\n  \u003Cdiv>1\u003C\u002Fdiv>\n  \u003Cdiv class='wrapper'>\n    \u003Cdiv>2\u003C\u002Fdiv>\n    \u003Cdiv>3\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003Cdiv>4\u003C\u002Fdiv>\n  \u003Cdiv>5\u003C\u002Fdiv>\n  \u003Cdiv>6\u003C\u002Fdiv>\n\u003C\u002Fdiv>",{"id":136,"language":16,"code":137,"is_editable":122},404,"\u003Cstyle>\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  .line { background: #f1f1f1; padding: 8px; }\n  .ib { display: inline-block; width: 70px; height: 70px; background: #2a9d8f; color: #fff; margin-right: 6px; }\n  .mid { vertical-align: middle; }\n  .top { vertical-align: top; }\n\u003C\u002Fstyle>\n\u003Cdiv class='line'>Baseline \u003Cspan class='ib'>\u003C\u002Fspan> \u003Cspan class='ib' style='height:40px'>\u003C\u002Fspan>\u003C\u002Fdiv>\n\u003Cdiv class='line'>Middle \u003Cspan class='ib mid'>\u003C\u002Fspan> \u003Cspan class='ib mid' style='height:40px'>\u003C\u002Fspan>\u003C\u002Fdiv>\n\u003Cdiv class='line'>Top \u003Cspan class='ib top'>\u003C\u002Fspan> \u003Cspan class='ib top' style='height:40px'>\u003C\u002Fspan>\u003C\u002Fdiv>",{"id":139,"language":140,"code":141,"is_editable":122},405,"javascript","const elements = [\n  { name: 'div', display: 'block' },\n  { name: 'span', display: 'inline' },\n  { name: 'button', display: 'inline-block' },\n  { name: 'li', display: 'list-item' }\n];\n\nelements.forEach(function (el) {\n  var widthWorks = el.display !== 'inline';\n  console.log(el.name + ' is ' + el.display + ' | width and height work: ' + widthWorks);\n});",[143,150],{"id":144,"title":145,"slug":146,"prompt":147,"starter_code":148,"expected_output":149,"language":16,"order_index":23},155,"Turn Links into Inline-block Buttons","links-to-inline-block-buttons","Style the three links so each one is an inline-block with padding 10px 20px, a 120px minimum width, centered text and rounded corners. Remove the whitespace gap between them without changing the HTML.","\u003Cstyle>\n  a { background: #0b5fff; color: #fff; text-decoration: none; }\n\u003C\u002Fstyle>\n\u003Ca href='#'>Home\u003C\u002Fa>\n\u003Ca href='#'>About\u003C\u002Fa>\n\u003Ca href='#'>Contact\u003C\u002Fa>","Three buttons with padding, min-width 120px and no visible gap between them",{"id":151,"title":152,"slug":153,"prompt":154,"starter_code":155,"expected_output":156,"language":16,"order_index":12},156,"Hide Without Losing Space","hide-without-losing-space","Make the second box invisible but keep its space in the layout. Then make a third version that removes both the box and its space.","\u003Cstyle>\n  .box { width: 100px; height: 60px; background: tomato; margin: 6px; display: inline-block; }\n\u003C\u002Fstyle>\n\u003Cdiv class='box'>1\u003C\u002Fdiv>\u003Cdiv class='box'>2\u003C\u002Fdiv>\u003Cdiv class='box'>3\u003C\u002Fdiv>","Box 2 uses visibility: hidden (space kept). Box 3 variant uses display: none (space removed)","2026-09-30T18:00:07+00:00",{"id":159,"slug":160,"title":161},115,"icons-svg-and-icon-fonts","Icons (SVG & Icon Fonts)",{"id":163,"slug":164,"title":165},117,"position-relative-absolute-fixed-sticky","Position (relative, absolute, fixed, sticky)",{"data":167},[168,488],{"id":23,"name":15,"slug":169,"icon":5,"icon_url":5,"short_description":170,"meta_title":171,"meta_description":172,"og_image":173,"locale":174,"subcategories":175},"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",[176,201,236,260,336,370,384,412,436,452],{"id":23,"name":177,"slug":178,"order_index":23,"topics":179},"HTML Fundamentals & Setup","html-fundamentals-setup",[180,183,186,189,193,197],{"id":12,"title":181,"slug":182,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",{"id":23,"title":184,"slug":185,"order_index":23,"cornerstone":52,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",{"id":65,"title":187,"slug":188,"order_index":65,"cornerstone":52,"reading_time_minutes":12},"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":190,"title":191,"slug":192,"order_index":190,"cornerstone":52,"reading_time_minutes":12},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":194,"title":195,"slug":196,"order_index":194,"cornerstone":52,"reading_time_minutes":12},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":198,"title":199,"slug":200,"order_index":198,"cornerstone":52,"reading_time_minutes":12},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":12,"name":202,"slug":203,"order_index":12,"topics":204},"Text & Content Basics","text-content-basics",[205,208,212,216,220,224,228,232],{"id":51,"title":206,"slug":207,"order_index":51,"cornerstone":52,"reading_time_minutes":12},"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":209,"title":210,"slug":211,"order_index":209,"cornerstone":52,"reading_time_minutes":12},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":213,"title":214,"slug":215,"order_index":213,"cornerstone":52,"reading_time_minutes":23},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":217,"title":218,"slug":219,"order_index":217,"cornerstone":52,"reading_time_minutes":12},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":221,"title":222,"slug":223,"order_index":221,"cornerstone":52,"reading_time_minutes":12},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":225,"title":226,"slug":227,"order_index":225,"cornerstone":52,"reading_time_minutes":12},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":229,"title":230,"slug":231,"order_index":229,"cornerstone":52,"reading_time_minutes":12},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":233,"title":234,"slug":235,"order_index":233,"cornerstone":52,"reading_time_minutes":12},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":65,"name":237,"slug":238,"order_index":65,"topics":239},"Links, Media & Navigation","links-media-navigation",[240,244,248,252,256],{"id":241,"title":242,"slug":243,"order_index":241,"cornerstone":52,"reading_time_minutes":12},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":245,"title":246,"slug":247,"order_index":245,"cornerstone":52,"reading_time_minutes":12},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":249,"title":250,"slug":251,"order_index":249,"cornerstone":52,"reading_time_minutes":23},17,"HTML Favicon Setup","html-favicon-setup",{"id":253,"title":254,"slug":255,"order_index":253,"cornerstone":52,"reading_time_minutes":12},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":257,"title":258,"slug":259,"order_index":257,"cornerstone":52,"reading_time_minutes":12},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":190,"name":261,"slug":262,"order_index":190,"topics":263},"Structuring Content","structuring-content",[264,269,274,279,284,288,292,296,300,304,308,312,316,320,324,328,332],{"id":265,"title":266,"slug":267,"order_index":268,"cornerstone":52,"reading_time_minutes":12},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":270,"title":271,"slug":272,"order_index":273,"cornerstone":52,"reading_time_minutes":12},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":275,"title":276,"slug":277,"order_index":278,"cornerstone":52,"reading_time_minutes":12},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":280,"title":281,"slug":282,"order_index":283,"cornerstone":52,"reading_time_minutes":23},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":285,"title":286,"slug":287,"order_index":265,"cornerstone":52,"reading_time_minutes":12},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":289,"title":290,"slug":291,"order_index":270,"cornerstone":52,"reading_time_minutes":23},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":293,"title":294,"slug":295,"order_index":275,"cornerstone":52,"reading_time_minutes":12},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":297,"title":298,"slug":299,"order_index":280,"cornerstone":52,"reading_time_minutes":12},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":301,"title":302,"slug":303,"order_index":285,"cornerstone":52,"reading_time_minutes":12},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":305,"title":306,"slug":307,"order_index":289,"cornerstone":52,"reading_time_minutes":65},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":309,"title":310,"slug":311,"order_index":293,"cornerstone":52,"reading_time_minutes":12},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":313,"title":314,"slug":315,"order_index":297,"cornerstone":52,"reading_time_minutes":12},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":317,"title":318,"slug":319,"order_index":301,"cornerstone":52,"reading_time_minutes":23},77,"HTML Symbols","html-symbols",{"id":321,"title":322,"slug":323,"order_index":321,"cornerstone":52,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":325,"title":326,"slug":327,"order_index":325,"cornerstone":52,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":329,"title":330,"slug":331,"order_index":329,"cornerstone":52,"reading_time_minutes":23},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":333,"title":334,"slug":335,"order_index":333,"cornerstone":52,"reading_time_minutes":23},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":51,"name":337,"slug":338,"order_index":194,"topics":339},"Forms & User Input","forms-user-input",[340,345,350,355,360,365],{"id":341,"title":342,"slug":343,"order_index":344,"cornerstone":52,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":346,"title":347,"slug":348,"order_index":349,"cornerstone":52,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":351,"title":352,"slug":353,"order_index":354,"cornerstone":52,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":356,"title":357,"slug":358,"order_index":359,"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":361,"title":362,"slug":363,"order_index":364,"cornerstone":52,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":366,"title":367,"slug":368,"order_index":369,"cornerstone":52,"reading_time_minutes":12},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":209,"name":371,"slug":372,"order_index":198,"topics":373},"Graphics & Visuals","graphics-visuals",[374,379],{"id":375,"title":376,"slug":377,"order_index":378,"cornerstone":52,"reading_time_minutes":65},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":380,"title":381,"slug":382,"order_index":383,"cornerstone":52,"reading_time_minutes":65},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":213,"name":385,"slug":386,"order_index":51,"topics":387},"Multimedia","multimedia",[388,393,398,403,408],{"id":389,"title":390,"slug":391,"order_index":392,"cornerstone":52,"reading_time_minutes":12},57,"HTML Media Overview","html-media-overview",45,{"id":394,"title":395,"slug":396,"order_index":397,"cornerstone":52,"reading_time_minutes":12},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":399,"title":400,"slug":401,"order_index":402,"cornerstone":52,"reading_time_minutes":12},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":404,"title":405,"slug":406,"order_index":407,"cornerstone":52,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":409,"title":410,"slug":411,"order_index":341,"cornerstone":52,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":217,"name":413,"slug":414,"order_index":209,"topics":415},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[416,420,424,428,432],{"id":417,"title":418,"slug":419,"order_index":346,"cornerstone":52,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":421,"title":422,"slug":423,"order_index":351,"cornerstone":52,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":425,"title":426,"slug":427,"order_index":356,"cornerstone":52,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":429,"title":430,"slug":431,"order_index":361,"cornerstone":52,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":433,"title":434,"slug":435,"order_index":366,"cornerstone":52,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":221,"name":437,"slug":438,"order_index":213,"topics":439},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[440,444,448],{"id":441,"title":442,"slug":443,"order_index":375,"cornerstone":52,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":445,"title":446,"slug":447,"order_index":380,"cornerstone":52,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":449,"title":450,"slug":451,"order_index":389,"cornerstone":52,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":225,"name":453,"slug":454,"order_index":217,"topics":455},"Reference & Practice","reference-practice",[456,460,464,468,472,476,480,484],{"id":457,"title":458,"slug":459,"order_index":23,"cornerstone":52,"reading_time_minutes":12},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":461,"title":462,"slug":463,"order_index":12,"cornerstone":52,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":465,"title":466,"slug":467,"order_index":65,"cornerstone":52,"reading_time_minutes":12},72,"HTML Events Reference","html-events-reference",{"id":469,"title":470,"slug":471,"order_index":190,"cornerstone":52,"reading_time_minutes":12},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":473,"title":474,"slug":475,"order_index":194,"cornerstone":52,"reading_time_minutes":12},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":477,"title":478,"slug":479,"order_index":198,"cornerstone":52,"reading_time_minutes":12},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":481,"title":482,"slug":483,"order_index":51,"cornerstone":52,"reading_time_minutes":65},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":485,"title":486,"slug":487,"order_index":209,"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":489,"meta_title":490,"meta_description":491,"og_image":5,"locale":174,"subcategories":492},"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.",[493,522,546,582,614,646,675,699,727,755],{"id":283,"name":494,"slug":495,"order_index":496,"topics":497},"UI Components","ui-components",0,[498,502,506,510,514,518],{"id":499,"title":500,"slug":501,"order_index":409,"cornerstone":52,"reading_time_minutes":198},148,"CSS Buttons: Variants, States, Sizes and Accessible Button Design","css-buttons",{"id":503,"title":504,"slug":505,"order_index":417,"cornerstone":52,"reading_time_minutes":198},149,"CSS Card Component: Layouts with Flexbox, Grid, Container Queries and Subgrid","css-cards",{"id":507,"title":508,"slug":509,"order_index":421,"cornerstone":52,"reading_time_minutes":51},150,"CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible Navigation","css-navbar-dropdowns",{"id":511,"title":512,"slug":513,"order_index":425,"cornerstone":52,"reading_time_minutes":198},151,"HTML and CSS Forms and Inputs: Styled, Accessible and Validated Form Controls","css-forms-inputs",{"id":515,"title":516,"slug":517,"order_index":429,"cornerstone":52,"reading_time_minutes":198},152,"CSS Tooltips and Popovers: Popover API, Anchor Positioning and Accessible Overlays","css-tooltips-popovers",{"id":519,"title":520,"slug":521,"order_index":433,"cornerstone":52,"reading_time_minutes":198},153,"Pagination and Breadcrumbs: Accessible Navigation Patterns with HTML, CSS and Schema","pagination-breadcrumbs",{"id":229,"name":523,"slug":524,"order_index":496,"topics":525},"CSS Fundamentals & Setup","css-fundamentals-setup",[526,530,534,538,542],{"id":527,"title":528,"slug":529,"order_index":23,"cornerstone":52,"reading_time_minutes":190},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":531,"title":532,"slug":533,"order_index":12,"cornerstone":52,"reading_time_minutes":190},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":535,"title":536,"slug":537,"order_index":65,"cornerstone":52,"reading_time_minutes":65},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":539,"title":540,"slug":541,"order_index":190,"cornerstone":52,"reading_time_minutes":65},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":543,"title":544,"slug":545,"order_index":194,"cornerstone":52,"reading_time_minutes":194},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":233,"name":547,"slug":548,"order_index":496,"topics":549},"Selectors & the Cascade","selectors-the-cascade",[550,554,558,562,566,570,574,578],{"id":551,"title":552,"slug":553,"order_index":198,"cornerstone":52,"reading_time_minutes":190},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":555,"title":556,"slug":557,"order_index":51,"cornerstone":52,"reading_time_minutes":190},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":559,"title":560,"slug":561,"order_index":209,"cornerstone":52,"reading_time_minutes":190},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":563,"title":564,"slug":565,"order_index":213,"cornerstone":52,"reading_time_minutes":198},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":567,"title":568,"slug":569,"order_index":217,"cornerstone":52,"reading_time_minutes":194},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":571,"title":572,"slug":573,"order_index":221,"cornerstone":52,"reading_time_minutes":194},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":575,"title":576,"slug":577,"order_index":225,"cornerstone":52,"reading_time_minutes":190},93,"CSS Specificity Explained","css-specificity-explained",{"id":579,"title":580,"slug":581,"order_index":229,"cornerstone":52,"reading_time_minutes":194},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"id":241,"name":583,"slug":584,"order_index":496,"topics":585},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[586,590,594,598,602,606,610],{"id":587,"title":588,"slug":589,"order_index":233,"cornerstone":52,"reading_time_minutes":194},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":591,"title":592,"slug":593,"order_index":241,"cornerstone":52,"reading_time_minutes":190},96,"CSS Backgrounds","css-backgrounds",{"id":595,"title":596,"slug":597,"order_index":245,"cornerstone":52,"reading_time_minutes":194},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":599,"title":600,"slug":601,"order_index":249,"cornerstone":52,"reading_time_minutes":194},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":603,"title":604,"slug":605,"order_index":253,"cornerstone":52,"reading_time_minutes":198},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":607,"title":608,"slug":609,"order_index":257,"cornerstone":52,"reading_time_minutes":194},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":611,"title":612,"slug":613,"order_index":268,"cornerstone":52,"reading_time_minutes":198},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":245,"name":615,"slug":616,"order_index":496,"topics":617},"Box Model & Spacing","box-model-spacing",[618,622,626,630,634,638,642],{"id":619,"title":620,"slug":621,"order_index":273,"cornerstone":52,"reading_time_minutes":51},102,"The CSS Box Model: Content, Padding, Border and Margin","css-box-model",{"id":623,"title":624,"slug":625,"order_index":278,"cornerstone":52,"reading_time_minutes":51},103,"CSS Margin and Margin Collapse","css-margin-and-margin-collapse",{"id":627,"title":628,"slug":629,"order_index":283,"cornerstone":52,"reading_time_minutes":198},104,"CSS Padding: Shorthand, Percentages and Best Practices","css-padding",{"id":631,"title":632,"slug":633,"order_index":265,"cornerstone":52,"reading_time_minutes":213},105,"CSS Width, Height, Min-Width, Max-Width, Min-Height & Max-Height","css-width-height-min-max",{"id":635,"title":636,"slug":637,"order_index":270,"cornerstone":52,"reading_time_minutes":194},106,"CSS box-sizing: content-box vs border-box","css-box-sizing",{"id":639,"title":640,"slug":641,"order_index":275,"cornerstone":52,"reading_time_minutes":51},107,"CSS Overflow: hidden, scroll, auto, clip and Text Truncation","css-overflow",{"id":643,"title":644,"slug":645,"order_index":280,"cornerstone":52,"reading_time_minutes":51},108,"CSS Units: px, rem, em, %, vw, vh and dvh","css-units",{"id":249,"name":647,"slug":648,"order_index":496,"topics":649},"Typography & Text","typography-text",[650,654,658,662,666,670,674],{"id":651,"title":652,"slug":653,"order_index":285,"cornerstone":52,"reading_time_minutes":51},109,"CSS Text Properties: Alignment, Spacing, Decoration and Wrapping","css-text-properties",{"id":655,"title":656,"slug":657,"order_index":289,"cornerstone":52,"reading_time_minutes":51},110,"CSS Fonts and font-family: Font Stacks, Weights and System Fonts","css-fonts-font-family",{"id":659,"title":660,"slug":661,"order_index":293,"cornerstone":52,"reading_time_minutes":51},111,"Web Fonts: Google Fonts, @font-face and Variable Fonts","web-fonts",{"id":663,"title":664,"slug":665,"order_index":297,"cornerstone":52,"reading_time_minutes":51},112,"CSS Text Effects: text-wrap balance, line-clamp, Ellipsis and More","css-text-effects",{"id":667,"title":668,"slug":669,"order_index":301,"cornerstone":52,"reading_time_minutes":209},113,"Styling Links","styling-links-css",{"id":671,"title":672,"slug":673,"order_index":321,"cornerstone":52,"reading_time_minutes":51},114,"Styling Lists & Tables","styling-lists-and-tables-css",{"id":159,"title":161,"slug":160,"order_index":325,"cornerstone":52,"reading_time_minutes":217},{"id":253,"name":43,"slug":44,"order_index":496,"topics":676},[677,678,679,683,687,691,695],{"id":37,"title":38,"slug":39,"order_index":329,"cornerstone":52,"reading_time_minutes":51},{"id":163,"title":165,"slug":164,"order_index":333,"cornerstone":52,"reading_time_minutes":198},{"id":680,"title":681,"slug":682,"order_index":344,"cornerstone":52,"reading_time_minutes":198},118,"Z-index & Stacking Contexts","z-index-and-stacking-contexts",{"id":684,"title":685,"slug":686,"order_index":349,"cornerstone":52,"reading_time_minutes":194},119,"Float & Clear (Legacy, and Why to Avoid It)","float-and-clear",{"id":688,"title":689,"slug":690,"order_index":354,"cornerstone":52,"reading_time_minutes":198},120,"Centering Techniques","centering-techniques",{"id":692,"title":693,"slug":694,"order_index":359,"cornerstone":52,"reading_time_minutes":51},121,"aspect-ratio & object-fit","aspect-ratio-and-object-fit",{"id":696,"title":697,"slug":698,"order_index":364,"cornerstone":52,"reading_time_minutes":209},122,"Website Layout Basics","website-layout-basics",{"id":268,"name":700,"slug":701,"order_index":496,"topics":702},"The Modern CSS Toolkit","the-modern-css-toolkit",[703,707,711,715,719,723],{"id":704,"title":705,"slug":706,"order_index":369,"cornerstone":52,"reading_time_minutes":209},129,"CSS Variables (Custom Properties)","css-variables-custom-properties",{"id":708,"title":709,"slug":710,"order_index":378,"cornerstone":52,"reading_time_minutes":209},130,"Math Functions (calc, min, max, clamp)","math-functions-calc-min-max-clamp",{"id":712,"title":713,"slug":714,"order_index":383,"cornerstone":52,"reading_time_minutes":51},131,"Native CSS Nesting","native-css-nesting",{"id":716,"title":717,"slug":718,"order_index":392,"cornerstone":52,"reading_time_minutes":51},132,"Cascade Layers (@layer)","cascade-layers-at-layer",{"id":720,"title":721,"slug":722,"order_index":397,"cornerstone":52,"reading_time_minutes":213},133,"Dark Mode (prefers-color-scheme, light-dark())","dark-mode-prefers-color-scheme-light-dark",{"id":724,"title":725,"slug":726,"order_index":402,"cornerstone":52,"reading_time_minutes":209},134,"CSS Reset & Normalize","css-reset-and-normalize",{"id":273,"name":728,"slug":729,"order_index":496,"topics":730},"Responsive Design","responsive-design",[731,735,739,743,747,751],{"id":732,"title":733,"slug":734,"order_index":407,"cornerstone":52,"reading_time_minutes":213},135,"Mobile-First & the Viewport","mobile-first-and-the-viewport",{"id":736,"title":737,"slug":738,"order_index":341,"cornerstone":52,"reading_time_minutes":209},136,"Media Queries","media-queries",{"id":740,"title":741,"slug":742,"order_index":346,"cornerstone":52,"reading_time_minutes":209},137,"Responsive Images & Video","responsive-images-and-video",{"id":744,"title":745,"slug":746,"order_index":351,"cornerstone":52,"reading_time_minutes":213},138,"Fluid Typography with clamp()","fluid-typography-with-clamp",{"id":748,"title":749,"slug":750,"order_index":356,"cornerstone":52,"reading_time_minutes":213},139,"Container Queries","container-queries",{"id":752,"title":753,"slug":754,"order_index":361,"cornerstone":52,"reading_time_minutes":225},140,"Responsive Navigation Pattern","responsive-navigation-pattern",{"id":278,"name":756,"slug":757,"order_index":496,"topics":758},"Transitions & Animation","transitions-animation",[759,763,767,771,775,779,783],{"id":760,"title":761,"slug":762,"order_index":366,"cornerstone":52,"reading_time_minutes":194},141,"CSS Transitions: Smooth State Changes with transition, @starting-style and allow-discrete","css-transitions",{"id":764,"title":765,"slug":766,"order_index":375,"cornerstone":52,"reading_time_minutes":190},142,"CSS 2D Transforms: translate, rotate, scale, skew and transform-origin","css-2d-transforms",{"id":768,"title":769,"slug":770,"order_index":380,"cornerstone":52,"reading_time_minutes":194},143,"CSS 3D Transforms: perspective, preserve-3d, rotateX\u002FY and backface-visibility","css-3d-transforms",{"id":772,"title":773,"slug":774,"order_index":389,"cornerstone":52,"reading_time_minutes":194},144,"CSS Keyframe Animations: @keyframes, animation shorthand, fill-mode and @property","css-keyframe-animations",{"id":776,"title":777,"slug":778,"order_index":394,"cornerstone":52,"reading_time_minutes":194},145,"CSS Scroll-Driven Animations: animation-timeline, scroll() and view()","css-scroll-driven-animations",{"id":780,"title":781,"slug":782,"order_index":399,"cornerstone":52,"reading_time_minutes":194},146,"CSS View Transitions API: Progressive Enhancement for Page and State Animations","css-view-transitions",{"id":784,"title":785,"slug":786,"order_index":404,"cornerstone":52,"reading_time_minutes":198},147,"Motion Accessibility and Performance: prefers-reduced-motion, will-change and Smooth 60fps Animations","motion-accessibility-prefers-reduced-motion-performance"]