<!DOCTYPE html>
<html>
<head>
<style>html,body,table { line-height:1.5; } body { margin:0;padding:0; } h1,h2,h3,h4,h5,h6 { font-weight:bold;font-style:normal;font-size:1em;margin:0; } h2 { margin:1em 0; } h3 { margin:1em 0; } h5 { font-style:italic; } h6 { font-weight:normal;font-style:italic; } p,ol,ul,figure,blockquote,.spaced-block { margin:1em 0; } img { border:0;height:auto;line-height:100%;outline:none;-webkit-text-decoration:none;text-decoration:none; } body,table,td,a { -webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; } table,td { border-collapse:separate;mso-table-lspace:0pt;mso-table-rspace:0pt; } table td { vertical-align:top; } img { -ms-interpolation-mode:bicubic;max-width:100%; } * { -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } hr { margin:36px 0;border:0;height:1px;background:#eee; } ul,ol { margin-left:1em;padding:0;list-style-position:outside; } ol ol,ul ul,ol ul,ul ol { padding:0 0 0 1em; } li { padding:0 0 0 1em;margin:0 0 0 1em; } .email-button { border:0 none; } .built-with { width:100%;max-width:640px;margin-left:auto;margin-right:auto; } </style>
<style>.ck-link { text-decoration: underline; }</style>
<style>@media only screen and (max-width:600px) { .email-container { padding:0 !important; } }
@media only screen { .email * { word-break: break-word; } }
@media screen and (max-width: 384px) { .mail-message-content { width: 414px !important; } }
@media only screen and (max-width:600px) { .ck-padding-left-none { padding-left:0px !important; } .ck-padding-right-none { padding-right:0px !important; } .ck-padding-left-mobile-friendly { padding-left:18px !important; } .ck-padding-right-mobile-friendly { padding-right:18px !important; } }
@media only screen and (max-width:600px) { .ck-mobile-font-size { font-size:50px !important; } }</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div style="background-color:#ffffff"><table role="presentation" cellpadding="0" cellspacing="0" class="email" style="background:#ffffff !important;width:100%" bgcolor="#ffffff"><tbody><tr>
<td><div class="email-container normal" style="padding-top:0;padding-left:0;padding-bottom:30px;padding-right:0;margin:0 auto;max-width:100%"><table cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="width:100%;margin:0 auto;background-color:#ffffff"><tbody><tr><td>
<div class="ck-section" style="margin:30px auto 7px auto"><center>
<table cellpadding="0" cellspacing="0" style="width:100%;margin:0 auto;max-width:640px"><tbody><tr>
<td contenteditable="false"></td>
<td width="640" style="border-radius:0px;box-sizing:border-box;mso-padding-alt:0px 4px 0px 4px"><div class="ck-inner-section ck-padding-left-mobile-friendly ck-padding-right-mobile-friendly" style="padding:0px 4px 0px 4px"><div style="margin-left:auto;margin-right:auto">
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">Hello my front-end friend,</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">Sometimes you run into a CSS problem, and you do everything right, but still can't figure out what is going on.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">You don’t pile on Band-Aids. You stop and think about <em>why</em> it’s happening. You narrow it down to a specific question. You search for an answer.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class=""><strong>And you get nothing.</strong></p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">This happened to one of my students a while back. They added padding to an element, and that padding covered the text of the paragraph above it.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">They played around with it and tried a few different things. Same result every time. Being able to reproduce the issue like this, it was clearly an intentional behavior, but <em>why</em>?</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">They stopped, thought about it, tried to figure out <em>why</em>. </p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">They searched for box model information and didn’t come across the answer.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">They looked up padding specifically. Still nothing.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">They searched the MDN, W3Schools, and even took the time to read parts of the CSS spec in hopes of figuring out what the heck was going on.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">They did everything right. They didn't pile on fixes, but couldn't come up with a solution.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">Even the most up-to-date AI models are of no help.</p>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="text-align:left;table-layout:fixed;float:none" class="email-image"><tbody><tr><td align="left"><figure style="margin-top:12px;margin-bottom:12px;margin-left:0;margin-right:0;max-width:278px;width:100%"><div style="display:block"><img src="https://embed.filekitcdn.com/e/2FGnzMxCkLji5nfXx8Zaar/2koFHYzLUBsXeojaWDiqAu/email" width="278" height="auto" style="display:block;border-radius:4px 4px 4px 4px;width:278px;height:auto;object-fit:contain"></div>
<figcaption style="text-align:center;display:block">AI doesn't always have the right answers either.</figcaption></figure></td></tr></tbody></table>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">None of Claude’s answers here helps in any way, and the “throw a z-index on there” is really one of those shots in the dark, hoping for the best type of things that we might try as a last resort.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class=""><strong>The answer? They needed to look up inline formatting context.</strong></p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">But how were they supposed to know that? Nobody talks about inline formatting contexts. It's not in any beginner or intermediate tutorial. It's not something AI is going to surface because no tutorials or Stack Overflow answers talk about it, so it has no idea that's the answer either. </p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">It's one of those foundational pieces of how the browser actually renders CSS that almost nobody teaches, but that changes <em>everything</em> once you understand it.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">This is the kind of knowledge gap that no amount of Googling or prompting will fill, because when you don't know about it, you don't know that's where you need to look for the answer.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class=""><strong>That's the kind of gap CSS Demystified is built to close.</strong></p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">Not by covering every property (there are too many), but by teaching you how CSS actually works, and diving into the layer underneath the properties that govern how everything behaves. </p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">Once you have that, you stop running into invisible walls. You know where to look, or better yet, you already understand why something is happening before you even need to look it up.</p>
<div style="padding:10px 20px;margin:0 0 20px;border-left-style:solid;border-left-width:5px;border-left-color:#000000;font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5;text-align:left" class="blockquotes"><div class="blockquotes-line">
<em>"I now view CSS as a complex language in its own right which can be leveraged once it is well understood."</em> — <strong>Joe Sheridan </strong>CSS Demystified alum (v1)</div></div>
<div style="padding:10px 20px;margin:0 0 20px;border-left-style:solid;border-left-width:5px;border-left-color:#000000;font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5;text-align:left" class="blockquotes"><div class="blockquotes-line">
<em>"If they wanted to learn how the browser actually applies CSS, they should start here."</em> — <strong>thecodeviking </strong>CSS Demystified alum (v1)</div></div>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">And remember, you can get <strong>20% off the new version of CSS Demystified</strong> through April 7th. After that, the doors will stay open, but at the full price of $199 instead of $159.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class=""><a href="https://b59b20d1.click.convertkit-mail4.com/o8ung5wvw2hqh6dkonqcvhqwd8l72toh528x/owhkhqhw992m6eaq/aHR0cHM6Ly90aGVjYXNjYWRlLmRldi9jb3Vyc2VzL2Nzcy1kZW15c3RpZmllZA==" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1844615878"><strong>Enroll now</strong></a></p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">(If you’re in a country where I support purchasing power parity, the best available discount is applied automatically at checkout, whichever is higher between that and the launch coupon.)</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">If you're on the fence, or have any questions, please hit reply and ask away. And if you're curious about the entire curriculum, <a href="https://b59b20d1.click.convertkit-mail4.com/o8ung5wvw2hqh6dkonqcvhqwd8l72toh528x/z2hghnhe66q2kgsz/aHR0cHM6Ly90aGVjYXNjYWRlLmRldi9jb3Vyc2VzL2Nzcy1kZW15c3RpZmllZC9jdXJyaWN1bHVtLw==" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1844615879">you can find it here</a>.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">Cheers, <br>Kevin</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class=""><strong>P.S. </strong> Also, there are already more modules in the works, with the next one being <em>Writing Resilient CSS. </em>If you enroll now, you'll get all the future modules for free, but the price will go up as more content is added.</p>
<p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:18px;color:#353535;font-weight:400;line-height:1.5" class="">P.S. If you’d like to stop hearing about CSS Demystified and stay on my regular Sunday list, <a href="https://b59b20d1.click.convertkit-mail4.com/o8ung5wvw2hqh6dkonqcvhqwd8l72toh528x/l2h98llwbmhl228m45hg/aHR0cHM6Ly93d3cua2V2aW5wb3dlbGwuY28vdXBkYXRlZC8=" trigger-id="5623947" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#0000ff" url-id="1844615880">click here</a>.</p>
<hr style="margin-top:48px;margin-bottom:48px">
</div></div></td>
<td contenteditable="false"></td>
</tr></tbody></table>
<div><!--[if mso]><br /><br /><![endif]--></div>
</center></div>
<div class="ck-section" style="margin:0px auto 24px auto"><center>
<table cellpadding="0" cellspacing="0" style="width:100%;margin:0 auto;max-width:640px"><tbody><tr>
<td contenteditable="false"></td>
<td width="640" style="background-color:#f7f7f7;border-radius:0px;box-sizing:border-box;mso-padding-alt:18px 18px 18px 18px" bgcolor="#f7f7f7"><div class="ck-inner-section ck-padding-left-mobile-friendly ck-padding-right-mobile-friendly" style="padding:18px 18px 18px 18px"><div style="margin-left:auto;margin-right:auto;max-width:640px"><p style="font-family:-apple-system, BlinkMacSystemFont, sans-serif;font-size:15px;color:#747474;font-weight:400;line-height:1.5" class=""><a href="https://b59b20d1.unsubscribe.convertkit-mail4.com/o8ung5wvw2hqh6dkonqcvhqwd8l72toh528x" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#006df2">Unsubscribe</a> · <a href="https://preferences.convertkit-mail4.com/o8ung5wvw2hqh6dkonqcvhqwd8l72toh528x" target="_blank" class="ck-link" rel="noopener noreferrer" style="color:#006df2">Preferences</a><br>600 1st Ave, Ste 330 PMB 92768, Seattle, WA 98104-2246</p></div></div></td>
<td contenteditable="false"></td>
</tr></tbody></table>
<div><!--[if mso]><br /><br /><![endif]--></div>
</center></div>
</td></tr></tbody></table></div></td>
<td></td>
</tr></tbody></table></div>
<!-- -->
<img src="https://b59b20d1.open.convertkit-mail4.com/o8ung5wvw2hqh6dkonqcvhqwd8l72toh528x" alt="" style="display:block">
</body>
</html>