Style and lay out web pages — selectors, box model, flexbox, grid and responsive design — written by Aivasu Tech Institute's mentors. Free to read, structured to actually help you learn.
CSS notes by Aivasu Tech Institute cover 283 topics — from css home to 12-column layout — each explained with short definitions, syntax and runnable code examples. They are 100% free, need no signup, and work as quick revision for college exams, CSS interviews and Aivasu Tech Institute's mentor-led CSS course in Pitampura, Delhi.
No notes found. Try a different search term, or browse all CSS notes.
CSS is what turns plain HTML into polished, responsive designs, and no frontend role exists without it. This free track covers selectors, layout, flexbox, grid, animation and responsive design.
Cascading Style Sheets control how web pages look — colours, spacing, fonts and layout. Learn what CSS does, how it pairs with HTML, and why the cascade is the key idea.
CSS syntax is selector-plus-declarations, with properties and values in braces. Mastering this small grammar lets you style anything on a page.
Selectors target which elements a rule applies to — by tag, class, id or relationship. Choosing precise selectors keeps stylesheets maintainable.
Grouping selectors shares one rule across several elements with commas, cutting repetition. It keeps related styles in one obvious place.
CSS reaches a page in three ways: inline styles, a style block, or an external stylesheet. External stylesheets are the professional standard.
Internal CSS lives in a style tag in the page head, useful for single pages. Learn when this is the right tool versus a shared stylesheet.
Inline styles apply directly to one element through its style attribute. Powerful in emergencies, but they break the separation of concerns.
Multiple stylesheets combine through layers of cascade rules, useful for splitting large projects. Understanding load order prevents surprises.
Comments explain sections of CSS and are ignored by browsers. Organised stylesheets document their intent like code does.
Browsers silently ignore invalid CSS rather than crashing, which makes spotting mistakes harder. Learn common syntax errors and how to find them.
CSS accepts colours by name, hex, RGB and HSL, giving designers full control. Colour choice sets the mood of an entire interface.
RGB defines colours by red, green and blue channels, with RGBA adding transparency. It is the colour model of every screen.
Hex codes like #ff6347 are the most common colour format in CSS, and hexa adds an alpha channel. They pack colour into one short string.
HSL describes colours as hue, saturation and lightness — often easier to tweak by hand. HSLA adds transparency to the model.
Backgrounds fill elements with colour or images, behind all content. This topic covers the properties every page design leans on.
Background images decorate elements without changing document flow. Positioning and sizing them well is a core layout skill.
Background repeat controls how images tile — horizontally, vertically or not at all. It is the property behind wallpaper-style patterns.
Background attachment fixes an image in place or lets it scroll with the page. It creates the classic parallax-style effect.
The background shorthand packs all background properties into one declaration. It makes stylesheets shorter without losing clarity.
Borders frame elements with style, width and colour on each side. They add structure and visual weight to cards and buttons.
Border width controls how thick the frame around an element is, per side if needed. Subtle widths read as polish; thick ones as emphasis.
Border colour tints the frame around elements, independently of the border style. It separates sections without extra markup.
CSS lets you style each border side separately — top, right, bottom, left. Asymmetric borders create arrows and interesting shapes.
The border shorthand sets width, style and colour in one declaration. It is the everyday way borders are written in real code.
Rounded corners soften rectangular elements with border-radius, from slight rounding to full circles. They are a signature of modern UI.
Margins create space outside an element, separating it from neighbours. They are half of the spacing model every layout uses.
Adjacent vertical margins collapse into one — the classic CSS surprise. Understanding it explains layouts that seem too tight.
Padding creates space inside an element between its content and border. It is what makes cards and buttons feel comfortable.
box-sizing decides whether padding counts inside an element's width. Switching to border-box simplifies sizing calculations hugely.
Height and width set an element's dimensions, in pixels, percentages or viewport units. Sizing choices ripple through every layout.
min-width, max-width and their height twins keep elements flexible within limits. They are the backbone of responsive design.
The box model — content, padding, border, margin — explains the space every element occupies. It is the first concept to master in CSS.
Outlines draw a line around elements without affecting layout, used for focus rings. They keep keyboard navigation visible and accessible.
Outline width sets the thickness of the focus ring around elements. Strong focus indicators are an accessibility essential.
Outline colour lets focus indicators contrast against any background. Choosing visible colours helps keyboard users navigate.
The outline shorthand sets width, style and colour in one line. It is how focus states are styled in production stylesheets.
Outline offset pushes the outline away from the element's edge. It separates the focus ring from the border for clarity.
Text properties control how written content looks — colour, alignment, decoration. Typography is most of what users read on the web.
Text alignment positions content left, right, centre or justified within its box. It sets the rhythm of headings and paragraphs.
Text decoration adds or removes underlines, overlines and strike-throughs. It is how links get styled and strikethrough prices drawn.
Decoration styles vary the kind of line under text — solid, wavy, dashed. Subtle variations personalise links and highlights.
Text transformation changes case in CSS — uppercase, lowercase, capitalise. It styles text without touching the underlying content.
Text spacing adjusts indentation, letter spacing, word spacing and line height. These details decide whether paragraphs feel cramped or readable.
Text shadow adds depth behind letters with offsets and blur. It is a quick way to lift headings off flat backgrounds.
Fonts are the personality of a site, and CSS controls family, size and weight. This topic covers the properties every design uses.
Web-safe fonts are available on practically every device, making them the zero-risk choice. They guarantee consistency without loading files.
Font fallback stacks list preferred fonts with backups, so text never breaks. A good stack survives missing fonts gracefully.
Font style switches between normal and italic text, often with oblique variants. It adds emphasis without changing weight.
Font size scales text from tiny captions to huge headings, in many units. Accessible sizing starts at 16px and scales from there.
Google Fonts offers hundreds of free web fonts through one link tag. It is how most modern sites get distinctive typography.
Font pairing combines a heading font with a body font for contrast. Good pairings make layouts look professionally designed.
The font shorthand sets style, weight, size and family in one declaration. It is compact but has a strict required order.
Icons guide users through interfaces, and CSS integrates icon libraries cleanly. Learn to size, colour and align icons like text.
Bootstrap Icons provide a free icon set loaded by class name. They integrate instantly with any project using the Bootstrap ecosystem.
Google Material Icons deliver thousands of icons through a single stylesheet. The class-based API makes them effortless to use.
Links carry navigation, and styling their states — hover, visited, active — guides users. This topic covers the full link-state toolbox.
Links styled as buttons blur the line between navigation and action. Learn to turn anchors into polished call-to-action elements.
Lists structure content as bullets or numbers, and CSS restyles their markers and layout. Custom list design powers menus and step lists.
Tables present data in rows and columns, and CSS makes them readable and responsive. Borders, padding and zebra stripes transform plain tables.
Table sizing controls column widths and table dimensions. Fixed layouts keep columns predictable across content lengths.
Table alignment positions content within cells and the table itself. Numeric columns usually want right alignment.
Table styling recipes — striped rows, hover effects, dividers — turn data grids into polished reports. These patterns appear in every dashboard.
Responsive tables adapt to narrow screens with horizontal scrolling or stacking. On mobile, a bad table breaks an otherwise fine page.
The display property decides an element's fundamental behaviour — block, inline, flex, grid. It is the single most powerful CSS property.
visibility hides elements while keeping their space, unlike display:none. The distinction matters for layout and accessibility.
max-width caps how wide an element can grow, keeping text lines readable. It is the difference between fluid and uncontrolled layouts.
Positioning places elements relative to their normal flow — static, relative, absolute, fixed, sticky. It unlocks dropdowns, modals and pinned headers.
Fixed and absolute positioning take elements out of the flow entirely. Fixed pins to the viewport; absolute pins to an ancestor.
Sticky positioning glues an element until its container scrolls past. It powers persistent headers and section labels.
Top, right, bottom and left offsets nudge positioned elements from their anchor. They are how exact placement gets fine-tuned.
z-index stacks overlapping elements in layers, controlling what sits on top. Stacking contexts make this one of CSS's trickiest areas.
Overflow handles content that spills beyond its box — scroll it, clip it or show it. It is essential for fixed-height containers.
Overflow can be controlled per axis, so a table scrolls horizontally while content flows vertically. Fine-grained control fixes awkward scrolling.
Float wraps text around images, the original layout tool. Modern layouts prefer flexbox and grid, but float still handles inline media.
Clear and clearfix stop elements from wrapping around floats. They are the classic fixes for collapsed float containers.
Float examples show real layouts — image galleries, sidebars, multi-column text. They demonstrate where float still earns its place.
Inline-block combines inline flow with block sizing, useful for navigation and card rows. It predates flexbox but still appears in layouts.
Aligning elements centres content horizontally and vertically, the eternal CSS quest. This topic covers the standard techniques.
Horizontal alignment centres block elements with margins or flexbox. Centring a box is the first alignment challenge everyone meets.
Vertical alignment positions inline content relative to its line, and flexbox handles block-level centring. Both approaches matter daily.
Combinators link selectors by relationship — descendant, child, sibling. They target elements precisely without adding classes.
Pseudo-classes style element states — hover, focus, first-child. They enable interaction styling without JavaScript.
Interactive pseudo-classes react to user actions like hovering and focusing. They are what makes buttons and links feel alive.
Structural pseudo-classes select elements by position, like nth-child and first-of-type. They power zebra stripes and layout patterns.
Pseudo-elements style parts of elements that do not exist in markup — first lines, generated content. They add polish without extra HTML.
Text pseudo-elements target the first letter or line of a block, creating drop caps and editorial flourishes. They are pure CSS typography.
The content property generates text inside pseudo-elements, powering icons, counters and labels. It is CSS generating content that was never in the HTML.
Opacity makes elements partially transparent, from subtle overlays to ghost buttons. It affects the whole element including children.
Navigation bars are lists of links styled into horizontal or vertical menus. They are the skeleton of every website's header.
Vertical navbars stack links in a sidebar, common in dashboards and documentation. Full-height styling makes them feel native.
Horizontal navbars line links across the top, the standard website header. Sticky positioning keeps them visible while scrolling.
Dropdown menus reveal options on hover or click, using nested lists and positioning. They pack many links into a compact header.
Advanced dropdowns add images, multi-column panels and nested submenus. They are the mega-menu pattern of e-commerce sites.
Image galleries arrange photos in responsive grids with captions and lightboxes. They are a portfolio staple for every developer.
Image sprites combine many icons into one file, saving HTTP requests. Historically vital, they still appear in legacy codebases.
Attribute selectors target elements by their attributes and values, like inputs of a certain type. They style forms and data attributes cleanly.
Advanced attribute selectors match substrings and patterns in attribute values. They unlock powerful styling without extra classes.
Forms carry the web's input, and styling them well drives conversions. This topic covers layout, spacing and focus states for every field.
Styling inputs unifies text fields, dropdowns and buttons into one design language. Consistent forms feel trustworthy and professional.
Focus states and icons inside inputs signal interactivity and purpose. Visible focus rings are also an accessibility requirement.
Textareas, selects and fieldset groups each need their own styling approach. Completing the form toolkit makes any input flow designable.
CSS counters number elements automatically, from headings to ordered lists. They replace manual numbering that breaks when content moves.
Nested counters number sections hierarchically like 1.1, 1.2 — perfect for documents. They manage numbering that would be tedious by hand.
CSS units measure everything — px, %, em, rem, vw — each with a purpose. Choosing the right units makes layouts scale correctly.
Absolute units like pixels stay fixed regardless of screen or settings. They are predictable, though less accessible than relative units.
Relative units like em and rem scale with font size, building responsive type. Rem-based sizing is the modern accessibility standard.
Some CSS properties inherit from parents, which is why setting body font cascades everywhere. Understanding inheritance halves your stylesheet.
Specificity decides which rule wins when several match the same element. It is the scoreboard behind every CSS conflict.
The specificity hierarchy ranks inline styles, IDs, classes and tags. Knowing the ranking explains almost every why-is-my-style-not-applying moment.
!important overrides normal specificity rules, a sledgehammer best used rarely. Overusing it paints stylesheets into corners.
CSS math functions — calc, min, max, clamp — compute values at runtime. clamp() alone powers fluid typography with one line.
CSS optimisation shrinks files and speeds page loads with minification and unused-style removal. Fast CSS is a page-speed requirement.
Accessible CSS keeps text readable, focus visible and motion respectful of user settings. Design that includes everyone also converts better.
Website layout composes header, content, sidebar and footer into a page skeleton. This topic covers the classic structures every site builds on.
Rounded corners on cards, buttons and images soften interfaces across the board. border-radius values map from slight rounding to pills.
Border images use an image as the border of an element, creating ornate frames. It is a niche technique for distinctive designs.
CSS3 backgrounds add multiple layers, sizing and positioning control to elements. They supersede the old single-background model.
Background size scales images with cover, contain or exact dimensions. cover fills an area while contain shows the whole image.
Background origin anchors the image to the border box, padding box or content box. It fine-tunes where backgrounds start.
Background clip crops the background to its box — useful for text filled with images. It powers gradient text effects.
CSS3 colour features include RGBA, HSL and opacity for richer palettes. Modern colour tools replaced the old hex-only world.
Colour keywords name colours directly, including special values like transparent and currentColor. currentColor keeps borders and icons in sync.
Gradients blend colours smoothly without image files, from buttons to hero sections. They are the modern replacement for background images.
Radial gradients radiate colour from a centre point, creating glows and spotlights. They add depth that flat colours cannot.
Conic gradients sweep colour around a centre, producing pie charts and colour wheels. They complete the gradient family in pure CSS.
Shadows lift elements off the page with offset, blur and spread. Card and button shadows are the depth cues of flat design.
Box shadow draws one or more shadows around an element's box, including inset effects. Layered shadows create realistic elevation.
Text effects — shadows, overflow, wrapping — style text beyond colour and size. They handle long content and add visual punch.
Custom fonts load any typeface through @font-face, freeing designs from system fonts. It is how brands keep typography consistent everywhere.
2D transforms move, rotate, scale and skew elements without affecting layout. They power hover animations and card flips.
The scale transform resizes elements smoothly, the basis of zoom and grow-on-hover effects. Transforms animate cheaply compared to layout changes.
Skew and matrix transforms distort elements for slanted designs. The matrix form generalises every 2D transform into one function.
3D transforms add perspective, rotation and depth to elements. They create card flips, cubes and parallax scenes in CSS.
Perspective gives 3D transforms their depth by defining the viewer's distance. Without it, 3D rotations look flat.
Transitions animate property changes smoothly when states switch, like hover colour shifts. They are the foundation of micro-interactions.
Transition timing curves — ease, linear, cubic-bezier — shape how animations accelerate. The right curve makes motion feel natural.
Keyframe animations run multi-step effects continuously or on load. They bring loaders, spinners and hero motion to life.
Animation timing controls duration, delay and iteration of keyframes. It is the schedule behind every animation you write.
Animation properties manage direction, fill mode and play state. Fill mode decides what the element looks like before and after.
Tooltips reveal extra information on hover with pure CSS. They are the lightweight pattern behind hints and labels.
Tooltip arrows point the bubble at its target using borders or transforms. Small details like arrows sell the polish.
Image styling covers rounded corners, borders, shadows and responsiveness. It is the finishing layer on any visual site.
Image effects like filters, grayscale and blur transform photos with CSS. Hover effects on gallery images come from these properties.
Hover overlays place captions and buttons over images when hovered. They are the standard pattern for portfolio and product cards.
CSS image modals open a full-size overlay from a thumbnail using the :target pseudo-class. It builds lightboxes without JavaScript.
Centering images horizontally and vertically covers block margins, flexbox and transforms. Every layout eventually needs this solved.
Image filters apply blurs, brightness and colour effects like a photo editor. filter is a one-line photo manipulation toolkit.
Image shapes wrap text around circles and polygons using shape-outside. It creates magazine-style layouts in plain CSS.
object-fit crops or fits replaced content like images into their box. cover and contain solve image distortion permanently.
object-position chooses which part of an image stays visible after cropping. It is how you keep faces centred in avatar crops.
Masking reveals parts of an element through gradients, images or SVG. It is the advanced technique behind creative image cutouts.
Gradient masks fade elements into transparency smoothly. They produce the soft edge effects seen on modern hero sections.
SVG masks use vector shapes to cut precise transparency. They bring complex, scalable masking to elements.
Buttons are the web's calls to action, and their styling decides clickability. This topic covers size, colour, borders and states.
Hover effects give buttons feedback — colour shifts, shadows, transforms. They are the micro-interactions that make interfaces feel responsive.
Button groups join related actions into a single segmented control. They appear in toolbars, filters and pagination.
Pagination styles the page-number navigation of listings and blogs. Clear active states make browsing long content effortless.
Pagination style variations — circles, arrows, numbered bars — fit different design languages. Small variations change the whole feel.
Multiple columns flow text into newspaper-style columns automatically. They format long articles and documentation beautifully.
Column rules draw divider lines between multi-column text. They separate columns visually without extra markup.
CSS user interface properties style resizing, outlines and box sizing behaviour. They are the platform-level controls of CSS.
CSS variables store reusable values like colours and spacing in one place. Changing a theme becomes a one-line edit.
Overriding variables scopes theme changes to sections or components. It is how dark mode and white-labeling work.
JavaScript can read and update CSS variables at runtime. This bridge powers live theming and user-driven customisation.
Redefining variables inside media queries makes whole layouts adapt by changing a few values. It is responsive theming without rewriting rules.
The @property rule registers custom properties with types and defaults. Typed variables enable animatable custom properties.
Box sizing switches the width model between content-box and border-box. border-box is the modern default that makes sizing sane.
Media queries apply styles based on screen size, orientation and capabilities. They are the engine of responsive web design.
Media query examples show real breakpoints for phones, tablets and desktops. They are the patterns you adapt to your own layouts.
Flexbox is the one-dimensional layout system that aligns items in rows or columns. It replaced floats for almost every alignment job.
The flex container turns children into flexible items with main and cross axes. Understanding the axes is the whole trick to flexbox.
justify-content distributes items along the main axis — start, centre, space-between. It is the property that centres content instantly.
align-items positions items along the cross axis, controlling vertical alignment in rows. It ends the old vertical-centring struggle.
Flex items can grow, shrink and reorder individually. Their flexibility is what makes layouts adapt without media queries.
Responsive flexbox combines wrapping and flexible sizing so layouts adapt naturally. One flex container can replace several breakpoints.
CSS Grid is the two-dimensional layout system for rows and columns together. It makes complex page layouts simple and explicit.
The grid container defines columns and rows with track templates. Setting up the grid is declaring the layout like a blueprint.
Grid tracks are the rows and columns you define, with fr units sharing space proportionally. fr-based grids scale beautifully.
Grid gaps space rows and columns consistently without margin hacks. They keep grids clean even as content changes.
Grid alignment places the whole grid or individual items within their areas. It controls both axes with one property each.
Grid items span multiple rows and columns using line numbers or named areas. Spanning is what turns a grid into a page layout.
Named grid areas label regions like header and sidebar for readability. They make layouts self-documenting.
Aligning individual grid items overrides container defaults per item. It fine-tunes placement inside a cell.
Grid item order changes visual position without touching the HTML. It separates content order from display order.
The 12-column grid is the classic layout framework structure, from Bootstrap to design systems. It is the grid pattern behind most websites.
@supports applies styles only when a feature is supported, enabling progressive enhancement. It future-proofs modern CSS.
Responsive web design adapts layouts to every screen, from phones to ultrawide monitors. It is a baseline requirement, not an extra.
The viewport meta tag tells mobile browsers how to scale a page. Without it, responsive layouts never begin.
The responsive grid view starts layouts at full width and scales columns down at breakpoints. It is the classic 12-column responsive plan.
Responsive media queries add breakpoints where layouts need to change. Choosing the right breakpoints is the design judgement.
Responsive images serve appropriately sized files with srcset and sizes. They cut mobile data usage while keeping sharp visuals.
Responsive videos scale with their container using aspect-ratio tricks. Embedded video that overflows its card is a classic bug.
Responsive frameworks like Bootstrap ship grids and components prebuilt. They trade flexibility for speed on standard projects.
Responsive templates provide ready-made page structures to learn from and reuse. They are the fastest route to a working layout.
Linking a separate .css file so styles are reused across pages.
Matching attribute values by prefix, suffix and substring.
States driven by the user: hover, active, focus and visited.
Position in the tree: nth-child, first-of-type and only-child.
Targeting ::first-line and ::first-letter for typographic control.
Generating content with ::before and ::after.
Defining colour by red, green and blue channels.
Six-digit hexadecimal colour notation and its shorthand.
Colour by hue, saturation and lightness for easier theming.
Filling an element's background with a solid colour.
Layering several background images on one element.
The line styles available: solid, dashed, dotted and more.
How border-radius shapes each corner of a box.
Replacing a plain border with an image using border-image.
Drawing a line outside the border without affecting layout.
The space outside an element that separates it from neighbours.
The space inside an element between content and border.
How box-sizing changes whether padding adds to width.
Choosing between content-box and border-box sizing.
Setting an element's content dimensions.
Constraining size with min-width, max-width and their height twins.
Keeping elements within a viewport and the classic max-width trick.
Setting the colour of text content.
Modern effects such as outline, wrap control and overflow.
Choosing a typeface and the font stack concept.
Typefaces reliably available across systems.
Loading web fonts from an external service.
Self-hosting fonts with @font-face.
Colouring and decorating link states.
Controlling markers, position and spacing of lists.
Drawing borders and collapsing them in tables.
Making wide tables usable on small screens.
How display controls layout: block, inline, flex, grid and none.
The difference between visibility:hidden and display:none.
Default flow versus offsetting an element from its normal spot.
Removing an element from flow and anchoring it to the viewport or a parent.
Using top, right, bottom and left to place positioned elements.
Controlling stacking order of overlapping positioned elements.
What happens when content exceeds its box.
The legacy layout method that wraps text around elements.
Stopping float wrap and containing floated children.
Boxes that flow like text but accept width and height.
Horizontally centring blocks, flex and grid items.
Using an icon font library for scalable glyphs.
Bootstrap's standalone icon set.
Material Symbols and Icons from Google Fonts.
The building blocks of a navigation bar.
Revealing a menu on hover or focus.
Showing contextual text on hover with CSS.
Laying out a grid of thumbnails.
Combining images into one file to cut requests.
Borders, radius and shadows on images.
A click-to-enlarge lightbox built with CSS.
Centring images horizontally and vertically.
Grayscale, blur and brightness with the filter property.
Non-rectangular images with clip-path.
How an image fills its box: cover, contain and fill.
Which part of an image stays in view.
Transparency and masks using images.
Fading edges with gradient masks.
Complex shapes via SVG masks.
Making elements and backgrounds transparent.
Designing form containers and fieldsets.
Highlighting the active field and adding icons.
Auto-numbering content with CSS counters.
Which properties children receive from parents.
How the browser resolves conflicting rules.
Overriding the cascade and why to use it sparingly.
calc, min, max and clamp for dynamic values.
Composing a full page from the layout tools above.
Moving and spinning elements in 2D.
Distorting elements and the underlying matrix.
Depth, perspective and rotation on three axes.
Animating a change between two states.
Multi-step motion with @keyframes.
Building accessible, good-looking buttons.
Page navigation controls.
Flowing text into newspaper-style columns.
Resizing, appearance and caret styling.
Reading custom properties for reusable values.
Responsive tokens with custom properties.
Typed custom properties with defaults and animation.
Feature-detection blocks for progressive enhancement.
Applying styles based on viewport and device features.
Distributing items along the main axis.
Positioning items on the cross axis.
Areas and line names for readable layouts.
A responsive column system with grid.
Join Aivasu Tech Institute's CSS course — live mentorship, hands-on projects, and 100% placement support in Delhi NCR.
Enroll Now — Free Demo Available✳ Common questions
What students search before reading CSS notes.