Scribd
Upload
21 views

CSS 3

The document provides a comprehensive overview of Cascading Style Sheets (CSS), detailing its history, specifications, and various properties used for styling HTML documents. It covers fundamental concepts such as the box model, layout techniques like Flexbox and Grid, and the use of media queries for responsive design. Additionally, it introduces common CSS frameworks like Bootstrap and Tailwind CSS for efficient web development.

Uploaded by

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

CSS 3

The document provides a comprehensive overview of Cascading Style Sheets (CSS), detailing its history, specifications, and various properties used for styling HTML documents. It covers fundamental concepts such as the box model, layout techniques like Flexbox and Grid, and the use of media queries for responsive design. Additionally, it introduces common CSS frameworks like Bootstrap and Tailwind CSS for efficient web development.

Uploaded by

koteswark14
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

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

You might also like