[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"course-tree":6,"blog-categories":646,"topic:styling-links-css":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":515,"title":516,"slug":517,"content":672,"course":673,"subcategory":674,"author":675,"reading_time_minutes":55,"cornerstone":26,"schema_type":681,"faq_json":5,"video_url":5,"canonical_url":682,"meta_title":683,"meta_description":684,"og_image":5,"toc_json":685,"code_examples":746,"quiz":772,"exercises":776,"published_at":5,"updated_at":789,"prev":790,"next":791},"\u003Ch2 id=\"styling-links-in-css-the-complete-guide\">Styling Links in CSS: The Complete Guide\u003C\u002Fh2>\u003Cp>Links are the backbone of the web. Every navigation menu, call-to-action, footer, breadcrumb and blog post depends on the \u003Ccode><a>\u003C\u002Fcode> element. Good \u003Cstrong>styling links in CSS\u003C\u002Fstrong> makes a page easier to scan, easier to use with a keyboard, and more accessible. Bad link styling makes users guess what is clickable. In this lesson you will learn every link state, the correct order of pseudo-classes, modern underline properties, animated links, button-style links and accessibility rules. Every code example below is editable and runs live in your browser.\u003C\u002Fp>\u003Cp>\u003Cstrong>Focus keyword:\u003C\u002Fstrong> styling links in CSS. \u003Cstrong>Related keywords:\u003C\u002Fstrong> CSS link states, a:hover, a:focus-visible, LVHA order, text-decoration, text-underline-offset, animated underline, button link CSS, accessible links, WCAG 2.2 focus appearance.\u003C\u002Fp>\u003Ch2 id=\"1-the-anchor-element-basics\">1. The Anchor Element Basics\u003C\u002Fh2>\u003Cp>The anchor tag \u003Ccode><a href='...'>\u003C\u002Fcode> creates a hyperlink. By default, browsers show unvisited links in blue with an underline, visited links in purple, and active links in red. These defaults are functional but rarely match your brand, so designers override them with CSS.\u003C\u002Fp>\u003Cp>An anchor without an \u003Ccode>href\u003C\u002Fcode> attribute is not a link. It is not focusable and does not match \u003Ccode>:link\u003C\u002Fcode> or \u003Ccode>:any-link\u003C\u002Fcode>. Always use a real \u003Ccode>href\u003C\u002Fcode> for navigation, and use a \u003Ccode><button>\u003C\u002Fcode> for actions that do not navigate.\u003C\u002Fp>\u003Ch2 id=\"2-link-pseudo-classes-link-states\">2. Link Pseudo-Classes (Link States)\u003C\u002Fh2>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Pseudo-class\u003C\u002Fth>\u003Cth>When it applies\u003C\u002Fth>\u003Cth>Typical use\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>:link\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Unvisited link with an href\u003C\u002Ftd>\u003Ctd>Base link colour\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>:visited\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Link the user has already visited\u003C\u002Ftd>\u003Ctd>Slightly different colour\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>:hover\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Mouse pointer is over the link\u003C\u002Ftd>\u003Ctd>Colour change, underline\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>:focus\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Link has keyboard or pointer focus\u003C\u002Ftd>\u003Ctd>Visible outline\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>:focus-visible\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Focus that should be visibly shown (keyboard)\u003C\u002Ftd>\u003Ctd>Focus ring without mouse clutter\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>:active\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Link is being pressed\u003C\u002Ftd>\u003Ctd>Pressed feedback\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>:any-link\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Matches both :link and :visited\u003C\u002Ftd>\u003Ctd>Shared base styles\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch3 id=\"the-lvha-order-love-hate\">The LVHA Order (LoVe HAte)\u003C\u002Fh3>\u003Cp>Because these pseudo-classes have the same specificity, the \u003Cstrong>order matters\u003C\u002Fstrong>. Always write them as \u003Ccode>:link\u003C\u002Fcode>, \u003Ccode>:visited\u003C\u002Fcode>, \u003Ccode>:hover\u003C\u002Fcode>, \u003Ccode>:active\u003C\u002Fcode> (LVHA). If you put \u003Ccode>:hover\u003C\u002Fcode> before \u003Ccode>:visited\u003C\u002Fcode>, the visited colour will override the hover colour for visited links. Add \u003Ccode>:focus-visible\u003C\u002Fcode> next to \u003Ccode>:hover\u003C\u002Fcode> so keyboard users get the same feedback as mouse users.\u003C\u002Fp>\u003Ch3 id=\"privacy-limits-on-visited\">Privacy Limits on :visited\u003C\u002Fh3>\u003Cp>For privacy reasons, browsers only allow a few properties on \u003Ccode>:visited\u003C\u002Fcode>: colour-related properties such as \u003Ccode>color\u003C\u002Fcode>, \u003Ccode>background-color\u003C\u002Fcode>, \u003Ccode>border-color\u003C\u002Fcode>, \u003Ccode>outline-color\u003C\u002Fcode> and \u003Ccode>text-decoration-color\u003C\u002Fcode>. You cannot change layout or add content to visited links, and JavaScript cannot read the computed visited colour.\u003C\u002Fp>\u003Ch2 id=\"3-keyboard-focus-and-accessibility\">3. Keyboard Focus and Accessibility\u003C\u002Fh2>\u003Cp>Never write \u003Ccode>a:focus { outline: none; }\u003C\u002Fcode> without a replacement. Keyboard users rely on the focus indicator to know where they are. Use \u003Ccode>:focus-visible\u003C\u002Fcode> to show the ring only when the browser decides it is helpful (keyboard navigation), and keep at least a 3:1 contrast ratio against the background. WCAG 2.2 also recommends a minimum target size of 24 by 24 CSS pixels for interactive elements, and a generous tap area on mobile.\u003C\u002Fp>\u003Cul>\u003Cli>Links must be distinguishable from surrounding text by more than colour alone. Keep the underline or add another cue.\u003C\u002Fli>\u003Cli>Text contrast for link text should be at least 4.5:1 for normal text.\u003C\u002Fli>\u003Cli>Use descriptive link text. Avoid vague text such as click here or read more.\u003C\u002Fli>\u003Cli>Add a skip link at the top of the page so keyboard users can jump to the main content.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"4-modern-underline-control\">4. Modern Underline Control\u003C\u002Fh2>\u003Cp>The old way of faking an underline with \u003Ccode>border-bottom\u003C\u002Fcode> is no longer needed. Modern CSS gives you full control:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>text-decoration-line\u003C\u002Fcode>: underline, overline, line-through.\u003C\u002Fli>\u003Cli>\u003Ccode>text-decoration-style\u003C\u002Fcode>: solid, double, dotted, dashed, wavy.\u003C\u002Fli>\u003Cli>\u003Ccode>text-decoration-color\u003C\u002Fcode>: a separate colour for the line.\u003C\u002Fli>\u003Cli>\u003Ccode>text-decoration-thickness\u003C\u002Fcode>: the line width (for example 2px or from-font).\u003C\u002Fli>\u003Cli>\u003Ccode>text-underline-offset\u003C\u002Fcode>: the gap between text and underline.\u003C\u002Fli>\u003Cli>\u003Ccode>text-decoration-skip-ink\u003C\u002Fcode>: skips descenders like g and y for cleaner reading.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"5-animated-link-effects\">5. Animated Link Effects\u003C\u002Fh2>\u003Cp>Animated underlines are one of the most popular trending link effects. The most robust technique uses a \u003Ccode>background-image\u003C\u002Fcode> gradient and animates \u003Ccode>background-size\u003C\u002Fcode> on hover and focus. It works across line breaks and does not shift layout. Always respect users who prefer reduced motion with the \u003Ccode>prefers-reduced-motion\u003C\u002Fcode> media query.\u003C\u002Fp>\u003Ch2 id=\"6-button-style-links\">6. Button-Style Links\u003C\u002Fh2>\u003Cp>A call-to-action often looks like a button but should still be an \u003Ccode><a>\u003C\u002Fcode> when it navigates to another URL. Use \u003Ccode>display: inline-block\u003C\u002Fcode>, padding, background, and border-radius, and remember to style the hover, focus-visible and active states.\u003C\u002Fp>\u003Ch2 id=\"7-attribute-selectors-for-smart-links\">7. Attribute Selectors for Smart Links\u003C\u002Fh2>\u003Cp>CSS attribute selectors let you style links automatically based on their \u003Ccode>href\u003C\u002Fcode>. For example, \u003Ccode>a[href^='http']\u003C\u002Fcode> targets links starting with http (external links), \u003Ccode>a[href$='.pdf']\u003C\u002Fcode> targets PDF downloads, and \u003Ccode>a[href^='mailto:']\u003C\u002Fcode> targets email links. Combined with \u003Ccode>::after\u003C\u002Fcode> you can add small icons or labels without editing HTML.\u003C\u002Fp>\u003Ch2 id=\"8-dark-mode-and-design-tokens\">8. Dark Mode and Design Tokens\u003C\u002Fh2>\u003Cp>Use CSS custom properties for link colours and switch them in a \u003Ccode>prefers-color-scheme: dark\u003C\u002Fcode> media query. Set \u003Ccode>color-scheme: light dark\u003C\u002Fcode> on \u003Ccode>:root\u003C\u002Fcode> so the browser adapts form controls and default colours. Remember that a blue that passes contrast on white can fail on a dark background, so tune the lightness for dark mode.\u003C\u002Fp>\u003Ch2 id=\"9-trending-link-techniques-2026\">9. Trending Link Techniques (2026)\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>:focus-visible everywhere:\u003C\u002Fstrong> now the standard replacement for raw :focus.\u003C\u002Fli>\u003Cli>\u003Cstrong>text-underline-offset and text-decoration-thickness:\u003C\u002Fstrong> the modern, clean underline style.\u003C\u002Fli>\u003Cli>\u003Cstrong>:has() parent selectors:\u003C\u002Fstrong> style a card or list item when it contains a hovered link, for example \u003Ccode>li:has(a:hover)\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Cstrong>:is() and :where():\u003C\u002Fstrong> shorten selector lists, for example \u003Ccode>:is(nav, footer) a\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Cstrong>View Transitions:\u003C\u002Fstrong> smooth page-to-page navigation for link clicks.\u003C\u002Fli>\u003Cli>\u003Cstrong>Container and motion queries:\u003C\u002Fstrong> respect prefers-reduced-motion for every hover animation.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"10-common-mistakes\">10. Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Removing the underline and relying on colour alone.\u003C\u002Fli>\u003Cli>Writing pseudo-classes in the wrong order (breaking LVHA).\u003C\u002Fli>\u003Cli>Removing the focus outline with no replacement.\u003C\u002Fli>\u003Cli>Using a link for an action, or a button for navigation.\u003C\u002Fli>\u003Cli>Styling :visited colours too similar to the base colour, or too faint to read.\u003C\u002Fli>\u003Cli>Tiny tap targets on mobile.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"11-best-practices-checklist\">11. Best Practices Checklist\u003C\u002Fh2>\u003Cul>\u003Cli>Follow LVHA order and include :focus-visible.\u003C\u002Fli>\u003Cli>Keep a visible cue (underline) for links inside paragraphs.\u003C\u002Fli>\u003Cli>Use CSS variables so link colours are easy to theme.\u003C\u002Fli>\u003Cli>Provide clear hover, focus and active feedback.\u003C\u002Fli>\u003Cli>Respect reduced-motion and dark-mode preferences.\u003C\u002Fli>\u003Cli>Test with keyboard only (Tab, Shift+Tab, Enter).\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"summary\">Summary\u003C\u002Fh2>\u003Cp>Styling links in CSS is about more than colour. Use the link pseudo-classes in the right order, keep focus visible, control underlines with modern properties, add subtle animation, and always design with accessibility in mind. Try each live example below, edit the code, and watch the result update instantly.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  a { text-decoration: underline; }\n  a:link { color: #2563eb; }\n  a:visited { color: #7c3aed; }\n  a:hover { color: #1d4ed8; text-decoration-thickness: 3px; }\n  a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; border-radius: 2px; }\n  a:active { color: #dc2626; }\n<\u002Fstyle>\n<p style='font-family: system-ui, sans-serif; font-size: 18px;'>Visit <a href='https:\u002F\u002Fdeveloper.mozilla.org'>MDN Web Docs<\u002Fa> or read <a href='#'>this internal link<\u002Fa>. Press Tab to see the focus ring.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: system-ui, sans-serif; font-size: 18px; line-height: 2; }\n  .fancy {\n    color: #0f766e;\n    text-decoration-line: underline;\n    text-decoration-style: wavy;\n    text-decoration-color: #f97316;\n    text-decoration-thickness: 2px;\n    text-underline-offset: 6px;\n    text-decoration-skip-ink: auto;\n  }\n  .fancy:hover { text-decoration-style: solid; }\n  .plain { color: #111827; text-decoration: none; border-bottom: 2px solid currentColor; }\n  .plain:hover { color: #2563eb; }\n<\u002Fstyle>\n<p>Wavy underline: <a class='fancy' href='#'>Modern underline control<\u002Fa><\u002Fp>\n<p>Border underline: <a class='plain' href='#'>Classic border link<\u002Fa><\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: system-ui, sans-serif; font-size: 20px; padding: 20px; }\n  .link-anim {\n    color: #111827;\n    text-decoration: none;\n    background-image: linear-gradient(currentColor, currentColor);\n    background-repeat: no-repeat;\n    background-position: 0 100%;\n    background-size: 0% 2px;\n    transition: background-size 0.3s ease;\n  }\n  .link-anim:hover,\n  .link-anim:focus-visible { background-size: 100% 2px; }\n  @media (prefers-reduced-motion: reduce) {\n    .link-anim { transition: none; }\n  }\n<\u002Fstyle>\n<p>Hover over <a class='link-anim' href='#'>this animated underline link<\u002Fa> to see the effect.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: system-ui, sans-serif; padding: 30px; }\n  .btn {\n    display: inline-block;\n    padding: 0.75rem 1.5rem;\n    background: #2563eb;\n    color: #ffffff;\n    border-radius: 999px;\n    text-decoration: none;\n    font-weight: 600;\n    transition: transform 0.15s ease, box-shadow 0.15s ease;\n  }\n  .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35); }\n  .btn:active { transform: translateY(0); box-shadow: none; }\n  .btn:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }\n  .btn.outline { background: transparent; color: #2563eb; border: 2px solid #2563eb; }\n  .btn.outline:hover { background: #2563eb; color: #ffffff; }\n<\u002Fstyle>\n<a class='btn' href='#'>Get Started<\u002Fa>\n<a class='btn outline' href='#'>Learn More<\u002Fa>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: system-ui, sans-serif; font-size: 18px; line-height: 2; padding: 20px; }\n  a[href^='http']::after { content: ' ↗'; font-size: 0.8em; }\n  a[href^='mailto:']::before { content: '✉ '; }\n  a[href$='.pdf']::after { content: ' (PDF)'; font-size: 0.8em; color: #6b7280; }\n  a[target='_blank'] { color: #9333ea; }\n<\u002Fstyle>\n<ul>\n  <li><a href='https:\u002F\u002Fexample.com' target='_blank' rel='noopener'>External website<\u002Fa><\u002Fli>\n  <li><a href='mailto:hello@example.com'>Email us<\u002Fa><\u002Fli>\n  <li><a href='\u002Ffiles\u002Fguide.pdf'>Download the guide<\u002Fa><\u002Fli>\n  <li><a href='#section'>Internal anchor<\u002Fa><\u002Fli>\n<\u002Ful>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: system-ui, sans-serif; margin: 0; }\n  .skip-link {\n    position: absolute;\n    left: -999px;\n    top: 0;\n    background: #000000;\n    color: #ffffff;\n    padding: 0.6rem 1rem;\n    z-index: 10;\n  }\n  .skip-link:focus { left: 0; }\n  header { background: #f1f5f9; padding: 1rem; }\n  main { padding: 1rem; }\n<\u002Fstyle>\n<a class='skip-link' href='#main'>Skip to main content<\u002Fa>\n<header><a href='#'>Home<\u002Fa> | <a href='#'>About<\u002Fa> | <a href='#'>Contact<\u002Fa><\u002Fheader>\n<main id='main'><h2>Main content<\u002Fh2><p>Press Tab once after the page loads to reveal the skip link.<\u002Fp><\u002Fmain>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: system-ui, sans-serif; padding: 20px; }\n  nav ul { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }\n  nav a {\n    display: block;\n    padding: 0.5rem 0.9rem;\n    text-decoration: none;\n    color: #334155;\n    border-radius: 6px;\n    transition: opacity 0.2s ease, background 0.2s ease;\n  }\n  nav ul:hover a:not(:hover) { opacity: 0.5; }\n  nav a:hover { background: #e2e8f0; }\n  nav a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }\n  nav a[aria-current='page'] { background: #2563eb; color: #ffffff; }\n<\u002Fstyle>\n<nav aria-label='Main'>\n  <ul>\n    <li><a href='#' aria-current='page'>Home<\u002Fa><\u002Fli>\n    <li><a href='#'>Courses<\u002Fa><\u002Fli>\n    <li><a href='#'>Blog<\u002Fa><\u002Fli>\n    <li><a href='#'>Contact<\u002Fa><\u002Fli>\n  <\u002Ful>\n<\u002Fnav>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  :root {\n    color-scheme: light dark;\n    --link: #2563eb;\n    --link-visited: #7c3aed;\n    --link-hover: #1d4ed8;\n  }\n  @media (prefers-color-scheme: dark) {\n    :root {\n      --link: #60a5fa;\n      --link-visited: #c4b5fd;\n      --link-hover: #93c5fd;\n    }\n  }\n  body { font-family: system-ui, sans-serif; background: Canvas; color: CanvasText; padding: 20px; font-size: 18px; }\n  a:link { color: var(--link); }\n  a:visited { color: var(--link-visited); }\n  a:hover { color: var(--link-hover); }\n<\u002Fstyle>\n<p>This link adapts to your system theme: <a href='#'>Theme-aware link<\u002Fa><\u002Fp>\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\u002Fstyling-links-css","Styling Links in CSS: Hover, Focus & Visited States","Master styling links in CSS: LVHA order, hover, focus-visible, underline tricks, animated and button links, plus accessible design with live code.",[686,690,694,706,710,714,718,722,726,730,734,738,742],{"id":687,"text":688,"level":23,"children":689},"styling-links-in-css-the-complete-guide","Styling Links in CSS: The Complete Guide",[],{"id":691,"text":692,"level":23,"children":693},"1-the-anchor-element-basics","1. The Anchor Element Basics",[],{"id":695,"text":696,"level":23,"children":697},"2-link-pseudo-classes-link-states","2. Link Pseudo-Classes (Link States)",[698,702],{"id":699,"text":700,"level":31,"children":701},"the-lvha-order-love-hate","The LVHA Order (LoVe HAte)",[],{"id":703,"text":704,"level":31,"children":705},"privacy-limits-on-visited","Privacy Limits on :visited",[],{"id":707,"text":708,"level":23,"children":709},"3-keyboard-focus-and-accessibility","3. Keyboard Focus and Accessibility",[],{"id":711,"text":712,"level":23,"children":713},"4-modern-underline-control","4. Modern Underline Control",[],{"id":715,"text":716,"level":23,"children":717},"5-animated-link-effects","5. Animated Link Effects",[],{"id":719,"text":720,"level":23,"children":721},"6-button-style-links","6. Button-Style Links",[],{"id":723,"text":724,"level":23,"children":725},"7-attribute-selectors-for-smart-links","7. Attribute Selectors for Smart Links",[],{"id":727,"text":728,"level":23,"children":729},"8-dark-mode-and-design-tokens","8. Dark Mode and Design Tokens",[],{"id":731,"text":732,"level":23,"children":733},"9-trending-link-techniques-2026","9. Trending Link Techniques (2026)",[],{"id":735,"text":736,"level":23,"children":737},"10-common-mistakes","10. Common Mistakes",[],{"id":739,"text":740,"level":23,"children":741},"11-best-practices-checklist","11. Best Practices Checklist",[],{"id":743,"text":744,"level":23,"children":745},"summary","Summary",[],[747,751,754,757,760,763,766,769],{"id":748,"language":652,"code":749,"is_editable":750},375,"\u003Cstyle>\n  a { text-decoration: underline; }\n  a:link { color: #2563eb; }\n  a:visited { color: #7c3aed; }\n  a:hover { color: #1d4ed8; text-decoration-thickness: 3px; }\n  a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; border-radius: 2px; }\n  a:active { color: #dc2626; }\n\u003C\u002Fstyle>\n\u003Cp style='font-family: system-ui, sans-serif; font-size: 18px;'>Visit \u003Ca href='https:\u002F\u002Fdeveloper.mozilla.org'>MDN Web Docs\u003C\u002Fa> or read \u003Ca href='#'>this internal link\u003C\u002Fa>. Press Tab to see the focus ring.\u003C\u002Fp>",true,{"id":752,"language":652,"code":753,"is_editable":750},376,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; font-size: 18px; line-height: 2; }\n  .fancy {\n    color: #0f766e;\n    text-decoration-line: underline;\n    text-decoration-style: wavy;\n    text-decoration-color: #f97316;\n    text-decoration-thickness: 2px;\n    text-underline-offset: 6px;\n    text-decoration-skip-ink: auto;\n  }\n  .fancy:hover { text-decoration-style: solid; }\n  .plain { color: #111827; text-decoration: none; border-bottom: 2px solid currentColor; }\n  .plain:hover { color: #2563eb; }\n\u003C\u002Fstyle>\n\u003Cp>Wavy underline: \u003Ca class='fancy' href='#'>Modern underline control\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>Border underline: \u003Ca class='plain' href='#'>Classic border link\u003C\u002Fa>\u003C\u002Fp>",{"id":755,"language":652,"code":756,"is_editable":750},377,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; font-size: 20px; padding: 20px; }\n  .link-anim {\n    color: #111827;\n    text-decoration: none;\n    background-image: linear-gradient(currentColor, currentColor);\n    background-repeat: no-repeat;\n    background-position: 0 100%;\n    background-size: 0% 2px;\n    transition: background-size 0.3s ease;\n  }\n  .link-anim:hover,\n  .link-anim:focus-visible { background-size: 100% 2px; }\n  @media (prefers-reduced-motion: reduce) {\n    .link-anim { transition: none; }\n  }\n\u003C\u002Fstyle>\n\u003Cp>Hover over \u003Ca class='link-anim' href='#'>this animated underline link\u003C\u002Fa> to see the effect.\u003C\u002Fp>",{"id":758,"language":652,"code":759,"is_editable":750},378,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; padding: 30px; }\n  .btn {\n    display: inline-block;\n    padding: 0.75rem 1.5rem;\n    background: #2563eb;\n    color: #ffffff;\n    border-radius: 999px;\n    text-decoration: none;\n    font-weight: 600;\n    transition: transform 0.15s ease, box-shadow 0.15s ease;\n  }\n  .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35); }\n  .btn:active { transform: translateY(0); box-shadow: none; }\n  .btn:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }\n  .btn.outline { background: transparent; color: #2563eb; border: 2px solid #2563eb; }\n  .btn.outline:hover { background: #2563eb; color: #ffffff; }\n\u003C\u002Fstyle>\n\u003Ca class='btn' href='#'>Get Started\u003C\u002Fa>\n\u003Ca class='btn outline' href='#'>Learn More\u003C\u002Fa>",{"id":761,"language":652,"code":762,"is_editable":750},379,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; font-size: 18px; line-height: 2; padding: 20px; }\n  a[href^='http']::after { content: ' ↗'; font-size: 0.8em; }\n  a[href^='mailto:']::before { content: '✉ '; }\n  a[href$='.pdf']::after { content: ' (PDF)'; font-size: 0.8em; color: #6b7280; }\n  a[target='_blank'] { color: #9333ea; }\n\u003C\u002Fstyle>\n\u003Cul>\n  \u003Cli>\u003Ca href='https:\u002F\u002Fexample.com' target='_blank' rel='noopener'>External website\u003C\u002Fa>\u003C\u002Fli>\n  \u003Cli>\u003Ca href='mailto:hello@example.com'>Email us\u003C\u002Fa>\u003C\u002Fli>\n  \u003Cli>\u003Ca href='\u002Ffiles\u002Fguide.pdf'>Download the guide\u003C\u002Fa>\u003C\u002Fli>\n  \u003Cli>\u003Ca href='#section'>Internal anchor\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>",{"id":764,"language":652,"code":765,"is_editable":750},380,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; margin: 0; }\n  .skip-link {\n    position: absolute;\n    left: -999px;\n    top: 0;\n    background: #000000;\n    color: #ffffff;\n    padding: 0.6rem 1rem;\n    z-index: 10;\n  }\n  .skip-link:focus { left: 0; }\n  header { background: #f1f5f9; padding: 1rem; }\n  main { padding: 1rem; }\n\u003C\u002Fstyle>\n\u003Ca class='skip-link' href='#main'>Skip to main content\u003C\u002Fa>\n\u003Cheader>\u003Ca href='#'>Home\u003C\u002Fa> | \u003Ca href='#'>About\u003C\u002Fa> | \u003Ca href='#'>Contact\u003C\u002Fa>\u003C\u002Fheader>\n\u003Cmain id='main'>\u003Ch2>Main content\u003C\u002Fh2>\u003Cp>Press Tab once after the page loads to reveal the skip link.\u003C\u002Fp>\u003C\u002Fmain>",{"id":767,"language":652,"code":768,"is_editable":750},381,"\u003Cstyle>\n  body { font-family: system-ui, sans-serif; padding: 20px; }\n  nav ul { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }\n  nav a {\n    display: block;\n    padding: 0.5rem 0.9rem;\n    text-decoration: none;\n    color: #334155;\n    border-radius: 6px;\n    transition: opacity 0.2s ease, background 0.2s ease;\n  }\n  nav ul:hover a:not(:hover) { opacity: 0.5; }\n  nav a:hover { background: #e2e8f0; }\n  nav a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }\n  nav a[aria-current='page'] { background: #2563eb; color: #ffffff; }\n\u003C\u002Fstyle>\n\u003Cnav aria-label='Main'>\n  \u003Cul>\n    \u003Cli>\u003Ca href='#' aria-current='page'>Home\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href='#'>Courses\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href='#'>Blog\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href='#'>Contact\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fnav>",{"id":770,"language":652,"code":771,"is_editable":750},382,"\u003Cstyle>\n  :root {\n    color-scheme: light dark;\n    --link: #2563eb;\n    --link-visited: #7c3aed;\n    --link-hover: #1d4ed8;\n  }\n  @media (prefers-color-scheme: dark) {\n    :root {\n      --link: #60a5fa;\n      --link-visited: #c4b5fd;\n      --link-hover: #93c5fd;\n    }\n  }\n  body { font-family: system-ui, sans-serif; background: Canvas; color: CanvasText; padding: 20px; font-size: 18px; }\n  a:link { color: var(--link); }\n  a:visited { color: var(--link-visited); }\n  a:hover { color: var(--link-hover); }\n\u003C\u002Fstyle>\n\u003Cp>This link adapts to your system theme: \u003Ca href='#'>Theme-aware link\u003C\u002Fa>\u003C\u002Fp>",{"id":224,"slug":773,"title":774,"time_limit_seconds":775,"pass_percentage":303,"question_count":39},"styling-links-quiz","Styling Links Quiz",600,[777,783],{"id":351,"title":778,"slug":779,"prompt":780,"starter_code":781,"expected_output":782,"language":652,"order_index":9},"Build a Complete Link Style","build-complete-link-style","Style the links so that: (1) unvisited links are green, (2) visited links are dark gray, (3) hover shows a thicker underline and a darker green, (4) keyboard focus shows an orange outline with 3px offset, and (5) pressed links turn red. Use the correct LVHA order and include :focus-visible.","\u003Cstyle>\n  \u002F* TODO: write your link styles here in LVHA order *\u002F\n\u003C\u002Fstyle>\n\u003Cp>Read the \u003Ca href='#'>documentation\u003C\u002Fa> and the \u003Ca href='#2'>tutorial\u003C\u002Fa>.\u003C\u002Fp>","Links are green by default, dark gray when visited, have a thicker darker-green underline on hover, an orange focus ring with keyboard focus, and turn red while pressed.",{"id":355,"title":784,"slug":785,"prompt":786,"starter_code":787,"expected_output":788,"language":652,"order_index":23},"Auto-Label External and PDF Links","auto-label-external-pdf-links","Using only CSS attribute selectors and the ::after pseudo-element, add an arrow symbol after links that start with https and add the text (PDF) after links that end with .pdf. Do not change the HTML.","\u003Cstyle>\n  \u002F* TODO: use a[href^='https']::after and a[href$='.pdf']::after *\u002F\n\u003C\u002Fstyle>\n\u003Cul>\n  \u003Cli>\u003Ca href='https:\u002F\u002Fexample.com'>Example site\u003C\u002Fa>\u003C\u002Fli>\n  \u003Cli>\u003Ca href='\u002Fdocs\u002Freport.pdf'>Annual report\u003C\u002Fa>\u003C\u002Fli>\n  \u003Cli>\u003Ca href='\u002Fabout'>About us\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>","The first link shows an arrow after its text, the second shows (PDF) after its text, and the third link has no extra symbol.","2026-09-30T17:28:59+00:00",{"id":511,"slug":513,"title":512},{"id":519,"slug":521,"title":520}]