[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"course-tree":6,"blog-categories":646,"topic:css-fonts-font-family":670},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8,334],{"id":9,"name":10,"slug":11,"icon":5,"icon_url":5,"short_description":12,"meta_title":13,"meta_description":14,"og_image":15,"locale":16,"subcategories":17},1,"HTML","html-tutorial","Welcome to our HTML Tutorial for Beginners, a complete guide designed to help you learn HTML from the ground up.\n\nHTML, which stands for HyperText Markup Language, is the standard language used to structure content on the web. Whether you want to become a web developer, build your own website, or continue learning CSS and JavaScript, understanding HTML is an essential first step.\n\nThis HTML course takes you through the fundamentals step by step, using simple explanations and practical examples. ","HTML Tutorial for Beginners - Learn HTML Step by Step","Learn HTML from scratch with our beginner-friendly HTML tutorial. Understand HTML tags, elements, forms, tables, links, images, semantic HTML and more with practical examples.","https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fcourses\u002Fog\u002F01M2GK0XN45C0B937NF9XFAD4S.webp","en",[18,46,82,106,182,216,230,258,282,298],{"id":9,"name":19,"slug":20,"order_index":9,"topics":21},"HTML Fundamentals & Setup","html-fundamentals-setup",[22,27,30,34,38,42],{"id":23,"title":24,"slug":25,"order_index":9,"cornerstone":26,"reading_time_minutes":23},2,"HTML Editors & Environment Setup","html-editors-and-environment-setup",false,{"id":9,"title":28,"slug":29,"order_index":9,"cornerstone":26,"reading_time_minutes":9},"HTML Introduction & History","html-introduction-and-history",{"id":31,"title":32,"slug":33,"order_index":31,"cornerstone":26,"reading_time_minutes":23},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":35,"title":36,"slug":37,"order_index":35,"cornerstone":26,"reading_time_minutes":23},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":39,"title":40,"slug":41,"order_index":39,"cornerstone":26,"reading_time_minutes":23},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":43,"title":44,"slug":45,"order_index":43,"cornerstone":26,"reading_time_minutes":23},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":23,"name":47,"slug":48,"order_index":23,"topics":49},"Text & Content Basics","text-content-basics",[50,54,58,62,66,70,74,78],{"id":51,"title":52,"slug":53,"order_index":51,"cornerstone":26,"reading_time_minutes":23},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":55,"title":56,"slug":57,"order_index":55,"cornerstone":26,"reading_time_minutes":23},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":59,"title":60,"slug":61,"order_index":59,"cornerstone":26,"reading_time_minutes":9},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":63,"title":64,"slug":65,"order_index":63,"cornerstone":26,"reading_time_minutes":23},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":67,"title":68,"slug":69,"order_index":67,"cornerstone":26,"reading_time_minutes":23},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":71,"title":72,"slug":73,"order_index":71,"cornerstone":26,"reading_time_minutes":23},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":75,"title":76,"slug":77,"order_index":75,"cornerstone":26,"reading_time_minutes":23},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":79,"title":80,"slug":81,"order_index":79,"cornerstone":26,"reading_time_minutes":23},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":31,"name":83,"slug":84,"order_index":31,"topics":85},"Links, Media & Navigation","links-media-navigation",[86,90,94,98,102],{"id":87,"title":88,"slug":89,"order_index":87,"cornerstone":26,"reading_time_minutes":23},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":91,"title":92,"slug":93,"order_index":91,"cornerstone":26,"reading_time_minutes":23},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":95,"title":96,"slug":97,"order_index":95,"cornerstone":26,"reading_time_minutes":9},17,"HTML Favicon Setup","html-favicon-setup",{"id":99,"title":100,"slug":101,"order_index":99,"cornerstone":26,"reading_time_minutes":23},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":103,"title":104,"slug":105,"order_index":103,"cornerstone":26,"reading_time_minutes":23},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":35,"name":107,"slug":108,"order_index":35,"topics":109},"Structuring Content","structuring-content",[110,115,120,125,130,134,138,142,146,150,154,158,162,166,170,174,178],{"id":111,"title":112,"slug":113,"order_index":114,"cornerstone":26,"reading_time_minutes":23},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":116,"title":117,"slug":118,"order_index":119,"cornerstone":26,"reading_time_minutes":23},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":121,"title":122,"slug":123,"order_index":124,"cornerstone":26,"reading_time_minutes":23},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":126,"title":127,"slug":128,"order_index":129,"cornerstone":26,"reading_time_minutes":9},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":131,"title":132,"slug":133,"order_index":111,"cornerstone":26,"reading_time_minutes":23},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":135,"title":136,"slug":137,"order_index":116,"cornerstone":26,"reading_time_minutes":9},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":139,"title":140,"slug":141,"order_index":121,"cornerstone":26,"reading_time_minutes":23},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":143,"title":144,"slug":145,"order_index":126,"cornerstone":26,"reading_time_minutes":23},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":147,"title":148,"slug":149,"order_index":131,"cornerstone":26,"reading_time_minutes":23},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":151,"title":152,"slug":153,"order_index":135,"cornerstone":26,"reading_time_minutes":31},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":155,"title":156,"slug":157,"order_index":139,"cornerstone":26,"reading_time_minutes":23},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":159,"title":160,"slug":161,"order_index":143,"cornerstone":26,"reading_time_minutes":23},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":163,"title":164,"slug":165,"order_index":147,"cornerstone":26,"reading_time_minutes":9},77,"HTML Symbols","html-symbols",{"id":167,"title":168,"slug":169,"order_index":167,"cornerstone":26,"reading_time_minutes":9},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":171,"title":172,"slug":173,"order_index":171,"cornerstone":26,"reading_time_minutes":23},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":175,"title":176,"slug":177,"order_index":175,"cornerstone":26,"reading_time_minutes":9},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":179,"title":180,"slug":181,"order_index":179,"cornerstone":26,"reading_time_minutes":9},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":51,"name":183,"slug":184,"order_index":39,"topics":185},"Forms & User Input","forms-user-input",[186,191,196,201,206,211],{"id":187,"title":188,"slug":189,"order_index":190,"cornerstone":26,"reading_time_minutes":23},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":192,"title":193,"slug":194,"order_index":195,"cornerstone":26,"reading_time_minutes":9},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":197,"title":198,"slug":199,"order_index":200,"cornerstone":26,"reading_time_minutes":9},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":202,"title":203,"slug":204,"order_index":205,"cornerstone":26,"reading_time_minutes":23},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":207,"title":208,"slug":209,"order_index":210,"cornerstone":26,"reading_time_minutes":23},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":212,"title":213,"slug":214,"order_index":215,"cornerstone":26,"reading_time_minutes":23},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":55,"name":217,"slug":218,"order_index":43,"topics":219},"Graphics & Visuals","graphics-visuals",[220,225],{"id":221,"title":222,"slug":223,"order_index":224,"cornerstone":26,"reading_time_minutes":31},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":226,"title":227,"slug":228,"order_index":229,"cornerstone":26,"reading_time_minutes":31},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":59,"name":231,"slug":232,"order_index":51,"topics":233},"Multimedia","multimedia",[234,239,244,249,254],{"id":235,"title":236,"slug":237,"order_index":238,"cornerstone":26,"reading_time_minutes":23},57,"HTML Media Overview","html-media-overview",45,{"id":240,"title":241,"slug":242,"order_index":243,"cornerstone":26,"reading_time_minutes":23},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":245,"title":246,"slug":247,"order_index":248,"cornerstone":26,"reading_time_minutes":23},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":250,"title":251,"slug":252,"order_index":253,"cornerstone":26,"reading_time_minutes":23},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":255,"title":256,"slug":257,"order_index":187,"cornerstone":26,"reading_time_minutes":23},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":63,"name":259,"slug":260,"order_index":55,"topics":261},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[262,266,270,274,278],{"id":263,"title":264,"slug":265,"order_index":192,"cornerstone":26,"reading_time_minutes":23},62,"HTML Geolocation API","html-geolocation-api",{"id":267,"title":268,"slug":269,"order_index":197,"cornerstone":26,"reading_time_minutes":23},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":271,"title":272,"slug":273,"order_index":202,"cornerstone":26,"reading_time_minutes":23},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":275,"title":276,"slug":277,"order_index":207,"cornerstone":26,"reading_time_minutes":23},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":279,"title":280,"slug":281,"order_index":212,"cornerstone":26,"reading_time_minutes":23},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":67,"name":283,"slug":284,"order_index":59,"topics":285},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[286,290,294],{"id":287,"title":288,"slug":289,"order_index":221,"cornerstone":26,"reading_time_minutes":23},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":291,"title":292,"slug":293,"order_index":226,"cornerstone":26,"reading_time_minutes":23},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":295,"title":296,"slug":297,"order_index":235,"cornerstone":26,"reading_time_minutes":23},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":71,"name":299,"slug":300,"order_index":63,"topics":301},"Reference & Practice","reference-practice",[302,306,310,314,318,322,326,330],{"id":303,"title":304,"slug":305,"order_index":9,"cornerstone":26,"reading_time_minutes":23},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":307,"title":308,"slug":309,"order_index":23,"cornerstone":26,"reading_time_minutes":23},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":311,"title":312,"slug":313,"order_index":31,"cornerstone":26,"reading_time_minutes":23},72,"HTML Events Reference","html-events-reference",{"id":315,"title":316,"slug":317,"order_index":35,"cornerstone":26,"reading_time_minutes":23},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":319,"title":320,"slug":321,"order_index":39,"cornerstone":26,"reading_time_minutes":23},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":323,"title":324,"slug":325,"order_index":43,"cornerstone":26,"reading_time_minutes":23},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":327,"title":328,"slug":329,"order_index":51,"cornerstone":26,"reading_time_minutes":31},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":331,"title":332,"slug":333,"order_index":55,"cornerstone":26,"reading_time_minutes":9},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":23,"name":335,"slug":336,"icon":5,"icon_url":5,"short_description":337,"meta_title":338,"meta_description":339,"og_image":5,"locale":16,"subcategories":340},"CSS","css","Master CSS from basics to advanced. Learn styling, layouts, Flexbox, Grid, and responsive design with practical examples.","CSS Course - Learn CSS from Scratch to Advanced","Learn CSS (Cascading Style Sheets) step by step. Master selectors, layouts, Flexbox, Grid, animations, and responsive web design with hands-on examples.",[341,370,394,430,462,494,526,558,586,614],{"id":129,"name":342,"slug":343,"order_index":344,"topics":345},"UI Components","ui-components",0,[346,350,354,358,362,366],{"id":347,"title":348,"slug":349,"order_index":255,"cornerstone":26,"reading_time_minutes":43},148,"CSS Buttons: Variants, States, Sizes and Accessible Button Design","css-buttons",{"id":351,"title":352,"slug":353,"order_index":263,"cornerstone":26,"reading_time_minutes":43},149,"CSS Card Component: Layouts with Flexbox, Grid, Container Queries and Subgrid","css-cards",{"id":355,"title":356,"slug":357,"order_index":267,"cornerstone":26,"reading_time_minutes":51},150,"CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible Navigation","css-navbar-dropdowns",{"id":359,"title":360,"slug":361,"order_index":271,"cornerstone":26,"reading_time_minutes":43},151,"HTML and CSS Forms and Inputs: Styled, Accessible and Validated Form Controls","css-forms-inputs",{"id":363,"title":364,"slug":365,"order_index":275,"cornerstone":26,"reading_time_minutes":43},152,"CSS Tooltips and Popovers: Popover API, Anchor Positioning and Accessible Overlays","css-tooltips-popovers",{"id":367,"title":368,"slug":369,"order_index":279,"cornerstone":26,"reading_time_minutes":43},153,"Pagination and Breadcrumbs: Accessible Navigation Patterns with HTML, CSS and Schema","pagination-breadcrumbs",{"id":75,"name":371,"slug":372,"order_index":344,"topics":373},"CSS Fundamentals & Setup","css-fundamentals-setup",[374,378,382,386,390],{"id":375,"title":376,"slug":377,"order_index":9,"cornerstone":26,"reading_time_minutes":35},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":379,"title":380,"slug":381,"order_index":23,"cornerstone":26,"reading_time_minutes":35},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":383,"title":384,"slug":385,"order_index":31,"cornerstone":26,"reading_time_minutes":31},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":387,"title":388,"slug":389,"order_index":35,"cornerstone":26,"reading_time_minutes":31},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":391,"title":392,"slug":393,"order_index":39,"cornerstone":26,"reading_time_minutes":39},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":79,"name":395,"slug":396,"order_index":344,"topics":397},"Selectors & the Cascade","selectors-the-cascade",[398,402,406,410,414,418,422,426],{"id":399,"title":400,"slug":401,"order_index":43,"cornerstone":26,"reading_time_minutes":35},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":403,"title":404,"slug":405,"order_index":51,"cornerstone":26,"reading_time_minutes":35},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":407,"title":408,"slug":409,"order_index":55,"cornerstone":26,"reading_time_minutes":35},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":411,"title":412,"slug":413,"order_index":59,"cornerstone":26,"reading_time_minutes":43},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":415,"title":416,"slug":417,"order_index":63,"cornerstone":26,"reading_time_minutes":39},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":419,"title":420,"slug":421,"order_index":67,"cornerstone":26,"reading_time_minutes":39},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":423,"title":424,"slug":425,"order_index":71,"cornerstone":26,"reading_time_minutes":35},93,"CSS Specificity Explained","css-specificity-explained",{"id":427,"title":428,"slug":429,"order_index":75,"cornerstone":26,"reading_time_minutes":39},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"id":87,"name":431,"slug":432,"order_index":344,"topics":433},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[434,438,442,446,450,454,458],{"id":435,"title":436,"slug":437,"order_index":79,"cornerstone":26,"reading_time_minutes":39},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":439,"title":440,"slug":441,"order_index":87,"cornerstone":26,"reading_time_minutes":35},96,"CSS Backgrounds","css-backgrounds",{"id":443,"title":444,"slug":445,"order_index":91,"cornerstone":26,"reading_time_minutes":39},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":447,"title":448,"slug":449,"order_index":95,"cornerstone":26,"reading_time_minutes":39},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":451,"title":452,"slug":453,"order_index":99,"cornerstone":26,"reading_time_minutes":43},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":455,"title":456,"slug":457,"order_index":103,"cornerstone":26,"reading_time_minutes":39},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":459,"title":460,"slug":461,"order_index":114,"cornerstone":26,"reading_time_minutes":43},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":91,"name":463,"slug":464,"order_index":344,"topics":465},"Box Model & Spacing","box-model-spacing",[466,470,474,478,482,486,490],{"id":467,"title":468,"slug":469,"order_index":119,"cornerstone":26,"reading_time_minutes":51},102,"The CSS Box Model: Content, Padding, Border and Margin","css-box-model",{"id":471,"title":472,"slug":473,"order_index":124,"cornerstone":26,"reading_time_minutes":51},103,"CSS Margin and Margin Collapse","css-margin-and-margin-collapse",{"id":475,"title":476,"slug":477,"order_index":129,"cornerstone":26,"reading_time_minutes":43},104,"CSS Padding: Shorthand, Percentages and Best Practices","css-padding",{"id":479,"title":480,"slug":481,"order_index":111,"cornerstone":26,"reading_time_minutes":59},105,"CSS Width, Height, Min-Width, Max-Width, Min-Height & Max-Height","css-width-height-min-max",{"id":483,"title":484,"slug":485,"order_index":116,"cornerstone":26,"reading_time_minutes":39},106,"CSS box-sizing: content-box vs border-box","css-box-sizing",{"id":487,"title":488,"slug":489,"order_index":121,"cornerstone":26,"reading_time_minutes":51},107,"CSS Overflow: hidden, scroll, auto, clip and Text Truncation","css-overflow",{"id":491,"title":492,"slug":493,"order_index":126,"cornerstone":26,"reading_time_minutes":51},108,"CSS Units: px, rem, em, %, vw, vh and dvh","css-units",{"id":95,"name":495,"slug":496,"order_index":344,"topics":497},"Typography & Text","typography-text",[498,502,506,510,514,518,522],{"id":499,"title":500,"slug":501,"order_index":131,"cornerstone":26,"reading_time_minutes":51},109,"CSS Text Properties: Alignment, Spacing, Decoration and Wrapping","css-text-properties",{"id":503,"title":504,"slug":505,"order_index":135,"cornerstone":26,"reading_time_minutes":51},110,"CSS Fonts and font-family: Font Stacks, Weights and System Fonts","css-fonts-font-family",{"id":507,"title":508,"slug":509,"order_index":139,"cornerstone":26,"reading_time_minutes":51},111,"Web Fonts: Google Fonts, @font-face and Variable Fonts","web-fonts",{"id":511,"title":512,"slug":513,"order_index":143,"cornerstone":26,"reading_time_minutes":51},112,"CSS Text Effects: text-wrap balance, line-clamp, Ellipsis and More","css-text-effects",{"id":515,"title":516,"slug":517,"order_index":147,"cornerstone":26,"reading_time_minutes":55},113,"Styling Links","styling-links-css",{"id":519,"title":520,"slug":521,"order_index":167,"cornerstone":26,"reading_time_minutes":51},114,"Styling Lists & Tables","styling-lists-and-tables-css",{"id":523,"title":524,"slug":525,"order_index":171,"cornerstone":26,"reading_time_minutes":63},115,"Icons (SVG & Icon Fonts)","icons-svg-and-icon-fonts",{"id":99,"name":527,"slug":528,"order_index":344,"topics":529},"Display, Position & Layout Basics","display-position-layout-basics",[530,534,538,542,546,550,554],{"id":531,"title":532,"slug":533,"order_index":175,"cornerstone":26,"reading_time_minutes":51},116,"Display & Inline-block","display-and-inline-block",{"id":535,"title":536,"slug":537,"order_index":179,"cornerstone":26,"reading_time_minutes":43},117,"Position (relative, absolute, fixed, sticky)","position-relative-absolute-fixed-sticky",{"id":539,"title":540,"slug":541,"order_index":190,"cornerstone":26,"reading_time_minutes":43},118,"Z-index & Stacking Contexts","z-index-and-stacking-contexts",{"id":543,"title":544,"slug":545,"order_index":195,"cornerstone":26,"reading_time_minutes":39},119,"Float & Clear (Legacy, and Why to Avoid It)","float-and-clear",{"id":547,"title":548,"slug":549,"order_index":200,"cornerstone":26,"reading_time_minutes":43},120,"Centering Techniques","centering-techniques",{"id":551,"title":552,"slug":553,"order_index":205,"cornerstone":26,"reading_time_minutes":51},121,"aspect-ratio & object-fit","aspect-ratio-and-object-fit",{"id":555,"title":556,"slug":557,"order_index":210,"cornerstone":26,"reading_time_minutes":55},122,"Website Layout Basics","website-layout-basics",{"id":114,"name":559,"slug":560,"order_index":344,"topics":561},"The Modern CSS Toolkit","the-modern-css-toolkit",[562,566,570,574,578,582],{"id":563,"title":564,"slug":565,"order_index":215,"cornerstone":26,"reading_time_minutes":55},129,"CSS Variables (Custom Properties)","css-variables-custom-properties",{"id":567,"title":568,"slug":569,"order_index":224,"cornerstone":26,"reading_time_minutes":55},130,"Math Functions (calc, min, max, clamp)","math-functions-calc-min-max-clamp",{"id":571,"title":572,"slug":573,"order_index":229,"cornerstone":26,"reading_time_minutes":51},131,"Native CSS Nesting","native-css-nesting",{"id":575,"title":576,"slug":577,"order_index":238,"cornerstone":26,"reading_time_minutes":51},132,"Cascade Layers (@layer)","cascade-layers-at-layer",{"id":579,"title":580,"slug":581,"order_index":243,"cornerstone":26,"reading_time_minutes":59},133,"Dark Mode (prefers-color-scheme, light-dark())","dark-mode-prefers-color-scheme-light-dark",{"id":583,"title":584,"slug":585,"order_index":248,"cornerstone":26,"reading_time_minutes":55},134,"CSS Reset & Normalize","css-reset-and-normalize",{"id":119,"name":587,"slug":588,"order_index":344,"topics":589},"Responsive Design","responsive-design",[590,594,598,602,606,610],{"id":591,"title":592,"slug":593,"order_index":253,"cornerstone":26,"reading_time_minutes":59},135,"Mobile-First & the Viewport","mobile-first-and-the-viewport",{"id":595,"title":596,"slug":597,"order_index":187,"cornerstone":26,"reading_time_minutes":55},136,"Media Queries","media-queries",{"id":599,"title":600,"slug":601,"order_index":192,"cornerstone":26,"reading_time_minutes":55},137,"Responsive Images & Video","responsive-images-and-video",{"id":603,"title":604,"slug":605,"order_index":197,"cornerstone":26,"reading_time_minutes":59},138,"Fluid Typography with clamp()","fluid-typography-with-clamp",{"id":607,"title":608,"slug":609,"order_index":202,"cornerstone":26,"reading_time_minutes":59},139,"Container Queries","container-queries",{"id":611,"title":612,"slug":613,"order_index":207,"cornerstone":26,"reading_time_minutes":71},140,"Responsive Navigation Pattern","responsive-navigation-pattern",{"id":124,"name":615,"slug":616,"order_index":344,"topics":617},"Transitions & Animation","transitions-animation",[618,622,626,630,634,638,642],{"id":619,"title":620,"slug":621,"order_index":212,"cornerstone":26,"reading_time_minutes":39},141,"CSS Transitions: Smooth State Changes with transition, @starting-style and allow-discrete","css-transitions",{"id":623,"title":624,"slug":625,"order_index":221,"cornerstone":26,"reading_time_minutes":35},142,"CSS 2D Transforms: translate, rotate, scale, skew and transform-origin","css-2d-transforms",{"id":627,"title":628,"slug":629,"order_index":226,"cornerstone":26,"reading_time_minutes":39},143,"CSS 3D Transforms: perspective, preserve-3d, rotateX\u002FY and backface-visibility","css-3d-transforms",{"id":631,"title":632,"slug":633,"order_index":235,"cornerstone":26,"reading_time_minutes":39},144,"CSS Keyframe Animations: @keyframes, animation shorthand, fill-mode and @property","css-keyframe-animations",{"id":635,"title":636,"slug":637,"order_index":240,"cornerstone":26,"reading_time_minutes":39},145,"CSS Scroll-Driven Animations: animation-timeline, scroll() and view()","css-scroll-driven-animations",{"id":639,"title":640,"slug":641,"order_index":245,"cornerstone":26,"reading_time_minutes":39},146,"CSS View Transitions API: Progressive Enhancement for Page and State Animations","css-view-transitions",{"id":643,"title":644,"slug":645,"order_index":250,"cornerstone":26,"reading_time_minutes":43},147,"Motion Accessibility and Performance: prefers-reduced-motion, will-change and Smooth 60fps Animations","motion-accessibility-prefers-reduced-motion-performance",{"data":647},[648,651,655,660,665],{"name":335,"slug":336,"description":649,"post_count":23,"subcategories":650},"Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",[],{"name":10,"slug":652,"description":653,"post_count":23,"subcategories":654},"html","Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":656,"slug":657,"description":658,"post_count":9,"subcategories":659},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",[],{"name":661,"slug":662,"description":663,"post_count":9,"subcategories":664},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":666,"slug":667,"description":668,"post_count":9,"subcategories":669},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[],{"data":671},{"id":503,"title":504,"slug":505,"content":672,"course":673,"subcategory":674,"author":675,"reading_time_minutes":51,"cornerstone":26,"schema_type":681,"faq_json":5,"video_url":5,"canonical_url":682,"meta_title":683,"meta_description":684,"og_image":5,"toc_json":685,"code_examples":749,"quiz":5,"exercises":773,"published_at":5,"updated_at":792,"prev":793,"next":794},"\u003Ch2 id=\"css-fonts-and-font-family-font-stacks-weights-and-system-fonts\">CSS Fonts and font-family: Font Stacks, Weights and System Fonts\u003C\u002Fh2>\u003Cp>The \u003Cstrong>CSS font-family\u003C\u002Fstrong> property chooses the typeface for text. Because you never know which fonts a visitor has installed, CSS uses a \u003Cem>font stack\u003C\u002Fem>: an ordered list of fallbacks ending with a generic family. This lesson covers font stacks, generic families, system fonts, font-size, weight, style, the \u003Ccode>font\u003C\u002Fcode> shorthand and how to avoid layout shift from fallback fonts.\u003C\u002Fp>\u003Ch3 id=\"what-you-will-learn\">What You Will Learn\u003C\u002Fh3>\u003Cul>\u003Cli>How \u003Ccode>font-family\u003C\u002Fcode> and font stacks work\u003C\u002Fli>\u003Cli>Generic families: \u003Ccode>serif\u003C\u002Fcode>, \u003Ccode>sans-serif\u003C\u002Fcode>, \u003Ccode>monospace\u003C\u002Fcode>, \u003Ccode>system-ui\u003C\u002Fcode> and more\u003C\u002Fli>\u003Cli>A modern system font stack\u003C\u002Fli>\u003Cli>\u003Ccode>font-size\u003C\u002Fcode>, \u003Ccode>font-weight\u003C\u002Fcode>, \u003Ccode>font-style\u003C\u002Fcode> and \u003Ccode>font-variant\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>The \u003Ccode>font\u003C\u002Fcode> shorthand and its required order\u003C\u002Fli>\u003Cli>Choosing readable fonts and pairing them\u003C\u002Fli>\u003Cli>Reducing layout shift with fallback font tuning\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"how-font-family-works\">How font-family Works\u003C\u002Fh3>\u003Cp>The browser goes through the list from left to right and uses the first font that is installed (or loaded) and contains the glyph it needs. It can even pick a different font per character, so a missing Urdu or emoji glyph falls through to the next family.\u003C\u002Fp>\u003Cpre>body {\n  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;\n}\u003C\u002Fpre>\u003Cul>\u003Cli>Font names with spaces or special characters must be quoted: \u003Ccode>'Times New Roman'\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Single-word names like \u003Ccode>Arial\u003C\u002Fcode> need no quotes.\u003C\u002Fli>\u003Cli>Always end the list with a \u003Cstrong>generic family\u003C\u002Fstrong>, which is never quoted.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"generic-font-families\">Generic Font Families\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Ccode>serif\u003C\u002Fcode>: letters with small strokes (serifs). Good for long reading and a traditional feel.\u003C\u002Fli>\u003Cli>\u003Ccode>sans-serif\u003C\u002Fcode>: clean strokes without serifs. Common for UI and screens.\u003C\u002Fli>\u003Cli>\u003Ccode>monospace\u003C\u002Fcode>: every character has the same width. Used for code.\u003C\u002Fli>\u003Cli>\u003Ccode>cursive\u003C\u002Fcode> and \u003Ccode>fantasy\u003C\u002Fcode>: decorative styles, inconsistent across systems, rarely recommended.\u003C\u002Fli>\u003Cli>\u003Ccode>system-ui\u003C\u002Fcode>: the operating system default UI font (San Francisco on Apple devices, Segoe UI on Windows, Roboto on Android).\u003C\u002Fli>\u003Cli>\u003Ccode>ui-serif\u003C\u002Fcode>, \u003Ccode>ui-sans-serif\u003C\u002Fcode>, \u003Ccode>ui-monospace\u003C\u002Fcode>, \u003Ccode>ui-rounded\u003C\u002Fcode>: system-specific variants, supported mainly in Safari and some other browsers.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"a-modern-system-font-stack\">A Modern System Font Stack\u003C\u002Fh3>\u003Cp>System fonts load instantly (zero network requests) and feel native on each device:\u003C\u002Fp>\u003Cpre>font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';\u003C\u002Fpre>\u003Ch3 id=\"web-safe-fonts\">Web Safe Fonts\u003C\u002Fh3>\u003Cp>Fonts that exist on almost every device include Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, Trebuchet MS and Courier New. Availability varies by platform, so always provide fallbacks. For a wider choice and consistent branding, use web fonts (next lesson).\u003C\u002Fp>\u003Ch3 id=\"font-size\">font-size\u003C\u002Fh3>\u003Cul>\u003Cli>Use \u003Ccode>rem\u003C\u002Fcode> so text respects the user browser settings.\u003C\u002Fli>\u003Cli>Body text should be at least 16px (\u003Ccode>1rem\u003C\u002Fcode>).\u003C\u002Fli>\u003Cli>Keywords like \u003Ccode>small\u003C\u002Fcode>, \u003Ccode>medium\u003C\u002Fcode> and \u003Ccode>large\u003C\u002Fcode> exist, but rem values are more precise.\u003C\u002Fli>\u003Cli>Use \u003Ccode>clamp()\u003C\u002Fcode> for fluid headings: \u003Ccode>font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem);\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Form inputs below 16px make iOS Safari zoom in on focus, so keep input text at 16px or larger.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"font-weight\">font-weight\u003C\u002Fh3>\u003Cp>Keywords: \u003Ccode>normal\u003C\u002Fcode> (400) and \u003Ccode>bold\u003C\u002Fcode> (700). Numeric values from 100 to 900 (and any number from 1 to 1000 with variable fonts) select the matching face. \u003Ccode>lighter\u003C\u002Fcode> and \u003Ccode>bolder\u003C\u002Fcode> are relative to the parent. If a weight is not available in the font files you loaded, the browser picks the nearest one or fakes bold, which often looks poor.\u003C\u002Fp>\u003Ch3 id=\"font-style\">font-style\u003C\u002Fh3>\u003Cp>\u003Ccode>normal\u003C\u002Fcode>, \u003Ccode>italic\u003C\u002Fcode> (uses the true italic design if the font has one) and \u003Ccode>oblique\u003C\u002Fcode> (slanted version of the upright, optionally with an angle such as \u003Ccode>oblique 10deg\u003C\u002Fcode>). Use \u003Ccode>font-synthesis: none\u003C\u002Fcode> to stop the browser from faking bold or italic when real faces are missing.\u003C\u002Fp>\u003Ch3 id=\"font-variant-and-advanced-features\">font-variant and Advanced Features\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Ccode>font-variant-numeric: tabular-nums;\u003C\u002Fcode> makes all digits equal width, ideal for tables and prices. \u003Ccode>oldstyle-nums\u003C\u002Fcode>, \u003Ccode>lining-nums\u003C\u002Fcode> and \u003Ccode>slashed-zero\u003C\u002Fcode> are also available.\u003C\u002Fli>\u003Cli>\u003Ccode>font-variant-caps: small-caps;\u003C\u002Fcode> gives true small capitals if the font supports them.\u003C\u002Fli>\u003Cli>\u003Ccode>font-variant-ligatures\u003C\u002Fcode> and \u003Ccode>font-kerning\u003C\u002Fcode> control ligatures and kerning.\u003C\u002Fli>\u003Cli>\u003Ccode>font-feature-settings\u003C\u002Fcode> is the low-level way to toggle OpenType features. Prefer the high-level \u003Ccode>font-variant-*\u003C\u002Fcode> properties when possible.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"the-font-shorthand\">The font Shorthand\u003C\u002Fh3>\u003Cpre>font: italic small-caps 700 1rem\u002F1.5 'Georgia', serif;\n\u002F* style variant weight size\u002Fline-height family *\u002F\u003C\u002Fpre>\u003Cp>Only \u003Ccode>font-size\u003C\u002Fcode> and \u003Ccode>font-family\u003C\u002Fcode> are required, and they must appear in that order at the end. The shorthand \u003Cstrong>resets\u003C\u002Fstrong> any omitted sub-properties (such as line-height) to their defaults, which is a common source of bugs. Many teams prefer longhand properties for clarity.\u003C\u002Fp>\u003Ch3 id=\"font-size-adjust\">font-size-adjust\u003C\u002Fh3>\u003Cp>Different fonts have different x-heights, so a fallback font at the same font-size can look much bigger or smaller. \u003Ccode>font-size-adjust: 0.5;\u003C\u002Fcode> (or \u003Ccode>from-font\u003C\u002Fcode>) keeps the lowercase letter height consistent between primary and fallback fonts.\u003C\u002Fp>\u003Ch3 id=\"choosing-and-pairing-fonts\">Choosing and Pairing Fonts\u003C\u002Fh3>\u003Cul>\u003Cli>Use at most two font families (one for headings, one for body) to keep pages fast and consistent.\u003C\u002Fli>\u003Cli>Pair fonts with clear contrast, such as a serif heading with a sans-serif body.\u003C\u002Fli>\u003Cli>Prefer fonts with good support for your languages. For Urdu and Arabic script consider Noto Nastaliq Urdu or Noto Naskh Arabic, and always include a generic fallback.\u003C\u002Fli>\u003Cli>Test legibility at small sizes and on low-resolution screens.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"reducing-layout-shift-from-fallback-fonts\">Reducing Layout Shift from Fallback Fonts\u003C\u002Fh3>\u003Cp>When a web font loads late, text can jump because the fallback has different metrics. Choose a fallback with similar proportions, use \u003Ccode>font-size-adjust\u003C\u002Fcode>, or tune a local fallback with \u003Ccode>@font-face\u003C\u002Fcode> descriptors \u003Ccode>size-adjust\u003C\u002Fcode>, \u003Ccode>ascent-override\u003C\u002Fcode>, \u003Ccode>descent-override\u003C\u002Fcode> and \u003Ccode>line-gap-override\u003C\u002Fcode> (see the Web Fonts lesson).\u003C\u002Fp>\u003Ch3 id=\"common-mistakes\">Common Mistakes\u003C\u002Fh3>\u003Cul>\u003Cli>Forgetting a generic family at the end of the stack.\u003C\u002Fli>\u003Cli>Quoting generic names, for example \u003Ccode>'sans-serif'\u003C\u002Fcode>, which turns them into a font name.\u003C\u002Fli>\u003Cli>Using the \u003Ccode>font\u003C\u002Fcode> shorthand and accidentally resetting line-height.\u003C\u002Fli>\u003Cli>Loading many weights and styles that are never used.\u003C\u002Fli>\u003Cli>Setting body text in px, which ignores user preferences.\u003C\u002Fli>\u003Cli>Relying on \u003Ccode>cursive\u003C\u002Fcode> or \u003Ccode>fantasy\u003C\u002Fcode> and getting very different results per device.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"frequently-asked-questions\">Frequently Asked Questions\u003C\u002Fh3>\u003Ch4 id=\"what-is-a-font-stack\">What is a font stack?\u003C\u002Fh4>\u003Cp>It is the comma-separated list in \u003Ccode>font-family\u003C\u002Fcode>. The browser uses the first available font and falls back down the list.\u003C\u002Fp>\u003Ch4 id=\"what-is-the-best-font-family-for-body-text\">What is the best font-family for body text?\u003C\u002Fh4>\u003Cp>A well-tested sans-serif or serif web font, or the system font stack for speed. Whatever you choose, use 16px or larger with line-height around 1.6.\u003C\u002Fp>\u003Ch4 id=\"why-is-my-font-not-changing\">Why is my font not changing?\u003C\u002Fh4>\u003Cp>Common causes: a typo in the name, the font is not installed or loaded, a more specific rule overrides it, or you forgot quotes around a name with spaces.\u003C\u002Fp>\u003Ch4 id=\"do-i-need-to-quote-font-names\">Do I need to quote font names?\u003C\u002Fh4>\u003Cp>Only if the name contains spaces, digits at the start or special characters. Quoting is harmless for any custom name, but never quote generic families.\u003C\u002Fp>\u003Ch3 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh3>\u003Cul>\u003Cli>A font stack ends with a generic family such as \u003Ccode>sans-serif\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>System font stacks are fast and native looking.\u003C\u002Fli>\u003Cli>Use rem for size, numeric values for weight and \u003Ccode>tabular-nums\u003C\u002Fcode> for number tables.\u003C\u002Fli>\u003Cli>The \u003Ccode>font\u003C\u002Fcode> shorthand resets omitted properties, so use it carefully.\u003C\u002Fli>\u003Cli>Limit font families and weights for better performance and consistency.\u003C\u002Fli>\u003C\u002Ful>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n.a { font-family: Georgia, 'Times New Roman', serif; }\n.b { font-family: Arial, Helvetica, sans-serif; }\n.c { font-family: 'Courier New', Courier, monospace; }\n.d { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }\np { font-size: 18px; margin: 6px 0; }\n<\u002Fstyle>\n<p class='a'>Serif stack: The quick brown fox jumps over the lazy dog.<\u002Fp>\n<p class='b'>Sans-serif stack: The quick brown fox jumps over the lazy dog.<\u002Fp>\n<p class='c'>Monospace stack: The quick brown fox jumps over the lazy dog.<\u002Fp>\n<p class='d'>System UI stack: The quick brown fox jumps over the lazy dog.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\np { font-size: 20px; margin: 4px 0; font-family: system-ui, sans-serif; }\n.w1 { font-weight: 100; } .w3 { font-weight: 300; } .w4 { font-weight: 400; }\n.w6 { font-weight: 600; } .w7 { font-weight: 700; } .w9 { font-weight: 900; }\n.it { font-style: italic; } .ob { font-style: oblique 12deg; }\n<\u002Fstyle>\n<p class='w1'>Weight 100 (if the font has it)<\u002Fp>\n<p class='w3'>Weight 300<\u002Fp>\n<p class='w4'>Weight 400<\u002Fp>\n<p class='w6'>Weight 600<\u002Fp>\n<p class='w7'>Weight 700<\u002Fp>\n<p class='w9'>Weight 900<\u002Fp>\n<p class='it'>Italic style<\u002Fp>\n<p class='ob'>Oblique 12deg style<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\ntable { border-collapse: collapse; font-family: system-ui, sans-serif; }\ntd { padding: 4px 14px; text-align: right; border-bottom: 1px solid #ddd; }\n.normal td { font-variant-numeric: normal; }\n.tabular td { font-variant-numeric: tabular-nums; }\n<\u002Fstyle>\n<p>Normal digits (uneven widths):<\u002Fp>\n<table class='normal'><tr><td>1,111.11<\u002Ftd><\u002Ftr><tr><td>8,888.88<\u002Ftd><\u002Ftr><tr><td>1,010.10<\u002Ftd><\u002Ftr><\u002Ftable>\n<p>tabular-nums (aligned digits):<\u002Fp>\n<table class='tabular'><tr><td>1,111.11<\u002Ftd><\u002Ftr><tr><td>8,888.88<\u002Ftd><\u002Ftr><tr><td>1,010.10<\u002Ftd><\u002Ftr><\u002Ftable>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n.sc { font-variant-caps: small-caps; font-size: 1.3rem; font-family: Georgia, serif; }\n.zero { font-family: ui-monospace, Menlo, Consolas, monospace; font-variant-numeric: slashed-zero; font-size: 1.3rem; }\n<\u002Fstyle>\n<p class='sc'>Small Caps Heading Example<\u002Fp>\n<p class='zero'>Order 1000 vs 0O0 with slashed zero<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-css\">\u003Cpre>\u003Ccode>\u002F* Shorthand: style variant weight size\u002Fline-height family *\u002F\n.lead {\n  font: italic small-caps 700 1.25rem\u002F1.5 Georgia, 'Times New Roman', serif;\n}\n\n\u002F* Longhand is clearer and avoids resetting by accident *\u002F\n.body {\n  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.6;\n}\n\n\u002F* Fluid heading *\u002F\nh1 {\n  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem);\n  font-weight: 700;\n  line-height: 1.15;\n}\n\n\u002F* Keep fallback size close to the primary font *\u002F\n.safe { font-size-adjust: from-font; font-synthesis: none; }\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n.nastaliq { font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif; font-size: 1.6rem; line-height: 2.2; direction: rtl; }\n<\u002Fstyle>\n<p class='nastaliq' lang='ur'>یہ اردو متن کی ایک مثال ہے۔<\u002Fp>\n<p>Always add a generic fallback and a lang attribute for non-Latin scripts.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-javascript\">\u003Cpre>\u003Ccode>const p = document.createElement('p');\np.textContent = 'Hello fonts';\ndocument.body.appendChild(p);\n\nconst family = getComputedStyle(p).fontFamily;\nconsole.log('Computed font-family:', family);\n\n\u002F\u002F Check if a specific font is available to the document\nif (document.fonts && document.fonts.check) {\n  console.log('Is Arial available?', document.fonts.check('16px Arial'));\n  console.log('Is bold Georgia available?', document.fonts.check('bold 16px Georgia'));\n}\np.remove();\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":335,"slug":336},{"name":495,"slug":496},{"slug":676,"display_name":677,"job_title":5,"short_bio":5,"expertise_tags":678,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":679,"posts":680},"badar-khalil","Badar Khalil",[],[],[],"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fcss-fonts-font-family","CSS font-family Explained: Font Stacks, Weight, System Fonts","Learn CSS fonts: font-family stacks, generic families, system font stack, font-size, font-weight, font-style, font shorthand, tabular-nums and fallback tips.",[686],{"id":687,"text":504,"level":23,"children":688},"css-fonts-and-font-family-font-stacks-weights-and-system-fonts",[689,693,697,701,705,709,712,715,718,722,726,729,733,737,741,745],{"id":690,"text":691,"level":31,"children":692},"what-you-will-learn","What You Will Learn",[],{"id":694,"text":695,"level":31,"children":696},"how-font-family-works","How font-family Works",[],{"id":698,"text":699,"level":31,"children":700},"generic-font-families","Generic Font Families",[],{"id":702,"text":703,"level":31,"children":704},"a-modern-system-font-stack","A Modern System Font Stack",[],{"id":706,"text":707,"level":31,"children":708},"web-safe-fonts","Web Safe Fonts",[],{"id":710,"text":710,"level":31,"children":711},"font-size",[],{"id":713,"text":713,"level":31,"children":714},"font-weight",[],{"id":716,"text":716,"level":31,"children":717},"font-style",[],{"id":719,"text":720,"level":31,"children":721},"font-variant-and-advanced-features","font-variant and Advanced Features",[],{"id":723,"text":724,"level":31,"children":725},"the-font-shorthand","The font Shorthand",[],{"id":727,"text":727,"level":31,"children":728},"font-size-adjust",[],{"id":730,"text":731,"level":31,"children":732},"choosing-and-pairing-fonts","Choosing and Pairing Fonts",[],{"id":734,"text":735,"level":31,"children":736},"reducing-layout-shift-from-fallback-fonts","Reducing Layout Shift from Fallback Fonts",[],{"id":738,"text":739,"level":31,"children":740},"common-mistakes","Common Mistakes",[],{"id":742,"text":743,"level":31,"children":744},"frequently-asked-questions","Frequently Asked Questions",[],{"id":746,"text":747,"level":31,"children":748},"key-takeaways","Key Takeaways",[],[750,754,757,760,763,766,769],{"id":751,"language":652,"code":752,"is_editable":753},354,"\u003Cstyle>\n.a { font-family: Georgia, 'Times New Roman', serif; }\n.b { font-family: Arial, Helvetica, sans-serif; }\n.c { font-family: 'Courier New', Courier, monospace; }\n.d { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }\np { font-size: 18px; margin: 6px 0; }\n\u003C\u002Fstyle>\n\u003Cp class='a'>Serif stack: The quick brown fox jumps over the lazy dog.\u003C\u002Fp>\n\u003Cp class='b'>Sans-serif stack: The quick brown fox jumps over the lazy dog.\u003C\u002Fp>\n\u003Cp class='c'>Monospace stack: The quick brown fox jumps over the lazy dog.\u003C\u002Fp>\n\u003Cp class='d'>System UI stack: The quick brown fox jumps over the lazy dog.\u003C\u002Fp>",true,{"id":755,"language":652,"code":756,"is_editable":753},355,"\u003Cstyle>\np { font-size: 20px; margin: 4px 0; font-family: system-ui, sans-serif; }\n.w1 { font-weight: 100; } .w3 { font-weight: 300; } .w4 { font-weight: 400; }\n.w6 { font-weight: 600; } .w7 { font-weight: 700; } .w9 { font-weight: 900; }\n.it { font-style: italic; } .ob { font-style: oblique 12deg; }\n\u003C\u002Fstyle>\n\u003Cp class='w1'>Weight 100 (if the font has it)\u003C\u002Fp>\n\u003Cp class='w3'>Weight 300\u003C\u002Fp>\n\u003Cp class='w4'>Weight 400\u003C\u002Fp>\n\u003Cp class='w6'>Weight 600\u003C\u002Fp>\n\u003Cp class='w7'>Weight 700\u003C\u002Fp>\n\u003Cp class='w9'>Weight 900\u003C\u002Fp>\n\u003Cp class='it'>Italic style\u003C\u002Fp>\n\u003Cp class='ob'>Oblique 12deg style\u003C\u002Fp>",{"id":758,"language":652,"code":759,"is_editable":753},356,"\u003Cstyle>\ntable { border-collapse: collapse; font-family: system-ui, sans-serif; }\ntd { padding: 4px 14px; text-align: right; border-bottom: 1px solid #ddd; }\n.normal td { font-variant-numeric: normal; }\n.tabular td { font-variant-numeric: tabular-nums; }\n\u003C\u002Fstyle>\n\u003Cp>Normal digits (uneven widths):\u003C\u002Fp>\n\u003Ctable class='normal'>\u003Ctr>\u003Ctd>1,111.11\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>8,888.88\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>1,010.10\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftable>\n\u003Cp>tabular-nums (aligned digits):\u003C\u002Fp>\n\u003Ctable class='tabular'>\u003Ctr>\u003Ctd>1,111.11\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>8,888.88\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>1,010.10\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftable>",{"id":761,"language":652,"code":762,"is_editable":753},357,"\u003Cstyle>\n.sc { font-variant-caps: small-caps; font-size: 1.3rem; font-family: Georgia, serif; }\n.zero { font-family: ui-monospace, Menlo, Consolas, monospace; font-variant-numeric: slashed-zero; font-size: 1.3rem; }\n\u003C\u002Fstyle>\n\u003Cp class='sc'>Small Caps Heading Example\u003C\u002Fp>\n\u003Cp class='zero'>Order 1000 vs 0O0 with slashed zero\u003C\u002Fp>",{"id":764,"language":336,"code":765,"is_editable":753},358,"\u002F* Shorthand: style variant weight size\u002Fline-height family *\u002F\n.lead {\n  font: italic small-caps 700 1.25rem\u002F1.5 Georgia, 'Times New Roman', serif;\n}\n\n\u002F* Longhand is clearer and avoids resetting by accident *\u002F\n.body {\n  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.6;\n}\n\n\u002F* Fluid heading *\u002F\nh1 {\n  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem);\n  font-weight: 700;\n  line-height: 1.15;\n}\n\n\u002F* Keep fallback size close to the primary font *\u002F\n.safe { font-size-adjust: from-font; font-synthesis: none; }",{"id":767,"language":652,"code":768,"is_editable":753},359,"\u003Cstyle>\n.nastaliq { font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif; font-size: 1.6rem; line-height: 2.2; direction: rtl; }\n\u003C\u002Fstyle>\n\u003Cp class='nastaliq' lang='ur'>یہ اردو متن کی ایک مثال ہے۔\u003C\u002Fp>\n\u003Cp>Always add a generic fallback and a lang attribute for non-Latin scripts.\u003C\u002Fp>",{"id":770,"language":771,"code":772,"is_editable":753},360,"javascript","const p = document.createElement('p');\np.textContent = 'Hello fonts';\ndocument.body.appendChild(p);\n\nconst family = getComputedStyle(p).fontFamily;\nconsole.log('Computed font-family:', family);\n\n\u002F\u002F Check if a specific font is available to the document\nif (document.fonts && document.fonts.check) {\n  console.log('Is Arial available?', document.fonts.check('16px Arial'));\n  console.log('Is bold Georgia available?', document.fonts.check('bold 16px Georgia'));\n}\np.remove();",[774,780,786],{"id":607,"title":775,"slug":776,"prompt":777,"starter_code":778,"expected_output":779,"language":652,"order_index":9},"Build a Font Stack","build-font-stack","Give the body a font stack that starts with the system UI font, then 'Segoe UI', Roboto and Arial, and ends with the generic sans-serif family. Give the code element a monospace stack that starts with ui-monospace and ends with the generic monospace family.","\u003Cstyle>\nbody { \u002F* your CSS here *\u002F }\ncode { \u002F* your CSS here *\u002F }\n\u003C\u002Fstyle>\n\u003Cp>Body text uses your stack, and \u003Ccode>inline code\u003C\u002Fcode> uses the monospace stack.\u003C\u002Fp>","Body uses system-ui first and ends with sans-serif; code uses ui-monospace first and ends with monospace.",{"id":611,"title":781,"slug":782,"prompt":783,"starter_code":784,"expected_output":785,"language":652,"order_index":23},"Fix the Shorthand Bug","fix-font-shorthand-bug","The .note rule should have a line height of 1.7, but the font shorthand below resets it. Rewrite the rule so the final result is italic, weight 600, size 1.1rem, line-height 1.7 and family Georgia with a serif fallback. You may use the shorthand with the slash syntax or longhand properties.","\u003Cstyle>\n.note { line-height: 1.7; font: italic 600 1.1rem Georgia, serif; }\n\u003C\u002Fstyle>\n\u003Cp class='note'>This note should have a generous line height of 1.7 so the lines are easy to read and do not look cramped.\u003C\u002Fp>","The note is italic, weight 600, 1.1rem, Georgia with serif fallback and line-height 1.7.",{"id":619,"title":787,"slug":788,"prompt":789,"starter_code":790,"expected_output":791,"language":771,"order_index":31},"Pick the First Available Font","first-available-font","Write a function pickFont(stack, installed) that mimics the browser: given an array stack of font names and an array installed of available fonts, return the first font from stack that is in installed. If none match return the last item of the stack (the generic family).","function pickFont(stack, installed) {\n  \u002F\u002F TODO: implement\n}\n\nconsole.log(pickFont(['Inter', 'Roboto', 'Arial', 'sans-serif'], ['Arial', 'Georgia']));\nconsole.log(pickFont(['Inter', 'Roboto', 'sans-serif'], ['Georgia']));\nconsole.log(pickFont(['Inter', 'Roboto', 'sans-serif'], ['Roboto', 'Inter']));","Arial\nsans-serif\nInter","2026-09-30T17:07:01+00:00",{"id":499,"slug":501,"title":500},{"id":507,"slug":509,"title":508}]