Topic 1 of 30
CSS
Overview
CSS (Cascading Style Sheets) controls the visual presentation of HTML elements — colors, fonts, layout, spacing, and animations. Without CSS, every webpage would look like a plain text document.
Syntax
css
/* Inline */
<p style="color: gold; font-size: 18px;">Hello</p>
/* Internal (in <style> tag) */
<style>
p { color: gold; }
</style>
/* External (recommended) */
<link rel="stylesheet" href="styles.css" />
/* styles.css */
p {
color: gold;
font-size: 18px;
font-family: 'Inter', sans-serif;
}Common Pitfalls
- Always use external stylesheets for maintainability — inline styles override everything and are hard to manage.
- The 'cascade' means later rules override earlier ones at the same specificity.
- Interview tip: CSS stands for Cascading Style Sheets — the 'cascading' refers to the priority order of rule application.
Real-World Example
Applying global styles to a portfolio website:
example
css
/* styles.css */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Inter', sans-serif;
background-color: #0f0f0f;
color: #f5f5f5;
line-height: 1.6;
}
h1, h2, h3 {
color: #FFD700;
}
a {
color: #FFD700;
text-decoration: none;
}