Scribd
Upload
35 views53 pages

Web Developement CSS

CSS: Need for CSS, Basic syntax and structure, Backgrounds, Colors and properties, Manipulating texts, Fonts, borders and boxes, Margins, Padding Lists, CSS2, CSS3, Animations, Tool-Tips, Style images, Variables, Flex Box, Media Queries, Wildcard Selectors (*, ^ and $) in CSS, Working with Gradients, Pseudo Class, Pseudo elements, basic of frameworks like Bootstrap, Responsive web design and Media Query, CSS variables

Uploaded by

rr keshu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
35 views53 pages

Web Developement CSS

CSS: Need for CSS, Basic syntax and structure, Backgrounds, Colors and properties, Manipulating texts, Fonts, borders and boxes, Margins, Padding Lists, CSS2, CSS3, Animations, Tool-Tips, Style images, Variables, Flex Box, Media Queries, Wildcard Selectors (*, ^ and $) in CSS, Working with Gradients, Pseudo Class, Pseudo elements, basic of frameworks like Bootstrap, Responsive web design and Media Query, CSS variables

Uploaded by

rr keshu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

CSS: Need for CSS, Basic syntax and structure, Backgrounds, Colors and properties, Manipulating

texts, Fonts, borders and boxes, Margins, Padding Lists, CSS2, CSS3, Animations, Tool-Tips, Style
images, Variables, Flex Box, Media Queries, Wildcard Selectors (*, ^ and $) in CSS, Working with
Gradients, Pseudo Class, Pseudo elements, basic of frameworks like Bootstrap, Responsive web
design and Media Query, CSS variables

🧾 Introduction to CSS

o CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of HTML
elements on a web page. While HTML provides the structure or content of a webpage, CSS
defines the look and feel—such as colors, fonts, layout, and spacing.
o CSS works by associating rules with HTML elements. These rules define how the content should
appear in terms of:
 Fonts and text styling
 Colors and backgrounds
 Positioning and layout
 Animations and transitions
o The term “Cascading” refers to the priority scheme used to determine which CSS rule applies
when multiple rules could apply to the same element. It allows styles to "cascade" down from
multiple sources, prioritizing inline, internal, and external styles accordingly.

✅ Advantages of CSS
Advantage Description
Separation of Concerns CSS separates content (HTML) from design, making both easier
to manage.
Improved Website One change in the CSS file updates styles across the entire site.
Maintainability
Reduces Code Duplication Common styles are written once and reused across
elements/pages.
Faster Page Loading External CSS files are cached by browsers, reducing load time.
Consistent Design Ensures a uniform look and feel across multiple web pages.
Enhanced Accessibility Styles can be adapted for screen readers, larger fonts, dark
modes, etc.
Supports Responsive Design Media queries help create designs that adapt to all devices.

❌ Disadvantages of CSS
Disadvantage Description
Browser Compatibility Some CSS features behave differently or are unsupported in older
Issues browsers.
Complexity with Large As a project grows, managing styles across many files can become
Projects challenging.
Global Scope by Default Styles apply globally unless carefully scoped, which may lead to
conflicts.
Requires Learning Curve Understanding selectors, specificity, and layout models (Flexbox, Grid)
can be tricky for beginners.
Debugging Difficulties Resolving conflicting styles or finding the source of applied styles can
be time-consuming.

🧾 Types of CSS
CSS can be applied to HTML documents in three main ways:
1. Inline CSS
2. Internal CSS
3. External CSS

1️⃣ Inline CSS


Inline CSS is written directly within an HTML tag using the style attribute. It applies only to that
specific element.
Characteristics:
 It is element-specific, meaning it affects only the tag in which it is written.
 It takes highest precedence in the cascade hierarchy, overriding both internal and external
styles (unless !important is used).
 Commonly used for quick fixes, email templates, or dynamically generated content.
 It mixes style with content, which violates the principle of separation of concerns.
Ideal Scenario:
Useful when you want to apply a unique style to a single element quickly, especially during testing
or debugging.

🧪 Syntax Example:

<p style="color: blue; font-size: 18px;">This is an inline styled paragraph.</p>

✅ Advantages:
Point Description
🔹 Easy and Quick Great for small changes or testing.
🔹 Overrides Other Styles Has highest precedence in the cascade.
🔹 No Need for External Files Everything is inside a single HTML element.

❌ Disadvantages:
Point Description
🔻 Not Reusable You must repeat styles for every element.
🔻 Reduces Readability HTML becomes cluttered and hard to maintain.
🔻 Poor Separation of Mixes structure (HTML) with style (CSS), violating clean coding
Concerns principles.

📌 Use Case:
Quick one-time adjustments, e.g., highlighting a word or debugging.
2️⃣ Internal CSS
Internal CSS is defined inside the <style> tag within the <head> section of an HTML document. The
style rules apply to the entire HTML document.
Characteristics:
 It is suitable for single-page websites or documents.
 It allows centralized control over the styles for a page, improving organization compared to
inline CSS.
 Since it's embedded within the HTML file, it increases the size of the page, which may affect
load time.
 Internal CSS cannot be reused across multiple HTML pages without duplication.
 It has medium precedence: higher than external styles, lower than inline styles.
Ideal Scenario:
Best suited for simple projects or prototypes where all styling is contained in one file, and external
file linking is unnecessary.

🧪 Syntax Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f2f2f2;
}
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Internal CSS Example</h1>
</body>
</html>

✅ Advantages:
Point Description
🔹 Centralized for Single Page Styles are defined once for the whole page.
🔹 No Need for External Files Useful when hosting multiple files is not desired.
🔹 More Manageable than Inline Can target multiple elements without repeating.
❌ Disadvantages:
Point Description
🔻 Not Scalable Styles are restricted to just one page.
🔻 Repetition Across Pages You must copy-paste styles if the same design is needed elsewhere.
🔻 Slower Page Load HTML and styles are loaded together, increasing size.
📌 Use Case:
Single-page websites or internal applications where only one HTML file is used.
3️⃣ External CSS
External CSS involves writing all style rules in a separate .css file and linking it to the HTML document
using the <link> tag.

Characteristics:
 It provides a clean separation of content and style, adhering to modern web development
best practices.
 Styles can be reused across multiple HTML pages, ensuring a consistent look and reducing
redundancy.
 The browser downloads and caches the CSS file, improving page load times on subsequent
visits.
 It simplifies maintenance and scalability, as changes in one file reflect site-wide.
 External CSS has lowest precedence among the three unless overridden or specified with !
important.

Ideal Scenario:
Used in professional web projects, multi-page websites, and applications where modularity,
reusability, and performance optimization are critical.

🧪 Syntax Example:
[Link]
h1 {
color: navy;
font-family: 'Arial', sans-serif;
}
p{
font-size: 16px;
color: gray;
}

[Link]
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>External CSS Example</h1>
<p>This paragraph is styled using external CSS.</p>
</body>
</html>

✅ Advantages:
Point Description
🔹 Best for Large Projects Styles are reusable across multiple pages.
🔹 Clean HTML Structure HTML stays neat and readable.
🔹 Better Performance CSS files are cached by browsers, speeding up page loads.
🔹 Easy Maintenance Style changes are done once in the .css file and affect all linked pages.
❌ Disadvantages:
Point Description
🔻 Requires Internet Access If CSS file is not available (e.g., due to broken link), styles won’t
load.
🔻 Slight Delay on First Load The browser has to fetch an additional file.
🔻 File Management Required Separate file must be created, maintained, and linked properly.

📌 Use Case:
Professional websites, multiple-page applications, or large projects where consistency and scalability
are required.

🧠 Summary Table: Comparison of CSS Types

Feature Inline CSS Internal CSS External CSS


