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