Cascading Style Sheets (CSS) is the "paint and layout" engine of the web. While HTML provides the structure (the bones), CSS provides the presentation (the skin, clothes, and makeup).
Here is a comprehensive breakdown of everything you need to know about CSS.
Every element in CSS is considered a rectangular box. Understanding how these boxes are sized is the foundation of all layout work.
Content: The actual text or image.
Padding: Transparent space around the content (inside the border).
Border: A line surrounding the padding and content.
Margin: Transparent space outside the border, used to separate the element from others.
CSS works by "selecting" an HTML element and "declaring" styles for it.
CSS
selector {
property: value;
}
Element Selector: p { color: red; } (Targets all <p> tags)
Class Selector: .btn { background: blue; } (Targets elements with class="btn")
ID Selector: #header { font-size: 20px; } (Targets the unique element with id="header")
Attribute Selector: [type="text"] { border: 1px solid black; }
There are three ways to include CSS in an HTML document:
External: Using a <link> tag in the <head> to an external .css file. (Best practice)
Internal: Using a <style> block inside the <head>.
Inline: Using the style attribute directly on an HTML element. (Hardest to maintain)
CSS has evolved from simple positioning to powerful layout systems:
Flexbox: Designed for one-dimensional layouts (a row or a column). It’s excellent for aligning items and distributing space.
CSS Grid: Designed for two-dimensional layouts (rows and columns). It allows you to build complex web structures easily.
Positioning: Using static, relative, absolute, fixed, or sticky to move elements out of the normal document flow.
The "C" in CSS stands for Cascading, which determines which rule wins when multiple styles apply to the same element.
Importance: Rules marked !important win (use sparingly).
Specificity: IDs beat Classes, and Classes beat Elements.
Source Order: If specificity is equal, the rule written last in the code wins.
Combination of HTML (for the structure), JavaScript (for the math and storage), and CSS (to handle the different looks for the screen and printer).
Here is a complete solution:
We need two number inputs and a place to display the result.
HTML
<div class="calculator">
<input type="number" id="num1" placeholder="Enter first number">
<input type="number" id="num2" placeholder="Enter second number">
<button onclick="multiply()">Multiply</button>
<div id="result">Result: 0</div>
</div>
This script grabs the values, multiplies them, and updates the screen.
JavaScript
function multiply() {
const n1 = document.getElementById('num1').value;
const n2 = document.getElementById('num2').value;
const total = n1 * n2;
document.getElementById('result').innerText = "Result: " + total;
}
This is where CSS shines. We use Media Queries to change how the output looks depending on whether it is viewed on a screen or printed on paper.
CSS
/* STYLES FOR THE SCREEN */
@media screen {
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.calculator {
padding: 20px;
border: 1px solid #ccc;
background: white;
width: 300px;
}
#result {
color: blue;
font-weight: bold;
margin-top: 10px;
}
}
/* STYLES FOR THE PRINTER */
@media print {
/* Hide the inputs and button when printing */
input, button {
display: none;
}
/* Make the result look like a formal document */
#result {
font-size: 24pt;
text-align: center;
border-bottom: 2px solid black;
}
}