CSS - Cascading Style Sheets
• used to control how HTML elements are displayed on a
webpage.
• Inline CSS → highest priority
• Internal CSS → medium priority
• External CSS → lowest priority
• Browser default styles → only if no CSS is applied
• Syntax -> selectors {
property: value;
}
• command line : /* */
Selectors
• selectors are the heart of CSS because they tell the
browser which element(s) to style.- What is CSS?
– Simple Selector (Element, Id, Class, Universal,
Grouping)
– Combinator Selector (Descendent, Child, Adjacent
Sibling, General Sibling)
– Pseudo Class Selector (link, visited, hover, active,
focus):
– Pseudo Element Selector (first-letter, first-line,after,
before, marker, selection)::
– Attribute Selector : only attribute, att = value,
att ~ = value, att |= value, att ^= value, att $= value,
att *= value
Units
• Absolute - fixed for all viewport, don’t change
depending on screen size or device.
– cm, mm, in, pc, pt, px
• Relative - can change the view for all viewport,
responsive
– em, rem, %
• em - multiple the parent font-size
• rem - multiple the root(html) font-size
Text
• text-alignment
• text-direction
• text-decoration
• text-align-last
• text-transform
• spacing
– text-intent, letter-spacing, line-hight, word-
spacing, text-shadow
Box Model
• In CSS, every element is treated as a
rectangular box
• Content
– The actual content of the box (like text, images, or
other elements).
• Padding
– The space between the content and the border
• Border
– The line surrounding the padding and content.
• Margin
– The space outside the border
• +-----------------------------+
• | Margin |
• | +-----------------------+ |
• | | Border | |
• | | +-----------------+ | |
• | | | Padding | | |
• | | | +-----------+ | | |
• | | | | Content | | | |
• | | | +-----------+ | | |
• | | +-----------------+ | |
• | +-----------------------+ |
• +-----------------------------+
Position
• The position property defines how an element
is placed in the document flow and how its
top, right, bottom, left values are applied.
• Static - (default)
• Relative - (top,left,bottom,right)
• Absolute - (depend on parent)
• Fixed - Stays fixed even when the page scrolls.
• Sticky - Acts like relative until a scroll threshold
is met, then behaves like fixed.
• Display & Visibility
• - block, inline, inline-block,flex
• - none, visibility hidden
• - opacity
Day 7
• Positioning
• - static, relative, absolute, fixed, sticky
• - z-index
Day 8
• Flexbox (Part 1)
• - Display flex
• - Main axis & cross axis
• - Justify-content, align-items
Day 9
• Flexbox (Part 2)
• - Flex-wrap, flex-basis, flex-grow, flex-shrink
• - Align-self, align-content
• - Nested flex
Day 10
• CSS Grid (Part 1)
• - Display grid
• - Grid-template-rows & columns
• - Gap, fr units
Day 11
• CSS Grid (Part 2)
• - Grid areas
• - Justify-items, align-items
• - Responsive grids
Day 12
• Units & Measurements
• - px, %, em, rem, vh, vw
• - calc(), min(), max(), clamp()
Day 14
• Transitions & Animations
• - transition-property, duration, timing-function
• - @keyframes
Day 15
• Transformations
• - rotate, scale, skew, translate
• - 2D vs 3D transforms
Day 16
• Media Queries & Responsive Design
• - min-width, max-width
• - Mobile-first design
• - Breakpoints
Day 17
• Advanced CSS Features
• - CSS variables (--var)
• - calc()
• - clamp()
• - Custom properties
Day 18
• CSS Frameworks & Resets
• - Normalize.css
• - Tailwind, Bootstrap intro
• - Pros & cons
Day 19
• Project Styling (Mini Project)
• - Apply Flexbox & Grid
• - Colors & fonts
• - Animations
Day 20
• Revision & Q&A
• - Recap all topics
• - Best practices
• - Final mini project review