Location Inside HTML tag Inside <style> tag In external .css file
Scope One element One page Entire website
Reusability ❌ No ⚠️Limited ✅ Yes
Maintainability ❌ Poor ⚠️Moderate ✅ Excellent
Load Performance ✅ Fast ⚠️Slower ✅ Fast (after cache)
Best Use Case Quick fixes Single-page apps Large/multi-page sites
Cascading Priority Highest Medium Lowest

🧠 Summary (Conceptual Overview)


Style Scope Reusability Precedence Maintenance Separation of
Type Concerns
Inline Single ❌ No 🔺 Highest ❌ Poor ❌ Violated
element
Internal Single page ⚠️Limited 🔸 Medium ⚠️Moderate ⚠️Partial
External Entire website ✅ Yes 🔻 Lowest ✅ Excellent ✅ Fully Maintained

🧾 CSS Syntax – The Foundation


🔹 Basic Structure of a CSS Rule
A CSS rule consists of:
1. Selector – targets the HTML element(s) to be styled
2. Declaration Block – a pair of curly braces {} containing:
o Property – the aspect of the element you want to style (e.g., color, font-size)
o Value – the setting for the property (e.g., blue, 16px)
🔸 General Syntax
selector {
property: value;
property: value;
}

🎯 Types of Basic CSS Selectors


CSS Selectors are used to “select” or target specific elements in HTML for styling. Below are the basic
selectors every beginner should know:

1️⃣ Universal Selector (*)


 Selects all elements on the page.
 Useful for applying global styles (e.g., margin reset).
*{
margin: 0;
padding: 0;
}

2️⃣ Element Selector / Type Selector


 Targets HTML tags by their name.
 Applies styles to every occurrence of that element.
p{
font-size: 16px;
}
All <p> elements will be styled.

3️⃣ Class Selector (.classname)


 Targets elements that have a specific class attribute.
 Can be applied to multiple elements.
 Prefixed with a dot (.).
.highlight {
background-color: yellow;
}
Any element with class="highlight" will have yellow background.

4️⃣ ID Selector (#idname)


 Targets a single unique element with a specific id attribute.
 Prefixed with a hash #.
#header {
text-align: center;
}
Only the element with id="header" will be centered.

5️⃣ Group Selector (selector1, selector2)


 Allows applying the same style to multiple selectors at once, separated by commas.

h1, h2, h3 {
font-family: Arial, sans-serif;
}
Applies the same font to all <h1>, <h2>, and <h3> elements.

🔑 Summary Table

Selector Type Syntax Selects


Universal * All elements
Element p, h1, div All elements of that tag type
(Type)
Class .classname All elements with a given class
ID #idname The element with that specific ID
Group selector1, selector2 Multiple selectors grouped

🆚 Class vs ID in CSS – Comparison


Both class and ID selectors are used to target specific HTML elements for styling, but they have
different purposes, scopes, and priorities.

🔷 1️⃣ Class Selector (.classname)


A class is a reusable identifier that can be applied to multiple HTML elements.
📌 Use Case:
Use when multiple elements share the same styling.
✅ Example:
<p class="info">This is a paragraph.</p>
<div class="info">This is a div.</div>

.info {
color: blue;
font-weight: bold;
}

Both <p> and <div> will appear blue and bold.

🔶 2️⃣ ID Selector (#idname)


An ID is a unique identifier meant to be used for one specific element only.
📌 Use Case:
Use when styling or targeting a single unique element (e.g., navigation bar, footer, main header).
✅ Example:

<h1 id="main-title">Welcome</h1>

#main-title {
text-align: center;
font-size: 32px;
}
Only the element with id="main-title" will receive the style.

🔑 Key Differences Table

Feature Class Selector ID Selector


Prefix . (dot) # (hash)
Uniqueness Can be reused multiple times Must be unique per page
Specificity (priority) Lower Higher
Use Case Group styling for similar elements Styling a single unique element
JavaScript Access [Link]() [Link]()
HTML Attribute class="..." id="..."

📏 Best Practices

✅ Use Classes when:


 Styling multiple elements with the same look.
 Applying modular, reusable styles across the page or project.
 You're working with components or UI elements like buttons, cards, etc.
✅ Use IDs when:
 You need a unique identifier for a specific element.
 Targeting a single element for JavaScript manipulation or anchor links.
 You want to override styles with higher specificity (sparingly).
❌ Avoid These Mistakes:
 Do not use the same ID more than once on a page – it violates HTML standards.
 Do not rely on ID for styling alone in large projects – it can conflict with specificity and
reduce flexibility.
 Avoid mixing id and class styles for the same element unless necessary.

🔧 Practical Rule of Thumb:


“Use classes for styling. Use IDs for unique references or JavaScript.”

🧱 div and span in HTML + CSS


Both <div> and <span> are non-semantic tags, meaning they don’t carry meaning about the content
inside—they are purely used to group elements for styling or scripting purposes.

1️⃣ <div> – Block-Level Container


<div> stands for division. It is a block-level element used to group larger chunks of content or layout
sections.
📐 Characteristics:
 Occupies full width of the parent by default.
 Starts on a new line.
 Commonly used to wrap sections like headers, footers, sidebars, containers, etc.
✅ Example:
<div class="box">
<h2>Title</h2>
<p>This is a paragraph inside a div.</p>
</div>

.box {
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
}

2️⃣ <span> – Inline Container


<span> is an inline element used to style a portion of text or small parts of HTML within block
elements.
📐 Characteristics:
 Does not break into a new line.
 Ideal for highlighting, coloring, or formatting words inside a paragraph or heading.
✅ Example:

<p>He is a <span class="highlight">very good</span> player.</p>

.highlight {
color: red;
font-weight: bold;
}

🔑 Key Differences Between <div> and <span>


Feature <div> <span>
Display Type Block-level Inline
Default Takes full width, new line Sits within line, no line break
Behavior
Use Case Grouping sections/layouts Styling inline text or phrases
Styling Purpose Containers for layout styling Text-level formatting
Nesting Can contain all elements Should contain inline content

🧠 Best Practices

✅ Use <div> when:


 Structuring the layout of the webpage.
 Wrapping sections like header, footer, sidebar, article.
 You need to apply CSS styles to a block or group of elements.
✅ Use <span> when:
 You want to style part of a line or single words/sentences.
 Highlighting, coloring, or formatting within a paragraph or heading.

❌ Don’t:
 Overuse <div> and <span> unnecessarily; use semantic tags like <header>, <section>,
<article> where appropriate.
 Nest too many <div>s inside each other without structure—known as "div soup."

📦 CSS Box Model


🧾 What is the Box Model?
In CSS, every HTML element is treated as a box. This "box" consists of multiple layers that control
how the element occupies space and interacts with surrounding elements.
The CSS Box Model includes the following four areas (from innermost to outermost):
🔹 1️⃣ Content
 The actual text, image, or element.
 Controlled by properties like width and height.
🔹 2️⃣ Padding
 Space between content and border.
 Increases the clickable or visible area inside the element.
 Does not affect surrounding elements.

padding: 10px;

🔹 3️⃣ Border
 A line surrounding the padding and content.
 Can be styled using border-width, border-style, and border-color.
border: 2px solid black;
🔹 4️⃣ Margin
 Space outside the element, separating it from other elements.
 Affects the layout of nearby elements.
margin: 20px;

🧠 Box Model Property Summary

Property Function Space Affected


width / Sets the dimensions of the content box Content only
height
Padding Adds inner spacing between content and border Inside element
Border Surrounds content and padding Adds thickness and outline
Margin Adds outer spacing to separate from others Outside element

🎯 Total Element Size (by default):

Total Width = width + padding-left + padding-right + border-left + border-right + margin-left + margin-


right
Same applies for height.
✅ Real-Life Analogy
Think of a gift box:
 Content = the gift
 Padding = the cushioning around the gift
 Border = the box walls
 Margin = the space between this gift box and the next one on the shelf

🧾Padding in CSS

Padding is the space inside an element, between the content and its border. It increases the
internal spacing, allowing the content to "breathe" within the box.
Think of padding as cushioning inside a box—it creates room around the content, but within the
border.

