[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"course-tree":6,"blog-categories":434,"topic:setting-up-css-workspace-linking-files-live-server":458},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8,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,366,398],{"id":75,"name":342,"slug":343,"order_index":344,"topics":345},"CSS Fundamentals & Setup","css-fundamentals-setup",0,[346,350,354,358,362],{"id":347,"title":348,"slug":349,"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":351,"title":352,"slug":353,"order_index":23,"cornerstone":26,"reading_time_minutes":35},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":355,"title":356,"slug":357,"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":359,"title":360,"slug":361,"order_index":35,"cornerstone":26,"reading_time_minutes":31},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":363,"title":364,"slug":365,"order_index":39,"cornerstone":26,"reading_time_minutes":39},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":87,"name":367,"slug":368,"order_index":344,"topics":369},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[370,374,378,382,386,390,394],{"id":371,"title":372,"slug":373,"order_index":79,"cornerstone":26,"reading_time_minutes":39},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":375,"title":376,"slug":377,"order_index":87,"cornerstone":26,"reading_time_minutes":35},96,"CSS Backgrounds","css-backgrounds",{"id":379,"title":380,"slug":381,"order_index":91,"cornerstone":26,"reading_time_minutes":39},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":383,"title":384,"slug":385,"order_index":95,"cornerstone":26,"reading_time_minutes":39},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":387,"title":388,"slug":389,"order_index":99,"cornerstone":26,"reading_time_minutes":43},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":391,"title":392,"slug":393,"order_index":103,"cornerstone":26,"reading_time_minutes":39},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":395,"title":396,"slug":397,"order_index":114,"cornerstone":26,"reading_time_minutes":43},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":79,"name":399,"slug":400,"order_index":344,"topics":401},"Selectors & the Cascade","selectors-the-cascade",[402,406,410,414,418,422,426,430],{"id":403,"title":404,"slug":405,"order_index":43,"cornerstone":26,"reading_time_minutes":35},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":407,"title":408,"slug":409,"order_index":51,"cornerstone":26,"reading_time_minutes":35},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":411,"title":412,"slug":413,"order_index":55,"cornerstone":26,"reading_time_minutes":35},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":415,"title":416,"slug":417,"order_index":59,"cornerstone":26,"reading_time_minutes":43},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":419,"title":420,"slug":421,"order_index":63,"cornerstone":26,"reading_time_minutes":39},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":423,"title":424,"slug":425,"order_index":67,"cornerstone":26,"reading_time_minutes":39},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":427,"title":428,"slug":429,"order_index":71,"cornerstone":26,"reading_time_minutes":35},93,"CSS Specificity Explained","css-specificity-explained",{"id":431,"title":432,"slug":433,"order_index":75,"cornerstone":26,"reading_time_minutes":39},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"data":435},[436,439,443,448,453],{"name":335,"slug":336,"description":437,"post_count":23,"subcategories":438},"Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",[],{"name":10,"slug":440,"description":441,"post_count":23,"subcategories":442},"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":444,"slug":445,"description":446,"post_count":9,"subcategories":447},"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":449,"slug":450,"description":451,"post_count":9,"subcategories":452},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":454,"slug":455,"description":456,"post_count":9,"subcategories":457},"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":459},{"id":355,"title":356,"slug":357,"content":460,"course":461,"subcategory":462,"author":463,"reading_time_minutes":31,"cornerstone":26,"schema_type":469,"faq_json":5,"video_url":5,"canonical_url":470,"meta_title":471,"meta_description":472,"og_image":5,"toc_json":473,"code_examples":534,"quiz":5,"exercises":551,"published_at":5,"updated_at":558,"prev":559,"next":560},"\u003Ch2 id=\"how-to-link-css-to-html-setting-up-your-workspace\">How to Link CSS to HTML: Setting Up Your Workspace\u003C\u002Fh2>\u003Cp>Before writing real styles you need a clean, organized \u003Cstrong>CSS workspace\u003C\u002Fstrong>. In this lesson you will install a code editor, create a project folder, \u003Cstrong>link a CSS file to HTML\u003C\u002Fstrong> and use \u003Cstrong>Live Server\u003C\u002Fstrong> for instant browser refresh.\u003C\u002Fp>\u003Ch2 id=\"step-1-tools-you-need\">Step 1: Tools You Need\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>A code editor\u003C\u002Fstrong> - Visual Studio Code (VS Code) is the most popular free choice.\u003C\u002Fli>\u003Cli>\u003Cstrong>A modern browser\u003C\u002Fstrong> - Chrome, Edge, Firefox or Safari with built-in developer tools.\u003C\u002Fli>\u003Cli>\u003Cstrong>Live Server extension\u003C\u002Fstrong> - reloads the page whenever you save a file.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"step-2-create-a-project-structure\">Step 2: Create a Project Structure\u003C\u002Fh2>\u003Cp>Create a folder such as \u003Ccode>css-course\u003C\u002Fcode> and organize it like this:\u003C\u002Fp>\u003Cpre>\u003Ccode>css-course\u002F\n  index.html\n  css\u002F\n    style.css\n  images\u002F\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Keeping CSS in its own folder makes larger projects easier to manage.\u003C\u002Fp>\u003Ch2 id=\"step-3-three-ways-to-add-css\">Step 3: Three Ways to Add CSS\u003C\u002Fh2>\u003Ch3 id=\"1-external-stylesheet-recommended\">1. External Stylesheet (Recommended)\u003C\u002Fh3>\u003Cp>Write CSS in a .css file and connect it inside the HTML head with the link element. One file can style many pages, and the browser caches it.\u003C\u002Fp>\u003Ch3 id=\"2-internal-stylesheet\">2. Internal Stylesheet\u003C\u002Fh3>\u003Cp>Place CSS inside a style element in the head. Useful for a single page, quick demos or critical CSS.\u003C\u002Fp>\u003Ch3 id=\"3-inline-styles\">3. Inline Styles\u003C\u002Fh3>\u003Cp>Use the style attribute on one element. It has very high specificity and is hard to maintain, so use it only for quick tests or dynamic values.\u003C\u002Fp>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Method\u003C\u002Fth>\u003Cth>Reusable\u003C\u002Fth>\u003Cth>Best for\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>External\u003C\u002Ftd>\u003Ctd>Yes\u003C\u002Ftd>\u003Ctd>Real projects\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Internal\u003C\u002Ftd>\u003Ctd>One page\u003C\u002Ftd>\u003Ctd>Demos, small pages\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Inline\u003C\u002Ftd>\u003Ctd>No\u003C\u002Ftd>\u003Ctd>Quick tests, dynamic values\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2 id=\"understanding-the-link-element\">Understanding the link Element\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Ccode>rel='stylesheet'\u003C\u002Fcode> tells the browser this file is a stylesheet.\u003C\u002Fli>\u003Cli>\u003Ccode>href\u003C\u002Fcode> is the path to the CSS file, relative to the HTML file.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"understanding-file-paths\">Understanding File Paths\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Ccode>style.css\u003C\u002Fcode> - same folder as the HTML file.\u003C\u002Fli>\u003Cli>\u003Ccode>css\u002Fstyle.css\u003C\u002Fcode> - inside a css folder next to the HTML file.\u003C\u002Fli>\u003Cli>\u003Ccode>..\u002Fcss\u002Fstyle.css\u003C\u002Fcode> - go up one folder, then into css.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"about-at-import\">About @import\u003C\u002Fh2>\u003Cp>You can import one CSS file into another with @import, but it delays loading because the browser discovers files one after another. Prefer multiple link elements or a build tool.\u003C\u002Fp>\u003Ch2 id=\"step-4-install-and-use-live-server\">Step 4: Install and Use Live Server\u003C\u002Fh2>\u003Col>\u003Cli>Open VS Code and open the Extensions panel (Ctrl+Shift+X, or Cmd+Shift+X on Mac).\u003C\u002Fli>\u003Cli>Search for \u003Cstrong>Live Server\u003C\u002Fstrong> and click Install.\u003C\u002Fli>\u003Cli>Open your project folder with File > Open Folder.\u003C\u002Fli>\u003Cli>Right-click index.html and choose \u003Cstrong>Open with Live Server\u003C\u002Fstrong>, or click \u003Cstrong>Go Live\u003C\u002Fstrong> in the bottom status bar.\u003C\u002Fli>\u003Cli>Your browser opens at an address like http:\u002F\u002F127.0.0.1:5500. Edit and save the CSS: the page updates instantly without a manual refresh.\u003C\u002Fli>\u003C\u002Fol>\u003Ch2 id=\"recommended-extras\">Recommended Extras\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>Prettier\u003C\u002Fstrong> - automatic code formatting.\u003C\u002Fli>\u003Cli>\u003Cstrong>Stylelint\u003C\u002Fstrong> - catches CSS errors and enforces conventions.\u003C\u002Fli>\u003Cli>\u003Cstrong>CSS Peek\u003C\u002Fstrong> or IntelliSense - jump from a class in HTML to its CSS definition.\u003C\u002Fli>\u003Cli>\u003Cstrong>Color Highlight\u003C\u002Fstrong> - shows color previews in the editor.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"essential-starter-template\">Essential Starter Template\u003C\u002Fh2>\u003Cp>Every page should include the charset and viewport meta tags. The viewport tag is required for responsive design on phones.\u003C\u002Fp>\u003Ch2 id=\"troubleshooting-my-css-is-not-working\">Troubleshooting: My CSS Is Not Working\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>Wrong path\u003C\u002Fstrong> - open DevTools Network tab; a 404 on style.css means the href is wrong.\u003C\u002Fli>\u003Cli>\u003Cstrong>Typos\u003C\u002Fstrong> - it is style.css not styles.css; file names can be case-sensitive on servers.\u003C\u002Fli>\u003Cli>\u003Cstrong>Link placed outside head\u003C\u002Fstrong> - keep the link element in the head.\u003C\u002Fli>\u003Cli>\u003Cstrong>Unsaved file\u003C\u002Fstrong> - save with Ctrl+S (or enable Auto Save).\u003C\u002Fli>\u003Cli>\u003Cstrong>Browser cache\u003C\u002Fstrong> - do a hard refresh (Ctrl+Shift+R).\u003C\u002Fli>\u003Cli>\u003Cstrong>Syntax error\u003C\u002Fstrong> - a missing brace or semicolon breaks following rules.\u003C\u002Fli>\u003Cli>\u003Cstrong>Opening the file directly\u003C\u002Fstrong> (file:\u002F\u002F) works for simple pages, but a local server is closer to real hosting and required for many modern features.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh2>\u003Cul>\u003Cli>Use an external stylesheet for real projects.\u003C\u002Fli>\u003Cli>Link it with link rel='stylesheet' href='path' inside the head.\u003C\u002Fli>\u003Cli>Live Server gives instant reloads while you edit.\u003C\u002Fli>\u003Cli>Add the viewport meta tag from day one.\u003C\u002Fli>\u003C\u002Ful>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><!DOCTYPE html>\n<html lang='en'>\n<head>\n  <meta charset='UTF-8'>\n  <meta name='viewport' content='width=device-width, initial-scale=1.0'>\n  <title>My CSS Project<\u002Ftitle>\n  <link rel='stylesheet' href='css\u002Fstyle.css'>\n<\u002Fhead>\n<body>\n  <h1>Hello, CSS Workspace!<\u002Fh1>\n  <p>This page is styled by an external stylesheet.<\u002Fp>\n<\u002Fbody>\n<\u002Fhtml>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-css\">\u003Cpre>\u003Ccode>\u002F* css\u002Fstyle.css *\u002F\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;\n  line-height: 1.6;\n  color: #222;\n  background: #fafafa;\n}\n\nh1 {\n  color: #0d6efd;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><!DOCTYPE html>\n<html lang='en'>\n<head>\n  <meta charset='UTF-8'>\n  <title>Internal CSS<\u002Ftitle>\n  <style>\n    body { background: #eef5ff; font-family: Arial, sans-serif; }\n    h1 { color: #1a5276; }\n  <\u002Fstyle>\n<\u002Fhead>\n<body>\n  <h1>Internal Stylesheet<\u002Fh1>\n  <p>The CSS lives inside a style element in the head.<\u002Fp>\n<\u002Fbody>\n<\u002Fhtml>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><h1 style='color: teal; text-align: center;'>Inline Style<\u002Fh1>\n<p style='background: lightyellow; padding: 10px;'>Inline styles apply to a single element only.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-css\">\u003Cpre>\u003Ccode>\u002F* css\u002Fstyle.css *\u002F\n@import url('base.css');\n@import url('components.css');\n\n\u002F* Tip: multiple <link> tags load faster than @import chains *\u002F\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":335,"slug":336},{"name":342,"slug":343},{"slug":464,"display_name":465,"job_title":5,"short_bio":5,"expertise_tags":466,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":467,"posts":468},"badar-khalil","Badar Khalil",[],[],[],"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fsetting-up-css-workspace-linking-files-live-server","CSS Setup: How to Link CSS to HTML & Use Live Server","Set up your CSS workspace: create files, link CSS to HTML (external, internal, inline), install VS Code Live Server and fix common path problems.",[474,478,482,486,502,510,514,518,522,526,530],{"id":475,"text":476,"level":23,"children":477},"how-to-link-css-to-html-setting-up-your-workspace","How to Link CSS to HTML: Setting Up Your Workspace",[],{"id":479,"text":480,"level":23,"children":481},"step-1-tools-you-need","Step 1: Tools You Need",[],{"id":483,"text":484,"level":23,"children":485},"step-2-create-a-project-structure","Step 2: Create a Project Structure",[],{"id":487,"text":488,"level":23,"children":489},"step-3-three-ways-to-add-css","Step 3: Three Ways to Add CSS",[490,494,498],{"id":491,"text":492,"level":31,"children":493},"1-external-stylesheet-recommended","1. External Stylesheet (Recommended)",[],{"id":495,"text":496,"level":31,"children":497},"2-internal-stylesheet","2. Internal Stylesheet",[],{"id":499,"text":500,"level":31,"children":501},"3-inline-styles","3. Inline Styles",[],{"id":503,"text":504,"level":23,"children":505},"understanding-the-link-element","Understanding the link Element",[506],{"id":507,"text":508,"level":31,"children":509},"understanding-file-paths","Understanding File Paths",[],{"id":511,"text":512,"level":23,"children":513},"about-at-import","About @import",[],{"id":515,"text":516,"level":23,"children":517},"step-4-install-and-use-live-server","Step 4: Install and Use Live Server",[],{"id":519,"text":520,"level":23,"children":521},"recommended-extras","Recommended Extras",[],{"id":523,"text":524,"level":23,"children":525},"essential-starter-template","Essential Starter Template",[],{"id":527,"text":528,"level":23,"children":529},"troubleshooting-my-css-is-not-working","Troubleshooting: My CSS Is Not Working",[],{"id":531,"text":532,"level":23,"children":533},"key-takeaways","Key Takeaways",[],[535,539,542,545,548],{"id":536,"language":440,"code":537,"is_editable":538},195,"\u003C!DOCTYPE html>\n\u003Chtml lang='en'>\n\u003Chead>\n  \u003Cmeta charset='UTF-8'>\n  \u003Cmeta name='viewport' content='width=device-width, initial-scale=1.0'>\n  \u003Ctitle>My CSS Project\u003C\u002Ftitle>\n  \u003Clink rel='stylesheet' href='css\u002Fstyle.css'>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Ch1>Hello, CSS Workspace!\u003C\u002Fh1>\n  \u003Cp>This page is styled by an external stylesheet.\u003C\u002Fp>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>",true,{"id":540,"language":336,"code":541,"is_editable":538},196,"\u002F* css\u002Fstyle.css *\u002F\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;\n  line-height: 1.6;\n  color: #222;\n  background: #fafafa;\n}\n\nh1 {\n  color: #0d6efd;\n}",{"id":543,"language":440,"code":544,"is_editable":538},197,"\u003C!DOCTYPE html>\n\u003Chtml lang='en'>\n\u003Chead>\n  \u003Cmeta charset='UTF-8'>\n  \u003Ctitle>Internal CSS\u003C\u002Ftitle>\n  \u003Cstyle>\n    body { background: #eef5ff; font-family: Arial, sans-serif; }\n    h1 { color: #1a5276; }\n  \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Ch1>Internal Stylesheet\u003C\u002Fh1>\n  \u003Cp>The CSS lives inside a style element in the head.\u003C\u002Fp>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>",{"id":546,"language":440,"code":547,"is_editable":538},198,"\u003Ch1 style='color: teal; text-align: center;'>Inline Style\u003C\u002Fh1>\n\u003Cp style='background: lightyellow; padding: 10px;'>Inline styles apply to a single element only.\u003C\u002Fp>",{"id":549,"language":336,"code":550,"is_editable":538},199,"\u002F* css\u002Fstyle.css *\u002F\n@import url('base.css');\n@import url('components.css');\n\n\u002F* Tip: multiple \u003Clink> tags load faster than @import chains *\u002F",[552],{"id":355,"title":553,"slug":554,"prompt":555,"starter_code":556,"expected_output":557,"language":440,"order_index":9},"Link Your Stylesheet","link-your-stylesheet","Complete the head so that the page loads a stylesheet located at css\u002Fmain.css. Then set a viewport meta tag for responsive design.","\u003C!DOCTYPE html>\n\u003Chtml lang='en'>\n\u003Chead>\n  \u003Cmeta charset='UTF-8'>\n  \u003Ctitle>Practice\u003C\u002Ftitle>\n  \u003C!-- TODO: add viewport meta tag -->\n  \u003C!-- TODO: link css\u002Fmain.css -->\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Ch1>Linked!\u003C\u002Fh1>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>","\u003Cmeta name='viewport' content='width=device-width, initial-scale=1.0'> and \u003Clink rel='stylesheet' href='css\u002Fmain.css'> inside the head.","2026-09-29T18:29:10+00:00",{"id":351,"slug":353,"title":352},{"id":359,"slug":361,"title":360}]