CSS 3
CSS 3
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 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):
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.
CSS 1
Typography
color – Text color.
CSS 2
Flexbox & Grid (Modern Layouts)
display: flex; – Enables Flexbox.
CSS 3
Transitions & Animations
transition – Creates smooth effect ( all 0.3s ease ).
/* 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;
}
ID Selector ( # )
Selects an element with a specific ID.
#main-title {
font-size: 24px;
}
⚠️ 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>
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 6
Advance Selectors
Pseudo-Elements
✅ First Letter ( ::first-letter )
p::first-letter {
font-size: 2em;
color: red;
}
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;
}
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 */
}
css
CopyEdit
div {
position: absolute;
top: 50px;
left: 50px;
}
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;
}
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 */
}
nav {
position: sticky;
top: 0;
background: #333;
color: white;
padding: 10px;
}
CSS 10
CSS Flexbox, Grid & Media Queries
✅ Main Properties
Property Description Values
display Enables flexbox flex / inline-flex
✅ Main Properties
Property Description Example
display Enables grid grid / inline-grid
CSS 11
🎯 Example: Simple Grid Layout
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Three equal columns */
grid-gap: 20px;
}
✅ Basic Syntax
@media (max-width: 768px) {
body {
background-color: lightgray;
}
}
.container {
display: flex;
}
CSS 12
Practice tests :
Pseudo Selectors
CSS 13
Create a beautiful form and structure this as below
CSS 14
Create this type of table using flex
CSS 15
Create this type of animation
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/
https://ui.shadcn.com/
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
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 :
https://github.com/Complete-Coding/CSS_Complete_YouTube/tree/main/Course%20Code/css
Cheatsheet :
CSS 18