Css Demystified Start Writing Css With Confidence

/* Layout and Positioning */ div { display: block; position: relative; top: 20px; left: 30px; }

"Padding pushes in ," the Keeper said. "Margin pushes out . Most of your layout nightmares come from forgetting that every <p> , every <button> , every <span> is just a box arguing with its neighbors."

div { width: 300px; padding: 20px; /* Space inside the box, around the text */ border: 5px solid black; /* The edge of the box */ margin: 30px; /* Space outside the box, pushing others away */ } CSS Demystified Start writing CSS with confidence

min-height allows the box to grow.

.nav li a:hover, .footer li a:hover, .sidebar li a:hover { color: gold; } /* Layout and Positioning */ div { display:

main #content .article p { color: red; /* Specificity: 1 (main) + 100 + 10 + 1 = 112 — Wins! */ }

If a paragraph has class="text" , the final color will be . The higher score wins. If you can't figure out where a gap

If you can't figure out where a gap is coming from, add * { outline: 1px solid red; } to your CSS. This draws a box around every single element, instantly revealing hidden margins or overflowing containers. Conclusion: Practice Over Perfection