🎯 Key Characteristics
 Padding affects only the internal space.
 It does not overlap with other elements.
 Padding can be applied to each side independently or shorthand.

🔠 Syntax Variants of padding


🔹 Shorthand (all sides)
padding: 20px; /* Top, Right, Bottom, Left = 20px */
🔹 Two values
padding: 10px 20px;
/* Top & Bottom = 10px, Left & Right = 20px */
🔹 Three values
padding: 10px 15px 5px;
/* Top = 10px, Left & Right = 15px, Bottom = 5px */
🔹 Four values
padding: 10px 15px 5px 0px;
/* Top, Right, Bottom, Left respectively (clockwise) */
🔹 Individual Sides
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 5px;

✅ Visual Example
Imagine a text inside a box:
<div style="padding: 20px; background-color: lightblue;">
Hello, I am inside a padded box!
</div>
In this example:
 padding: 20px; creates 20 pixels of space on all four sides of the text within the light blue
box.
 This spacing gives the content a more readable and aesthetic appearance.
🧠 Practical Uses of Padding
 Improve readability: Add spacing around text in cards or buttons.
 Make clickable areas larger: Padding enlarges interactive zones without affecting layout.
 Create visual balance: Even spacing inside boxes improves design aesthetics.
 Separate content from borders: Prevent text from “touching” the edge.

🧾 What is Margin in CSS?


Margin is the space outside an element’s border. It defines how much space separates an element
from other elements around it. Unlike padding, which affects the inside of an element, margin
affects the outside spacing.
You can think of margin as the personal space of an element — it pushes it away from its neighbors.

🎯 Key Characteristics of Margin


 Margin creates external spacing between elements.
 It helps in positioning elements in layouts.
 Margins are transparent — they don’t have background color.
 You can set margins individually or using shorthand.
 Adjacent vertical margins can collapse (known as margin collapse).

🔠 Syntax Variants of margin


🔹 Shorthand (all sides)
margin: 20px;
/* Applies 20px margin on all four sides */
🔹 Two values
margin: 10px 30px;
/* Top & Bottom = 10px, Left & Right = 30px */
🔹 Three values
margin: 10px 20px 5px;
/* Top = 10px, Left & Right = 20px, Bottom = 5px */
🔹 Four values

margin: 10px 15px 20px 5px;


/* Top, Right, Bottom, Left (clockwise) */
🔹 Individual Sides
margin-top: 15px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 5px;
🔹 Auto Value (for centering)
margin: 0 auto;
/* Horizontally centers block element inside parent */

✅ Visual Example

<div style="margin: 30px; background-color: lightgreen;">


This box has 30px margin on all sides.
</div>
Here:
 margin: 30px; adds space between this element and its surroundings.
 It appears separated from other elements visually.

🧠 Practical Uses of Margin


 Separate headings or sections in a document.
 Create space between containers, boxes, or images.
 Control vertical spacing between paragraphs, divs, etc.
 Use margin: auto; for centering elements horizontally.

🧾 What is border in CSS?


The border is the outer edge of an element that wraps around the content and padding. It can be
used to visually separate or highlight elements like boxes, buttons, cards, etc.
The border can be styled with:
 Width: Thickness of the border
 Style: Type of border line (solid, dashed, dotted, etc.)
 Color: The color of the border

🔠 Full Syntax of border


🔹 Shorthand Syntax:
border: <width> <style> <color>;
✅ Example:

border: 2px solid red;


This means:
 2px wide
 Solid line
 Red color

🧩 Border Attributes – Explained Individually


1️⃣ border-width
 Sets the thickness of the border.
 Can be specified in px, em, rem, or keywords like thin, medium, thick.

border-width: 3px;
2️⃣ border-style
 Defines the visual appearance of the line.
Common values:
Value Description
None No border
Solid Solid straight line
Dashed Dashed lines
Dotted Dotted border
Double Two solid lines
Groove Carved appearance
Ridge Opposite of groove
Inset Sunken appearance
Outset Raised appearance

border-style: dashed;
3️⃣ border-color
 Sets the color of the border.
border-color: blue;

You can also apply different colors to each side:


border-color: red green blue yellow;
/* top | right | bottom | left */

🔄 Side-Specific Border Properties


You can set borders on individual sides:
Property Affects Side
border-top Top
border-right Right
border- Bottom
bottom
border-left Left

Each of these can also use shorthand:


border-top: 2px dotted green;

🔘 Border Radius (Rounded Corners)


Use border-radius to round the corners of the box.
border-radius: 10px;
/* Rounds all corners equally */
Or separately:
border-radius: 10px 0 10px 0;
/* Top-left | Top-right | Bottom-right | Bottom-left */

🎨 Combined Examples
✅ Basic Full Border
border: 2px solid black;
✅ Only Top and Bottom Borders
border-top: 3px dashed orange;
border-bottom: 3px dashed orange;
✅ Colorful Border with Rounded Corners
border: 4px double blue;
border-radius: 8px;
✅ Different Widths and Colors
border-width: 2px 5px 3px 1px;
border-style: solid;
border-color: red green blue yellow;
🧠 Summary Table

Property Purpose
Border Shorthand for setting all border parts
border-width Controls thickness
border-style Controls line appearance
border-color Sets border color
border-top/right/... Side-specific borders
border-radius Rounds corners

🧾 🎨 Example: Stylish Card Layout with CSS Box Model


✅ HTML + CSS Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Box Model Example</title>
<style>
.card {
width: 300px;
margin: 40px auto; /* Centers the card with space from top */
padding: 20px; /* Internal space inside the card */
border: 2px solid #333; /* Visible solid border */
border-radius: 10px; /* Rounded corners */
background-color: #f9f9f9; /* Light background */
font-family: Arial, sans-serif;
}

.card h2 {
margin-bottom: 10px;
color: #222;
}

.card p {
margin: 0;
padding: 10px;
background-color: #e7f3ff;
border: 1px dashed #66aaff;
}
</style>
</head>
<body>

<div class="card">
<h2>John Doe</h2>
<p>This is a message box that uses margin, padding, and border effectively to create clean layout
spacing and visual styling.</p>
</div>

</body>
</html>

🧾 CSS Text Styling Properties


These properties help you control how text looks and behaves inside your HTML elements. They
include color, alignment, spacing, decoration, transformation, and more.

🔹 1. color
 Sets the text color.
 Can use named colors, HEX, RGB, RGBA, HSL, etc.
color: blue;
color: #333;
color: rgb(255, 0, 0);

🔹 2. text-align
 Aligns text horizontally within its container.
Value Description
Left Aligns to the left (default)
Right Aligns to the right
center Centers the text
justify Aligns both left and right

text-align: center;

🔹 3. text-decoration
 Adds decoration line(s) to text.
Value Effect
None Removes underline
underline Adds underline
overline Adds line above text
line- Strikes through text
through

text-decoration: underline;

🔹 4. text-transform
 Controls capitalization of text.
Value Effect
none No change
uppercas Converts all text to UPPERCASE
e
lowercase Converts all text to lowercase
capitalize Capitalizes the first letter of each word

text-transform: capitalize;

🔹 5. letter-spacing
 Controls the space between characters.

letter-spacing: 2px;

🔹 6. word-spacing
 Controls the space between words.

word-spacing: 5px;

🔹 7. line-height
 Sets the vertical spacing between lines of text.

line-height: 1.5; /* 1.5 times the font size */


line-height: 24px;

🔹 8. text-indent
 Indents the first line of a block of text.

text-indent: 40px;

🔹 9. white-space
 Controls how white space inside an element is handled.
Value Effect
normal Collapses spaces and wraps text (default)
nowrap Prevents wrapping
pre Preserves whitespace and line breaks
pre-wrap Preserves whitespace, wraps when needed
pre-line Collapses whitespace, preserves line breaks

white-space: nowrap;

