<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Super Complete CSS Notes</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 30px;
background: #f9f9f9;
color: #2c3e50;
}
h1, h2 {
color: #2980b9;
}
pre {
background: #272822;
color: #f8f8f2;
padding: 12px;
border-radius: 5px;
overflow-x: auto;
}
code {
color: #e67e22;
background: #f0f0f0;
padding: 2px 4px;
border-radius: 3px;
}
img {
width: 180px;
margin: 10px 0;
}
</style>
</head>
<body>
<h1>Super Complete CSS Notes</h1>
<h2>1. What is CSS?</h2>
<p>
CSS stands for <strong>Cascading Style Sheets</strong>. It controls the style
and layout of web pages.
</p>
<p>Example logo:</p>
<img
src="https://upload.wikimedia.org/wikipedia/commons/d/d5/CSS3_logo_and_wordmark.svg
" alt="CSS3 Logo" />
<h2>2. CSS Syntax</h2>
<pre><code>selector {
property: value;
}</code></pre>
<h2>3. Ways to Add CSS</h2>
<h3>Inline CSS</h3>
<pre><code><p style="color: red;">Hello CSS!</p></code></pre>
<h3>Internal CSS</h3>
<pre><code><style>
p {
color: blue;
}
</style>
</code></pre>
<h3>External CSS</h3>
<pre><code><link rel="stylesheet" href="style.css"></code></pre>
<h2>4. CSS Selectors</h2>
<ul>
<li><code>*</code> — Universal selector</li>
<li><code>tag</code> — Element selector</li>
<li><code>.class</code> — Class selector</li>
<li><code>#id</code> — ID selector</li>
</ul>
<pre><code>p {
color: green;
}
.myClass {
font-size: 18px;
}
#myId {
background: yellow;
}</code></pre>
<h2>5. Colors</h2>
<pre><code>color: red;
color: #ff0000;
color: rgb(255, 0, 0);
</code></pre>
<h2>6. Fonts</h2>
<pre><code>font-family: Arial, sans-serif;
font-size: 20px;
font-weight: bold;
font-style: italic;
</code></pre>
<h2>7. Box Model</h2>
<p>Every element is a box made of:</p>
<ul>
<li>Content</li>
<li>Padding</li>
<li>Border</li>
<li>Margin</li>
</ul>
<pre><code>div {
padding: 10px;
border: 2px solid black;
margin: 20px;
}</code></pre>
<h2>8. Layout (Display)</h2>
<pre><code>display: block;
display: inline;
display: inline-block;
display: flex;
display: grid;
</code></pre>
<h2>9. Position</h2>
<pre><code>position: static;
position: relative;
position: absolute;
position: fixed;
</code></pre>
<h2>10. Flexbox</h2>
<pre><code>display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
</code></pre>
<h2>11. Grid Layout</h2>
<pre><code>display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
</code></pre>
<h2>12. Transitions</h2>
<pre><code>transition: all 0.3s ease;
:hover {
color: red;
}
</code></pre>
<h2>13. Media Queries (Responsive Design)</h2>
<pre><code>@media (max-width: 600px) {
body {
background-color: lightgray;
}
}</code></pre>
<h2>14. Z-index</h2>
<pre><code>z-index: 10; /* Higher comes on top */</code></pre>
<h2>15. Example - Styled Box</h2>
<pre><code><div class="box">I am a box</div>
.box {
width: 200px;
height: 100px;
background: #3498db;
color: white;
text-align: center;
line-height: 100px;
border-radius: 10px;
}
</code></pre>
<h2>✅ What You Learned</h2>
<ul>
<li>CSS syntax and usage</li>
<li>Box model and selectors</li>
<li>Flexbox, grid, and layout</li>
<li>Transitions and responsive design</li>
</ul>
<p>✅ Now you can design beautiful websites using just CSS!</p>
</body>
</html>
