CSS
History of CSS
In 1994, Tim Berners Lee formed the World Wide Web Consortium, (W3C) at the Massachusetts Institute of
Technology Laboratory for Computer Science. The W3C creates recommendations that are used to keep the web
experience consistent among different browsers.
• CSS was first proposed by
Hakon Wium Lie on October 1994.
• CSS was proposed in 1994 as a web styling language, to solve styling. There were other styling
languages proposed at this time, such as Style Sheets for Html and JSSS but CSS won.
• CSS level 2 specification was developed by the W3C and published in May 1998.
• CSS3 was released in 1999, Unlike CSS2, which was comprised of a single document, CSS3 has
its specifications divided into individual modules, which makes CSS3 easier to handle.
With CSS3, the designers can now use special fonts like google fonts and Typecast. Earlier, with
CSS and CSS2, designers could only use “web safe fonts” of CSS
Introduction
Cascading Style Sheets (CSS):
a. Used to describe the presentation of HTML documents
b. Define sizes, spacing, fonts, colors, layout, etc.
c. Improve content accessibility, flexibility
d. Controls all aspects of visualization
CSS is designed to separate presentation from content. It can specify different styles for different media: on-
screen, in print, handheld, projection, etc.
• Cascade priorities or specificity (weight) are calculated and assigned to rules. Child elements in the HTML DOM
tree inherit styles from their parent, which can be overridden using !important.
• Some CSS styles are inherited while others are not. Text-related properties that are inherited include color, font-
size, font-family, line-height, text-align, and list-related properties.
• Box-related and positioning styles are not inherited: width, height, border, margin, padding, position, float, etc.
Elements do not inherit color and text-decoration.
Common CSS Properties
Layout & Box Model
width / height – Sets the size of an element.
margin – Space around an element (outside border).
padding – Space inside an element (inside border).
border – Defines a border around an element.
display – Controls element visibility ( block , inline , flex , etc.).
position – Determines positioning ( static , relative , absolute , fixed , sticky ).
z-index – Controls the stacking order of elements.
overflow – Handles content overflow ( visible , hidden , scroll , auto ).
CSS 1
Typography
color – Text color.
font-size – Size of the text.
font-family – Specifies the font style ( Arial , Roboto , etc.).
font-weight – Defines text boldness ( normal , bold , lighter , bolder , 100-900 ).
line-height – Space between lines of text.
text-align – Aligns text ( left , center , right , justify ).
text-decoration – Adds effects like underline , overline , line-through .
letter-spacing – Adjusts space between letters.
Background & Colors
background-color – Sets background color.
background-image – Sets background image.
background-size – Controls background image size ( cover , contain ).
opacity – Adjusts transparency ( 0 to 1 ).
CSS 2
Flexbox & Grid (Modern Layouts)
display: flex; – Enables Flexbox.
justify-content – Aligns items horizontally ( flex-start , center , space-between ).
align-items – Aligns items vertically ( flex-start , center , stretch ).
flex-direction – Defines direction ( row , column ).
display: grid; – Enables Grid layout.
grid-template-columns – Defines column structure ( 1fr 2fr 1fr ).
grid-gap – Controls spacing between grid items.
CSS 3
Transitions & Animations
transition – Creates smooth effect ( all 0.3s ease ).
transform – Rotates, scales, or translates an element ( scale(1.2) , rotate(45deg) ).
animation – Defines CSS animations.
Ways to Write CSS Rules
Inline CSS (Applied directly to elements)
<p style="color: red; font-size: 18px;">This is red text.</p>
✅ Quick for testing. ❌ Not reusable.
Internal CSS (Inside <style> tag in HTML file)
<!-- Inside html file-->
<head>
<style>
p{
color: blue;
font-size: 20px;
}
</style>
</head>
✅ Better for small projects. ❌ Not modular.
External CSS (Linked CSS file)
/* styles.css */
p{
color: green;
font-size: 22px;
}
<head>
<link rel="stylesheet" href="styles.css">
</head>
CSS 4
CSS Selectors
Basic Selectors
Universal Selector ()
Selects all elements.
*{
margin: 0;
padding: 0;
}
Element Selector
Selects all elements of a given type.
p{
color: blue;
}
Class Selector ( . )
Selects elements with a specific class.
.text-red {
color: red;
}
<p class="text-red">This text is red.</p>
ID Selector ( # )
Selects an element with a specific ID.
#main-title {
font-size: 24px;
}
<h1 id="main-title">Main Title</h1>
⚠️ Avoid using IDs for styling (better for JavaScript or unique cases).
Grouping & Combining Selectors
Grouping ( A, B )
CSS 5
Applies the same styles to multiple selectors.
h1, h2, h3 {
font-family: Arial, sans-serif;
}
Descendant Selector ( A B )
Selects elements inside another element.
div p {
color: green;
}
<div>
<p>This paragraph is green.</p>
</div>
Child Selector ( A > B )
Selects direct children.
div > p {
color: orange;
}
<div>
<p>This paragraph is orange.</p> <!-- Selected -->
<span><p>Not selected</p></span>
</div>
Adjacent Sibling ( A + B )
Selects the next sibling.
h1 + p {
color: purple;
}
<h1>Heading</h1>
<p>First paragraph (purple).</p>
<p>Second paragraph (not selected).</p>
General Sibling ( A ~ B )
Selects all siblings after A .
h1 ~ p {
color: brown;
}
CSS Selector Cheat Sheet
Selector Description Example
* Selects all elements * { margin: 0; }
A, B Multiple elements h1, p { color: red; }
AB Descendant div p { color: green; }
A>B Direct child div > p { color: blue; }
A+B Adjacent sibling h1 + p { color: orange; }
A~B General sibling h1 ~ p { color: purple; }
CSS 6
Advance Selectors
Pseudo-Elements
✅ First Letter ( ::first-letter )
p::first-letter {
font-size: 2em;
color: red;
}
✅ First Line ( ::first-line )
p::first-line {
font-weight: bold;
}
✅ Before ( ::before )
h1::before {
content: " 🔥 ";
}
After ( ::after )
h1::after {
content: " ✨";
}
CSS 7
What is position in CSS?
The position property in CSS determines how an element is placed in the document flow. It has five values:
✅ static (default)
✅ relative
✅ absolute
✅ fixed
✅ sticky
1. static (Default)
Elements appear in the normal document flow.
CSS 8
div {
position: static;
}
✅ No effect unless changed.
❌ Cannot use , , , top left right bottom .
2. relative
Element stays in the normal flow but can be moved using top , left , right , bottom .
div {
position: relative;
top: 20px; /* Moves 20px down */
left: 30px; /* Moves 30px right */
}
✅ Moves relative to its original position.
3. absolute
Element is removed from the normal flow and positioned relative to its nearest positioned ancestor (if none,
then <html> ).
css
CopyEdit
div {
position: absolute;
top: 50px;
left: 50px;
}
✅ Moves freely within the parent.
❌ Parent must have , , or relative absolute fixed position for reference.
css
CopyEdit
.parent {
position: relative; /* Reference for absolute child */
}
.child {
position: absolute;
top: 10px;
left: 20px;
}
4. fixed
Element is removed from normal flow and stays fixed relative to the viewport (even when scrolling).
div {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: black;
color: white;
}
✅ Great for sticky headers, floating buttons.
CSS 9
❌ Doesn't move with parent elements.
5. sticky
Element behaves like relative until it reaches a scroll position, then behaves like fixed.
div {
position: sticky;
top: 20px; /* Sticks at 20px from the top when scrolling */
}
✅ Good for navigation bars.
❌ Needs a parent with enough height to work.
CSS Position Table
Position Stays in Flow? Moves with Parent? Scrolls with Page? Example Use Case
static ✅ Yes ✅ Yes ✅ Yes Default behavior
relative ✅ Yes ✅ Yes ✅ Yes Adjusting elements slightly
absolute ❌ No ✅ If ancestor is positioned ❌ No Tooltips, modals, floating elements
fixed ❌ No ❌ No ✅ Stays fixed Sticky headers, floating buttons
sticky ✅ Yes (initially) ✅ Yes ✅ Until a threshold Sticky navigation bars
Example Use Case: Sticky Navbar
nav {
position: sticky;
top: 0;
background: #333;
color: white;
padding: 10px;
}
CSS Box Model
Box Model Table
Property Description Example
width Width of content width: 300px;
height Height of content height: 150px;
padding Inside spacing padding: 10px;
border Surrounding border border: 2px solid black;
margin Outside spacing margin: 20px;
box-sizing Defines box behavior box-sizing: border-box;
CSS 10
CSS Flexbox, Grid & Media Queries
1. CSS Flexbox (Flexible Box Layout)
Flexbox is used to create responsive, one-dimensional layouts (row or column).
✅ Basic Flexbox Properties
container {
display: flex; /* Enables Flexbox */
justify-content: center; /* Aligns items horizontally */
align-items: center; /* Aligns items vertically */
gap: 10px; /* Space between items */
}
✅ Main Properties
Property Description Values
display Enables flexbox flex / inline-flex
flex-direction Direction of items row / column / row-reverse / column-reverse
flex-start / flex-end / center / space-between /
justify-content Align items horizontally
space-around / space-evenly
align-items Align items vertically flex-start / flex-end / center / stretch / baseline
align-self Aligns a specific item Same values as align-items
flex-wrap Wraps items into new lines nowrap / wrap / wrap-reverse
gap Space between items 10px / 1rem
🎯 Example: Centering Items with Flexbox
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
2. CSS Grid (Two-Dimensional Layout)
CSS Grid is best for complex layouts with rows and columns.
✅ Basic Grid Properties
.container {
display: grid; /* Enables Grid */
grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
grid-template-rows: auto; /* Automatic row sizing */
gap: 10px; /* Space between grid items */
}
✅ Main Properties
Property Description Example
display Enables grid grid / inline-grid
grid-template-columns Defines columns repeat(3, 1fr)
grid-template-rows Defines rows auto / 100px 200px
grid-column-gap Space between columns 10px
grid-row-gap Space between rows 15px
grid-gap Space between both rows & columns 10px
justify-items Aligns items horizontally start / center / end
align-items Aligns items vertically start / center / end
CSS 11
🎯 Example: Simple Grid Layout
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Three equal columns */
grid-gap: 20px;
}
3. CSS Media Queries (Responsive Design)
Media Queries allow layouts to adapt based on screen size.
✅ Basic Syntax
@media (max-width: 768px) {
body {
background-color: lightgray;
}
}
🎯Breakpoints for Responsive Design:
Device Width (px)
Extra Small (Phones) max-width: 576px
Small (Tablets) max-width: 768px
Medium (Laptops) max-width: 992px
Large (Desktops) max-width: 1200px
Example: Responsive Layout
.container {
display: flex;
}
@media (max-width: 768px) {
.container {
flex-direction: column; /* Stack items vertically */
}
}
Flexbox vs. Grid: When to Use What?
Feature Flexbox Grid
Layout Type 1D (Row or Column) 2D (Rows & Columns)
Best For Aligning items Complex layouts
Example Use Navbar, buttons Full-page layouts
Flexbox Froggy - A game for learning CSS flexbox
CSS 12
Practice tests :
Use CSS properties to design the followings
Pseudo Selectors - Nth child
Pseudo Selectors
CSS 13
Create a beautiful form and structure this as below
CSS 14
Create this type of table using flex
Create this by using grid and flex
CSS 15
Create this type of animation
Create this beautiful landing page
CSS 16
CSS Frameworks
Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize
prebuilt grid system and components, and bring projects to life with powerful JavaScript
plugins.
https://getbootstrap.com/
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever
leaving your HTML.
https://tailwindcss.com/
MUI: The React component library you always wanted
MUI provides a simple, customizable, and accessible library of React components. Follow your
own design system, or start with Material Design.
https://mui.com/?srsltid=AfmBOorhaaW4qM2pImnLfcTE2lmK70Kb1L-51T5hjtGv6PDyHGi1_Or
7
Last but not least
Build your component library - shadcn/ui
A set of beautifully-designed, accessible components and a code distribution platform. Works
with your favorite frameworks. Open Source. Open Code.
https://ui.shadcn.com/
for more details of CSS Framework
The Best CSS Frameworks to Use in Your Projects
By Victor Ikechukwu CSS has come a long way over the past few years. In the past, you'd use
CSS to create simple-looking web applications that rely on HTML tables and CSS floats as their
layout systems. And now you can architect complex interactive u...
https://www.freecodecamp.org/news/best-css-frameworks-for-frontend-devs/
To know more about HTML 5
Documentation :
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of
the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many,
many more.
https://www.w3schools.com/css/default.asp
YouTube Videos :
CSS 17
CSS Tutorial In Hindi (With Notes) 🔥
CSS Tutorial For Beginners in Hindi: In this CSS3 tutorial in Hindi we will learn everything you
need to learn about CSS from scratch. We will first discuss why we need CSS and what CSS is
after which we will gradually build pace and learn several intermediate to advanced level
https://youtu.be/Edsxf_NBFrw?si=f48rrK_oRajSPRXJ
🚀 🔥 CSS Complete Course (2024) for Beginners | Myntra Project | Notes | GitHub | Certification
For MERN stack admission queries, message us or WhatsApp on +91-8000121313
- GitHub Code Repo: https://github.com/Complete-Coding/CSS_Complete_YouTube
https://youtu.be/OpWjt_wbV4E?si=EctpWujFKAc6KlGX
HTML & CSS Full Course - Beginner to Pro
Certificates are now available! https://courses.supersimple.dev/courses/html-css
🎓 Enroll to get a Certificate of Completion and an elevated learning experience (breakdown into
smaller videos covering specific topics, ad-free content, and progress tracking).
https://youtu.be/G3e-cpL7ofc?si=TApuPrOiX24aStmg
CSS Tutorial for Beginners | Complete CSS with Project, Notes & Code
Notes - https://drive.google.com/drive/folders/1wfNTKinBAV6CCxaI5lfSnnRFAYpy0uEl?
usp=share_link
https://youtu.be/ESnrn1kAD4E?si=GU_t13BFms6iilkW
GitHub Repos :
CSS_Complete_YouTube/Course Code/css at main · Complete-Coding/CSS_Complete_YouTube
This repo will have all the code taught in the Complete CSS YouTube course - Complete-
Coding/CSS_Complete_YouTube
https://github.com/Complete-Coding/CSS_Complete_YouTube/tree/main/Course%20Code/css
Cheatsheet :
CSS Cheatsheet | CodeWithHarry
CSS Cheatsheet for coders coding in CSS
https://www.codewithharry.com/blogpost/css-cheatsheet/
CSS (OneShot) - Google Drive
https://drive.google.com/drive/folders/1aUkX1itCHXsYgoRdC-RIJgloZmz2eC-F
CSS 18
