L-3 CSS
17 June 2025
16:13
What is css
CSS (Cascading Style Sheets) is used to style HTML content — layout, colors, fonts, spacing,
etc.
Ways to apply css
<!-- Inline -->
<p style="color: red;">This is red</p>
<!-- Internal -->
<style>
p { color: green; }
</style>
<!-- External -->
<link rel="stylesheet" href="styles.css">
Inline
Characteristics:
Applied directly to a single HTML element using the style attribute.
Highest specificity (overrides internal and external unless !important is used).
Not reusable; harder to maintain.
When to use:
Quick, one-off style changes.
Testing/debugging a small tweak.
Dynamic styling with JavaScript.
Avoid for:
Large projects or consistent styling.
Reusability and scalability.
Internal
Characteristics:
Defined inside a <style> tag in the <head> of an HTML document.
Styles only that one HTML file.
Good for small projects or single-page sites.
When to use:
Single-page applications or HTML documents.
When external CSS is not practical or needed.
Avoid for:
Projects with multiple pages that require consistent styling.
Maintaining large stylesheets.
External
Characteristics:
CSS is written in a separate .css file.
Promotes reuse and maintainability.
Ideal for larger websites with many pages.
When to use:
Multi-page or production websites.
When styles are shared across pages/components.
For better caching and performance optimization.
Avoid for:
Super small, single-use HTML documents (though still okay to use!).
Box Model
Box Sizing
There are two main values for the box-sizing property:
content-box (default):
Width/height only applies to content. Padding and border are added outside that
size.
border-box:
Width/height includes content + padding + border. Preferred in modern CSS for
easier layout control.
Flex
Flexbox (Flexible Box Layout) is a layout model in CSS that makes it easier to design flexible
and responsive layout structures—especially for one-dimensional layouts (row or column).
.container {
display: flex;
}
2. Flexbox Terminology
Flex Container: The parent element with display: flex.
Flex Items: The direct children of the flex container.
Main Axis: The primary direction (horizontal by default).
Cross Axis: Perpendicular to the main axis.
3. Flex Container Properties
Property Description
flex-direction Sets the direction of flex items
justify-content Aligns items along the main axis
align-items Aligns items along the cross axis
flex-wrap Allows items to wrap onto multiple lines
gap Sets spacing between flex items
Flex child property
flex-grow
Defines how much a flex item will grow relative to the rest of the flex items.
Default: 0 (item will not grow)
Example: flex-grow: 1; means the item will grow to fill available space.
flex-shrink
Defines how much a flex item will shrink relative to the rest of the flex items when
there's not enough space.
Default: 1 (item can shrink)
Example: flex-shrink: 0; means the item will not shrink.
flex-basis
Defines the initial main size of the flex item before any growing or shrinking.
Default: auto (based on item's content or width/height)
Can be set in length units (px, %, em, etc.).
flex: 1 0 150px; /* flex-grow:1, flex-shrink:0, flex-basis:150px */
.container {
display: flex;
flex-direction: row; /* row | row-reverse | column | column-reverse */
flex-wrap: wrap; /* wrap | nowrap | wrap-reverse */
justify-content: center; /* flex-start | flex-end | center | space-between | space-around |
space-evenly */
align-items: center; /* flex-start | flex-end | center | baseline */
align-content: flex-start; /* Used when flex-wrap is active */
gap: 20px; /* Adds space between items */
}
Value Description
space-between Space between items only. First and last items are flush with the edges.
space-around Space on both sides of each item. Edges get half space compared to the
space between.
space-evenly Equal space between all items, including at the start and end.
background: linear-gradient(direction, color1, color2, ...);
background: linear-gradient(to right, #ff7e5f, #feb47b);
to right → left to right
to left → right to left
to bottom → top to bottom (default)
to top → bottom to top
Text Style properties
Text Content Styling
Property Description Example
color Sets the color of the text color: #333;
font-family Sets the font type font-family: Arial, sans-serif;
font-size Sets the size of the font font-size: 16px;
font-style Sets font style (italic, normal) font-style: italic;
font-weight Sets the thickness of the font font-weight: bold;
text-transform Controls uppercase/lowercase text-transform: uppercase;
Text Alignment and Spacing
Property Description Example
text-align Aligns text left, right, center, or justify text-align: center;
line-height Sets the space between lines line-height: 1.5;
letter-spacing Space between characters letter-spacing: 2px;
word-spacing Space between words word-spacing: 5px;
text-indent Indents the first line of text text-indent: 30px;
Text Decoration and Effects
Property Description Example
text-decoration Underline, overline, line-through, or text-decoration: underline;
none
text-shadow Adds shadow to text text-shadow: 2px 2px 5px
gray;
white-space Controls whitespace handling white-space: nowrap;
overflow-wrap Breaks long words to avoid overflow overflow-wrap: break-word;
direction Text direction (ltr or rtl) direction: rtl;
background-image
element {
background-image: url('image.jpg');
}
background-repeat
Value Description
repeat Default – repeats both vertically and horizontally
no-repeat Shows the image only once
repeat-x Repeats horizontally
repeat-y Repeats vertically
background-position
Value Description
top left, center center, bottom right Keyword positions
50% 50%, 10px 20px Percent or length values
background-size
Value Description
auto Default – original image size
cover Scale to cover entire container (cropping may occur)
contain Scale to fit container without cropping
100px 200px Exact size in px or %
background-attachment
Defines if the background scrolls with the page or is fixed.
Value Description
scroll Default – background scrolls with content
fixed Background stays in place (parallax effect)
local Scrolls with the element’s content
background-clip
Value Description
border-box Default – includes border area
padding-box Inside padding only
content-box Only inside content area
background (Shorthand)
body {
background: url('img.jpg') no-repeat center/cover fixed;
}
background-image: url('img.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
box-shadow
The box-shadow property adds shadow effects around an element’s box. It can create
depth, elevation, glow, or soft edges.
box-shadow: offset-x offset-y blur-radius spread-radius color inset;
Parameter Description
offset-x Horizontal shadow position (e.g. 5px moves right)
offset-y Vertical shadow position (e.g. 5px moves down)
blur-radius Optional. The larger the value, the more blurred the shadow
spread-radius Optional. Expands or shrinks the size of the shadow
color Optional. Shadow color (can use rgba for transparency)
inset Optional. Makes the shadow appear inside the element
div {
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}
Colors
Names: red, blue, green
Hex: #ff0000
RGB: rgb(255, 0, 0)
RGBA: rgba(255, 0, 0, 0.5)
Units
Absolute units
Unit Meaning Example Notes
px Pixels font-size: 16px; Most commonly used unit.
cm Centimeters width: 5cm; Real-world measurement.
mm Millimeters margin: 10mm; Precise but rare.
in Inches width: 2in; 1in = 96px in CSS.
Relative units
Unit Meaning Example Notes
em Relative to the font size of the font-size: 2em; 1em = current font size.
element
rem Relative to the root (html) font-size: Consistent scaling across
element's font size 1.5rem; components.
% Percentage of parent element width: 50%; Useful for responsive
design.
What is em?
em is relative to the font size of the current element (or its parent if none is set).
It scales cascadingly: if a parent element uses em, its children will inherit and
multiply it.
html {
font-size: 16px;
}
.container {
font-size: 1.5em; /* 1.5 × 16px = 24px */
}
.container p {
font-size: 1em; /* 1 × 24px = 24px (inherits from .container) */
}
Caveat:
If nested too deeply, em can compound and become hard to manage.
What is rem?
rem stands for “root em”.
It is always relative to the html (root) font size, regardless of nesting.
It makes scaling more predictable.
html {
font-size: 16px;
}
.container {
font-size: 1.5rem; /* 1.5 × 16px = 24px */
}
.container p {
font-size: 1rem; /* 1 × 16px = 16px */
}
Feature em rem
Relative to Nearest parent’s font size Root (html) font size
Inherits size? Yes, cascades No, always same base
Good for Spacing within components Base font sizing, consistent scaling
Risks Compounding can get messy More predictable
CSS Selectors
Basic Selectors
Selector Example Description
Type p Selects all <p> elements
Class .intro Selects all elements with class="intro"
ID #header Selects the element with id="header"
Universal * Selects all elements on the page
Grouping and Combinations
Selector Example Description
Grouping h1, h2, p Selects all h1, h2, and p elements
Descendant div p Selects all p elements inside a div
Child ul > li Selects direct children li of a ul
Adjacent Sibling h1 + p Selects the p immediately after an h1
General Sibling h1 ~ p Selects all p siblings after an h1
Attribute Selectors
Selector Example Description
[type] input[type] Selects inputs with any type attribute
[type="text"] input[type="text"] Selects inputs with type="text"
Pseudo-classes
These target elements in a specific state
Selector Example Description
:first-child p:first-child First child of parent
:last-child p:last-child Last child
:nth-child(2) li:nth-child(2) Second child
:nth-of-type(odd) Targets odd items of a specific type
UI State
Selector Example Description
:hover a:hover When the user hovers
:focus input:focus When an input is focused
:checked input:checked Checked radio/checkbox
:disabled button:disabled Disabled button
Pseudo-elements
Selector Example Description
::before p::before Inserts content before element
::after p::after Inserts content after element
::first-letter p::first-letter Styles the first letter
::first-line p::first-line Styles the first line
What is Pseudo Elements
Pseudo-elements allow you to style specific parts of an element or inject content before or
after an element, without needing extra HTML.
Common Pseudo Elements
::before
Inserts content before the element’s actual content.
p::before {
content: "👉 ";
color: orange;
}
Use Case: Adding icons, symbols, or labels before headings or paragraphs.
::after
Inserts content after the element’s content.
Use Case: Add visual indicators or decorations after links, buttons, or messages.
p::after {
content: " ✔️";
color: green;
}
::first-letter
Styles the first letter of a block of text
p::first-letter {
font-size: 200%;
color: red;
float: left;
}
Use Case: Magazine-style drop caps in articles or blogs.
::first-line
Styles the first line of a paragraph, depending on the container’s width.
p::first-line {
font-weight: bold;
color: navy;
}
Use Case: Highlighting introductory text in a paragraph.
Limitation Explanation
::before and ::after require You must include a content property. Even content:
content ""; is needed if you're using it just for decoration.
Pseudo-elements target text or You can’t use ::first-letter to style an entire <span> or
structure, not full elements element — only the actual letter.
Limited to 1 level deep You can't nest pseudo-elements (e.g., no ::first-
letter::before)
Combinators Summary
Symbol Meaning Example Description
(space) Descendant div p Any p inside div
> Child div > p Direct p child of div
+ Adjacent sibling h1 + p p immediately after h1
~ General sibling h1 ~ p All ps after h1, same parent
Variables in CSS
Variables are defined using -- inside a CSS selector (commonly :root).
:root {
--main-color: #3498db;
--padding-lg: 20px;
}
Use variable
Use the var() function to access a variable’s value.
button {
background-color: var(--main-color);
padding: var(--padding-lg);
}
Why root
:root refers to the highest-level element (<html>) and makes the variables global, meaning
any part of the CSS can use them.
:root {
--primary: #0d6efd;
--secondary: #6c757d;
--radius: 5px;
}
.card {
background-color: var(--primary);
color: white;
border-radius: var(--radius);
}
.card.secondary {
background-color: var(--secondary);
}
Benefits
Benefit Description
✅ Reusability Change value once, update everywhere
🎨 Theming Switch colors/fonts for dark/light modes
📱 Responsive design Use variables for spacing, typography
📐 Dynamic styling Works with JavaScript too!
CSS Variables
:root {
--bg: #fff;
--text: #000;
}
[data-theme="dark"] {
--bg: #121212;
--text: #f5f5f5;
}
body {
background-color: var(--bg);
color: var(--text);
}
document.body.setAttribute('data-theme', 'dark');
Cascading
The cascading in CSS refers to the rules CSS uses to determine which style applies to an
element when multiple rules could apply.
How css decides which rule to apply
Importance (Layer 1)
!important styles always win, unless overridden by another !important that’s more specific.
p{
color: red !important; /* This will beat all other color rules for <p> */
}
Specificity (Layer 2)
The more specific a selector is, the more weight it has.
Selector Specificity Score
p 0,0,0,1
.class 0,0,1,0
#id 0,1,0,0
inline style 1,0,0,0
Specificity is calculated based on how many IDs, classes, and element tags a selector uses.
Source Order (Layer 3)
If two rules have the same importance and specificity, the one written last wins.
h1 {
color: blue;
}
h1 {
color: green; /* This wins because it comes later */
}
Summary: The CSS Cascade Order
1. Important rules (!important)
2. Specificity (inline > ID > class > element)
3. Source order (last rule wins if all else is equal)
Grid
CSS Grid Layout is a two-dimensional layout system for the web. It allows you to layout
items in rows and columns, giving you more power than Flexbox (which is one-dimensional).
Term Description
Grid Container The element with display: grid
Grid Items The direct children of the grid container
Grid Lines The lines that divide the grid into rows/columns
Grid Tracks The space between two lines (i.e., a row or a column)
Grid Cell A single unit in the grid
Grid Area A rectangular space made of one or more cells
Grid Container Properties
Property Description
display grid or inline-grid — enables grid layout
grid-template-columns Defines number and size of columns (e.g. 100px 1fr 2fr)
grid-template-rows Defines number and size of rows
grid-template-areas Names grid areas for layout using strings
grid-column-gap or Sets horizontal gap between columns
column-gap
grid-row-gap or row-gap Sets vertical gap between rows
gap Sets both row and column gaps at once
justify-items Aligns grid items horizontally inside their grid areas (start,
end, center, stretch)
align-items Aligns grid items vertically inside their grid areas (start, end,
center, stretch)
justify-content Aligns the whole grid horizontally inside container
align-content Aligns the whole grid vertically inside container
Grid items property
Property Description
grid-column-start Starting grid line for the item’s column
grid-column-end Ending grid line for the item’s column
grid-row-start Starting grid line for the item’s row
grid-row-end Ending grid line for the item’s row
grid-column Shorthand for grid-column-start / grid-column-end
grid-row Shorthand for grid-row-start / grid-row-end
grid-area Shorthand to assign both row and column start/end or to place by
named areas
justify-self Aligns item horizontally inside its grid cell (start, end, center, stretch)
align-self Aligns item vertically inside its grid cell (start, end, center, stretch)
Basic
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
.grid-container {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;
gap: 10px;
}
grid-template-columns
grid-template-rows
grid-template-columns: 1fr 2fr; /* 1 fraction and 2 fractions of the space */
grid-template-rows: auto auto; /* height adjusts to content */
grid-column, grid-row
Allows a grid item to span multiple columns or rows.
.item1 {
grid-column: 1 / 3; /* span from column line 1 to 3 */
grid-row: 1 / 2;
}
grid-template-areas
.grid-container {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
}
CSS Position
It works in combination with the top, right, bottom, and left properties
1. static (default)
The default position for all elements.
Elements are positioned according to the normal flow of the document.
top, right, bottom, left have no effect.
2.relative
The element is positioned relative to its normal position.
top, right, bottom, and left move it relative to where it would normally be.
.element {
position: relative;
top: 10px; /* moves the element 10px down */
}
absolute
The element is removed from the normal flow and positioned relative to
the nearest positioned ancestor (not static).
If no such ancestor exists, it's positioned relative to the <html> (viewport).
4. Fixed
The element is positioned relative to the viewport.
It stays in the same place even when the page is scrolled.
5. Sticky
The element toggles between relative and fixed depending on the scroll
position.
It sticks to a defined position (e.g. top) until a scroll boundary is reached.
sticky is a hybrid of relative and fixed. It behaves like relative until a certain scroll position is
reached, then it behaves like fixed.
Think of it like this:
Before scrolling: the element behaves normally in the document flow (like relative).
When scrolling and it reaches the defined position (e.g., top: 0), it becomes stuck in
place — like fixed.
It unsticks when its containing block is scrolled past.
Media Query
A media query is a CSS technique used to apply styles based on the characteristics of the
device or screen displaying the content, such as its width, height, resolution, or orientation.
This is a core concept in responsive web design, which aims to make websites look good and
function well across all devices — from phones to desktops.
Device Width Range Example Query
Mobile 0–767px @media (max-width: 767px)
Tablet 768–1023px @media (min-width: 768px)
Small Laptop 1024–1279px @media (min-width: 1024px)
Desktop 1280px and above @media (min-width: 1280px)
@media (condition) {
/* CSS rules here */
}
Desktop first
/* Base styles for desktop */
body {
font-size: 20px;
background-color: lightblue;
padding: 40px;
}
/* Tablet (screen width ≤ 1024px) */
@media (max-width: 1024px) {
body {
font-size: 18px;
background-color: lightgray;
padding: 30px;
}
}
/* Mobile (screen width ≤ 768px) */
@media (max-width: 768px) {
body {
font-size: 16px;
background-color: white;
padding: 20px;
}
}
Mobile First
/* Base styles (mobile-first) */
body {
font-size: 16px;
background-color: white;
}
/* Tablets (768px and up) */
@media (min-width: 768px) {
body {
font-size: 18px;
background-color: lightgray;
}
}
/* Desktops (1024px and up) */
@media (min-width: 1024px) {
body {
font-size: 20px;
background-color: lightblue;
}
}
Use relative units (em, %, vw, vh) instead of fixed units like px.
Design mobile-first, then scale up using media queries.
Use flexbox or CSS grid for flexible layouts.
Animations
selector {
animation: name duration timing-function delay iteration-count direction fill-mode;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
Property Description
animation-name Name of @keyframes rule
animation-duration Length of animation (2s, 500ms, etc.)
animation-timing-function Speed curve (ease, linear, ease-in, ease-out)
animation-delay Wait before starting
animation-iteration-count Number of repeats or infinite
animation-direction normal, reverse, alternate, alternate-reverse
Transition property
The transition property in CSS lets you animate changes to CSS properties smoothly over
time—for example, when hovering, focusing, or interacting with an element. It’s simpler and
more lightweight than full CSS animations.
transition: property duration timing-function delay;
.box {
transition: background-color 0.3s ease-in-out;
}
Property What it does Example
transition-property The CSS property to animate transition-property: width;
transition-duration How long the transition takes transition-duration: 0.5s;
transition-timing- Speed curve of the animation transition-timing-function:
function ease;
transition-delay Wait time before animation transition-delay: 0.2s;
starts
Transform
transform: function(value);
transform: translateX(50px) rotate(30deg) scale(1.2);
