[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"topic:css-basic-selectors":35,"course-tree":154},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8,14,19,25,30],{"name":9,"slug":10,"description":11,"post_count":12,"subcategories":13},"CSS","css","Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",2,[],{"name":15,"slug":16,"description":17,"post_count":12,"subcategories":18},"HTML","html","Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":20,"slug":21,"description":22,"post_count":23,"subcategories":24},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",1,[],{"name":26,"slug":27,"description":28,"post_count":23,"subcategories":29},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":31,"slug":32,"description":33,"post_count":23,"subcategories":34},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[],{"data":36},{"id":37,"title":38,"slug":39,"content":40,"course":41,"subcategory":42,"author":45,"reading_time_minutes":51,"cornerstone":52,"schema_type":53,"faq_json":5,"video_url":5,"canonical_url":54,"meta_title":55,"meta_description":56,"og_image":5,"toc_json":57,"code_examples":114,"quiz":5,"exercises":131,"published_at":5,"updated_at":146,"prev":147,"next":151},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors","\u003Ch2 id=\"css-basic-selectors-how-to-target-html-elements\">CSS Basic Selectors: How to Target HTML Elements\u003C\u002Fh2>\u003Cp>\u003Cstrong>CSS selectors\u003C\u002Fstrong> are patterns that tell the browser which HTML elements a rule should style. Without selectors, CSS cannot work: they are the bridge between your HTML and your design. This lesson covers the five \u003Cstrong>basic CSS selectors\u003C\u002Fstrong> every developer uses daily: \u003Cstrong>type, class, ID, universal and grouping\u003C\u002Fstrong>.\u003C\u002Fp>\u003Ch2 id=\"selector-anatomy-recap\">Selector Anatomy Recap\u003C\u002Fh2>\u003Cp>In the rule \u003Ccode>p { color: blue; }\u003C\u002Fcode>, the part before the curly braces (\u003Ccode>p\u003C\u002Fcode>) is the selector. The browser scans the DOM, finds every element that matches, and applies the declarations inside the braces.\u003C\u002Fp>\u003Ch2 id=\"1-type-selector-element-selector\">1. Type Selector (Element Selector)\u003C\u002Fh2>\u003Cp>A type selector matches every element of a given HTML tag name, for example \u003Ccode>p\u003C\u002Fcode>, \u003Ccode>h1\u003C\u002Fcode>, \u003Ccode>a\u003C\u002Fcode>, \u003Ccode>li\u003C\u002Fcode>, \u003Ccode>button\u003C\u002Fcode>.\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Syntax:\u003C\u002Fstrong> the tag name with no prefix.\u003C\u002Fli>\u003Cli>\u003Cstrong>Use it for:\u003C\u002Fstrong> global defaults such as body text, headings and links.\u003C\u002Fli>\u003Cli>\u003Cstrong>Specificity:\u003C\u002Fstrong> very low (0,0,1), so it is easy to override.\u003C\u002Fli>\u003Cli>\u003Cstrong>Caution:\u003C\u002Fstrong> it affects every matching element on the page, so keep type selectors for broad base styles.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"2-class-selector\">2. Class Selector\u003C\u002Fh2>\u003Cp>A class selector matches elements whose \u003Ccode>class\u003C\u002Fcode> attribute contains the given name. It starts with a dot.\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Syntax:\u003C\u002Fstrong> \u003Ccode>.card\u003C\u002Fcode> matches \u003Ccode>class='card'\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Cstrong>Reusable:\u003C\u002Fstrong> the same class can be used on many elements.\u003C\u002Fli>\u003Cli>\u003Cstrong>Combinable:\u003C\u002Fstrong> an element can have several classes (\u003Ccode>class='btn btn-primary large'\u003C\u002Fcode>).\u003C\u002Fli>\u003Cli>\u003Cstrong>Compound classes:\u003C\u002Fstrong> \u003Ccode>.btn.primary\u003C\u002Fcode> (no space) matches elements that have \u003Cem>both\u003C\u002Fem> classes.\u003C\u002Fli>\u003Cli>\u003Cstrong>Specificity:\u003C\u002Fstrong> (0,1,0).\u003C\u002Fli>\u003Cli>\u003Cstrong>Best practice:\u003C\u002Fstrong> classes are the main tool of modern CSS. Prefer them over IDs for styling.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"3-id-selector\">3. ID Selector\u003C\u002Fh2>\u003Cp>An ID selector matches the single element whose \u003Ccode>id\u003C\u002Fcode> attribute has the given value. It starts with a hash symbol.\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Syntax:\u003C\u002Fstrong> \u003Ccode>#header\u003C\u002Fcode> matches \u003Ccode>id='header'\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Cstrong>Unique:\u003C\u002Fstrong> an ID must appear only once per page.\u003C\u002Fli>\u003Cli>\u003Cstrong>Specificity:\u003C\u002Fstrong> high (1,0,0), which makes it hard to override later.\u003C\u002Fli>\u003Cli>\u003Cstrong>Best practice:\u003C\u002Fstrong> use IDs for anchor links, JavaScript hooks and form labels, but avoid them for styling.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"4-universal-selector\">4. Universal Selector\u003C\u002Fh2>\u003Cp>The asterisk matches every element on the page.\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Specificity:\u003C\u002Fstrong> zero (0,0,0).\u003C\u002Fli>\u003Cli>\u003Cstrong>Most common use:\u003C\u002Fstrong> a box-sizing reset (\u003Ccode>*, *::before, *::after { box-sizing: border-box; }\u003C\u002Fcode>).\u003C\u002Fli>\u003Cli>\u003Cstrong>Scoped use:\u003C\u002Fstrong> \u003Ccode>.sidebar *\u003C\u002Fcode> targets everything inside a sidebar.\u003C\u002Fli>\u003Cli>\u003Cstrong>Caution:\u003C\u002Fstrong> avoid heavy declarations on the universal selector in large pages.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"5-grouping-selector-selector-list\">5. Grouping Selector (Selector List)\u003C\u002Fh2>\u003Cp>Separate selectors with commas to apply one set of declarations to several selectors. This keeps your CSS DRY (Don't Repeat Yourself).\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>h1, h2, h3 { font-family: Georgia, serif; }\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>Each selector in the list is evaluated independently.\u003C\u002Fli>\u003Cli>In modern CSS, a selector list is valid inside :is(), :where() and :not(), and in nested rules.\u003C\u002Fli>\u003Cli>Older browsers may drop an entire list if one selector is invalid, but modern forgiving selector lists (inside :is() and :where()) skip only the invalid one.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"comparison-table\">Comparison Table\u003C\u002Fh2>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Selector\u003C\u002Fth>\u003Cth>Example\u003C\u002Fth>\u003Cth>Matches\u003C\u002Fth>\u003Cth>Specificity\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>Universal\u003C\u002Ftd>\u003Ctd>*\u003C\u002Ftd>\u003Ctd>Every element\u003C\u002Ftd>\u003Ctd>0,0,0\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Type\u003C\u002Ftd>\u003Ctd>p\u003C\u002Ftd>\u003Ctd>All p elements\u003C\u002Ftd>\u003Ctd>0,0,1\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Class\u003C\u002Ftd>\u003Ctd>.alert\u003C\u002Ftd>\u003Ctd>Elements with class alert\u003C\u002Ftd>\u003Ctd>0,1,0\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>ID\u003C\u002Ftd>\u003Ctd>#logo\u003C\u002Ftd>\u003Ctd>The element with id logo\u003C\u002Ftd>\u003Ctd>1,0,0\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Compound\u003C\u002Ftd>\u003Ctd>p.alert\u003C\u002Ftd>\u003Ctd>p elements with class alert\u003C\u002Ftd>\u003Ctd>0,1,1\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Grouping\u003C\u002Ftd>\u003Ctd>h1, h2\u003C\u002Ftd>\u003Ctd>Any selector in the list\u003C\u002Ftd>\u003Ctd>Each scored separately\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2 id=\"combining-basic-selectors\">Combining Basic Selectors\u003C\u002Fh2>\u003Cp>You can combine a type and a class with no space, like \u003Ccode>a.button\u003C\u002Fcode>, to be more precise. Be careful with the space: \u003Ccode>.card p\u003C\u002Fcode> means paragraphs \u003Cem>inside\u003C\u002Fem> a card, while \u003Ccode>.card.p\u003C\u002Fcode> means an element with both classes.\u003C\u002Fp>\u003Ch2 id=\"class-vs-id-which-should-you-use\">Class vs ID: Which Should You Use?\u003C\u002Fh2>\u003Cul>\u003Cli>Use \u003Cstrong>classes\u003C\u002Fstrong> for styling, because they are reusable and keep specificity low and predictable.\u003C\u002Fli>\u003Cli>Use \u003Cstrong>IDs\u003C\u002Fstrong> for unique hooks: in-page navigation (\u003Ccode>href='#contact'\u003C\u002Fcode>), form label associations and JavaScript.\u003C\u002Fli>\u003Cli>Class names are case-sensitive in standards mode: \u003Ccode>.Card\u003C\u002Fcode> and \u003Ccode>.card\u003C\u002Fcode> are different.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"naming-tips\">Naming Tips\u003C\u002Fh2>\u003Cul>\u003Cli>Use lowercase kebab-case: \u003Ccode>.main-nav\u003C\u002Fcode>, \u003Ccode>.hero-title\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Name by purpose, not appearance: \u003Ccode>.alert-error\u003C\u002Fcode> rather than \u003Ccode>.red-text\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Consider a naming methodology such as BEM: \u003Ccode>.card__title--large\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Class and ID names cannot start with a digit and cannot contain spaces.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"trending-practice-low-specificity-architecture\">Trending Practice: Low-Specificity Architecture\u003C\u002Fh2>\u003Cp>Modern CSS teams keep selectors flat (mostly single classes) so styles are easy to override and refactor. This is also why utility-first approaches such as Tailwind CSS, cascade layers (@layer) and :where() are popular. Understanding the basic selectors well is what makes these tools easy to learn.\u003C\u002Fp>\u003Ch2 id=\"common-mistakes\">Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Forgetting the dot or hash (writing \u003Ccode>card\u003C\u002Fcode> instead of \u003Ccode>.card\u003C\u002Fcode>).\u003C\u002Fli>\u003Cli>Reusing the same ID on several elements, which is invalid HTML.\u003C\u002Fli>\u003Cli>Adding a space in a compound selector and accidentally changing its meaning.\u003C\u002Fli>\u003Cli>Overusing the universal selector for expensive declarations.\u003C\u002Fli>\u003Cli>Depending on IDs for styling, then needing !important to override them.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh2>\u003Cul>\u003Cli>Type selectors target tags, classes target reusable groups, IDs target one unique element.\u003C\u002Fli>\u003Cli>The universal selector matches everything and has zero specificity.\u003C\u002Fli>\u003Cli>Grouping with commas avoids repeated declarations.\u003C\u002Fli>\u003Cli>Prefer classes for styling to keep specificity low and CSS maintainable.\u003C\u002Fli>\u003C\u002Ful>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  \u002F* Type selector *\u002F\n  p { color: #34495e; font-family: Arial, sans-serif; }\n\n  \u002F* Class selector *\u002F\n  .highlight { background: #fff3a3; padding: 2px 6px; }\n\n  \u002F* ID selector *\u002F\n  #main-title { color: #c0392b; text-transform: uppercase; }\n<\u002Fstyle>\n<h1 id='main-title'>Basic Selectors<\u002Fh1>\n<p>This is a normal paragraph.<\u002Fp>\n<p class='highlight'>This paragraph uses a class.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  * { box-sizing: border-box; }\n  .box { width: 200px; padding: 20px; border: 5px solid #2980b9; background: #eaf4fc; font-family: sans-serif; }\n<\u002Fstyle>\n<div class='box'>With border-box, width 200px includes padding and border.<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  h1, h2, h3 {\n    font-family: Georgia, serif;\n    color: #16a085;\n    margin-bottom: 6px;\n  }\n<\u002Fstyle>\n<h1>Heading One<\u002Fh1>\n<h2>Heading Two<\u002Fh2>\n<h3>Heading Three<\u002Fh3>\n<p>All three headings share one rule using a grouping selector.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .btn { padding: 10px 18px; border: none; border-radius: 6px; color: white; background: gray; font-size: 16px; }\n  .btn.primary { background: #2563eb; }\n  .btn.danger { background: #dc2626; }\n  button.btn.large { font-size: 22px; padding: 14px 26px; }\n<\u002Fstyle>\n<button class='btn'>Default<\u002Fbutton>\n<button class='btn primary'>Primary<\u002Fbutton>\n<button class='btn danger large'>Danger Large<\u002Fbutton>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .card p { color: green; }      \u002F* p INSIDE .card (descendant) *\u002F\n  .card.featured { border: 3px solid gold; } \u002F* element with BOTH classes *\u002F\n  .card { border: 1px solid #ccc; padding: 12px; margin: 10px 0; font-family: sans-serif; }\n<\u002Fstyle>\n<div class='card'><p>Normal card paragraph<\u002Fp><\u002Fdiv>\n<div class='card featured'><p>Featured card paragraph<\u002Fp><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":9,"slug":10},{"name":43,"slug":44},"Selectors & the Cascade","selectors-the-cascade",{"slug":46,"display_name":47,"job_title":5,"short_bio":5,"expertise_tags":48,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":49,"posts":50},"badar-khalil","Badar Khalil",[],[],[],4,false,"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fcss-basic-selectors","CSS Basic Selectors: Type, Class, ID, Universal, Grouping","Learn CSS basic selectors: type, class, ID, universal and grouping selectors with specificity, best practices and live, editable code examples.",[58,62,66,70,74,78,82,86,90,94,98,102,106,110],{"id":59,"text":60,"level":12,"children":61},"css-basic-selectors-how-to-target-html-elements","CSS Basic Selectors: How to Target HTML Elements",[],{"id":63,"text":64,"level":12,"children":65},"selector-anatomy-recap","Selector Anatomy Recap",[],{"id":67,"text":68,"level":12,"children":69},"1-type-selector-element-selector","1. Type Selector (Element Selector)",[],{"id":71,"text":72,"level":12,"children":73},"2-class-selector","2. Class Selector",[],{"id":75,"text":76,"level":12,"children":77},"3-id-selector","3. ID Selector",[],{"id":79,"text":80,"level":12,"children":81},"4-universal-selector","4. Universal Selector",[],{"id":83,"text":84,"level":12,"children":85},"5-grouping-selector-selector-list","5. Grouping Selector (Selector List)",[],{"id":87,"text":88,"level":12,"children":89},"comparison-table","Comparison Table",[],{"id":91,"text":92,"level":12,"children":93},"combining-basic-selectors","Combining Basic Selectors",[],{"id":95,"text":96,"level":12,"children":97},"class-vs-id-which-should-you-use","Class vs ID: Which Should You Use?",[],{"id":99,"text":100,"level":12,"children":101},"naming-tips","Naming Tips",[],{"id":103,"text":104,"level":12,"children":105},"trending-practice-low-specificity-architecture","Trending Practice: Low-Specificity Architecture",[],{"id":107,"text":108,"level":12,"children":109},"common-mistakes","Common Mistakes",[],{"id":111,"text":112,"level":12,"children":113},"key-takeaways","Key Takeaways",[],[115,119,122,125,128],{"id":116,"language":16,"code":117,"is_editable":118},209,"\u003Cstyle>\n  \u002F* Type selector *\u002F\n  p { color: #34495e; font-family: Arial, sans-serif; }\n\n  \u002F* Class selector *\u002F\n  .highlight { background: #fff3a3; padding: 2px 6px; }\n\n  \u002F* ID selector *\u002F\n  #main-title { color: #c0392b; text-transform: uppercase; }\n\u003C\u002Fstyle>\n\u003Ch1 id='main-title'>Basic Selectors\u003C\u002Fh1>\n\u003Cp>This is a normal paragraph.\u003C\u002Fp>\n\u003Cp class='highlight'>This paragraph uses a class.\u003C\u002Fp>",true,{"id":120,"language":16,"code":121,"is_editable":118},210,"\u003Cstyle>\n  * { box-sizing: border-box; }\n  .box { width: 200px; padding: 20px; border: 5px solid #2980b9; background: #eaf4fc; font-family: sans-serif; }\n\u003C\u002Fstyle>\n\u003Cdiv class='box'>With border-box, width 200px includes padding and border.\u003C\u002Fdiv>",{"id":123,"language":16,"code":124,"is_editable":118},211,"\u003Cstyle>\n  h1, h2, h3 {\n    font-family: Georgia, serif;\n    color: #16a085;\n    margin-bottom: 6px;\n  }\n\u003C\u002Fstyle>\n\u003Ch1>Heading One\u003C\u002Fh1>\n\u003Ch2>Heading Two\u003C\u002Fh2>\n\u003Ch3>Heading Three\u003C\u002Fh3>\n\u003Cp>All three headings share one rule using a grouping selector.\u003C\u002Fp>",{"id":126,"language":16,"code":127,"is_editable":118},212,"\u003Cstyle>\n  .btn { padding: 10px 18px; border: none; border-radius: 6px; color: white; background: gray; font-size: 16px; }\n  .btn.primary { background: #2563eb; }\n  .btn.danger { background: #dc2626; }\n  button.btn.large { font-size: 22px; padding: 14px 26px; }\n\u003C\u002Fstyle>\n\u003Cbutton class='btn'>Default\u003C\u002Fbutton>\n\u003Cbutton class='btn primary'>Primary\u003C\u002Fbutton>\n\u003Cbutton class='btn danger large'>Danger Large\u003C\u002Fbutton>",{"id":129,"language":16,"code":130,"is_editable":118},213,"\u003Cstyle>\n  .card p { color: green; }      \u002F* p INSIDE .card (descendant) *\u002F\n  .card.featured { border: 3px solid gold; } \u002F* element with BOTH classes *\u002F\n  .card { border: 1px solid #ccc; padding: 12px; margin: 10px 0; font-family: sans-serif; }\n\u003C\u002Fstyle>\n\u003Cdiv class='card'>\u003Cp>Normal card paragraph\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cdiv class='card featured'>\u003Cp>Featured card paragraph\u003C\u002Fp>\u003C\u002Fdiv>",[132,139],{"id":133,"title":134,"slug":135,"prompt":136,"starter_code":137,"expected_output":138,"language":16,"order_index":23},88,"Pick the Right Selector","pick-the-right-selector","Write CSS so that: (1) all paragraphs are dark gray (#444), (2) elements with the class 'notice' have a light yellow background, (3) the element with id 'logo' is 32px in size and bold. Then group h2 and h3 into a single rule with the color teal.","\u003Cstyle>\n  \u002F* Write your selectors here *\u002F\n\u003C\u002Fstyle>\n\u003Ch2 id='logo'>My Logo\u003C\u002Fh2>\n\u003Ch3>Subheading\u003C\u002Fh3>\n\u003Cp>Normal paragraph\u003C\u002Fp>\n\u003Cp class='notice'>Notice paragraph\u003C\u002Fp>","Gray paragraphs, yellow notice background, bold 32px logo, teal h2 and h3.",{"id":140,"title":141,"slug":142,"prompt":143,"starter_code":144,"expected_output":145,"language":16,"order_index":12},89,"Compound vs Descendant","compound-vs-descendant","Make only the paragraph that has BOTH classes 'msg' and 'error' red, and make paragraphs inside the div with class 'panel' italic. Do not affect any other paragraph.","\u003Cstyle>\n  \u002F* Your rules here *\u002F\n\u003C\u002Fstyle>\n\u003Cp class='msg'>Info message\u003C\u002Fp>\n\u003Cp class='msg error'>Error message\u003C\u002Fp>\n\u003Cdiv class='panel'>\u003Cp>Inside the panel\u003C\u002Fp>\u003C\u002Fdiv>",".msg.error { color: red; } .panel p { font-style: italic; }","2026-09-29T18:33:20+00:00",{"id":148,"slug":149,"title":150},86,"browser-devtools-for-css","Browser DevTools for CSS: Inspect, Debug & Edit Styles Live",{"id":133,"slug":152,"title":153},"css-combinators","CSS Combinators: Descendant, Child, Adjacent & General Sibling",{"data":155},[156,477],{"id":23,"name":15,"slug":157,"icon":5,"icon_url":5,"short_description":158,"meta_title":159,"meta_description":160,"og_image":161,"locale":162,"subcategories":163},"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",[164,189,225,249,325,359,373,401,425,441],{"id":23,"name":165,"slug":166,"order_index":23,"topics":167},"HTML Fundamentals & Setup","html-fundamentals-setup",[168,171,174,178,181,185],{"id":12,"title":169,"slug":170,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",{"id":23,"title":172,"slug":173,"order_index":23,"cornerstone":52,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",{"id":175,"title":176,"slug":177,"order_index":175,"cornerstone":52,"reading_time_minutes":12},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":51,"title":179,"slug":180,"order_index":51,"cornerstone":52,"reading_time_minutes":12},"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":182,"title":183,"slug":184,"order_index":182,"cornerstone":52,"reading_time_minutes":12},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":186,"title":187,"slug":188,"order_index":186,"cornerstone":52,"reading_time_minutes":12},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":12,"name":190,"slug":191,"order_index":12,"topics":192},"Text & Content Basics","text-content-basics",[193,197,201,205,209,213,217,221],{"id":194,"title":195,"slug":196,"order_index":194,"cornerstone":52,"reading_time_minutes":12},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":198,"title":199,"slug":200,"order_index":198,"cornerstone":52,"reading_time_minutes":12},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":202,"title":203,"slug":204,"order_index":202,"cornerstone":52,"reading_time_minutes":23},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":206,"title":207,"slug":208,"order_index":206,"cornerstone":52,"reading_time_minutes":12},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":210,"title":211,"slug":212,"order_index":210,"cornerstone":52,"reading_time_minutes":12},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":214,"title":215,"slug":216,"order_index":214,"cornerstone":52,"reading_time_minutes":12},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":218,"title":219,"slug":220,"order_index":218,"cornerstone":52,"reading_time_minutes":12},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":222,"title":223,"slug":224,"order_index":222,"cornerstone":52,"reading_time_minutes":12},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":175,"name":226,"slug":227,"order_index":175,"topics":228},"Links, Media & Navigation","links-media-navigation",[229,233,237,241,245],{"id":230,"title":231,"slug":232,"order_index":230,"cornerstone":52,"reading_time_minutes":12},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":234,"title":235,"slug":236,"order_index":234,"cornerstone":52,"reading_time_minutes":12},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":238,"title":239,"slug":240,"order_index":238,"cornerstone":52,"reading_time_minutes":23},17,"HTML Favicon Setup","html-favicon-setup",{"id":242,"title":243,"slug":244,"order_index":242,"cornerstone":52,"reading_time_minutes":12},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":246,"title":247,"slug":248,"order_index":246,"cornerstone":52,"reading_time_minutes":12},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":51,"name":250,"slug":251,"order_index":51,"topics":252},"Structuring Content","structuring-content",[253,258,263,268,273,277,281,285,289,293,297,301,305,309,313,317,321],{"id":254,"title":255,"slug":256,"order_index":257,"cornerstone":52,"reading_time_minutes":12},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":259,"title":260,"slug":261,"order_index":262,"cornerstone":52,"reading_time_minutes":12},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":264,"title":265,"slug":266,"order_index":267,"cornerstone":52,"reading_time_minutes":12},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":269,"title":270,"slug":271,"order_index":272,"cornerstone":52,"reading_time_minutes":23},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":274,"title":275,"slug":276,"order_index":254,"cornerstone":52,"reading_time_minutes":12},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":278,"title":279,"slug":280,"order_index":259,"cornerstone":52,"reading_time_minutes":23},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":282,"title":283,"slug":284,"order_index":264,"cornerstone":52,"reading_time_minutes":12},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":286,"title":287,"slug":288,"order_index":269,"cornerstone":52,"reading_time_minutes":12},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":290,"title":291,"slug":292,"order_index":274,"cornerstone":52,"reading_time_minutes":12},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":294,"title":295,"slug":296,"order_index":278,"cornerstone":52,"reading_time_minutes":175},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":298,"title":299,"slug":300,"order_index":282,"cornerstone":52,"reading_time_minutes":12},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":302,"title":303,"slug":304,"order_index":286,"cornerstone":52,"reading_time_minutes":12},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":306,"title":307,"slug":308,"order_index":290,"cornerstone":52,"reading_time_minutes":23},77,"HTML Symbols","html-symbols",{"id":310,"title":311,"slug":312,"order_index":310,"cornerstone":52,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":314,"title":315,"slug":316,"order_index":314,"cornerstone":52,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":318,"title":319,"slug":320,"order_index":318,"cornerstone":52,"reading_time_minutes":23},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":322,"title":323,"slug":324,"order_index":322,"cornerstone":52,"reading_time_minutes":23},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":194,"name":326,"slug":327,"order_index":182,"topics":328},"Forms & User Input","forms-user-input",[329,334,339,344,349,354],{"id":330,"title":331,"slug":332,"order_index":333,"cornerstone":52,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":335,"title":336,"slug":337,"order_index":338,"cornerstone":52,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":340,"title":341,"slug":342,"order_index":343,"cornerstone":52,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":345,"title":346,"slug":347,"order_index":348,"cornerstone":52,"reading_time_minutes":12},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":350,"title":351,"slug":352,"order_index":353,"cornerstone":52,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":355,"title":356,"slug":357,"order_index":358,"cornerstone":52,"reading_time_minutes":12},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":198,"name":360,"slug":361,"order_index":186,"topics":362},"Graphics & Visuals","graphics-visuals",[363,368],{"id":364,"title":365,"slug":366,"order_index":367,"cornerstone":52,"reading_time_minutes":175},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":369,"title":370,"slug":371,"order_index":372,"cornerstone":52,"reading_time_minutes":175},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":202,"name":374,"slug":375,"order_index":194,"topics":376},"Multimedia","multimedia",[377,382,387,392,397],{"id":378,"title":379,"slug":380,"order_index":381,"cornerstone":52,"reading_time_minutes":12},57,"HTML Media Overview","html-media-overview",45,{"id":383,"title":384,"slug":385,"order_index":386,"cornerstone":52,"reading_time_minutes":12},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":388,"title":389,"slug":390,"order_index":391,"cornerstone":52,"reading_time_minutes":12},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":393,"title":394,"slug":395,"order_index":396,"cornerstone":52,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":398,"title":399,"slug":400,"order_index":330,"cornerstone":52,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":206,"name":402,"slug":403,"order_index":198,"topics":404},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[405,409,413,417,421],{"id":406,"title":407,"slug":408,"order_index":335,"cornerstone":52,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":410,"title":411,"slug":412,"order_index":340,"cornerstone":52,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":414,"title":415,"slug":416,"order_index":345,"cornerstone":52,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":418,"title":419,"slug":420,"order_index":350,"cornerstone":52,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":422,"title":423,"slug":424,"order_index":355,"cornerstone":52,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":210,"name":426,"slug":427,"order_index":202,"topics":428},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[429,433,437],{"id":430,"title":431,"slug":432,"order_index":364,"cornerstone":52,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":434,"title":435,"slug":436,"order_index":369,"cornerstone":52,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":438,"title":439,"slug":440,"order_index":378,"cornerstone":52,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":214,"name":442,"slug":443,"order_index":206,"topics":444},"Reference & Practice","reference-practice",[445,449,453,457,461,465,469,473],{"id":446,"title":447,"slug":448,"order_index":23,"cornerstone":52,"reading_time_minutes":12},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":450,"title":451,"slug":452,"order_index":12,"cornerstone":52,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":454,"title":455,"slug":456,"order_index":175,"cornerstone":52,"reading_time_minutes":12},72,"HTML Events Reference","html-events-reference",{"id":458,"title":459,"slug":460,"order_index":51,"cornerstone":52,"reading_time_minutes":12},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":462,"title":463,"slug":464,"order_index":182,"cornerstone":52,"reading_time_minutes":12},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":466,"title":467,"slug":468,"order_index":186,"cornerstone":52,"reading_time_minutes":12},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":470,"title":471,"slug":472,"order_index":194,"cornerstone":52,"reading_time_minutes":175},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":474,"title":475,"slug":476,"order_index":198,"cornerstone":52,"reading_time_minutes":23},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":12,"name":9,"slug":10,"icon":5,"icon_url":5,"short_description":478,"meta_title":479,"meta_description":480,"og_image":5,"locale":162,"subcategories":481},"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.",[482,504,536],{"id":218,"name":483,"slug":484,"order_index":485,"topics":486},"CSS Fundamentals & Setup","css-fundamentals-setup",0,[487,491,495,499,503],{"id":488,"title":489,"slug":490,"order_index":23,"cornerstone":52,"reading_time_minutes":51},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":492,"title":493,"slug":494,"order_index":12,"cornerstone":52,"reading_time_minutes":51},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":496,"title":497,"slug":498,"order_index":175,"cornerstone":52,"reading_time_minutes":175},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":500,"title":501,"slug":502,"order_index":51,"cornerstone":52,"reading_time_minutes":175},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":148,"title":150,"slug":149,"order_index":182,"cornerstone":52,"reading_time_minutes":182},{"id":230,"name":505,"slug":506,"order_index":485,"topics":507},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[508,512,516,520,524,528,532],{"id":509,"title":510,"slug":511,"order_index":222,"cornerstone":52,"reading_time_minutes":182},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":513,"title":514,"slug":515,"order_index":230,"cornerstone":52,"reading_time_minutes":51},96,"CSS Backgrounds","css-backgrounds",{"id":517,"title":518,"slug":519,"order_index":234,"cornerstone":52,"reading_time_minutes":182},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":521,"title":522,"slug":523,"order_index":238,"cornerstone":52,"reading_time_minutes":182},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":525,"title":526,"slug":527,"order_index":242,"cornerstone":52,"reading_time_minutes":186},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":529,"title":530,"slug":531,"order_index":246,"cornerstone":52,"reading_time_minutes":182},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":533,"title":534,"slug":535,"order_index":257,"cornerstone":52,"reading_time_minutes":186},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":222,"name":43,"slug":44,"order_index":485,"topics":537},[538,539,540,543,547,551,555,559],{"id":37,"title":38,"slug":39,"order_index":186,"cornerstone":52,"reading_time_minutes":51},{"id":133,"title":153,"slug":152,"order_index":194,"cornerstone":52,"reading_time_minutes":51},{"id":140,"title":541,"slug":542,"order_index":198,"cornerstone":52,"reading_time_minutes":51},"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":544,"title":545,"slug":546,"order_index":202,"cornerstone":52,"reading_time_minutes":186},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":548,"title":549,"slug":550,"order_index":206,"cornerstone":52,"reading_time_minutes":182},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":552,"title":553,"slug":554,"order_index":210,"cornerstone":52,"reading_time_minutes":182},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":556,"title":557,"slug":558,"order_index":214,"cornerstone":52,"reading_time_minutes":51},93,"CSS Specificity Explained","css-specificity-explained",{"id":560,"title":561,"slug":562,"order_index":218,"cornerstone":52,"reading_time_minutes":182},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important"]