🔹 10. direction
 Sets the text direction.

direction: rtl; /* Right to Left */

🧠 Summary Table
Property Purpose Common Values
Color Text color red, #333, rgb(0,0,0)
text-align Horizontal alignment left, right, center, justify
text-decoration Adds/removes lines underline, line-through, none
text-transform Changes case uppercase, lowercase, capitalize
letter-spacing Space between letters px, em
word-spacing Space between words px, em
line-height Line spacing 1.5, 24px, 120%
text-indent Indent first line 20px, 2em
white-space Handling of normal, nowrap, pre, pre-wrap
whitespace
Direction Text direction ltr, rtl

✅ Practical Example

<p style="
color: #444;
text-align: justify;
text-decoration: none;
text-transform: capitalize;
letter-spacing: 1px;
word-spacing: 3px;
line-height: 1.6;
text-indent: 30px;">
this paragraph is styled using various text properties in css to enhance readability and visual
appearance.
</p>

🧾 CSS Font Properties – Complete Guide


These properties control the appearance, size, weight, and style of text fonts on a web page. They
are essential for improving readability, visual hierarchy, and aesthetic appeal.

🔹 1️⃣ font-family
Specifies the typeface (font) to use for the text.
🧠 Syntax:
font-family: "Arial", "Helvetica", sans-serif;
 Always provide fallbacks: If the first font isn't available, the next one is used.
 Generic families include: serif, sans-serif, monospace, cursive, fantasy.
✅ Example:

p{
font-family: 'Georgia', serif;
}

🔹 2️⃣ font-size
Sets the size of the font.
📏 Units:
 px → Pixels (fixed)
 em → Relative to parent’s font-size
 rem → Relative to root element
 % → Relative to parent
 vw, vh → Viewport-based sizes
✅ Examples:
h1 {
font-size: 32px;
}
p{
font-size: 1.2em;
}

🔹 3️⃣ font-weight
Sets the thickness or boldness of the text.
Values:
Keywor Numeric Equivalent
d
normal 400
bold 700
lighter Relative
bolder Relative
Numeric 100 to 900
✅ Examples:

h1 {
font-weight: bold;
}
p{
font-weight: 300;
}

🔹 4️⃣ font-style
Applies italic or oblique styling to the font.
Values:
 normal – Default
 italic – Italic version of the font
 oblique – Slanted version (less common)
✅ Example:
em {
font-style: italic;
}

🔹 5️⃣ font-variant
Controls the use of small-caps.
Values:
 normal – Default
 small-caps – Converts lowercase to uppercase but smaller
✅ Example:
p{
font-variant: small-caps;
}

🔹 6️⃣ font (Shorthand Property)


📘 Definition:
Sets all font properties in one line.
✅ Syntax:
font: <style> <variant> <weight> <size>/<line-height> <family>;
✅ Example:
p{
font: italic small-caps bold 16px/1.5 'Times New Roman', serif;
}

🧠 Summary Table of Font Properties


Property Purpose Example
font-family Sets typeface(s) font-family: Arial, sans-serif;
font-size Sets text size font-size: 18px;
font-weight Sets text boldness font-weight: bold;
font-style Italic/oblique text font-style: italic;
font-variant Small caps font-variant: small-caps;
Font Shorthand for all font: italic 700 16px/1.4 Arial;
above

✅ Practical Usage Example

<style>
.quote {
font-family: 'Georgia', serif;
font-size: 20px;
font-weight: 400;
font-style: italic;
font-variant: small-caps;
line-height: 1.6;
}
</style>

<p class="quote">
"Simplicity is the ultimate sophistication."
</p>

🧾 Background Properties in CSS


CSS background properties allow you to set the background color, images, and control how they are
repeated, positioned, and sized within an element.

🎯 1️⃣ background-color
Sets a solid color as the background of an element.
✅ Syntax:
background-color: lightblue;
🔹 Example:
<div style="background-color: #e0f7fa;">
This box has a background color.
</div>

2️⃣ background-image
Sets an image as the background.
✅ Syntax:
background-image: url("[Link]");
🔹 Example:
div {
background-image: url("[Link]");
}

🔁 3️⃣ background-repeat
Controls whether the background image repeats (tiles) and in which direction.
Value Behavior
repeat Repeats both x and y (default)
no-repeat Displays once only
repeat-x Repeats horizontally
repeat-y Repeats vertically
✅ Example:
div {
background-repeat: no-repeat;
}

📍 4️⃣ background-position
Specifies the starting position of the background image.
Keyword Values Meaning
top, right, bottom, left, center Relative to container sides
x% y% or xpx ypx Exact positioning in % or px
✅ Example:

div {
background-position: center center;
}

📏 5️⃣ background-size
Controls the scaling of the background image.
Value Description
Auto Default; keeps original size
Cover Scales to cover entire container (cropping possible)
Contain Scales to fit within container (no cropping)
width height Specific size in px or %
✅ Example:
div {
background-size: cover;
}

📌 6️⃣ background-attachment
Defines how background behaves during scrolling.
Value Behavior
scroll Scrolls with the page (default)
fixed Stays fixed on screen
local Scrolls with the element content
✅ Example:
div {
background-attachment: fixed;
}

🧩 7️⃣ background (Shorthand Property)


Combines all background properties into one line.
✅ Syntax:
background: [color] [image] [repeat] [position] / [size] [attachment];
✅ Example:

div {
background: #f0f0f0 url("[Link]") no-repeat center center / cover fixed;
}

🧠 Summary Table of Background Properties

Property Purpose
background-color Sets background color
background-image Sets background image
background-repeat Controls tiling
background-position Sets position of image
background-size Controls image scaling
background-attachment Scroll or fixed positioning
Background Shorthand for all background settings

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Background and Border Example</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
padding: 40px;
}

.box {
width: 500px;
margin: auto;
padding: 30px;
color: white;
background:
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)),
url("[Link] no-repeat center center / cover;
border: 5px solid #007BFF;
border-radius: 15px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
background-attachment: fixed;
text-align: center;
}

.box h2 {
margin-top: 0;
font-size: 32px;
text-transform: uppercase;
letter-spacing: 2px;
}

.box p {
font-size: 18px;
line-height: 1.6;
}
</style>
</head>
<body>

<div class="box">
<h2>Styled Box</h2>
<p>
This box demonstrates the use of CSS backgrounds and borders. The image is blended with a
gradient overlay, and the box has rounded corners, a solid border, and a drop shadow.
</p>
</div>
</body>
</html>

🧾 CSS Color Properties


CSS allows you to apply colors using several different formats depending on your need for simplicity,
flexibility, or transparency control.
Colors are most commonly used in:
 color (text)
 background-color
 border-color
 box-shadow, etc.

🎨 1️⃣ Named Colors


 CSS supports around 140 named colors like red, blue, teal, navy, gold, coral, etc.
color: crimson;
background-color: lightgray;
✅ Easy to remember, but limited precision.

🟪 2️⃣ Hexadecimal (HEX) Colors


🔹 Format: #RRGGBB
Each pair represents values from 00 to FF in hexadecimal for Red, Green, Blue.
Code Meaning
#00000 Black (no red, no green, no blue)
0
#ffffff White (full red, green, blue)
#ff0000 Pure Red
#00ff00 Pure Green
#0000ff Pure Blue
✅ Short Format: #RGB
color: #f00; /* shorthand for #ff0000 */

🌈 3️⃣ RGB Colors


🔹 Format: rgb(red, green, blue)
Values range from 0 to 255.
color: rgb(255, 0, 0); /* red */
background-color: rgb(245, 245, 245); /* light gray */
✅ More precise than named colors, useful in scripting and dynamic styling.

4️⃣ RGBA Colors


🔹 Format: rgba(red, green, blue, alpha)
Adds alpha transparency (opacity) where:
 1 = fully opaque
 0 = fully transparent
