Complete CSS + Tailwind Course Material

CSS stands for Cascading Style Sheets. It is a language used to describe the visual presentation of HTML documents — colours, fonts, spacing, layout, animations, and more. While HTML defines the structure and content of a webpage, CSS controls how that content looks.

The word "Cascading" is crucial. It means that multiple style rules can apply to the same element, and there is a defined order of priority (the cascade) that decides which rule wins. This is the "Theory of Proximity" — the closer a style rule is to the element, the more priority it generally has.

Every CSS rule is made up of three parts: a selector, a property, and a value. Together they form a declaration block.

CSS can be written in three different places. Understanding the difference helps you choose the right approach for each situation.

When multiple CSS rules target the same element, the browser must decide which one wins. This decision follows a strict order of priority — often called the Theory of Proximity or the CSS Cascade:

Priority order (highest to lowest):
Inline style → Internal style → External stylesheet → Browser default

Additionally, within the same level, a rule written later in the file overrides one written earlier. This is why the order of your CSS rules matters.

CSS supports many formats for specifying colour. The most common are names, hexadecimal, and RGB/RGBA.

Choosing the right unit is one of the most important decisions in CSS. Units divide into two categories: absolute (fixed, real-world size) and relative (scale based on something else).

Every HTML element is a rectangular box. The CSS Box Model describes the four layers that make up every box, from inside out:

Content → Padding → Border → Margin

Content — the actual text or image. Sized by width and height.
Padding — transparent space INSIDE the border, between content and border.
Border — the visible line surrounding the padding and content.
Margin — transparent space OUTSIDE the border, separating this element from others.

By default, width and height only size the content area. Padding and border are added on top, making elements larger than expected. This is called content-box behaviour and causes constant confusion.

box-sizing: border-box changes this so that width includes the padding and border. This is what virtually every professional uses.

Glassmorphism is a UI design trend that creates a frosted-glass appearance — transparent or semi-transparent surfaces with a blur effect on the background behind them. It relies on three key CSS properties: background with RGBA, backdrop-filter: blur(), and a subtle border.

The filter property applies visual effects to elements — blur, brightness, contrast, colour shifts, and more. These work on images, divs, or any HTML element.

Links have four states that must be styled in a specific order to work correctly: Link → Visited → Hover → Active. Writing them in the wrong order causes some states to be overridden and never visible.

<div> — a generic block-level container. It creates a new line before and after itself. Used to group other elements for styling or layout.

<span> — a generic inline container. It does not create a new line. Used to style a word or part of a sentence without disrupting the text flow.

class — a reusable label. Multiple elements can share the same class. Targeted with .className in CSS.

id — a unique identifier. Only ONE element per page should have a given id. Targeted with #idName in CSS. Has higher specificity than class.

When positioned elements overlap, z-index controls which one appears on top. Higher values appear in front. It only works on elements with position other than static.

Icon libraries provide scalable vector icons as CSS classes. They load a font file where each character maps to an icon shape. You add one <link> to your HTML head and then use <i> tags with specific class names.

Flexbox makes it trivially easy to centre content, distribute items with equal spacing, and create responsive row/column layouts. It operates on two axes: the main axis (set by flex-direction) and the cross axis (perpendicular to it).

CSS Animations allow elements to change from one set of styles to another over time, without JavaScript. You define the animation with @keyframes, then apply it to an element with the animation property.

Transitions create a smooth change from one CSS state to another — like a button changing colour when hovered. Unlike animations, transitions only happen when a property value changes (usually triggered by :hover, :focus, or a class toggle via JavaScript). You define how long the change takes and how it accelerates.

Older browsers sometimes required a vendor prefix before they supported standard CSS properties. While mostly unnecessary in 2025 for modern browsers, you may still encounter them in legacy codebases or when supporting older mobile browsers.

A media query applies CSS conditionally — only when a specified condition about the user's device or environment is true. The most common condition is the screen width, enabling different layouts for phones, tablets, and desktops from a single HTML file.

Every CSS selector has a specificity score. When two rules conflict, the higher score wins — regardless of order. The scoring is: inline style (1-0-0-0) > ID (0-1-0-0) > class/pseudo-class (0-0-1-0) > tag (0-0-0-1).

!important overrides ALL specificity rules. It should be used sparingly — mainly to override third-party library styles you cannot modify.

::before and ::after create a virtual element as the first or last child of the selected element. They require the content property. The injected content is not in the HTML — it exists only in CSS. They are block-level by default only when given display: block; otherwise they are inline.

CSS Custom Properties (also called CSS Variables) allow you to store a value in a named variable and reuse it throughout your stylesheet. If you want to change your brand colour, you change it in one place and every property using that variable updates automatically.

They are defined with two dashes: --variable-name. They are used with the var() function: var(--variable-name). They follow the cascade and can be scoped to any element.

A CSS preprocessor is a tool that extends CSS with programming-like features — variables, nesting, functions, loops, conditions — then compiles your enhanced code down to standard CSS that browsers understand. The most popular is Sass/SCSS.

While native CSS has added many of these features (custom properties, nesting), preprocessors still offer power for large projects: file splitting, mixins, loops, and build-time calculations.

calc() lets you perform mathematical operations (+ - * /) inside a CSS value — and you can mix different units. This is impossible to do without it. The most powerful use is subtracting a fixed amount from a percentage.

clamp(minimum, preferred, maximum) lets a value scale fluidly between a minimum and maximum. It's perfect for fluid typography — text that grows with the viewport without hard breakpoints.

@supports works like @media but tests whether the browser supports a specific CSS property and value. It lets you write fallback code for browsers that don't support modern features — the same concept as progressive enhancement.

Media queries respond to the viewport width. Container queries respond to the width of the element's container. This means a card component can adapt its layout based on how much space it's given — not the screen size. The same card can be a full row in a wide sidebar and a compact thumbnail when in a narrow column.

clip-path crops an element to a custom shape — triangles, circles, hexagons, or any polygon. Content outside the clip path is hidden. It's used for hero sections with diagonal cuts, image shapes, and decorative elements.

@layer lets you explicitly organise your CSS into named layers and define their priority order. Styles in higher-priority layers always win, regardless of specificity. This solves the age-old problem of fighting specificity wars with third-party libraries.

Tailwind CSS is a utility-first framework. Instead of creating a custom class and then writing CSS for it, you compose small single-purpose classes directly in HTML. This removes a large part of the constant context-switching between HTML and CSS files.

It does not replace your CSS knowledge. It compresses that knowledge into a naming system. If you already understand spacing, colour, layout, states, and responsiveness, Tailwind becomes very fast to read and write.

Tailwind is mobile-first. Classes without prefixes apply everywhere. A prefix like md: means “apply this from 768px and above”. You solve the mobile layout first, then enhance the design as screen space increases.

State variants are prefixes such as hover:, focus:, active:, disabled:, and group-hover:. They let you create rich interactions without writing custom CSS selectors.

Tailwind supports dark mode with the dark: prefix. In real projects, most teams use a class-based strategy so the user can toggle themes and save that preference.

Flowbite is a Tailwind-based component library. It gives you prebuilt navbars, modals, dropdowns, tables, drawers, and forms without forcing a totally different styling model. You can still edit classes directly because the components are made with standard Tailwind utilities.