CSS
CheatSheet
TABLE OF CONTENTS
1. Introduction to CSS
What is CSS?
Syntax and Structure
Types of CSS: Inline, Internal, and External
2. CSS Selectors Overview
Selectors
Element Selectors
Class Selectors
ID Selectors
Universal Selector (*)
Attribute Selectors
Pseudo-class Selectors (:hover, :active, etc.)
Pseudo-element Selectors (::before, ::after, etc.)
Grouping Selectors
3. Colors
Named Colors
Hexadecimal Colors
RGB and RGBA
HSL and HSLA
CSS Color Functions (e.g., rgb(), rgba(), hsl(), hsla())
4. Font Family
Font Size
Font Weight and Style
Text Alignment and Decoration
Text Transform (uppercase, lowercase)
Line Height
Letter Spacing
Word Spacing
Text Shadow
Vertical Alignment
5. Box Model
Understanding the Box Model
Margin, Padding, and Border
Box Sizing (content-box, border-box)
Display Property (block, inline, inline-block)
Overflow Property (visible, hidden, auto)
TABLE OF CONTENTS
6. Positioning
Static Positioning
Relative Positioning
Absolute Positioning
Fixed Positioning
Sticky Positioning
Z-Index
7. Flexbox
Introduction to Flexbox
Flex Container
Flex Items
Justify Content
Align Items
Align Self
Flex Direction
Flex Wrap
Flex Grow, Shrink, and Basis
Ordering Items
8. Grid Layout
Introduction to CSS Grid
Grid Container and Items
Grid Template Columns and Rows
Grid Gaps
Grid Areas
Justify Items, Align Items, and Place Items
Grid Template Areas
Auto-placement in Grid
9. Responsive Design
Media Queries
Viewport Units (vw, vh, vmin, vmax)
Flexbox in Responsive Design
CSS Grid in Responsive Design
Mobile-first Design
10. Transitions and Animations
CSS Transitions
Transition Properties (transition-duration, transition-timing-function)
CSS Animations (keyframes, animation-name, animation-duration)
Animation Timing Functions (ease, linear, etc.)
TABLE OF CONTENTS
11. Backgrounds and Borders
Background Images and Gradients
Background Position and Size
Border Styles and Radius
Box Shadows
12. Lists and Tables
Styling Lists (unordered, ordered)
Table Styling (border, padding, etc.)
Table Layout and Borders
Styling Table Cells and Headers
13. Typography
Web Fonts (e.g., Google Fonts)
Font-Weight and Font-Family Usage
Text Decoration (underline, strikethrough)
Font Sizing (rem, em, px, etc.)
Line Height and Letter Spacing Adjustments
14. CSS Variables
Introduction to CSS Variables (Custom Properties)
Declaring and Using Variables
Scoped Variables
Benefits of Using Variables
15. Advanced CSS
CSS Shapes
Clip-path Property
CSS Filters
Object Fit and Object Position
CSS Transforms (rotate, scale, translate, etc.)
16. CSS Best Practices
Naming Conventions (BEM, OOCSS)
Using CSS Preprocessors (Sass, LESS)
Modular and Scalable CSS Architecture
Performance Considerations
17. CSS Frameworks and Libraries
Overview of Popular CSS Frameworks (Bootstrap, Tailwind CSS, etc.)
When and How to Use Frameworks
TABLE OF CONTENTS
18. CSS in Practice
Building Layouts (Header, Footer, Sidebar)
Navigation Menus
Forms and Input Elements Styling
Buttons and Icons
19. Tools and Resources
CSS Validators and Tools
CSS Code Generators
Useful CSS Libraries and Plugins
20. Appendix
Quick Reference for Common CSS Properties
Browser Compatibility Information
Resources for Further Learning (Books, Courses, Websites)
1. INTRODUCTION TO CSS:
What is CSS?
CSS (Cascading Style Sheets) is a style sheet language used for describing
the presentation of a document written in HTML or XML. It controls the
layout, design, and appearance of web pages. CSS enables web designers
and developers to style elements such as fonts, colors, margins, borders,
spacing, and positioning, providing a clean separation between structure
(HTML) and presentation (CSS).
Key Features of CSS:
Separation of Content and Style: CSS allows you to manage the content of a
website (HTML) separately from its design, making the site more
maintainable and easier to update.
Styling Flexibility: CSS offers a wide variety of styling options, including text
formatting, layout management, animations, and much more.
Cross-browser Compatibility: Modern browsers can render CSS styles
consistently, although some older browsers may need specific adjustments.
Syntax and Structure
CSS uses a specific syntax and structure that is easy to understand. The basic
CSS rule consists of two main parts: the selector and the declaration block.
Selector: The selector targets the HTML element(s) you want to style (e.g., p,
.class, #id).
Declaration Block: The declaration block contains one or more property-
value pairs enclosed in curly braces {}.
Here’s the general structure:
Example:
1. INTRODUCTION TO CSS:
In above example:
The selector is p, targeting all <p> (paragraph) elements.
The declaration block contains two properties: color and font-size, with
corresponding values blue and 16px.
Types of CSS: Inline, Internal, and External
CSS can be implemented in three different ways: Inline CSS, Internal CSS,
and External CSS. Each method has its use cases and benefits.
1. Inline CSS:
Inline CSS is used to style a specific element directly within the HTML
element’s style attribute.
Example:
Pros:
Quick styling for single elements.
No need for external files.
Cons:
Difficult to manage and maintain.
Does not separate structure from presentation.
2. Internal CSS:
Internal CSS is written within the <style> tag in the <head> section of an
HTML document.
Example:
Pros:
Convenient for styling single pages.
Better organization compared to inline CSS.
Cons:
Styles are not reusable across multiple pages.
Can make the HTML file large and hard to maintain.
1. INTRODUCTION TO CSS:
3. External CSS:
External CSS is used when you write the CSS in a separate .css file, and link
that file to your HTML page.
Example:
styles.css:
Pros: Reusable on multiple pages, keeps HTML clean, and faster to load.
Cons: Needs an extra file.
CSS Selectors Overview
CSS selectors are patterns that tell CSS which HTML elements you want to style.
There are different ways to select elements based on their tag, class, or ID.
Element Selector: This targets a specific HTML element (e.g., p for
paragraphs or h1 for headings).
Class Selector: This targets elements with a specific class. You use a . before
the class name (e.g., .class-name).
ID Selector: This targets an element with a specific ID. You use a # before
the ID name (e.g., #id-name).
Example:
2. CSS SELECTORS
CSS selectors are patterns used to select and style HTML elements.
1. Element Selectors
Targets HTML tags (like p, h1, div, etc.).
Example:
This will turn all <p> elements blue.
2. Class Selectors
Targets elements with a specific class name.
Example:
Use it in HTML like:
You can reuse a class for multiple elements.
3. ID Selectors
Targets a unique element with a specific ID.
Example:
2. CSS SELECTORS
Use it in HTML like:
Note: IDs should be unique per page.
4. Universal Selector (*)
Targets all elements on the page.
Example:
Great for applying a reset or default style.
5. Attribute Selectors
Target elements based on attributes.
Example:
You can target any HTML attribute:
2. CSS SELECTORS
6. Pseudo-class Selectors
Style elements based on a state or position.
Example:
Other pseudo-classes: :nth-child(), :focus, :last-child
7. Pseudo-element Selectors
Style parts of elements.
Example:
Add content or style parts of an element without extra HTML.
2. CSS SELECTORS
8. Grouping Selectors
Apply the same style to multiple selectors at once.
Example:
Saves time and keeps code clean.
3. COLORS IN CSS
1. Named Colors
CSS comes with 140+ predefined color names like:
Example:
2. Hexadecimal Colors
Uses a hex code starting with #:
Example:
3. RGB and RGBA
RGB = Red, Green, Blue (0 to 255)
RGBA adds Alpha for transparency (0 to 1)
Example:
4. HSL and HSLA
HSL = Hue, Saturation, Lightness
HSLA adds transparency
Example:
3. COLORS IN CSS
5. CSS Color Functions
You can use built-in functions:
Example:
4. TEXT STYLING IN CSS
1. Font Family
Set the type of font:
Example:
2. Font Size
Control size of text:
Example:
3. Font Weight & Style
Weight: boldness | Style: italic/normal
Example:
4. Text Alignment & Decoration
Align text and add effects:
Example:
5. Text Transform
Change case:
Example:
4. TEXT STYLING IN CSS
6. Line Height
Spacing between lines:
Example:
7. Letter Spacing & Word Spacing
8. Text Shadow
Add shadow to text:
Example:
9. Vertical Alignment
Align text vertically (rarely used on its own):
Example:
5. CSS BOX MODEL
1. Understanding the Box Model
Every HTML element is a box with 4 layers:
Example:
2. Margin, Padding, and Border
Margin: Space outside the element
Padding: Space inside the element, around the content
Border: Line around the element
Example:
3. Box Sizing
Controls how width/height is calculated:
Example:
4. Display Property
Controls how elements behave:
Example:
5. CSS BOX MODEL
5. Overflow Property
What happens when content overflows:
Example:
6. POSITIONING IN CSS
1. Static Positioning
Default. Element follows normal flow.
Example:
2. Relative Positioning
Moves element relative to its original position.
Example:
3. Absolute Positioning
Positions relative to the nearest positioned ancestor.
Example:
4. Fixed Positioning
Stays fixed to the viewport even when scrolling.
Example:
6. POSITIONING IN CSS
5. Sticky Positioning
Acts like relative until it reaches a scroll position, then becomes fixed.
Example:
6. Z-Index
Controls stacking order (which element appears on top).
Example:
7. FLEXBOX (FLEXIBLE BOX LAYOUT)
1. Introduction to Flexbox
Used for creating 1D layouts (row or column).
Example:
2. Flex Container
The parent element with display: flex;.
3. Flex Items
The children inside the flex container.
4. Justify Content
Controls horizontal alignment:
5. Align Items
Controls vertical alignment:
6. Align Self
Aligns individual item:
7. Flex Direction
Direction of items:
7. FLEXBOX (FLEXIBLE BOX LAYOUT)
8. Flex Wrap
Allows items to wrap to next line:
9. Flex Grow, Shrink, and Basis
10. Ordering Items
8. CSS GRID LAYOUT
1. Introduction to Grid
Used for 2D layouts (rows + columns).
2. Grid Container and Items
Parent with display: grid, children are grid items.
3. Grid Template Columns and Rows
Example:
4. Grid Gaps
Space between rows and columns:
5. Grid Areas
Name and place sections:
6. Justify Items, Align Items, Place Items
Example:
8. CSS GRID LAYOUT
7. Grid Template Areas
Example:
8. Auto-placement in Grid
Let the browser automatically place items:
9. RESPONSIVE DESIGN
1. Media Queries
Apply styles based on screen size:
2. Viewport Units
vw: 1% of viewport width
vh: 1% of viewport height
vmin / vmax: smaller/larger of vw or vh
3. Flexbox in Responsive Design
Use flex-wrap, media queries, and direction to adapt layouts.
4. CSS Grid in Responsive Design
Adjust grid-template-columns for different screen sizes.
5. Mobile-first Design
Start with styles for small screens, then use media queries for
larger screens.
10. TRANSITIONS AND ANIMATIONS
1. CSS Transitions
Smooth changes in styles:
2. Transition Properties
Example:
3. CSS Animations (Keyframes)
More complex movement and changes:
4. Animation Timing Functions
Control the speed curve:
11. BACKGROUNDS AND BORDERS
1. Background Images and Gradients
Add image or gradient in background.
2. Background Position and Size
Example:
3. Border Styles and Radius
Example:
4. Box Shadows
Example:
12. LISTS AND TABLES
1. Styling Lists
Example:
2. Table Styling
Example:
3. Table Layout and Borders
Example:
4. Styling Table Cells and Headers
Example:
13. TYPOGRAPHY
1. Web Fonts
Use Google Fonts:
2. Font-Weight and Font-Family
Example:
3. Text Decoration
Example:
4. Font Sizing Units
Example:
5. Line Height and Letter Spacing
Example:
14. CSS VARIABLES
1. Introduction to CSS Variables
Store values and reuse them.
2. Declaring and Using Variables
Example:
3. Scoped Variables
Variables inside a selector are scoped to it only.
4. Benefits
Easy to update.
Clean and reusable code.
Great for theming.
15. ADVANCED CSS
1. CSS Shapes
Create non-rectangular shapes with clip-path.
2. Clip-path Property
Clip elements into custom shapes.
3. CSS Filters
Apply image-like effects:
4. Object Fit and Object Position
Control image sizing inside container.
5. CSS Transforms
Move, rotate, scale elements:
16. CSS BEST PRACTICES
1. Naming Conventions (BEM, OOCSS)
BEM (Block Element Modifier)
Example:
OOCSS (Object-Oriented CSS)
Separate structure and skin for reuse:
2. Using CSS Preprocessors
Sass / LESS allow nesting, variables, mixins, etc.
Example:
3. Modular and Scalable CSS
Break styles into components.
Avoid global styles.
Use clear folder structure (e.g., base/, components/, layouts/).
4. Performance Tips
Minify CSS files.
Combine CSS files to reduce HTTP requests.
Use shorthand properties.
17. CSS FRAMEWORKS AND LIBRARIES
1. Popular Frameworks
Bootstrap – Ready UI components & grid system.
Tailwind CSS – Utility-first approach (e.g., bg-blue-500, text-center).
Foundation – Responsive, accessible components.
2. When to Use Frameworks
Need to build fast.
Reuse UI components.
Consistent styling across large projects.
18. CSS IN PRACTICE
1. Layouts
Structure common areas:
Example:
2. Navigation Menus
Example:
3. Styling Forms
Example:
4. Buttons and Icons
Example:
19. TOOLS AND RESOURCES
1. CSS Validators
Check for errors:
👉 https://jigsaw.w3.org/css-validator/
2. Code Generators
Generate CSS visually:
👉 https://cssgradient.io – Gradient generator
👉 https://neumorphism.io – Soft UI generator
3. Useful Plugins
Easy-to-use CSS tools:
👉 https://animate.style – Animate.css
👉 https://ianlunn.github.io/Hover/ – Hover.css
👉 https://fontawesome.com – Font Awesome Icons
📌 Note:
Tap on any of the links above to directly open the tools in your browser.
These resources will help you write, test, and improve your CSS faster and
more efficiently!
20. APPENDIX
1. Quick Reference
2. Browser Compatibility
Always check support using : https://caniuse.com
3. Learning Resources
Websites: MDN Web Docs, CSS-Tricks, freeCodeCamp
Books: “CSS Secrets” by Lea Verou
Courses: Udemy, Coursera, Frontend Mentor
Was this post helpful ?
Follow Our 2nd Account
Follow For More
Tap Here