background-color: rgba(0, 0, 255, 0.5); /* semi-transparent blue */
✅ Great for overlays, buttons, and hover effects.
🧠 Summary Table

Forma Description Supports Transparency


t
named Easy to use, ~140 options ❌ No
#hex Hexadecimal for RGB ❌ No
rgb() Decimal RGB format ❌ No
rgba() RGB with alpha (opacity) ✅ Yes

✅ Practical Example

<style>
.color-box {
width: 120px;
height: 120px;
display: inline-block;
margin: 10px;
}
.hex { background-color: #ff6347; } /* tomato */
.rgb { background-color: rgb(0, 128, 0); } /* green */
.rgba { background-color: rgba(0, 0, 255, 0.4); } /* transparent blue */

</style>

<div class="color-box hex"></div>


<div class="color-box rgb"></div>
<div class="color-box rgba"></div>

🧾 What Are Lists in HTML?


 <ul> → Unordered List (bullets)
 <ol> → Ordered List (numbers)
 <li> → List Item (inside either type)
By default:
 <ul> uses disc bullets
 <ol> uses decimal numbers

🎯 Key CSS Properties for List Styling

1️⃣ list-style-type
Defines the marker style (bullet or number) used in a list.
🔹 Common Values for <ul>:
Value Description
disc ● (default)
circle ○
square ■
none No marker
🔹 For <ol>:
Value Description
Decimal 1, 2, 3, ... (default)
lower-alpha a, b, c, ...
upper-alpha A, B, C, ...
lower-roman i, ii, iii, ...
upper- I, II, III, ...
roman
✅ Example:
ul {
list-style-type: square;
}

ol {
list-style-type: upper-roman;
}

2️⃣ list-style-position
Controls whether the marker appears inside or outside the list item box.
Value Description
outsid Marker is outside the content block (default)
e
inside Marker is inside the content block
✅ Example:
ul {
list-style-position: inside;
}

3️⃣ list-style-image
Replaces the default marker with a custom image.
✅ Example:
ul {
list-style-image: url("[Link]");
}
⚠️Best used for consistent icon bullets.

4️⃣ list-style (Shorthand)


Combines all the above into one line.
✅ Syntax:
list-style: [type] [position] [image];
✅ Example:
ul {
list-style: square inside;
}

✅ Practical Example
<style>
.styled-list {
list-style-type: square;
list-style-position: inside;
font-family: Arial;
font-size: 16px;
padding: 10px;
background-color: #f9f9f9;
width: 300px;
border: 1px solid #ccc;
}

.styled-list li {
margin-bottom: 8px;
color: #444;
}
</style>

<ul class="styled-list">
<li>HTML & CSS</li>
<li>JavaScript</li>
<li>Responsive Design</li>
<li>SEO Basics</li>
</ul>

🧠 Summary Table

Property Function
list-style-type Sets bullet/number format
list-style- Positions bullet inside or outside
position
list-style-image Replaces bullet with an image
list-style Shorthand for all the above

🧾 What is the display Property?


The display property in CSS determines how an element behaves in the layout flow — whether it
appears on the same line, breaks to a new line, or behaves like a container.

🔹 1️⃣ block
📘 Behavior:
 Takes full width of the container.
 Always starts on a new line.
✅ Examples:
 <div>, <p>, <h1> are block by default.

display: block;
🔍 Used For:
 Structuring page sections
 Headers, articles, footers

🔹 2️⃣ inline
📘 Behavior:
 Sits on the same line with other inline elements.
 Does not allow width/height, margin-top/bottom, or padding-top/bottom.
✅ Examples:
 <span>, <a>, <strong> are inline by default.
display: inline;
🔍 Used For:
 Styling parts of text
 Inline links or labels

🔹 3️⃣ inline-block
📘 Behavior:
 Behaves like inline (sits on the same line).
 But also supports width, height, margin, padding like block.
display: inline-block;
🔍 Used For:
 Horizontal menus
 Buttons, icons, tooltips
 Card-like elements aligned inline

📋 Side-by-Side Comparison
Feature block inline inline-block
Starts new line ✅ Yes ❌ No ❌ No
Respects width ✅ Yes ❌ No ✅ Yes
Respects height ✅ Yes ❌ No ✅ Yes
Aligns ❌ No ✅ Yes ✅ Yes
horizontally

✅ Example: Horizontal Navigation Menu Using inline-block


<!DOCTYPE html>
<html>
<head>
<style>
.menu {
background-color: #222;
padding: 10px;
text-align: center;
}

.menu a {
display: inline-block;
color: white;
text-decoration: none;
padding: 10px 20px;
margin: 0 5px;
border-radius: 5px;
background-color: #007BFF;
}

.menu a:hover {
background-color: #0056b3;
}
</style>
</head>
<body>

<div class="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>

</body>
</html>

🧠 Explanation:
 Each <a> tag is set to inline-block → appears on the same line, but accepts padding, border,
and width like a block.
 Allows for button-like horizontal menus.
 You cannot do this with inline alone, since it ignores width and padding-top/bottom.

🧾 Styling Anchor Links in CSS


In CSS, you can style anchor (<a>) elements using pseudo-classes to reflect different interaction
states:
🎯 The 5 Main States of a Link:
Selector Meaning
a:link A normal, unvisited link
a:visited A link that the user has already visited
a:hover A link when the mouse hovers over it
a:active A link while it is being clicked
a:focus A link when it is focused, e.g., via keyboard

✅ Best Practice Order (LVHA-F)


Always write in this order:
a:link
a:visited
a:hover
a:active
a:focus
💡 Example: Anchor Link Styling in CSS
/* Unvisited link */
a:link {
color: blue;
text-decoration: none;
}

/* Visited link */
a:visited {
color: purple;
}

/* On mouse hover */
a:hover {
color: white;
background-color: blue;
padding: 5px 10px;
border-radius: 4px;
transition: 0.3s;
}

/* While being clicked */


a:active {
background-color: darkblue;
}

/* When focused (keyboard navigation) */


a:focus {
outline: 2px dashed orange;
}
🔍 HTML Example:
<a href="[Link] target="_blank">Visit [Link]</a>

🧠 Summary Table

Pseudo- When it triggers Common Styles


class
:link When the link has not been visited Initial text color, underline
:visited After the link has been clicked Different color
:hover When mouse is over the link Background, underline, color change
:active While clicking the link Color or background feedback
:focus When the link is keyboard focused Outline or border

✅ Demo: CSS Anchor Link States

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Anchor Link Styling Demo</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
padding: 40px;
}

a{
display: inline-block;
margin: 10px;
padding: 10px 20px;
text-decoration: none;
font-size: 18px;
border-radius: 5px;
transition: background-color 0.3s, color 0.3s;
}

/* Unvisited link */
a:link {
color: #007BFF;
background-color: white;
border: 2px solid #007BFF;
}

/* Visited link */
a:visited {
color: #6f42c1;
border-color: #6f42c1;
}

/* Hover state */
a:hover {
color: white;
background-color: #007BFF;
}

/* Active (when clicked) */


a:active {
background-color: #0056b3;
}

/* Focus (when tabbed) */


a:focus {
outline: 3px dashed orange;
}
</style>
</head>
<body>

<h2>Anchor Link Styling Demo</h2>

<a href="[Link] target="_blank">External Link</a>


<a href="#section" id="internal-link">Internal Page Link</a>
<a href="[Link] Link</a>
<a href="[Link] target="_blank">Visited Demo</a>

<p id="section" style="margin-top: 100px;">This is the internal section.</p>

</body>
</html>
🧠 What You'll See:
 🎨 Default (link): Blue border and text.
 ✔️Visited: Purple text and border.
 Hover: Turns white text on a blue background.
 👇 Active: While clicking, it goes darker.
 🔲 Focus: When tabbing, it gets an orange outline.

🧾 What is CSS2?
📘 CSS2 (Cascading Style Sheets Level 2) was published in 1998 by the W3C. It built upon CSS1 and
introduced foundational features that are still widely used today.

