Topic01 / 30

Introduction to CSS

What & Why

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

1/* Inline */
2<p style="color: gold; font-size: 18px;">Hello</p>
3
4/* Internal (in <style> tag) */
5<style>
6  p { color: gold; }
7</style>
8
9/* External (recommended) */
10<link rel="stylesheet" href="styles.css" />
11
12/* styles.css */
13p {
14  color: gold;
15  font-size: 18px;
16  font-family: 'Inter', sans-serif;
17}

Real-World Example

Applying global styles to a portfolio website:

example.ts

css

1/* styles.css */
2* {
3  box-sizing: border-box;
4  margin: 0;
5  padding: 0;
6}
7
8body {
9  font-family: 'Inter', sans-serif;
10  background-color: #0f0f0f;
11  color: #f5f5f5;
12  line-height: 1.6;
13}
14
15h1, h2, h3 {
16  color: #FFD700;
17}
18
19a {
20  color: #FFD700;
21  text-decoration: none;
22}

Pitfalls & Interview Tips

⚠️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.