CSS – Mega Notes
🔥
Internship 12 Weeks | Course Code: 315004
TY Diploma | K Scheme
🏆
Created by Team DiplomaTech Academy
No.1 Academy for MSBTE Diploma Students in Maharashtra
✍ By Mohade Sir & Team
r
Si
Unit – I: de
Introduction to CSS
💡 What is CSS?
● CSS (Cascading Style Sheets) is used to style and design HTML pages.
a
● While HTML creates the structure, CSS makes it attractive, colorful, and
oh
responsive.
● CSS separates content from design, making websites easy to maintain.
M
🌍 Importance of CSS
● CSS brings visual appeal: colors, fonts, layouts, animations.
● Without CSS, a website looks plain and unformatted.
● Modern websites (Facebook, Amazon, YouTube) rely heavily on CSS.
● CSS allows one file to control styles across multiple HTML pages.
🤔 Why Learn CSS?
● It is a core skill for web developers along with HTML and JavaScript.
r
Si
● Helps create responsive websites (mobile-friendly).
● Used in frameworks like Bootstrap, TailwindCSS for faster design.
de
✨ Example Analogy
● HTML = Skeleton (structure)
a
● CSS = Skin & Clothing (appearance)
oh
● JavaScript = Brain & Muscles (interactivity)
M
📜 Types of CSS
Inline CSS – Inside an HTML tag using style.
<p style="color: blue;">Hello CSS!</p>
1.
2. Internal CSS – Inside <style> in the HTML <head>.
External CSS – A separate .css file linked using:
<link rel="stylesheet" href="[Link]">
3.
r
🔑 Key Features of CSS
Si
● Simple, reusable, and lightweight.
● Enables animations, transitions, and layouts like Grid & Flexbox.
●
de
Cascading Nature: Last rule overrides previous ones.
a
🛠 Tools Required
oh
● VS Code (Visual Studio Code): Recommended for writing CSS.
● Web Browser (Chrome/Firefox) for testing designs.
M
💻 Your First CSS Example
Steps:
1. Create a [Link] file.
2. Link it in HTML <head>.
3. Write:
body {
background-color: red;
}
r
Si
This will turn your page background red.
📚 Practice Example
html
de
<!DOCTYPE html>
<html>
a
<head>
<title>My First CSS Page</title>
oh
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Welcome to CSS</h1>
M
<p>This page has a red background.</p>
</body>
</html>
🌳 DOM (Document Object Model)
● Definition: When a webpage is loaded, the browser creates a DOM Tree
(Document Object Model), which is a structured representation of the HTML
document.
● The DOM is like a blueprint of the webpage, where each HTML element (e.g.,
<p>, <div>, <h1>) is represented as an object in a hierarchical tree structure.
r
● JavaScript and CSS can use this tree to style, modify, or manipulate elements
dynamically.
Si
Example of DOM tree visualization:
<html>
└── <body>
de
├── <h1>
└── <p>
💡 Key Point: CSS selectors use the DOM structure to target elements for styling.
a
oh
🏷 HTML Attributes for CSS
To apply CSS effectively, we use id and class attributes in HTML elements.
M
1. id Attribute
● Definition: id is a unique identifier for a single element in a page.
● Only one element can have a particular id.
● Targeted in CSS using the # symbol.
<div id="unique-id">Content</div>
#unique-id {
background: yellow;
color: black;
}
r
2. class Attribute
Si
● Definition: class is used to apply the same style to multiple elements.
● An element can have multiple classes separated by spaces.
● Targeted in CSS using the . symbol.
de
<div class="class1 class2 class3">Content</div>
a
.class1 {
color: red;
}
oh
.class2 {
font-size: 20px;
}
M
💡 Tip: Use id for unique elements (e.g., header, footer) and class for reusable
styles.
🎨 Three Ways to Add CSS to HTML
There are three standard methods to apply CSS styles to an HTML page:
1. Style Tag (Internal CSS)
● Written inside the <style> tag within the <head> section of HTML.
● Used for small websites or single-page designs.
<style>
body { color: red; background: yellow; }
</style>
r
Si
2. Inline CSS
● Written directly in the style attribute of an element.
●
de
Highest priority, but not recommended for large projects (hard to maintain).
<p style="color: blue;">This is a paragraph</p>
a
oh
3. External CSS (Recommended)
● A separate .css file is created and linked using <link> in the <head>.
M
● Best practice for professional websites (reusable & clean code).
<link rel="stylesheet" href="[Link]">
/* [Link] */
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
🎯 CSS Selectors
Selectors are used to target elements in the DOM to apply styles.
Basic Selectors
r
1. Element Selector – Targets all elements of a type.
Si
p{
color: blue;
}
de
2. ID Selector – Targets a single element with a specific id.
#unique-id {
a
color: white;
background: black;
oh
3. Class Selector – Targets all elements with a particular class.
M
.red {
background: red;
}
Advanced Selector Features
● Grouping Selectors – Apply the same style to multiple elements.
h1, h2, h3, div {
color: blue;
}
● Element + Class Combination – Apply style to specific element with a class.
r
[Link] {
Si
color: red; /* Only <p class="red"> */
}
● Universal Selector – Targets all elements on the page.
de
*{
margin: 0;
a
padding: 0;
}
oh
📊 Specificity Notes
● Priority Order (Highest → Lowest):
M
○ Inline CSS (style attribute).
○ ID Selector (#id).
○ Class Selector (.class).
○ Element Selector (h1, p).
○ Universal Selector (*).
● Comments in CSS:
○ Used to add notes inside CSS.
○ Syntax: /* This is a comment */
r
Si
💡 Quick Example
<!DOCTYPE html>
<html>
de
<head>
<link rel="stylesheet" href="[Link]">
<style>
a
h1 { color: purple; }
</style>
oh
</head>
<body>
<h1 style="color: red;">This is inline CSS</h1>
<p class="red">This is a red paragraph.</p>
<div id="unique-id">Styled by ID</div>
M
</body>
</html>
Unit – II: CSS Colors & Backgrounds – Mega Notes
🔥
Internship 12 Weeks | Course Code: 315004
TY Diploma | K Scheme
🏆 No.1 Academy for MSBTE Diploma Students in Maharashtra
Created by Team DiplomaTech Academy
✍ By Mohade Sir & Team
🎨 Text Colors
r
💡 What is the color Property?
Si
● The color property in CSS is used to change the text color of an element.
● Colors can be defined using different formats like color names, HEX codes,
RGB values, or HSL values.
de
Example:
a
p{
color: red; /* This makes paragraph text red */
}
oh
💡 Tip: Use meaningful colors to enhance readability (avoid too bright or too light text
against background).
M
🎯 CSS Color Value Types
There are multiple ways to define colors in CSS:
1️⃣ Color Names
● CSS has 140+ predefined color names like red, blue, green, violet,
orange.
h1 { color: blue; }
2️⃣ RGB (Red, Green, Blue)
r
● Colors are defined using red, green, and blue values ranging from 0 to 255.
Si
● Syntax: rgb(R, G, B)
h2 { color: rgb(200, 98, 70); }
de
💡 Example: rgb(255, 0, 0) = pure red.
a
3️⃣ HEX Code
oh
● Uses hexadecimal values in the form #rrggbb.
● rr, gg, bb represent red, green, and blue values in hex (00 to FF).
M
p { color: #ff7180; }
💡 #000000 = black, #ffffff = white.
4️⃣ HSL (Hue, Saturation, Lightness)
● Hue (0–360): Color wheel degrees (0 = red, 120 = green, 240 = blue).
● Saturation (0%–100%): Intensity of the color.
● Lightness (0%–100%): Brightness (0% = black, 100% = white).
div { color: hsl(8, 90%, 63%); }
r
Si
5️⃣ Extended Options
● RGBA → Adds transparency (Alpha: 0 = transparent, 1 = opaque).
de
p { color: rgba(255, 0, 0, 0.5); } /* Semi-transparent red */
● HSLA → Similar to HSL but with transparency.
a
p { color: hsla(120, 50%, 50%, 0.7); }
oh
🖼 Background Properties in CSS
💡 Why Background Properties?
M
● Backgrounds make websites visually appealing.
● CSS allows you to set solid colors, images, gradients, or even multiple
backgrounds.
1️⃣ Background Color
● Use background-color to fill the element with a solid color.
.container {
background-color: brown;
}
r
Si
2️⃣ Background Image
● Use background-image to place an image as a background.
body {
de
background-image: url("[Link]");
}
💡 Use optimized images for faster page loading.
a
oh
🎛 Background Control Properties
a) Background Repeat
M
● Defines whether the image should repeat horizontally/vertically.
body {
background-repeat: no-repeat; /* Options: repeat, repeat-x, repeat-y */
}
b) Background Size
● Defines how the background image scales inside the element.
body {
background-size: cover; /* Options: cover, contain, auto, or 100px 100px */
}
r
● cover – fills the area, cropping if necessary.
Si
● contain – fits entire image, but may leave empty space.
c) Background Position
de
● Controls the starting point of the background image.
a
div {
background-position: left top; /* Other values: center, right bottom */
oh
d) Background Attachment
M
● Determines whether the background scrolls with content or stays fixed.
div {
background-attachment: fixed; /* Options: fixed or scroll */
}
💡 Fixed backgrounds are common in parallax effects.
⚡ Background Shorthand
We can combine multiple background properties in one line:
div {
background: red url('[Link]') no-repeat fixed right top;
r
}
Si
Order: color → image → repeat → attachment → position.
💡 Important Notes
de
● Use contrast-friendly colors for readability.
● Use shorthand properties to reduce code and improve performance.
a
● For modern designs, prefer CSS gradients over large image files.
oh
● Always test background images on different screen sizes.
M
💻 Quick Example
body {
background: #ffebcd url("[Link]") no-repeat fixed center;
color: rgb(50, 50, 50);
}
Unit – III: CSS Box Model – Mega Notes
🔥
Internship 12 Weeks | Course Code: 315004
TY Diploma | K Scheme
🏆 No.1 Academy for MSBTE Diploma Students in Maharashtra
Created by Team DiplomaTech Academy
✍ By Mohade Sir & Team
r
Si
📦 Understanding the CSS Box Model
● In CSS, every HTML element is treated as a rectangular box.
●
de
This box is made up of 4 layers (from inside to outside):
1️⃣ Content:
a
● The actual data inside the element (text, images, videos).
oh
● Its dimensions are defined by width and height.
2️⃣ Padding:
M
● The space between the content and the border.
● It increases the "inner spacing" inside the element but does not affect other
elements.
3️⃣ Border:
● A visible line surrounding the padding and content.
● Can be styled using border-width, border-style, and border-color.
4️⃣ Margin:
● The outermost space around the element.
● Used to separate elements from each other.
r
Si
Visual Representation of Box Model:
┌───────────────────────────────────────┐
│ Margin (outermost)
de │
│ ┌───────────────────────────────────┐ │
│ │ Border │ │
│ │ ┌───────────────────────────────┐ │ │
a
│ │ │ Padding │ │ │
│ │ │ ┌───────────────────────────┐ │ │ │
oh
│ │ │ │ Content │ │ │ │
│ │ │ └───────────────────────────┘ │ │ │
│ │ └───────────────────────────────┘ │ │
│ └───────────────────────────────────┘ │
M
└───────────────────────────────────────┘
📏 Setting Dimensions
● The width and height of an element define its content box only (by default).
● Example:
#box {
width: 70px;
height: 70px;
}
r
● Total element size = Content + Padding + Border + Margin.
Si
🧮 Width/Height Calculation Example
de
If:
div {
width: 100px;
padding: 10px;
a
border: 5px solid black;
margin: 20px;
oh
Total Width = 100px (content) + 10px + 10px (padding both sides) + 5px + 5px
M
(border both sides) + 20px + 20px (margin both sides) = 170px.
🎯 Margin and Padding
● margin: Creates space outside the element (pushes other elements away).
● padding: Creates space inside the element, between content and border.
Example:
.box {
margin: 3px; /* Sets margin on all 4 sides */
padding: 4px; /* Sets padding equally on all 4 sides */
}
r
Si
Individual Sides:
.box {
margin-top: 5px;
padding-left: 10px;
}
de
🔄 Margin Collapse
a
● When two vertical margins of adjacent elements meet, they collapse into a
oh
single margin.
● The larger margin value is applied (instead of summing).
M
Example:
[Element A: margin-bottom = 3px]
[Element B: margin-top = 7px]
→ Space between elements = 7px (NOT 10px).
⚙ Box-Sizing Property
The box-sizing property changes how width and height are calculated:
css
CopyEdit
div {
box-sizing: border-box;
}
r
Si
Values:
1. content-box (default):
○ Width/height = Content only.
de
○ Padding and border are added outside the specified width/height.
2. border-box:
a
○ Width/height includes content + padding + border.
oh
○ Easier for layout design as total size remains fixed.
M
💻 Practical Example
.container {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid blue;
margin: 15px;
box-sizing: border-box;
}
● Here, total width = 200px (already includes padding and border due to
border-box).
r
Si
a de
oh
M