✅ Key Features of CSS2:


Feature Description
Box Model Margin, border, padding, and content layout
Positioning static, relative, absolute, fixed
Display & block, inline, none, inline-block
Visibility
Z-index Layer stacking for overlapping elements
Media Types Basic @media rules for screen, print, etc.
Text Styling Properties like text-align, line-height, letter-spacing
Font Control font-family, font-size, font-style, font-weight
List Styling list-style-type, position, image
Selectors Basic selectors: universal (*), type, class, ID, descendant
Tables Styling table borders, spacing, alignment

❌ Limitations:
 No support for animations, transitions, or rounded corners
 Limited layout options (no Flexbox or Grid)
 Inconsistent browser support (especially IE6/7)
🧾 What is CSS3?
📘 CSS3 was introduced in the late 2000s and is still evolving. It broke CSS into modules to allow
easier updates and faster adoption by browsers.

✅ Key Improvements of CSS3 Over CSS2:

Module/Feature Description
Selectors Level 3 Advanced selectors like :nth-child(), :not(), ::before, ::after
Box Model box-sizing, border-radius, box-shadow
Enhancements
Backgrounds & Borders Multiple backgrounds, background-size, gradients
Text Effects text-shadow, word-wrap, advanced text-decoration
Web Fonts @font-face allows custom fonts to be loaded
2D & 3D Transforms transform, rotate, scale, translate, perspective
Transitions & Animations Smooth changes using transition and keyframe @animation
Flexible Layouts Flexbox, Grid, media queries for responsive design
Variables CSS custom properties (e.g., --main-color) for reusable values
Media Queries Responsive design based on screen size, resolution, etc.

🔄 CSS2 vs CSS3: Side-by-Side Comparison

Feature CSS2 CSS3


Released 1998 2011+ (modular, still evolving)
Layout Float, table Float, Flexbox, Grid
Media Queries Limited Fully supported
Fonts System fonts only @font-face, Google Fonts
Rounded Corners ❌ No ✅ border-radius
Shadows ❌ No ✅ box-shadow, text-shadow
Transitions ❌ No ✅ transition
Animations ❌ No ✅ @keyframes, animation
Gradients ❌ No ✅ linear-gradient, radial-gradient
Selectors Basic (class, ID, descendant) Advanced (:nth-child, :not, ::before)
Responsive ❌ Very limited ✅ Fully supported
Design

🧠 Summary
 CSS2 is the foundation of styling: box model, positioning, basic selectors, display types.
 CSS3 is all about modern layout, visual effects, and responsiveness.
 Today’s web pages combine CSS2 and CSS3 — modern features layered on solid basics.

🧾 Topic 1: Introduction to Flexbox


🎯 What is Flexbox?
Flexbox, short for Flexible Box Layout, is a CSS3 layout model that allows you to design complex and
responsive layouts with ease and precision, especially when you're arranging items in a single
dimension — either as a row or a column.
It was designed to solve many limitations of:
 float
 inline-block
 position

🧱 Flexbox Structure
✅ Flex Container
The parent element with:
display: flex;
✅ Flex Items
The direct child elements of the flex container — automatically take on flexible behavior.

📐 One-Dimensional Layout
 Main Axis: Direction in which the flex items are placed.
o Set by flex-direction
o Can be horizontal (default) or vertical
 Cross Axis: Perpendicular to the main axis.

📦 Basic Syntax
.container {
display: flex;
}
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>

🧠 Key Benefits
 Align elements vertically and horizontally
 Make equal width or height columns
 Easily reorder elements visually
 Support for wrapping items automatically
 Clean, minimal markup and CSS

🔹 What is a Flex Container?


To start using Flexbox, you make an element a flex container using:
display: flex;
This turns all direct child elements into flex items.

✅ Example:
<div class="flex-container">
<div class="box">Item 1</div>
<div class="box">Item 2</div>
<div class="box">Item 3</div>
</div>
.flex-container {
display: flex;
background-color: #f2f2f2;
padding: 10px;
}

.box {
background-color: #007BFF;
color: white;
padding: 20px;
margin: 10px;
font-size: 18px;
}

📦 Flex Items
 Only direct children of the flex container become flex items
 They automatically align based on the main axis direction
 You can control size, alignment, order, and spacing of each item individually

🧭 Main Axis vs Cross Axis


🎯 Main Axis
 The primary direction in which items are laid out
 Controlled by flex-direction
 Default: row (left to right)
Value Direction of Items
row (default) Left → Right
row-reverse Right → Left
Column Top → Bottom
column-reverse Bottom → Top
🎯 Cross Axis
 The perpendicular direction to the main axis
 Controlled by align-items, align-content, or align-self

✅ Visual Illustration:
If flex-direction: row (default):
MAIN AXIS → →
+-----------------------------+
| [Item 1] [Item 2] [Item 3] |
| |
|^ |
|| |
| CROSS AXIS |
+-----------------------------+
If flex-direction: column:
CROSS AXIS →
↓
[Item 1]
↓
[Item 2]
↓
[Item 3]
↑ MAIN AXIS

✅ Code Example: Switching Axes


.flex-container {
display: flex;
flex-direction: column; /* change to row, row-reverse, etc. */
background-color: #e0e0e0;
padding: 10px;
}

.box {
background-color: #28a745;
color: white;
padding: 20px;
margin: 5px;
}

🧠 Summary
Concept Key Point
Flex Container Created using display: flex
Flex Items Direct children of the flex container
Main Axis Controlled by flex-direction (row, column, etc.)
Cross Axis Perpendicular to main axis; affects vertical/horizontal alignment

🧾 Topic 4: Flex Container Properties


These are the CSS properties you apply to a flex container (the parent element) to control the
behavior, direction, wrapping, and alignment of all its child items.

✅ Overview of Flex Container Properties:


Property Description
flex-direction Sets main axis direction (row, column)
flex-wrap Allows items to wrap into multiple lines
flex-flow Shorthand for flex-direction + flex-wrap
justify- Aligns items along the main axis
content
align-items Aligns items along the cross axis
align-content Aligns multiple lines along the cross axis

🔹 1. flex-direction
Controls the direction in which flex items are placed in the container.
.flex-container {
display: flex;
flex-direction: row; /* default */
}
Value Description
row Left to right (default)
row-reverse Right to left
column Top to bottom
column- Bottom to top
reverse

🔹 2. flex-wrap
By default, flex items try to fit in one line. flex-wrap allows them to wrap to next line if needed.
.flex-container {
flex-wrap: wrap;
}
Value Description
Nowrap All items in one line (default)
Wrap Wrap onto multiple lines
wrap-reverse Wrap in reverse direction

🔹 3. flex-flow
Shorthand for both flex-direction and flex-wrap.
.flex-container {
flex-flow: row wrap;
}

🔹 4. justify-content
Aligns items horizontally along the main axis.
.flex-container {
justify-content: space-between;
}
Value Description
flex-start Items start from beginning (default)
flex-end Items align to end of container
Center Items centered in container
space-between Equal space between items
space-around Equal space around items
space-evenly Equal space between and around

🔹 5. align-items
Aligns items vertically along the cross axis (single line).
.flex-container {
align-items: center;
}

Value Description
stretch (default) items stretch to fill cross axis
flex-start Top (or left in column mode)
flex-end Bottom (or right in column mode)
center Centered vertically
baseline Aligns text baselines

🔹 6. align-content
Only applies when items wrap to multiple lines.
.flex-container {
flex-wrap: wrap;
align-content: space-between;
}
Value Description
flex-start Lines packed to start of container
flex-end Lines packed to end
Center Lines centered
space-between Equal spacing between lines
space-around Equal spacing above/below lines
Stretch (default) lines stretch to fill space

✅ Practical Example: Flex Container Settings


<style>
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
background-color: #f9f9f9;
border: 2px solid #ccc;
padding: 20px;
}

