What is CSS?
CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation and layout of HTML documents. It defines how elements appear on a webpage, including their colors, fonts, spacing, and positioning.
Why Use CSS?
- Separation of Content & Design: Keeps HTML clean by separating structure from styling.
- Consistency: Ensures uniform styling across multiple pages.
- Efficiency: A single CSS file can style multiple HTML documents.
- Responsive Design: Adapts layouts for different screen sizes (mobile, tablet, desktop).
Types of CSS
Inline CSS: Applied directly within an HTML tag using the style attribute.
<p style="color: blue; font-size: 18px;">This is inline CSS.</p>Pros: Quick and applies to a single element. Cons: Not reusable and clutters HTML. Internal CSS: Defined within the <style> tag inside the HTML <head>. <style> p { color: green; font-size: 20px; } </style> Pros: Useful for styling a single page. Cons: Not reusable across multiple pages. External CSS: Stored in a separate .css file and linked to an HTML file. <link rel="stylesheet" href="styles.css"> Content of file style.css p { color: red; font-size: 22px; } Pros: Best for large projects, reusable, and maintains clean HTML. Cons: Requires an external file, which needs to be loaded.
Key CSS Properties
Text Styling:
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: black;
}
Backgrounds & Colors:
body {
background-color: lightgray;
}
Box Model (Margin, Padding, Border, Width, Height):
div {
width: 200px;
height: 100px;
padding: 10px;
margin: 20px;
border: 2px solid black;
}
Positioning & Layout:
.container {
display: flex;
justify-content: center;
align-items: center;
}
Responsive Design (Media Queries):
@media (max-width: 600px) {
body {
background-color: yellow;
}
}
width: 200px;
height: 100px;
padding: 10px;
margin: 20px;
border: 2px solid black;1. width: 200px;
- Sets the content width of the element to 200 pixels.
- It does not include padding, margin, or border.
2. height: 100px;
- Sets the content height to 100 pixels.
- Like
width, it does not include padding, margin, or border.
3. padding: 10px;
- Adds space inside the element, between the content and the border.
- It increases the total size of the element.
- Example: If
width: 200pxandpadding: 10px, the actual width becomes 220px (200px + 10px left + 10px right).
4. margin: 20px;
- Adds space outside the element, creating separation from other elements.
- It does not affect the element’s actual size, only its position.
5. border: 2px solid black;
- Adds a 2-pixel thick solid black border around the element.
- The border adds to the element’s total size.
Total Element Size (Box Model Calculation)
By default, the content-box model is used, meaning the total size is calculated as:
Total Width = width + left padding + right padding + left border + right border
Total Height = height + top padding + bottom padding + top border + bottom border
For the given example:
- Width =
200px + 10px + 10px + 2px + 2px = 224px - Height =
100px + 10px + 10px + 2px + 2px = 124px
If box-sizing: border-box; is applied, then width and height include padding and border, keeping the total size fixed.
Example
.box {
width: 200px;
height: 100px;
padding: 10px;
margin: 20px;
border: 2px solid black;
background-color: black;
}
📌 This will create a box with:
black background
200px width and 100px height (content area)
10px padding inside
20px margin outside
2px solid black border
Conclusion
CSS is essential for designing modern websites, improving user experience, and ensuring responsive layouts. By using external CSS, following best practices, and leveraging properties effectively, you can create visually appealing and accessible web pages.