CSS handles text edits, colors, images, spacing, and adaptive layout adjustments.
The Rule of the "Cascade"
Why is it called Cascading Style Sheets? Because the browser reads rules sequentially from top to bottom. If you write conflicting instructions targeting the exact same element, the rule written further down the page wins!
h1 { color: red; }
h1 { color: green; }
/* Every <h1> will be GREEN because that rule cascades DOWN last! */
Connecting CSS to HTML
To tell your HTML structure to inherit your visual choices, paste a stylesheet in the
block right under your element:</p>
<pre><code class="language-HTML"><head>
<title>My Webpage</title>
<link rel="stylesheet" href="style.css">
</head>
</code></pre>
<h1 id="target-selectors-elements-classes-and-ids">Target Selectors: Elements, Classes, and IDs</h1>
<p>If you style a base HTML tag globally, every single instance of that tag changes on your website. To prevent this from happening, use <strong>Classes</strong> and <strong>IDs</strong> to specify your targets with precision.</p>
<table>
<thead>
<tr>
<th style="text-align: left;">Target Type</th>
<th style="text-align: left;">HTML Implementation</th>
<th style="text-align: left;">CSS Selection Rule</th>
<th style="text-align: left;">When to Use It</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;"><strong>Element Tag</strong></td>
<td style="text-align: left;"><code><h1>Text</h1></code></td>
<td style="text-align: left;"><code>h1 { ... }</code></td>
<td style="text-align: left;">Global base element styles (e.g., matching all headings layout-wide).</td>
</tr>
<tr>
<td style="text-align: left;"><strong>Class</strong></td>
<td style="text-align: left;"><code><h2 class="sub_heading"></code></td>
<td style="text-align: left;"><code>.sub_heading { ... }</code></td>
<td style="text-align: left;">Reusable styles you want to apply to multiple items across the site.</td>
</tr>
<tr>
<td style="text-align: left;"><strong>ID</strong></td>
<td style="text-align: left;"><code><i id="italic"></code></td>
<td style="text-align: left;"><code>#italic { ... }</code></td>
<td style="text-align: left;">Targeting a completely unique element on a specific webpage.</td>
</tr>
</tbody>
</table>
<blockquote>
<p><strong>Naming Convention Rule:</strong> When writing class attributes, name them cleanly and consistently using either <strong>camelCase</strong> (<code>circleImg</code>) or standard <strong>hyphens</strong> (<code>circle-img</code>).</p>
</blockquote>
<h1 id="demystifying-the-css-box-model">Demystifying the CSS Box Model</h1>
<p>Every element rendered on a page is treated as an isolated rectangular box. The box model contains four layers:</p>
<ul>
<li><em>Content:</em> The actual image or text inside the tag. </li>
<li><em>Padding:</em> The clear interior breathing room inside the element box, separating content from borders. </li>
<li><em>Border</em>: The structural framing outlining your container box. </li>
<li><em>Margin:</em> The exterior white space pushing away nearby adjacent element boxes.</li>
</ul>
<pre><code class="language-CSS">.containers {
border: 10px solid rgb(36, 103, 105); /* Solid, dotted, or dashed framing options */
margin: 50px 100px; /* Top/Bottom Margin, Left/Right Margin */
padding: 20px 10px; /* Adds clean spacing room inside the box */
background-color: rgb(142, 158, 158); /* Turns container area into a solid layout box */
display: inline-block; /* Controls element distribution (e.g. inline, flex, block) */
}
</code></pre>
<h1 id="responsive-web-design-rwd">Responsive Web Design (RWD)</h1>
<p><em>Responsive Web Design (RWD)</em> is a fluid styling methodology that ensures websites automatically adapt across fluctuating device displays.
Implementing flexible grids ensures consistent readability whether your visitors browse via desktops, tablets, or mobile smartphones.</p>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
</main>
<footer class="md-footer">
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"annotate": null, "base": "..", "features": ["navigation.tabs", "navigation.sections", "search.suggest", "search.highlight", "search.share", "content.code.copy"], "search": "../assets/javascripts/workers/search.2c215733.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": null}</script>
<script src="../assets/javascripts/bundle.79ae519e.min.js"></script>
</body>
</html>