.item {
background-color: #007BFF;
color: white;
padding: 20px;
margin: 10px;
width: 100px;
text-align: center;
border-radius: 5px;
}
</style>

<div class="flex-container">
<div class="item">Box 1</div>
<div class="item">Box 2</div>
<div class="item">Box 3</div>
<div class="item">Box 4</div>
</div>
🧾 Flex Item Properties
These are CSS properties you apply to individual flex items (i.e., the children of a flex container).
They control growth, shrinkage, ordering, and alignment of each item independently.

✅ List of Flex Item Properties


Property Description
Order Changes the order of appearance of a flex item
flex-grow Controls how much the item can grow relative to others
flex-shrink Controls how much the item can shrink
flex-basis Sets the initial main size of the item before grow/shrink
Flex Shorthand for flex-grow, flex-shrink, and flex-basis
align-self Overrides align-items for this item only

🔹 1️⃣ order
 Default order = 0
 Items with lower order appear first
.item1 { order: 2; }
.item2 { order: 1; }
.item3 { order: 3; }
➡️Even though .item2 is written second, it will be shown first.

🔹 2️⃣ flex-grow
 Defines how much the item can grow relative to others.
 If all items have flex-grow: 1, they will grow equally.
 If one has flex-grow: 2, it gets twice as much space.
.item {
flex-grow: 1;
}
.[Link] {
flex-grow: 2;
}

🔹 3️⃣ flex-shrink
 Defines how much the item can shrink when container space is limited.
 If flex-shrink: 0, it won’t shrink at all.
.item {
flex-shrink: 1;
}
.[Link] {
flex-shrink: 0;
}

🔹 4️⃣ flex-basis
 Sets the initial size of the flex item before grow or shrink happens.
 Can be auto, a length (px, %, etc.), or 0.
.item {
flex-basis: 150px;
}

🔹 5️⃣ flex (Shorthand)


flex: <grow> <shrink> <basis>;
Example:
.item {
flex: 1 1 200px;
}
Common shortcuts:
 flex: 1; → flex-grow: 1; flex-shrink: 1; flex-basis: 0%
 flex: 0 1 auto; → default behavior

🔹 6️⃣ align-self
 Overrides the cross-axis alignment (align-items) for just one item.
.flex-container {
align-items: center;
}

.[Link] {
align-self: flex-start;
}

✅ Practical Example Using All Flex Item Properties


<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: stretch;
background-color: #eaeaea;
padding: 20px;
}

.item {
background-color: #28a745;
color: white;
padding: 20px;
margin: 10px;
flex: 1 1 150px;
text-align: center;
border-radius: 5px;
}

.item:nth-child(2) {
flex-grow: 2;
background-color: #007bff;
}
.item:nth-child(3) {
align-self: flex-start;
background-color: #ffc107;
}

.item:nth-child(4) {
order: -1;
background-color: #dc3545;
}
</style>

<div class="flex-container">
<div class="item">Item 1</div>
<div class="item">Item 2<br>(flex-grow: 2)</div>
<div class="item">Item 3<br>(align-self: start)</div>
<div class="item">Item 4<br>(order: -1)</div>
</div>

🧠 Summary Table
Property Role
order Changes visual position in flex container
flex-grow Shares available space after initial sizing
flex-shrink Shrinks item if container is too small
flex-basis Sets starting size of item
flex Shorthand for grow, shrink, and basis
align-self Aligns item vertically (cross axis), overrides parent

🧾 Common Layout Patterns Using Flexbox


Flexbox is especially useful for creating clean, responsive layouts without hacks or complex
positioning. Here's a list of the most common patterns you can easily build using Flexbox.

🔹 1. Horizontal Navigation Bar (Navbar)


<div class="navbar">
<div class="logo">MySite</div>
<div class="menu">
<a href="#">Home</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
</div>
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: #333;
padding: 10px 20px;
color: white;
}

.menu a {
color: white;
text-decoration: none;
margin-left: 20px;
}

🔹 2. Equal Height Columns


<div class="row">
<div class="col">Left column</div>
<div class="col">Right column</div>
</div>
.row {
display: flex;
gap: 20px;
}

.col {
flex: 1;
background: #ddd;
padding: 20px;
}
📌 Each .col takes equal space and stretches to the same height, automatically.

🔹 3. Centering a Box Horizontally & Vertically


<div class="outer">
<div class="inner">I'm centered</div>
</div>
.outer {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background: #f2f2f2;
}

.inner {
background: #007bff;
color: white;
padding: 20px;
border-radius: 5px;
}
✅ This centers .inner perfectly in both directions.

🔹 4. Sidebar + Main Content Layout


<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
</div>
.layout {
display: flex;
}

.sidebar {
width: 250px;
background: #333;
color: white;
padding: 20px;
}

.main {
flex: 1;
background: #f9f9f9;
padding: 20px;
}
✅ Easily build a 2-column layout.

🔹 5. Responsive Button/Tile Grouping


<div class="button-row">
<button>One</button>
<button>Two</button>
<button>Three</button>
</div>
.button-row {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 10px;
}

button {
padding: 10px 20px;
}
📱 Works well on small screens because wrap is enabled.

🧠 Tip:
Use these Flexbox patterns as building blocks for dashboards, cards, forms, and content grids.

🧾 What is a Tooltip in CSS?


A tooltip is a small, informative box that appears when a user hovers over an element (like a button,
icon, or link), giving more context or description.
🔍 Think of it like this:
When the user hovers over a word, icon, or image — a small box pops up and shows a helpful
message.
✅ Pure CSS Tooltip — Basic Concept
Tooltips can be made using only HTML + CSS, without JavaScript.
🧱 Basic Structure:
<div class="tooltip">
Hover me
<span class="tooltip-text">This is a tooltip!</span>
</div>

🎨 CSS Styling:
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}

.tooltip .tooltip-text {
visibility: hidden;
width: 140px;
background-color: black;
color: #fff;
text-align: center;
padding: 8px;
border-radius: 5px;

/* Positioning */
position: absolute;
bottom: 125%; /* show above the text */
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
z-index: 1;
}

.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}

✅ Output:
 Hover me → when hovered → shows “This is a tooltip!” in a black box above the text.

🧪 CSS Variables (Custom Properties)

✅ What are CSS Variables?


CSS Variables (also called custom properties) let you store reusable values (like colors, fonts,
spacing) in one place and reuse them throughout your CSS.
🔁 Write once, use everywhere!
:root {
--primary-color: #007BFF;
--spacing: 20px;
}
Then reuse like this:
button {
background: var(--primary-color);
padding: var(--spacing);
}

🧠 Why Use CSS Variables?


Advantage Explanation
🧼 DRY Code Define once, use everywhere (Don’t Repeat Yourself)
🎨 Easy Theming Quickly switch light/dark or brand themes
🔁 Live updates via JS Can change variables dynamically with JavaScript
Maintainable Styles Update in one place instead of changing everywhere manually
🔒 Scoped Variables Define variables per component or section

🎯 Syntax and Usage


