Basic Knowledge of CSS – Akhirai Tech

let’s go deep into CSS (Cascading Style Sheets) so you’ll have a complete, detailed reference you can return to anytime.
I’ll explain what it is, why it’s important, how it works, and then go through its syntax, features, types, selectors, units, properties, and best practices.

1. What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation (look and feel) of HTML elements on a web page.
While HTML provides structure and content, CSS handles style, such as:

Layout (positioning elements)
Colors (background, text, borders)
Fonts & typography
Spacing (margins, padding)
Animations & transitions
Responsive design (different styles for different devices)

Think of HTML as the skeleton and CSS as the skin, clothes, and decorations.

2. Why “Cascading” in CSS?

The term “cascading” means multiple styles can apply to the same element, and CSS decides which one wins based on:

Importance (!important rules override normal rules)
Specificity (inline > id selectors > class selectors > tag selectors)
Source order (later rules override earlier ones if specificity is same)

3. CSS Syntax

A CSS rule consists of:

selector {
  property: value;
}

Selector → Targets the HTML element(s) (p, .class, #id, etc.)
Property → The style you want to change (color, font-size, etc.)
Value → The setting for the property (red, 16px, etc.)

Example:

p {
  color: blue;
  font-size: 16px;
}

4. Types of CSS

There are three main ways to add CSS:

Type	How it Works	Example	Pros	Cons
Inline CSS	Added directly inside an HTML element’s `style` attribute	`<p style="color:red;">Text</p>`	Quick for small changes	Not reusable, bad for large projects
Internal CSS	Inside a `<style>` tag in the HTML `<head>`	`<style>p { color:red; }</style>`	Keeps CSS in one file	Not reusable across multiple pages
External CSS	In a separate `.css` file linked via `<link>`	`<link rel="stylesheet" href="style.css">`	Reusable, keeps HTML clean	Requires extra file loading

5. CSS Selectors

Selectors target HTML elements. Main types:

Basic Selectors
- Tag selector: p { }
- Class selector: .myClass { }
- ID selector: #myId { }
Group Selector
- h1, h2, p { }
Universal Selector
- * { margin: 0; }
Combinators
- Descendant: div p { }
- Child: div > p { }
- Adjacent sibling: h1 + p { }
- General sibling: h1 ~ p { }
Attribute Selectors
- [type="text"] { }
- [href^="https"] { }
- [src$=".jpg"] { }
Pseudo-classes
- a:hover { color: red; }
- input:focus { border: 2px solid blue; }
Pseudo-elements
- p::first-letter { font-size: 2em; }
- p::after { content: "✓"; }

6. CSS Units

Two types of units:

Absolute Units

px (pixels)
pt (points)
cm, mm, in (rare in web)

Relative Units

% → relative to parent element
em → relative to font-size of parent
rem → relative to root <html> font-size
vw → relative to viewport width
vh → relative to viewport height

7. CSS Box Model

Every element is a box with:

+-------------------------+
|       Margin                                              |
|     +-------------------+  |
|          |    Border                                |  |
|  | +---------------+ |  |
|  | |  Padding      | |  |
|  | | +-----------+ | |  |
|  | | |  Content  | | |  |
|  | | +-----------+ | |  |
|  | +---------------+ |  |
|  +-------------------+  |
+-------------------------+

Content → text/images
Padding → space between content & border
Border → line around padding/content
Margin → space outside border

8. Common CSS Properties

Text & Fonts

color: red;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration: underline;

Background

background-color: yellow;
background-image: url("image.jpg");
background-repeat: no-repeat;
background-size: cover;

Borders & Corners

border: 2px solid black;
border-radius: 10px;

Positioning

position: static | relative | absolute | fixed | sticky;
top: 10px;
left: 20px;

Flexbox & Grid

display: flex;
justify-content: space-between;
align-items: center;

display: grid;
grid-template-columns: repeat(3, 1fr);

Animations

transition: all 0.3s ease;
animation: move 2s infinite;

@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

9. Responsive Design in CSS

Make pages look good on all devices using:

Media Queries

@media (max-width: 768px) {
  body { font-size: 14px; }
}

Flexible units (em, %, vw, vh)
Flexbox/Grid layouts

10. Best Practices

Keep CSS in separate files
Use classes instead of IDs for styling
Avoid inline styles for maintainability
Group and comment related styles
Minimize CSS using tools like CSS Minifier
Use a CSS reset or normalize file