[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"topic:css-text-properties":6,"blog-categories":148,"course-tree":172},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},{"id":8,"title":9,"slug":10,"content":11,"course":12,"subcategory":15,"author":18,"reading_time_minutes":24,"cornerstone":25,"schema_type":26,"faq_json":5,"video_url":5,"canonical_url":27,"meta_title":28,"meta_description":29,"og_image":5,"toc_json":30,"code_examples":91,"quiz":5,"exercises":115,"published_at":5,"updated_at":139,"prev":140,"next":144},109,"CSS Text Properties: Alignment, Spacing, Decoration and Wrapping","css-text-properties","\u003Ch2 id=\"css-text-properties-color-alignment-spacing-decoration-and-wrapping\">CSS Text Properties: Color, Alignment, Spacing, Decoration and Wrapping\u003C\u002Fh2>\u003Cp>\u003Cstrong>CSS text properties\u003C\u002Fstrong> control how text looks and flows inside its box: color, alignment, line height, letter spacing, decoration, case and wrapping. Good text styling is the biggest factor in readability, so these properties matter in every project. This lesson separates properties that style the \u003Cem>text itself\u003C\u002Fem> from those that control \u003Cem>fonts\u003C\u002Fem> (covered in the next lesson).\u003C\u002Fp>\u003Ch3 id=\"what-you-will-learn\">What You Will Learn\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Ccode>color\u003C\u002Fcode>, \u003Ccode>text-align\u003C\u002Fcode>, \u003Ccode>text-indent\u003C\u002Fcode> and \u003Ccode>text-transform\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>\u003Ccode>line-height\u003C\u002Fcode>, \u003Ccode>letter-spacing\u003C\u002Fcode> and \u003Ccode>word-spacing\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>\u003Ccode>text-decoration\u003C\u002Fcode> and its longhand properties\u003C\u002Fli>\u003Cli>Whitespace and wrapping: \u003Ccode>white-space\u003C\u002Fcode>, \u003Ccode>word-break\u003C\u002Fcode>, \u003Ccode>overflow-wrap\u003C\u002Fcode>, \u003Ccode>hyphens\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>\u003Ccode>vertical-align\u003C\u002Fcode> for inline content\u003C\u002Fli>\u003Cli>Readable text: contrast, line length and line height guidelines\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"text-color\">Text Color\u003C\u002Fh3>\u003Cp>The \u003Ccode>color\u003C\u002Fcode> property sets the foreground color of text and also the default color for borders and \u003Ccode>currentColor\u003C\u002Fcode>. It is inherited, so setting it on \u003Ccode>body\u003C\u002Fcode> colors all text. Use enough contrast: WCAG AA requires a ratio of at least \u003Cstrong>4.5:1\u003C\u002Fstrong> for normal text and \u003Cstrong>3:1\u003C\u002Fstrong> for large text (about 24px, or 18.66px bold).\u003C\u002Fp>\u003Ch3 id=\"text-align\">text-align\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Ccode>left\u003C\u002Fcode>, \u003Ccode>right\u003C\u002Fcode>, \u003Ccode>center\u003C\u002Fcode>, \u003Ccode>justify\u003C\u002Fcode>: horizontal alignment of inline content inside a block.\u003C\u002Fli>\u003Cli>\u003Ccode>start\u003C\u002Fcode> and \u003Ccode>end\u003C\u002Fcode>: direction-aware values that work in right-to-left languages such as Urdu and Arabic. Prefer them for international sites.\u003C\u002Fli>\u003Cli>\u003Ccode>text-align\u003C\u002Fcode> aligns inline content, not the block itself. To center a block, use \u003Ccode>margin-inline: auto\u003C\u002Fcode> or Flexbox.\u003C\u002Fli>\u003Cli>\u003Ccode>text-align: justify\u003C\u002Fcode> can create uneven gaps between words on narrow columns. Combine it with \u003Ccode>hyphens: auto\u003C\u002Fcode> or avoid it on small screens.\u003C\u002Fli>\u003Cli>\u003Ccode>text-align-last\u003C\u002Fcode> controls the last line of a justified paragraph.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"line-height\">line-height\u003C\u002Fh3>\u003Cp>\u003Ccode>line-height\u003C\u002Fcode> sets the height of each line box. Use a \u003Cstrong>unitless number\u003C\u002Fstrong> such as \u003Ccode>line-height: 1.6\u003C\u002Fcode>, because the multiplier is inherited and recalculated per element. A fixed value like \u003Ccode>24px\u003C\u002Fcode> or a percentage is inherited as a computed length and can cause overlapping text in children with larger fonts. Good defaults: 1.5 to 1.7 for body text, 1.1 to 1.3 for large headings. WCAG 1.4.12 asks that content still works when line height is set to at least 1.5 times the font size.\u003C\u002Fp>\u003Ch3 id=\"letter-spacing-and-word-spacing\">letter-spacing and word-spacing\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Ccode>letter-spacing\u003C\u002Fcode> adds or removes space between characters. Use \u003Ccode>em\u003C\u002Fcode> so it scales with the font size, for example \u003Ccode>0.05em\u003C\u002Fcode> for uppercase labels and small negative values for large headings.\u003C\u002Fli>\u003Cli>\u003Ccode>word-spacing\u003C\u002Fcode> changes space between words.\u003C\u002Fli>\u003Cli>Never add letter spacing to cursive scripts such as Arabic or Urdu, because it breaks the joined letters.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"text-transform\">text-transform\u003C\u002Fh3>\u003Cp>\u003Ccode>uppercase\u003C\u002Fcode>, \u003Ccode>lowercase\u003C\u002Fcode>, \u003Ccode>capitalize\u003C\u002Fcode> and \u003Ccode>none\u003C\u002Fcode> change how text is displayed without changing the HTML. The source text stays the same for copy-paste and screen readers. Note that \u003Ccode>capitalize\u003C\u002Fcode> only capitalizes the first letter of each word and does not follow title-case grammar rules.\u003C\u002Fp>\u003Ch3 id=\"text-indent\">text-indent\u003C\u002Fh3>\u003Cp>\u003Ccode>text-indent\u003C\u002Fcode> indents the first line of a block, like in printed books: \u003Ccode>text-indent: 2em;\u003C\u002Fcode>. A negative value with padding can create a hanging indent for lists and references.\u003C\u002Fp>\u003Ch3 id=\"text-decoration\">text-decoration\u003C\u002Fh3>\u003Cp>The shorthand \u003Ccode>text-decoration\u003C\u002Fcode> combines line, style, color and thickness. Longhands:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>text-decoration-line\u003C\u002Fcode>: \u003Ccode>underline\u003C\u002Fcode>, \u003Ccode>overline\u003C\u002Fcode>, \u003Ccode>line-through\u003C\u002Fcode>, \u003Ccode>none\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>\u003Ccode>text-decoration-style\u003C\u002Fcode>: \u003Ccode>solid\u003C\u002Fcode>, \u003Ccode>double\u003C\u002Fcode>, \u003Ccode>dotted\u003C\u002Fcode>, \u003Ccode>dashed\u003C\u002Fcode>, \u003Ccode>wavy\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>\u003Ccode>text-decoration-color\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>\u003Ccode>text-decoration-thickness\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>\u003Ccode>text-underline-offset\u003C\u002Fcode>: distance between text and underline. A value like \u003Ccode>0.2em\u003C\u002Fcode> gives cleaner links.\u003C\u002Fli>\u003Cli>\u003Ccode>text-decoration-skip-ink: auto\u003C\u002Fcode> (default) stops the underline from crossing letter descenders.\u003C\u002Fli>\u003C\u002Ful>\u003Cp>Keep underlines on links inside body text. Removing them hurts usability because color alone is not always enough to identify links.\u003C\u002Fp>\u003Ch3 id=\"whitespace-white-space\">Whitespace: white-space\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Ccode>normal\u003C\u002Fcode>: collapse spaces and wrap lines.\u003C\u002Fli>\u003Cli>\u003Ccode>nowrap\u003C\u002Fcode>: collapse spaces but never wrap.\u003C\u002Fli>\u003Cli>\u003Ccode>pre\u003C\u002Fcode>: preserve spaces and line breaks, never wrap (like the \u003Ccode>pre\u003C\u002Fcode> tag).\u003C\u002Fli>\u003Cli>\u003Ccode>pre-wrap\u003C\u002Fcode>: preserve spaces and breaks, but wrap when needed. Great for user-entered text.\u003C\u002Fli>\u003Cli>\u003Ccode>pre-line\u003C\u002Fcode>: collapse spaces, preserve line breaks.\u003C\u002Fli>\u003Cli>\u003Ccode>break-spaces\u003C\u002Fcode>: like pre-wrap, but trailing spaces take space and can wrap.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"breaking-long-words\">Breaking Long Words\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Ccode>overflow-wrap: break-word\u003C\u002Fcode> (or \u003Ccode>anywhere\u003C\u002Fcode>): break an otherwise unbreakable word only if it would overflow the container. \u003Ccode>anywhere\u003C\u002Fcode> also affects min-content size, which helps in flex and grid.\u003C\u002Fli>\u003Cli>\u003Ccode>word-break: break-all\u003C\u002Fcode>: break between any two characters. Useful for some CJK text but ugly for English.\u003C\u002Fli>\u003Cli>\u003Ccode>word-break: keep-all\u003C\u002Fcode>: do not break inside CJK words.\u003C\u002Fli>\u003Cli>\u003Ccode>hyphens: auto\u003C\u002Fcode>: let the browser add hyphens using the language dictionary. You must set the \u003Ccode>lang\u003C\u002Fcode> attribute on \u003Ccode>html\u003C\u002Fcode> for it to work. \u003Ccode>hyphens: manual\u003C\u002Fcode> only breaks at soft hyphens (\u003Ccode>­\u003C\u002Fcode>).\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"vertical-align\">vertical-align\u003C\u002Fh3>\u003Cp>\u003Ccode>vertical-align\u003C\u002Fcode> works on inline, inline-block and table-cell elements, not on block elements. Values like \u003Ccode>middle\u003C\u002Fcode>, \u003Ccode>baseline\u003C\u002Fcode>, \u003Ccode>sub\u003C\u002Fcode>, \u003Ccode>super\u003C\u002Fcode>, \u003Ccode>top\u003C\u002Fcode> and \u003Ccode>bottom\u003C\u002Fcode> align an inline box relative to the line. It is often used to fix the gap under images (\u003Ccode>img { vertical-align: middle; }\u003C\u002Fcode> or \u003Ccode>display: block\u003C\u002Fcode>). To center a block vertically use Flexbox or Grid, not \u003Ccode>vertical-align\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch3 id=\"readable-text-guidelines\">Readable Text Guidelines\u003C\u002Fh3>\u003Cul>\u003Cli>Line length: about 45 to 75 characters per line. Use \u003Ccode>max-width: 65ch;\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Line height: about 1.5 to 1.7 for paragraphs.\u003C\u002Fli>\u003Cli>Font size: at least 16px (1rem) for body text.\u003C\u002Fli>\u003Cli>Left or start aligned body text is easiest to read. Avoid long centered paragraphs.\u003C\u002Fli>\u003Cli>Keep enough contrast and avoid pure \u003Ccode>#000\u003C\u002Fcode> on pure \u003Ccode>#fff\u003C\u002Fcode> if it feels harsh. Dark gray such as \u003Ccode>#1f2937\u003C\u002Fcode> is often more comfortable.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"common-mistakes\">Common Mistakes\u003C\u002Fh3>\u003Cul>\u003Cli>Using a unit on \u003Ccode>line-height\u003C\u002Fcode> such as \u003Ccode>line-height: 24px\u003C\u002Fcode> on body and breaking larger children.\u003C\u002Fli>\u003Cli>Expecting \u003Ccode>text-align: center\u003C\u002Fcode> to center a block element.\u003C\u002Fli>\u003Cli>Using \u003Ccode>text-transform\u003C\u002Fcode> to change meaning (screen readers may still read the original).\u003C\u002Fli>\u003Cli>Removing link underlines without another clear cue.\u003C\u002Fli>\u003Cli>Applying \u003Ccode>letter-spacing\u003C\u002Fcode> to Arabic-script text.\u003C\u002Fli>\u003Cli>Expecting \u003Ccode>hyphens: auto\u003C\u002Fcode> to work without a \u003Ccode>lang\u003C\u002Fcode> attribute.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"frequently-asked-questions\">Frequently Asked Questions\u003C\u002Fh3>\u003Ch4 id=\"what-is-the-best-line-height-for-body-text\">What is the best line-height for body text?\u003C\u002Fh4>\u003Cp>Between 1.5 and 1.7, written as a unitless number.\u003C\u002Fp>\u003Ch4 id=\"how-do-i-remove-the-underline-from-a-link\">How do I remove the underline from a link?\u003C\u002Fh4>\u003Cp>Use \u003Ccode>text-decoration: none\u003C\u002Fcode>, but keep another visual clue such as bold weight or a border, and keep underlines in paragraphs.\u003C\u002Fp>\u003Ch4 id=\"what-is-the-difference-between-word-break-and-overflow-wrap\">What is the difference between word-break and overflow-wrap?\u003C\u002Fh4>\u003Cp>\u003Ccode>overflow-wrap: break-word\u003C\u002Fcode> breaks only when a word would overflow. \u003Ccode>word-break: break-all\u003C\u002Fcode> breaks words aggressively even when they would fit.\u003C\u002Fp>\u003Ch4 id=\"are-text-properties-inherited\">Are text properties inherited?\u003C\u002Fh4>\u003Cp>Most are: color, text-align, line-height, letter-spacing, text-transform and white-space. \u003Ccode>text-decoration\u003C\u002Fcode> is not inherited but is drawn across child inline boxes.\u003C\u002Fp>\u003Ch3 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh3>\u003Cul>\u003Cli>Use unitless line-height (1.5 to 1.7) and a line length near 65ch.\u003C\u002Fli>\u003Cli>Use \u003Ccode>text-align: start\u003C\u002Fcode> and \u003Ccode>end\u003C\u002Fcode> for international layouts.\u003C\u002Fli>\u003Cli>Control wrapping with white-space, overflow-wrap and hyphens.\u003C\u002Fli>\u003Cli>Style links with text-underline-offset and thickness instead of removing underlines.\u003C\u002Fli>\u003Cli>Always check color contrast (4.5:1 minimum for body text).\u003C\u002Fli>\u003C\u002Ful>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\np { width: 320px; padding: 10px; border: 1px solid #ccc; margin: 6px 0; font-size: 15px; }\n.l { text-align: left; }\n.c { text-align: center; }\n.r { text-align: right; }\n.j { text-align: justify; }\n<\u002Fstyle>\n<p class='l'>left: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.<\u002Fp>\n<p class='c'>center: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.<\u002Fp>\n<p class='r'>right: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.<\u002Fp>\n<p class='j'>justify: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n.tight { line-height: 1; }\n.good { line-height: 1.6; }\np { width: 300px; background: #f4f6f7; padding: 8px; font-size: 16px; }\n<\u002Fstyle>\n<p class='tight'>line-height 1: lines are packed very tightly, which makes longer paragraphs harder to read.<\u002Fp>\n<p class='good'>line-height 1.6: lines have room to breathe, which is comfortable for body text.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n.label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 700; color: #566573; }\n.title { letter-spacing: -0.02em; font-size: 2rem; margin: 4px 0; }\n.spaced { word-spacing: 0.4em; }\n<\u002Fstyle>\n<div class='label'>Category label<\u002Fdiv>\n<h2 class='title'>Tight large heading<\u002Fh2>\n<p class='spaced'>Extra word spacing example sentence.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\na.fancy {\n  color: #1a5fb4;\n  text-decoration: underline wavy #e74c3c;\n  text-decoration-thickness: 2px;\n  text-underline-offset: 0.25em;\n}\n.strike { text-decoration: line-through; color: #888; }\n.over { text-decoration: overline dotted; }\n<\u002Fstyle>\n<p><a class='fancy' href='#'>Styled underline link<\u002Fa><\u002Fp>\n<p class='strike'>Old price $99<\u002Fp>\n<p class='over'>Overline with dotted style<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\ndiv { width: 260px; border: 1px solid #999; padding: 6px; margin: 6px 0; font-family: monospace; font-size: 13px; }\n.n { white-space: normal; }\n.nw { white-space: nowrap; overflow: hidden; }\n.p { white-space: pre; overflow: auto; }\n.pw { white-space: pre-wrap; }\n.pl { white-space: pre-line; }\n<\u002Fstyle>\n<div class='n'>normal:   spaces   collapse\nand lines wrap<\u002Fdiv>\n<div class='nw'>nowrap: this text never wraps onto a new line<\u002Fdiv>\n<div class='p'>pre:   spaces   and\nline breaks are kept<\u002Fdiv>\n<div class='pw'>pre-wrap:   spaces kept and long lines still wrap when needed<\u002Fdiv>\n<div class='pl'>pre-line: spaces   collapse\nbut line breaks stay<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n.box { width: 180px; border: 2px solid #8e44ad; padding: 8px; margin: 8px 0; }\n.bw { overflow-wrap: break-word; }\n.ba { word-break: break-all; }\n.hy { hyphens: auto; }\n<\u002Fstyle>\n<div class='box'>Default: https:\u002F\u002Fexample.com\u002Fa-very-long-unbreakable-url-that-overflows<\u002Fdiv>\n<div class='box bw'>break-word: https:\u002F\u002Fexample.com\u002Fa-very-long-unbreakable-url-that-wraps<\u002Fdiv>\n<div class='box ba'>break-all: words are broken anywhere they reach the edge.<\u002Fdiv>\n<div class='box hy' lang='en'>hyphens auto: incomprehensibilities and internationalization<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-css\">\u003Cpre>\u003Ccode>\u002F* Typography base for readable body text *\u002F\n\u002F* Set lang on the html element in HTML: <html lang=\"en\"> so hyphens: auto works *\u002F\nbody {\n  color: #1f2937;\n  font-size: 1rem;\n  line-height: 1.6;\n  text-align: start;\n}\n.prose {\n  max-width: 65ch;\n  text-indent: 0;\n  hyphens: auto;\n  overflow-wrap: break-word;\n}\n.prose a {\n  text-decoration-thickness: 0.08em;\n  text-underline-offset: 0.2em;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":13,"slug":14},"CSS","css",{"name":16,"slug":17},"Typography & Text","typography-text",{"slug":19,"display_name":20,"job_title":5,"short_bio":5,"expertise_tags":21,"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":22,"posts":23},"badar-khalil","Badar Khalil",[],[],[],7,false,"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fcss-text-properties","CSS Text Properties: text-align, line-height, spacing, wrap","Learn CSS text properties with examples: text-align, line-height, letter-spacing, text-transform, text-decoration, white-space, word-break, hyphens and readable text tips.",[31],{"id":32,"text":33,"level":34,"children":35},"css-text-properties-color-alignment-spacing-decoration-and-wrapping","CSS Text Properties: Color, Alignment, Spacing, Decoration and Wrapping",2,[36,41,45,48,51,55,58,61,64,68,72,75,79,83,87],{"id":37,"text":38,"level":39,"children":40},"what-you-will-learn","What You Will Learn",3,[],{"id":42,"text":43,"level":39,"children":44},"text-color","Text Color",[],{"id":46,"text":46,"level":39,"children":47},"text-align",[],{"id":49,"text":49,"level":39,"children":50},"line-height",[],{"id":52,"text":53,"level":39,"children":54},"letter-spacing-and-word-spacing","letter-spacing and word-spacing",[],{"id":56,"text":56,"level":39,"children":57},"text-transform",[],{"id":59,"text":59,"level":39,"children":60},"text-indent",[],{"id":62,"text":62,"level":39,"children":63},"text-decoration",[],{"id":65,"text":66,"level":39,"children":67},"whitespace-white-space","Whitespace: white-space",[],{"id":69,"text":70,"level":39,"children":71},"breaking-long-words","Breaking Long Words",[],{"id":73,"text":73,"level":39,"children":74},"vertical-align",[],{"id":76,"text":77,"level":39,"children":78},"readable-text-guidelines","Readable Text Guidelines",[],{"id":80,"text":81,"level":39,"children":82},"common-mistakes","Common Mistakes",[],{"id":84,"text":85,"level":39,"children":86},"frequently-asked-questions","Frequently Asked Questions",[],{"id":88,"text":89,"level":39,"children":90},"key-takeaways","Key Takeaways",[],[92,97,100,103,106,109,112],{"id":93,"language":94,"code":95,"is_editable":96},347,"html","\u003Cstyle>\np { width: 320px; padding: 10px; border: 1px solid #ccc; margin: 6px 0; font-size: 15px; }\n.l { text-align: left; }\n.c { text-align: center; }\n.r { text-align: right; }\n.j { text-align: justify; }\n\u003C\u002Fstyle>\n\u003Cp class='l'>left: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.\u003C\u002Fp>\n\u003Cp class='c'>center: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.\u003C\u002Fp>\n\u003Cp class='r'>right: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.\u003C\u002Fp>\n\u003Cp class='j'>justify: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.\u003C\u002Fp>",true,{"id":98,"language":94,"code":99,"is_editable":96},348,"\u003Cstyle>\n.tight { line-height: 1; }\n.good { line-height: 1.6; }\np { width: 300px; background: #f4f6f7; padding: 8px; font-size: 16px; }\n\u003C\u002Fstyle>\n\u003Cp class='tight'>line-height 1: lines are packed very tightly, which makes longer paragraphs harder to read.\u003C\u002Fp>\n\u003Cp class='good'>line-height 1.6: lines have room to breathe, which is comfortable for body text.\u003C\u002Fp>",{"id":101,"language":94,"code":102,"is_editable":96},349,"\u003Cstyle>\n.label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 700; color: #566573; }\n.title { letter-spacing: -0.02em; font-size: 2rem; margin: 4px 0; }\n.spaced { word-spacing: 0.4em; }\n\u003C\u002Fstyle>\n\u003Cdiv class='label'>Category label\u003C\u002Fdiv>\n\u003Ch2 class='title'>Tight large heading\u003C\u002Fh2>\n\u003Cp class='spaced'>Extra word spacing example sentence.\u003C\u002Fp>",{"id":104,"language":94,"code":105,"is_editable":96},350,"\u003Cstyle>\na.fancy {\n  color: #1a5fb4;\n  text-decoration: underline wavy #e74c3c;\n  text-decoration-thickness: 2px;\n  text-underline-offset: 0.25em;\n}\n.strike { text-decoration: line-through; color: #888; }\n.over { text-decoration: overline dotted; }\n\u003C\u002Fstyle>\n\u003Cp>\u003Ca class='fancy' href='#'>Styled underline link\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp class='strike'>Old price $99\u003C\u002Fp>\n\u003Cp class='over'>Overline with dotted style\u003C\u002Fp>",{"id":107,"language":94,"code":108,"is_editable":96},351,"\u003Cstyle>\ndiv { width: 260px; border: 1px solid #999; padding: 6px; margin: 6px 0; font-family: monospace; font-size: 13px; }\n.n { white-space: normal; }\n.nw { white-space: nowrap; overflow: hidden; }\n.p { white-space: pre; overflow: auto; }\n.pw { white-space: pre-wrap; }\n.pl { white-space: pre-line; }\n\u003C\u002Fstyle>\n\u003Cdiv class='n'>normal:   spaces   collapse\nand lines wrap\u003C\u002Fdiv>\n\u003Cdiv class='nw'>nowrap: this text never wraps onto a new line\u003C\u002Fdiv>\n\u003Cdiv class='p'>pre:   spaces   and\nline breaks are kept\u003C\u002Fdiv>\n\u003Cdiv class='pw'>pre-wrap:   spaces kept and long lines still wrap when needed\u003C\u002Fdiv>\n\u003Cdiv class='pl'>pre-line: spaces   collapse\nbut line breaks stay\u003C\u002Fdiv>",{"id":110,"language":94,"code":111,"is_editable":96},352,"\u003Cstyle>\n.box { width: 180px; border: 2px solid #8e44ad; padding: 8px; margin: 8px 0; }\n.bw { overflow-wrap: break-word; }\n.ba { word-break: break-all; }\n.hy { hyphens: auto; }\n\u003C\u002Fstyle>\n\u003Cdiv class='box'>Default: https:\u002F\u002Fexample.com\u002Fa-very-long-unbreakable-url-that-overflows\u003C\u002Fdiv>\n\u003Cdiv class='box bw'>break-word: https:\u002F\u002Fexample.com\u002Fa-very-long-unbreakable-url-that-wraps\u003C\u002Fdiv>\n\u003Cdiv class='box ba'>break-all: words are broken anywhere they reach the edge.\u003C\u002Fdiv>\n\u003Cdiv class='box hy' lang='en'>hyphens auto: incomprehensibilities and internationalization\u003C\u002Fdiv>",{"id":113,"language":14,"code":114,"is_editable":96},353,"\u002F* Typography base for readable body text *\u002F\n\u002F* Set lang on the html element in HTML: \u003Chtml lang=\"en\"> so hyphens: auto works *\u002F\nbody {\n  color: #1f2937;\n  font-size: 1rem;\n  line-height: 1.6;\n  text-align: start;\n}\n.prose {\n  max-width: 65ch;\n  text-indent: 0;\n  hyphens: auto;\n  overflow-wrap: break-word;\n}\n.prose a {\n  text-decoration-thickness: 0.08em;\n  text-underline-offset: 0.2em;\n}",[116,124,131],{"id":117,"title":118,"slug":119,"prompt":120,"starter_code":121,"expected_output":122,"language":94,"order_index":123},136,"Style a Readable Paragraph","style-readable-paragraph","Style the .article paragraph for comfortable reading: a maximum line length of 65 characters, a unitless line height of 1.6, left aligned text (use the direction-aware value) and dark gray text color #1f2937.","\u003Cstyle>\n.article { \u002F* your CSS here *\u002F }\n\u003C\u002Fstyle>\n\u003Cp class='article'>Good typography is invisible. The reader should never think about line length, spacing or contrast because the text simply feels easy to read from the first line to the last, even on a very wide screen.\u003C\u002Fp>","The paragraph is at most 65ch wide with line-height 1.6, start alignment and color #1f2937.",1,{"id":125,"title":126,"slug":127,"prompt":128,"starter_code":129,"expected_output":130,"language":94,"order_index":34},137,"Uppercase Label with Spacing","uppercase-label-spacing","Turn the .tag into an uppercase label with letter spacing of 0.1em, bold weight and a dotted underline that is 2px thick and offset 0.25em from the text.","\u003Cstyle>\n.tag { font-size: 0.85rem; \u002F* your CSS here *\u002F }\n\u003C\u002Fstyle>\n\u003Cspan class='tag'>new feature\u003C\u002Fspan>","The text shows as NEW FEATURE with 0.1em letter spacing, bold weight and a dotted 2px underline.",{"id":132,"title":133,"slug":134,"prompt":135,"starter_code":136,"expected_output":137,"language":138,"order_index":39},138,"Count Wrapped Lines","count-wrapped-lines","Write a function lineCount(text, maxChars) that splits text into words and returns how many lines are needed if each line can hold at most maxChars characters (spaces count, words are never split, and assume no single word is longer than maxChars).","function lineCount(text, maxChars) {\n  \u002F\u002F TODO: implement\n}\n\nconsole.log(lineCount('the quick brown fox', 10));\nconsole.log(lineCount('css text wrapping is fun', 12));\nconsole.log(lineCount('hello', 10));","2\n3\n1","javascript","2026-09-30T17:07:01+00:00",{"id":141,"slug":142,"title":143},108,"css-units","CSS Units: px, rem, em, %, vw, vh and dvh",{"id":145,"slug":146,"title":147},110,"css-fonts-font-family","CSS Fonts and font-family: Font Stacks, Weights and System Fonts",{"data":149},[150,153,157,162,167],{"name":13,"slug":14,"description":151,"post_count":34,"subcategories":152},"Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",[],{"name":154,"slug":94,"description":155,"post_count":34,"subcategories":156},"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":158,"slug":159,"description":160,"post_count":123,"subcategories":161},"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":163,"slug":164,"description":165,"post_count":123,"subcategories":166},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":168,"slug":169,"description":170,"post_count":123,"subcategories":171},"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":173},[174,494],{"id":123,"name":154,"slug":175,"icon":5,"icon_url":5,"short_description":176,"meta_title":177,"meta_description":178,"og_image":179,"locale":180,"subcategories":181},"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",[182,207,242,266,342,376,390,418,442,458],{"id":123,"name":183,"slug":184,"order_index":123,"topics":185},"HTML Fundamentals & Setup","html-fundamentals-setup",[186,189,192,195,199,203],{"id":34,"title":187,"slug":188,"order_index":123,"cornerstone":25,"reading_time_minutes":34},"HTML Editors & Environment Setup","html-editors-and-environment-setup",{"id":123,"title":190,"slug":191,"order_index":123,"cornerstone":25,"reading_time_minutes":123},"HTML Introduction & History","html-introduction-and-history",{"id":39,"title":193,"slug":194,"order_index":39,"cornerstone":25,"reading_time_minutes":34},"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":196,"title":197,"slug":198,"order_index":196,"cornerstone":25,"reading_time_minutes":34},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":200,"title":201,"slug":202,"order_index":200,"cornerstone":25,"reading_time_minutes":34},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":204,"title":205,"slug":206,"order_index":204,"cornerstone":25,"reading_time_minutes":34},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":34,"name":208,"slug":209,"order_index":34,"topics":210},"Text & Content Basics","text-content-basics",[211,214,218,222,226,230,234,238],{"id":24,"title":212,"slug":213,"order_index":24,"cornerstone":25,"reading_time_minutes":34},"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":215,"title":216,"slug":217,"order_index":215,"cornerstone":25,"reading_time_minutes":34},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":219,"title":220,"slug":221,"order_index":219,"cornerstone":25,"reading_time_minutes":123},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":223,"title":224,"slug":225,"order_index":223,"cornerstone":25,"reading_time_minutes":34},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":227,"title":228,"slug":229,"order_index":227,"cornerstone":25,"reading_time_minutes":34},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":231,"title":232,"slug":233,"order_index":231,"cornerstone":25,"reading_time_minutes":34},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":235,"title":236,"slug":237,"order_index":235,"cornerstone":25,"reading_time_minutes":34},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":239,"title":240,"slug":241,"order_index":239,"cornerstone":25,"reading_time_minutes":34},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":39,"name":243,"slug":244,"order_index":39,"topics":245},"Links, Media & Navigation","links-media-navigation",[246,250,254,258,262],{"id":247,"title":248,"slug":249,"order_index":247,"cornerstone":25,"reading_time_minutes":34},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":251,"title":252,"slug":253,"order_index":251,"cornerstone":25,"reading_time_minutes":34},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":255,"title":256,"slug":257,"order_index":255,"cornerstone":25,"reading_time_minutes":123},17,"HTML Favicon Setup","html-favicon-setup",{"id":259,"title":260,"slug":261,"order_index":259,"cornerstone":25,"reading_time_minutes":34},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":263,"title":264,"slug":265,"order_index":263,"cornerstone":25,"reading_time_minutes":34},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":196,"name":267,"slug":268,"order_index":196,"topics":269},"Structuring Content","structuring-content",[270,275,280,285,290,294,298,302,306,310,314,318,322,326,330,334,338],{"id":271,"title":272,"slug":273,"order_index":274,"cornerstone":25,"reading_time_minutes":34},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":276,"title":277,"slug":278,"order_index":279,"cornerstone":25,"reading_time_minutes":34},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":281,"title":282,"slug":283,"order_index":284,"cornerstone":25,"reading_time_minutes":34},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":286,"title":287,"slug":288,"order_index":289,"cornerstone":25,"reading_time_minutes":123},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":291,"title":292,"slug":293,"order_index":271,"cornerstone":25,"reading_time_minutes":34},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":295,"title":296,"slug":297,"order_index":276,"cornerstone":25,"reading_time_minutes":123},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":299,"title":300,"slug":301,"order_index":281,"cornerstone":25,"reading_time_minutes":34},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":303,"title":304,"slug":305,"order_index":286,"cornerstone":25,"reading_time_minutes":34},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":307,"title":308,"slug":309,"order_index":291,"cornerstone":25,"reading_time_minutes":34},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":311,"title":312,"slug":313,"order_index":295,"cornerstone":25,"reading_time_minutes":39},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":315,"title":316,"slug":317,"order_index":299,"cornerstone":25,"reading_time_minutes":34},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":319,"title":320,"slug":321,"order_index":303,"cornerstone":25,"reading_time_minutes":34},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":323,"title":324,"slug":325,"order_index":307,"cornerstone":25,"reading_time_minutes":123},77,"HTML Symbols","html-symbols",{"id":327,"title":328,"slug":329,"order_index":327,"cornerstone":25,"reading_time_minutes":123},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":331,"title":332,"slug":333,"order_index":331,"cornerstone":25,"reading_time_minutes":34},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":335,"title":336,"slug":337,"order_index":335,"cornerstone":25,"reading_time_minutes":123},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":339,"title":340,"slug":341,"order_index":339,"cornerstone":25,"reading_time_minutes":123},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":24,"name":343,"slug":344,"order_index":200,"topics":345},"Forms & User Input","forms-user-input",[346,351,356,361,366,371],{"id":347,"title":348,"slug":349,"order_index":350,"cornerstone":25,"reading_time_minutes":34},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":352,"title":353,"slug":354,"order_index":355,"cornerstone":25,"reading_time_minutes":123},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":357,"title":358,"slug":359,"order_index":360,"cornerstone":25,"reading_time_minutes":123},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":362,"title":363,"slug":364,"order_index":365,"cornerstone":25,"reading_time_minutes":34},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":367,"title":368,"slug":369,"order_index":370,"cornerstone":25,"reading_time_minutes":34},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":372,"title":373,"slug":374,"order_index":375,"cornerstone":25,"reading_time_minutes":34},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":215,"name":377,"slug":378,"order_index":204,"topics":379},"Graphics & Visuals","graphics-visuals",[380,385],{"id":381,"title":382,"slug":383,"order_index":384,"cornerstone":25,"reading_time_minutes":39},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":386,"title":387,"slug":388,"order_index":389,"cornerstone":25,"reading_time_minutes":39},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":219,"name":391,"slug":392,"order_index":24,"topics":393},"Multimedia","multimedia",[394,399,404,409,414],{"id":395,"title":396,"slug":397,"order_index":398,"cornerstone":25,"reading_time_minutes":34},57,"HTML Media Overview","html-media-overview",45,{"id":400,"title":401,"slug":402,"order_index":403,"cornerstone":25,"reading_time_minutes":34},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":405,"title":406,"slug":407,"order_index":408,"cornerstone":25,"reading_time_minutes":34},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":410,"title":411,"slug":412,"order_index":413,"cornerstone":25,"reading_time_minutes":34},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":415,"title":416,"slug":417,"order_index":347,"cornerstone":25,"reading_time_minutes":34},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":223,"name":419,"slug":420,"order_index":215,"topics":421},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[422,426,430,434,438],{"id":423,"title":424,"slug":425,"order_index":352,"cornerstone":25,"reading_time_minutes":34},62,"HTML Geolocation API","html-geolocation-api",{"id":427,"title":428,"slug":429,"order_index":357,"cornerstone":25,"reading_time_minutes":34},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":431,"title":432,"slug":433,"order_index":362,"cornerstone":25,"reading_time_minutes":34},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":435,"title":436,"slug":437,"order_index":367,"cornerstone":25,"reading_time_minutes":34},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":439,"title":440,"slug":441,"order_index":372,"cornerstone":25,"reading_time_minutes":34},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":227,"name":443,"slug":444,"order_index":219,"topics":445},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[446,450,454],{"id":447,"title":448,"slug":449,"order_index":381,"cornerstone":25,"reading_time_minutes":34},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":451,"title":452,"slug":453,"order_index":386,"cornerstone":25,"reading_time_minutes":34},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":455,"title":456,"slug":457,"order_index":395,"cornerstone":25,"reading_time_minutes":34},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":231,"name":459,"slug":460,"order_index":223,"topics":461},"Reference & Practice","reference-practice",[462,466,470,474,478,482,486,490],{"id":463,"title":464,"slug":465,"order_index":123,"cornerstone":25,"reading_time_minutes":34},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":467,"title":468,"slug":469,"order_index":34,"cornerstone":25,"reading_time_minutes":34},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":471,"title":472,"slug":473,"order_index":39,"cornerstone":25,"reading_time_minutes":34},72,"HTML Events Reference","html-events-reference",{"id":475,"title":476,"slug":477,"order_index":196,"cornerstone":25,"reading_time_minutes":34},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":479,"title":480,"slug":481,"order_index":200,"cornerstone":25,"reading_time_minutes":34},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":483,"title":484,"slug":485,"order_index":204,"cornerstone":25,"reading_time_minutes":34},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":487,"title":488,"slug":489,"order_index":24,"cornerstone":25,"reading_time_minutes":39},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":491,"title":492,"slug":493,"order_index":215,"cornerstone":25,"reading_time_minutes":123},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":34,"name":13,"slug":14,"icon":5,"icon_url":5,"short_description":495,"meta_title":496,"meta_description":497,"og_image":5,"locale":180,"subcategories":498},"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.",[499,528,552,588,620,649,673,705,733,758],{"id":289,"name":500,"slug":501,"order_index":502,"topics":503},"UI Components","ui-components",0,[504,508,512,516,520,524],{"id":505,"title":506,"slug":507,"order_index":415,"cornerstone":25,"reading_time_minutes":204},148,"CSS Buttons: Variants, States, Sizes and Accessible Button Design","css-buttons",{"id":509,"title":510,"slug":511,"order_index":423,"cornerstone":25,"reading_time_minutes":204},149,"CSS Card Component: Layouts with Flexbox, Grid, Container Queries and Subgrid","css-cards",{"id":513,"title":514,"slug":515,"order_index":427,"cornerstone":25,"reading_time_minutes":24},150,"CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible Navigation","css-navbar-dropdowns",{"id":517,"title":518,"slug":519,"order_index":431,"cornerstone":25,"reading_time_minutes":204},151,"HTML and CSS Forms and Inputs: Styled, Accessible and Validated Form Controls","css-forms-inputs",{"id":521,"title":522,"slug":523,"order_index":435,"cornerstone":25,"reading_time_minutes":204},152,"CSS Tooltips and Popovers: Popover API, Anchor Positioning and Accessible Overlays","css-tooltips-popovers",{"id":525,"title":526,"slug":527,"order_index":439,"cornerstone":25,"reading_time_minutes":204},153,"Pagination and Breadcrumbs: Accessible Navigation Patterns with HTML, CSS and Schema","pagination-breadcrumbs",{"id":235,"name":529,"slug":530,"order_index":502,"topics":531},"CSS Fundamentals & Setup","css-fundamentals-setup",[532,536,540,544,548],{"id":533,"title":534,"slug":535,"order_index":123,"cornerstone":25,"reading_time_minutes":196},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":537,"title":538,"slug":539,"order_index":34,"cornerstone":25,"reading_time_minutes":196},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":541,"title":542,"slug":543,"order_index":39,"cornerstone":25,"reading_time_minutes":39},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":545,"title":546,"slug":547,"order_index":196,"cornerstone":25,"reading_time_minutes":39},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":549,"title":550,"slug":551,"order_index":200,"cornerstone":25,"reading_time_minutes":200},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":239,"name":553,"slug":554,"order_index":502,"topics":555},"Selectors & the Cascade","selectors-the-cascade",[556,560,564,568,572,576,580,584],{"id":557,"title":558,"slug":559,"order_index":204,"cornerstone":25,"reading_time_minutes":196},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":561,"title":562,"slug":563,"order_index":24,"cornerstone":25,"reading_time_minutes":196},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":565,"title":566,"slug":567,"order_index":215,"cornerstone":25,"reading_time_minutes":196},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":569,"title":570,"slug":571,"order_index":219,"cornerstone":25,"reading_time_minutes":204},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":573,"title":574,"slug":575,"order_index":223,"cornerstone":25,"reading_time_minutes":200},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":577,"title":578,"slug":579,"order_index":227,"cornerstone":25,"reading_time_minutes":200},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":581,"title":582,"slug":583,"order_index":231,"cornerstone":25,"reading_time_minutes":196},93,"CSS Specificity Explained","css-specificity-explained",{"id":585,"title":586,"slug":587,"order_index":235,"cornerstone":25,"reading_time_minutes":200},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"id":247,"name":589,"slug":590,"order_index":502,"topics":591},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[592,596,600,604,608,612,616],{"id":593,"title":594,"slug":595,"order_index":239,"cornerstone":25,"reading_time_minutes":200},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":597,"title":598,"slug":599,"order_index":247,"cornerstone":25,"reading_time_minutes":196},96,"CSS Backgrounds","css-backgrounds",{"id":601,"title":602,"slug":603,"order_index":251,"cornerstone":25,"reading_time_minutes":200},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":605,"title":606,"slug":607,"order_index":255,"cornerstone":25,"reading_time_minutes":200},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":609,"title":610,"slug":611,"order_index":259,"cornerstone":25,"reading_time_minutes":204},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":613,"title":614,"slug":615,"order_index":263,"cornerstone":25,"reading_time_minutes":200},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":617,"title":618,"slug":619,"order_index":274,"cornerstone":25,"reading_time_minutes":204},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":251,"name":621,"slug":622,"order_index":502,"topics":623},"Box Model & Spacing","box-model-spacing",[624,628,632,636,640,644,648],{"id":625,"title":626,"slug":627,"order_index":279,"cornerstone":25,"reading_time_minutes":24},102,"The CSS Box Model: Content, Padding, Border and Margin","css-box-model",{"id":629,"title":630,"slug":631,"order_index":284,"cornerstone":25,"reading_time_minutes":24},103,"CSS Margin and Margin Collapse","css-margin-and-margin-collapse",{"id":633,"title":634,"slug":635,"order_index":289,"cornerstone":25,"reading_time_minutes":204},104,"CSS Padding: Shorthand, Percentages and Best Practices","css-padding",{"id":637,"title":638,"slug":639,"order_index":271,"cornerstone":25,"reading_time_minutes":219},105,"CSS Width, Height, Min-Width, Max-Width, Min-Height & Max-Height","css-width-height-min-max",{"id":641,"title":642,"slug":643,"order_index":276,"cornerstone":25,"reading_time_minutes":200},106,"CSS box-sizing: content-box vs border-box","css-box-sizing",{"id":645,"title":646,"slug":647,"order_index":281,"cornerstone":25,"reading_time_minutes":24},107,"CSS Overflow: hidden, scroll, auto, clip and Text Truncation","css-overflow",{"id":141,"title":143,"slug":142,"order_index":286,"cornerstone":25,"reading_time_minutes":24},{"id":255,"name":16,"slug":17,"order_index":502,"topics":650},[651,652,653,657,661,665,669],{"id":8,"title":9,"slug":10,"order_index":291,"cornerstone":25,"reading_time_minutes":24},{"id":145,"title":147,"slug":146,"order_index":295,"cornerstone":25,"reading_time_minutes":24},{"id":654,"title":655,"slug":656,"order_index":299,"cornerstone":25,"reading_time_minutes":24},111,"Web Fonts: Google Fonts, @font-face and Variable Fonts","web-fonts",{"id":658,"title":659,"slug":660,"order_index":303,"cornerstone":25,"reading_time_minutes":24},112,"CSS Text Effects: text-wrap balance, line-clamp, Ellipsis and More","css-text-effects",{"id":662,"title":663,"slug":664,"order_index":307,"cornerstone":25,"reading_time_minutes":215},113,"Styling Links","styling-links-css",{"id":666,"title":667,"slug":668,"order_index":327,"cornerstone":25,"reading_time_minutes":24},114,"Styling Lists & Tables","styling-lists-and-tables-css",{"id":670,"title":671,"slug":672,"order_index":331,"cornerstone":25,"reading_time_minutes":223},115,"Icons (SVG & Icon Fonts)","icons-svg-and-icon-fonts",{"id":259,"name":674,"slug":675,"order_index":502,"topics":676},"Display, Position & Layout Basics","display-position-layout-basics",[677,681,685,689,693,697,701],{"id":678,"title":679,"slug":680,"order_index":335,"cornerstone":25,"reading_time_minutes":24},116,"Display & Inline-block","display-and-inline-block",{"id":682,"title":683,"slug":684,"order_index":339,"cornerstone":25,"reading_time_minutes":204},117,"Position (relative, absolute, fixed, sticky)","position-relative-absolute-fixed-sticky",{"id":686,"title":687,"slug":688,"order_index":350,"cornerstone":25,"reading_time_minutes":204},118,"Z-index & Stacking Contexts","z-index-and-stacking-contexts",{"id":690,"title":691,"slug":692,"order_index":355,"cornerstone":25,"reading_time_minutes":200},119,"Float & Clear (Legacy, and Why to Avoid It)","float-and-clear",{"id":694,"title":695,"slug":696,"order_index":360,"cornerstone":25,"reading_time_minutes":204},120,"Centering Techniques","centering-techniques",{"id":698,"title":699,"slug":700,"order_index":365,"cornerstone":25,"reading_time_minutes":24},121,"aspect-ratio & object-fit","aspect-ratio-and-object-fit",{"id":702,"title":703,"slug":704,"order_index":370,"cornerstone":25,"reading_time_minutes":215},122,"Website Layout Basics","website-layout-basics",{"id":274,"name":706,"slug":707,"order_index":502,"topics":708},"The Modern CSS Toolkit","the-modern-css-toolkit",[709,713,717,721,725,729],{"id":710,"title":711,"slug":712,"order_index":375,"cornerstone":25,"reading_time_minutes":215},129,"CSS Variables (Custom Properties)","css-variables-custom-properties",{"id":714,"title":715,"slug":716,"order_index":384,"cornerstone":25,"reading_time_minutes":215},130,"Math Functions (calc, min, max, clamp)","math-functions-calc-min-max-clamp",{"id":718,"title":719,"slug":720,"order_index":389,"cornerstone":25,"reading_time_minutes":24},131,"Native CSS Nesting","native-css-nesting",{"id":722,"title":723,"slug":724,"order_index":398,"cornerstone":25,"reading_time_minutes":24},132,"Cascade Layers (@layer)","cascade-layers-at-layer",{"id":726,"title":727,"slug":728,"order_index":403,"cornerstone":25,"reading_time_minutes":219},133,"Dark Mode (prefers-color-scheme, light-dark())","dark-mode-prefers-color-scheme-light-dark",{"id":730,"title":731,"slug":732,"order_index":408,"cornerstone":25,"reading_time_minutes":215},134,"CSS Reset & Normalize","css-reset-and-normalize",{"id":279,"name":734,"slug":735,"order_index":502,"topics":736},"Responsive Design","responsive-design",[737,741,744,747,750,754],{"id":738,"title":739,"slug":740,"order_index":413,"cornerstone":25,"reading_time_minutes":219},135,"Mobile-First & the Viewport","mobile-first-and-the-viewport",{"id":117,"title":742,"slug":743,"order_index":347,"cornerstone":25,"reading_time_minutes":215},"Media Queries","media-queries",{"id":125,"title":745,"slug":746,"order_index":352,"cornerstone":25,"reading_time_minutes":215},"Responsive Images & Video","responsive-images-and-video",{"id":132,"title":748,"slug":749,"order_index":357,"cornerstone":25,"reading_time_minutes":219},"Fluid Typography with clamp()","fluid-typography-with-clamp",{"id":751,"title":752,"slug":753,"order_index":362,"cornerstone":25,"reading_time_minutes":219},139,"Container Queries","container-queries",{"id":755,"title":756,"slug":757,"order_index":367,"cornerstone":25,"reading_time_minutes":231},140,"Responsive Navigation Pattern","responsive-navigation-pattern",{"id":284,"name":759,"slug":760,"order_index":502,"topics":761},"Transitions & Animation","transitions-animation",[762,766,770,774,778,782,786],{"id":763,"title":764,"slug":765,"order_index":372,"cornerstone":25,"reading_time_minutes":200},141,"CSS Transitions: Smooth State Changes with transition, @starting-style and allow-discrete","css-transitions",{"id":767,"title":768,"slug":769,"order_index":381,"cornerstone":25,"reading_time_minutes":196},142,"CSS 2D Transforms: translate, rotate, scale, skew and transform-origin","css-2d-transforms",{"id":771,"title":772,"slug":773,"order_index":386,"cornerstone":25,"reading_time_minutes":200},143,"CSS 3D Transforms: perspective, preserve-3d, rotateX\u002FY and backface-visibility","css-3d-transforms",{"id":775,"title":776,"slug":777,"order_index":395,"cornerstone":25,"reading_time_minutes":200},144,"CSS Keyframe Animations: @keyframes, animation shorthand, fill-mode and @property","css-keyframe-animations",{"id":779,"title":780,"slug":781,"order_index":400,"cornerstone":25,"reading_time_minutes":200},145,"CSS Scroll-Driven Animations: animation-timeline, scroll() and view()","css-scroll-driven-animations",{"id":783,"title":784,"slug":785,"order_index":405,"cornerstone":25,"reading_time_minutes":200},146,"CSS View Transitions API: Progressive Enhancement for Page and State Animations","css-view-transitions",{"id":787,"title":788,"slug":789,"order_index":410,"cornerstone":25,"reading_time_minutes":204},147,"Motion Accessibility and Performance: prefers-reduced-motion, will-change and Smooth 60fps Animations","motion-accessibility-prefers-reduced-motion-performance"]