1️⃣ Declaring Variables
Always declare inside a selector (typically :root for global use):
:root {
--main-bg: #f9f9f9;
--text-color: #333;
--box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

2️⃣ Using Variables


Use with the var() function:
body {
background-color: var(--main-bg);
color: var(--text-color);
}
You can also add a fallback:
h1 {
color: var(--headline-color, blue); /* fallback to blue if not defined */
}

🧪 Full Example
<style>
:root {
--primary-color: #4CAF50;
--secondary-color: #ffffff;
--padding: 15px;
--border-radius: 8px;
}

button {
background-color: var(--primary-color);
color: var(--secondary-color);
padding: var(--padding);
border: none;
border-radius: var(--border-radius);
font-size: 16px;
}
</style>

<button>Click Me</button>
✅ This button is styled using variables — easy to tweak!

🎨 Scoped Variables (Component-level)


You can define variables inside specific classes:
.card {
--card-bg: #fff;
background: var(--card-bg);
padding: 20px;
}

.dark-theme .card {
--card-bg: #222;
}
📌 --card-bg is scoped to .card, and overridden in .dark-theme .card.

🧠 Best Practices
Tip Reason
Use :root for global Makes them available throughout your CSS
variables
Use semantic names --primary-color instead of --blue
Organize by section Group typography, colors, spacing variables
Use fallbacks For older browsers or missing definitions
Combine with media queries For responsive theming

🧑‍💻 Real Use Cases


Use Case Example Variable
Theming --primary-color, --bg-color
Spacing --section-padding, --gap
Typography --font-size-large, --heading
Shadows --elevation-1, --card-shadow
Layout units --container-width, --max-width
📱 Media Queries in CSS

✅ What are Media Queries?


Media Queries are CSS techniques used to apply different styles for different screen sizes or device
types (e.g., desktop, tablet, mobile).
They allow your website to be responsive — adjusting layout, font, spacing, or visibility based on the
device width, orientation, resolution, etc.

🧠 Basic Syntax
@media media-type and (condition) {
/* CSS rules here */
}
Or simply:
@media (max-width: 768px) {
/* Apply these styles on smaller screens */
}

✅ Most Common Conditions:


Condition Meaning
max-width Target screen widths less than or equal to
min-width Target screen widths greater than or equal to
orientation portrait or landscape mode
max-height Based on screen height
hover, pointer Detect interaction types (touch, mouse)

📦 Example 1: Responsive Font Size


body {
font-size: 18px;
}

@media (max-width: 600px) {


body {
font-size: 14px;
}
}
✅ On smaller screens (≤600px), font becomes smaller.

📦 Example 2: Hide Sidebar on Mobile


.sidebar {
width: 250px;
float: left;
}

@media (max-width: 768px) {


.sidebar {
display: none;
}
}
✅ Hides sidebar on tablets and smaller screens.

📦 Example 3: Stack Columns on Mobile


.columns {
display: flex;
gap: 20px;
}

.column {
flex: 1;
}

@media (max-width: 600px) {


.columns {
flex-direction: column;
}
}
✅ Changes from horizontal layout to vertical stack on small screens.

📦 Example 4: Image Resize Responsively


img {
width: 100%;
max-width: 500px;
}

@media (max-width: 480px) {


img {
max-width: 100%;
}
}

Breakpoint Guidelines (Common):


Device Type Breakpoint Example
Small Phones max-width: 480px
Tablets max-width: 768px
Laptops max-width: 1024px
Desktops min-width: 1025px
You can use min-width for mobile-first design.

🧑‍💻 Mobile-First vs Desktop-First


✅ Mobile-First (Recommended):
/* Base styles (for mobile) */
.container {
font-size: 14px;
}

/* Larger screens */
@media (min-width: 768px) {
.container {
font-size: 18px;
}
}

✅ Use Cases
Use Case Media Query Example
Hide element on @media (max-width: 480px)
phone
Change nav layout @media (max-width: 768px)
Adjust grid/card size @media (min-width: 1024px)
Detect landscape mode @media (orientation: landscape)

🧪 Complete Responsive Example


<style>
.header {
background: #007BFF;
color: white;
padding: 20px;
text-align: center;
}

.nav {
display: flex;
justify-content: space-around;
}

@media (max-width: 600px) {


.nav {
flex-direction: column;
align-items: center;
}
}
</style>

<div class="header">
<h1>My Website</h1>
<div class="nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
</div>
✅ This layout becomes column-wise nav on small screens.

Wildcard Selectors?

These are attribute selectors and are very useful for partial matching of attribute values like class, id,
href, src, alt, etc.

🎯 What Are Wildcard Selectors?


Symbol Meaning Matches
*= Contains Matches if attribute contains value
^= Starts with Matches if attribute starts with value
$= Ends with Matches if attribute ends with value

✅ Syntax
[attribute*="value"] { ... } /* contains */
[attribute^="value"] { ... } /* starts with */
[attribute$="value"] { ... } /* ends with */
These are used inside square brackets [ ], targeting HTML attributes.

🧪 Examples for Each Wildcard


1. ✅ [class*="btn"] → Contains btn
<button class="primary-btn">Click</button>
<button class="btn-outline">Submit</button>
[class*="btn"] {
background-color: yellow;
}
➡️Both buttons match because their class contains "btn".

2. ✅ [href^="https"] → Starts with https


<a href="[Link]
<a href="[Link]
[href^="https"] {
color: green;
}
✅ Only the first link is styled — because it starts with "https".

3. ✅ [src$=".png"] → Ends with .png


<img src="[Link]">
<img src="[Link]">
[src$=".png"] {
border: 3px solid red;
}
✅ Only the .png image is selected — because the src ends with .png.
🧠 Real-World Use Cases
Use Case Example
Style all PDF links [href$=".pdf"]
Highlight external links [href^="http"]
Apply styles to images of a type [src$=".jpg"] or [src$=".webp"]
Target buttons with certain class [class*="btn"] or [class^="btn-"]
Forms: target inputs by name [name^="user"], [name$="email"]

⚠️Tips & Notes


 Wildcard selectors can slow down performance if overused — because they match partial
strings.
 They are case-sensitive by default.
 Use them smartly for dynamic content or attribute-based styling (e.g., WordPress, CMS,
React apps).

✨ Summary
Selector Meaning Example Matches
[attr*="x"] Contains x [class*="nav"] main-nav, top-navigation
[attr^="x"] Starts with x [href^="https"] [Link]
[attr$="x"] Ends with x [src$=".jpg"] [Link]

🌈 Working with Gradients in CSS

✅ What is a Gradient in CSS?


A CSS gradient is a smooth transition between two or more colors.
Instead of using an image, you can create backgrounds that gradually blend colors using only CSS
code.
There are three main types:
Gradient Type Description
linear-gradient() Blends colors in a straight line
radial-gradient() Blends colors outward from center
conic-gradient() Blends colors in a circular sweep

🔹 1. Linear Gradient
📌 Syntax:
background: linear-gradient(direction, color1, color2, ...);
📌 Example:
div {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
🔀 Directions:
 to right
 to left
 to top
 to bottom
 45deg, 90deg, etc.
💡 With Multiple Colors:
background: linear-gradient(to bottom, red, yellow, green);

🔹 2. Radial Gradient
📌 Syntax:
background: radial-gradient(shape size at position, color1, color2, ...);
📌 Example:
div {
background: radial-gradient(circle, #6a11cb, #2575fc);
}
 circle or ellipse
 closest-side, farthest-corner, etc.
💡 Example With Positioning:
background: radial-gradient(circle at top left, red, yellow);

🔹 3. Conic Gradient (CSS3)


Used to create pie-like or circular color sweeps.
📌 Syntax:
background: conic-gradient(from angle at position, color1, color2, ...);
📌 Example:
div {
background: conic-gradient(from 0deg, red, yellow, green, red);
}
✅ Good for creating dials, charts, or rainbow circles.

🎨 Full Demo Using All Gradients


<style>
.box {
width: 300px;
height: 150px;
margin: 20px auto;
color: white;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
text-shadow: 1px 1px 2px black;
}

.linear {
background: linear-gradient(135deg, #ff416c, #ff4b2b);
}

.radial {
background: radial-gradient(circle, #43cea2, #185a9d);
}

.conic {
background: conic-gradient(from 90deg, red, orange, yellow, green, blue, violet, red);
}
</style>

<div class="box linear">Linear Gradient</div>


<div class="box radial">Radial Gradient</div>
<div class="box conic">Conic Gradient</div>

📌 Summary Table
Gradient Type Syntax Example
Linear linear-gradient(to right, red, yellow)
Radial radial-gradient(circle, red, yellow)
Conic conic-gradient(from 0deg, red, yellow, green)

You might also like