-
Hajipur, Bihar, 844101
CSS
CSS Basics
CSS Styling Properties
-
CSS Box Model
-
CSS Margin
-
CSS Padding
-
CSS Borders
-
CSS Outline
-
CSS Height/Width
-
CSS Max-width
-
CSS Display
-
CSS Position
-
CSS Z-index
-
CSS Overflow
-
CSS Float
-
CSS Inline-block
-
CSS Align
-
CSS Box Sizing
-
CSS Text
-
CSS Fonts
-
CSS Icons
-
CSS Text Effects
-
CSS Web Fonts
-
CSS Colors
-
CSS Backgrounds
-
CSS Color Keywords
-
CSS Gradients
-
CSS Shadows
-
CSS Links
-
CSS Lists
-
CSS Tables
CSS Advanced Selectors & Features
-
CSS Combinators
-
CSS Pseudo-classes
-
CSS Pseudo-elements
-
CSS Attribute Selectors
-
CSS Specificity
-
CSS !important
-
CSS Units
-
CSS Variables
-
CSS @property
-
CSS Math Functions
CSS Media and Image Styling
-
CSS Image Styling
-
CSS Image Centering
-
CSS Image Filters
-
CSS Image Shapes
-
CSS object-fit
-
CSS object-position
-
CSS Masking
CSS Layout Techniques
-
CSS Website Layout
-
CSS Navigation Bar
-
CSS Dropdowns
-
CSS Image Gallery
-
CSS Counters
-
CSS Pagination
-
CSS Multiple Columns
-
CSS User Interface
CSS Flexbox
CSS Grid
CSS Responsive Design (RWD)
CSS Web Fonts
🔹 What Are Web Fonts?
Web Fonts allow websites to use custom fonts that aren't installed on the user's system. These fonts are loaded via the internet using @font-face or font services like Google Fonts.
🔸 Why Use Web Fonts?
-
To ensure consistent typography across all devices
-
To use creative and branded fonts
-
To improve design flexibility without relying on system fonts
🔸 1. Using Google Fonts (Most Popular)
Step 1: Include the Font in <head>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
Step 2: Use in CSS
body {
font-family: 'Roboto', sans-serif;
}
🟢 The browser will download Roboto and apply it.
🔸 2. Using @font-face (Custom Fonts)
Example:
@font-face {
font-family: 'MyFont';
src: url('fonts/MyFont.woff2') format('woff2'),
url('fonts/MyFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
p {
font-family: 'MyFont', sans-serif;
}
🟢 Place the .woff or .woff2 files in the specified folder.
🔸 Font Formats
| Format | Description |
|---|---|
.woff2 |
Best performance and compression |
.woff |
Widely supported fallback |
.ttf |
Older, larger font format |
.eot |
Used mainly by older IE browsers |
.svg |
Scalable font for legacy devices |
🔸 Styling Web Fonts
You can style web fonts using:
font-weight: 400; /* Normal */
font-weight: 700; /* Bold */
font-style: italic;
🔸 Best Practices
-
Always include a fallback font.
-
Use only necessary font weights/styles.
-
Host fonts locally for better performance (if needed).
-
Preload critical fonts for fast loading.
Practice Questions
Q1. Apply Google Font Roboto to the whole body.
Q2. Import Google Font Poppins and apply it to headings.
Q3. Use @font-face to load a custom font named MyFont.
Q4. Create a class .fancy using Google Font Dancing Script.
Q5. Use font-weight: 600 for semi-bold text.
Q6. Fallback to Arial if web font fails.
Q7. Use two different fonts for headings and paragraphs.
Q8. Load a .woff2 font and apply it to a .title class.
Q9. Add italic styling to a web font.
Q10. Limit font requests to just one style and one weight.
CSS
CSS Basics
CSS Styling Properties
-
CSS Box Model
-
CSS Margin
-
CSS Padding
-
CSS Borders
-
CSS Outline
-
CSS Height/Width
-
CSS Max-width
-
CSS Display
-
CSS Position
-
CSS Z-index
-
CSS Overflow
-
CSS Float
-
CSS Inline-block
-
CSS Align
-
CSS Box Sizing
-
CSS Text
-
CSS Fonts
-
CSS Icons
-
CSS Text Effects
-
CSS Web Fonts
-
CSS Colors
-
CSS Backgrounds
-
CSS Color Keywords
-
CSS Gradients
-
CSS Shadows
-
CSS Links
-
CSS Lists
-
CSS Tables
CSS Advanced Selectors & Features
-
CSS Combinators
-
CSS Pseudo-classes
-
CSS Pseudo-elements
-
CSS Attribute Selectors
-
CSS Specificity
-
CSS !important
-
CSS Units
-
CSS Variables
-
CSS @property
-
CSS Math Functions
CSS Media and Image Styling
-
CSS Image Styling
-
CSS Image Centering
-
CSS Image Filters
-
CSS Image Shapes
-
CSS object-fit
-
CSS object-position
-
CSS Masking
CSS Layout Techniques
-
CSS Website Layout
-
CSS Navigation Bar
-
CSS Dropdowns
-
CSS Image Gallery
-
CSS Counters
-
CSS Pagination
-
CSS Multiple Columns
-
CSS User Interface
CSS Flexbox
CSS Grid
CSS Responsive Design (RWD)
