Scribd
Upload
2 views

CSS Course

The document outlines a comprehensive CSS course covering basics, advanced topics, and professional level skills. It includes details on CSS rule structure, selectors, properties, and various techniques such as gradients, animations, and responsive design. Additionally, it highlights the history of CSS and its evolution, along with practical coding examples and project suggestions.

Uploaded by

cool
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

CSS Course

The document outlines a comprehensive CSS course covering basics, advanced topics, and professional level skills. It includes details on CSS rule structure, selectors, properties, and various techniques such as gradients, animations, and responsive design. Additionally, it highlights the history of CSS and its evolution, along with practical coding examples and project suggestions.

Uploaded by

cool
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 159

COMPLET

CSS
E World Best CSS Course

COURSE
Ever
COURSE
TOPICS
BASICS ADVANCED PRO LEV EL

What is C SS ? CSS3 Gradients 50+ Interview


C SS rule structure C SS 3 S hadows & Questions 30+
How to use C SS in Filters C SS
Tips & Tricks
html? Types of Combinators
Selectors? Complete Notes +
C SS Pseudo Class &
Comments in C SS Element CSS3 Column Codes 100+
Colors & Background Layout Animated S lides
Prop. C SS Units & C SS 3 Flexbox & Grid 10+ Animated
Dimensions Fonts & C SS 3 Animations , Projects
Text Properties C SS Transform
PROJECT –
Box Model Transitions &
Perspective C SS Complete
Border, Padding &
Specificity & Prefixes
M ultipag e
Margin C SS Display,
WEBS ITE Using
Floats etc.. C SS M edia & Cont.
HTM L & C SS 💖
C SS Positions & Z- Queries C SS BEM,
S M A C SS etc.. C SS Performance
index C SS
and Optimization
0
1
www.shieldxacademy.
com

HTML

C SS

JAVASCRIP
T
Styles and designs
the appearance of
Provides the the webpage Adds interactivity
structure and
and dynamic
content of a
behavior to the
webpage.
webpage.
REAL
Cascading Style

WORLD
EXAMPL
Sheets

E
0
1
What is
CSS?
CS
Cascading Style
Sheets

S
Subscribe Thapa Technic
S hee
Styl
Cascading e t s
What is
CSS?
• Cascading Style Sheets (CSS) is a stylesheet language used to describe
the look & presentation of a document written in HTML or XML. It
defines how elements are displayed on a web page.

• CSS makes websites visually appealing and user-friendly.


How to code
CSS ?
h1 {
color: red;
font-size: 32px;
}
Creators & Maintenance of
CSS?
• CSS was created by a group of individuals known as the World Wide Web
Consortium (W3C).

• Primary contributors include Håkon Wium Lie and Bert Bos.

• CSS standards and specifications are maintained by the W3C.

• A community of web developers, designers, and browser vendors also


contribute to its evolution.

• Regular updates and new versions ensure CSS remains relevant and
adaptable to
changing web design needs.
CSS History
(Version)
CSS1 (1996)
0
Limited properties and
1 selectors.

CSSfi (1998)
CSS to 0
CSS 2 was released and work on CSS 3
2
CSS3 began

CSS fi.1 (fi011)


0
CSS 2.1 was released, which fixed
3 the errors found in CSS 2
0f
i
CSS
Rule
Structur
e
CSS Rule
Structure
• A CSS rule consists of a selector and a declaration block.
• Declarations are used to define the style properties for the selected
elements.
• Each declaration consists of a property and a value.
Declaratio
selector { n
property: value;
/* More properties and values */
}
CSS Rule
Structure
Selecto
r
Valu
h1 { e
color: red;
Propert font-size: 32px;
y
}
Syntax –
CSS
Selecto
r
Valu
p{ e
color: blue;
Propert font-weight: bold;
y
}
Declaratio
n
0
3
How to
use CSS in
HTML?
Inline CSS
0
Style applied directly to an HTML
1 element using the style attribute.

Internal CSS
3 0
Styles defined within the <style> tag
2
Ways within the
HTML document's <head>.

External CSS
0
Styles stored in separate .css files linked
3 to the HTML document using the <link>
element.
0
4
Types
of
Selector
s
CSS Tag / Element
Selector
Selecto
r
Valu
h1 { e
color: red;
Propert font-size: 32px;
y
}
Class Selector – HTML /
CSS Class-Selector

<section>
<button class="btn">
Subscribe Thapa Technical
</button>
</section>
Class Selector –
CSS
Class-
Selector
Valu
.btn{ e
color: blue;
Propert font-weight: bold;
y
}
Declaratio
n
ID Selector – HTML /
CSS ID-Selector

<section>
<button id="btn">
Subscribe Thapa
Technical
</button>
</section>
ID Selector –
CSS
ID-
Selector
Valu
#btn{ e
color: blue;
Propert font-weight: bold;
y
}
Pseudo- Class –
CSS
Pseudo-
class
Valu
a:hover{ e

color: blue;
Propert font-weight: bold;
y
}
Declaratio
n
05
CSS
Comment
s
CSS
Comment
/* This is a comment
*/
0
COLOR 6

S
IN CSS
RGB – YELLOW
RGB = 255, 255,
CSS
0
RED – FF 00
00 255, 0,
0 HEX = #FF
FF 00
1
0

GREEN – 00 FF
0f
00
i

G REE
0, 255, 0

0
BLUE – 00 00 RE
3
FF D N
0, 0, 255

CYAN
Magenta
RGB = 0, 255,
RGB = 255, 0,
255 HEX = #FF
B LU 255
E HEX = #00 FF
00 FF
FF
😊
COLOR
S
(BONUS)
GRAPHIC DESGINER –
CSS
1 Hue: A puíe
coloí

Tint: A puíe coloí


f
i with just white
added
Shade: a puíe coloí
3
with
just black added
Tone: A puíe coloí
4
with
just gíey added
GRAPHIC DESGINER –
CSS
0
7
BACKGROUND IN
CSS
BACKGROUND PROPERTIES -
CSS
01 background- 04 background-

color position

0f background- 0 background-
i image 5 size

03 background- 06 background-

repeat attachment
0
8
UNITS IN
CSS
Absolute Relative
Lengths Lengths

01 Pexels 04
(px ) em

0f Inches 0 Root em
i (in) 5 (rem)

03 Points 0 Percentag e
6 (%)
(pt)
0
FONTS IN 8

CSS
FONT PROPERTIES -
CSS
01 Font 04 Font

Family S tyle

0f Font 0 Font
i S ize 5 V ariant

03 Font

Weig ht
0
TEXTS IN 9

CSS
TEXT PROPERTIES -
CSS
01 Text 04 Text

Alignment Spacing

0f Text 0 Text
i Decoration 5 Shadow

03 Text

Transform
TEXT SHADOW –
CSS Blur-
radius
O ffset-
Y

text-shadow: 2px 2px 1px blue;


O ffset- Colo
X r
BOX MODEL –
CSS TO
P
MARGIN

BORDER

PADDING

RIG H

HT
HEIG
LEF
CONTENT
T T
T
WIDTH

BOTTO
M
1
0
BORDER IN
CSS
Border –
CSS Border-
Color
Border-
Style

border: 2px solid blue;


Border-Width
1
1
PADDING IN
CSS
Padding –
CSS Padding-
Left
Padding-
Right

padding: 2px 4px 3px 5px;


Padding-
Top
Padding-
Bottom
1
fi
MARGIN IN
CSS
Margin –
CSS Margin-
Left
Margin-
Right

margin: 2px 4px 3px 5px;


Margin-
Top
Margin-
Bottom
1
3
BOX-
MODEL
IN
CSS
BOX MODEL –
CSS TO
P
MARGIN

BORDER

PADDING

RIG H

HT
HEIG
LEF
CONTENT
T T
T
WIDTH

BOTTO
M
14
CSS
Gradient
s
Gradient –
CSS
Color-
Property stop2

background-image: linear-gradient(red, yellow);

Color-stop1
Gradient with Direction –
CSS
Propert
y

background-image: linear-gradient
Directio
(to right, n
red, yellow);

Color-
stops
Gradient with Angles –
CSS
Property

background-image: linear-gradient
Angl
(90deg, e
red, yellow);

Color-stops
Radial Gradient –
CSS
Color-
Property stop2

background-image: radial-gradient(red, yellow);

Color-stop1
Gradient with Shape –
CSS
Property

background-image: linear-gradient
Shap
(circle, e
red, yellow);

Color-stops
1
5
BOX
IN
SHADOWCSS
BOX SHADOW –
CSS
Density/
Off set-
Spread
Y

box-shadow: -2px 1px 2px 4px #61677a;

Off set- Colo


X Blur- r
radius
1
6
DROP
IN
SHADOW
CSS
DROP SHADOW –
CSS
Colo
Off set- r
Y

drop-shadow: -2px 1px 2px #61677a;

Off set-
X Blur-
radius
1
7
FILTERS IN
CSS
FILTERS -
CSS
01 0f opacit
i y()
g ra yscale()

0 blur 0 contras
3 () 4 t()

05 06
brightness() invert()
1
8
LISTS IN
CSS
LIST PROPERTIES -
CSS
01 List-style- 03 List-style-

type position

0f List-style- 0 List-style-
i image property
4
1
9
ANCHOR IN
CSS
ANCHOR STATES -
CSS
0 Link 0f Visited
1 (`a:link`) i (`a:visited`)

03 Hover (`a:hover`) 04 A ctive

(`a :a ctive`)
fi
0
COMBINATOR
S
IN CSS
COMBINATORS -
CSS
Descendant
0 0f Child Selector
Selector
1 i (>)
(Space)
Adjacent General Sibling
0 S ibling 0 Selector
3 Selector (+) 4 (~)

0 Universal
5 Selector (*)
fi
1
DISPLAY IN
CSS
DISPLAYS -
CSS
0 Block-Level 0f Inline
1 Elements i Elements

0 Inline-Block
3 Elements
fif
i
POSITION
S
IN CSS
POSITIONS -
CSS
0 Relati 0f Absolu
1 ve i te

03 04
S ta tic Fixed

0 S tic
5 ky
POSITIONS –
Absolute
Top:0,
left:0
Top:0,
íight:0
.child {
position: absolute;
}
Child
Div

Parent
Div

bottom:0, bottom:0,
left:0 íight:0
POSITIONS –
Absolute
Top:0,
left:0
By Default: Top: 0,
left: 0
Top:0,
íight:0
.child {
position: absolute;
left: 50%
}

bottom:0, bottom:0,
left:0 íight:0
POSITIONS –
Absolute
Top:0,
left:0
Top:0,
íight:0
.child {
position: absolute;
left: 50%
top:50%
}

bottom:0, bottom:0,
left:0 íight:0
POSITIONS –
Absolute
Top:0,
left:0
Top:0,
íight:0
.child {
position: absolute;
left: 0;
bottom:0;
}

bottom:0, bottom:0,
left:0 íight:0
POSITIONS –
Absolute
Top:0,
left:0
Top:0,
íight:0
.child {
position: absolute;
right: 0;

bottom:0;
}

bottom:0, bottom:0,
left:0 íight:0
POSITIONS –
Absolute
Top:0,
left:0
Top:0,
íight:0
.child {
position: absolute;
top: 0;

left:0;
}

bottom:0, bottom:0,
left:0 íight:0
POSITIONS –
Absolute
Top:0,
left:0
Top:0,
íight:0

You can use px and any


values. Also, if you
love the animation,
Pls subscribe and our
Target – 1 Million

bottom:0, bottom:0,
left:0 íight:0
🔥

Z-INDEX IN
CSS
fi
5
OVERFLO
W
IN CSS
OVERFLOW -
CSS
Overflow:
0 03 Overflow:
Visible
1 (Default) Scroll

0f Overflow: 0 Overflow:
i Hidden Auto
4
fi
6
PSEUDO
ELEMENTS
IN CSS
Pseudo Elements -
CSS
0 ::befo 0f ::aft
1 re i er

03 ::first-letter 04 ::first-line

0 ::selecti 0 ::placehol
5 on 6 der
fi
7
PSEUDO
CLASS
IN CSS
Pseudo Class -
CSS
0 :hov 0f :first-
1 er i child

03 :last- 04 :nth-

child child(n)

0 :first-of- 0 :last-of-
5 type 6 type
fi
8
COLUMN
LAYOUT
IN CSS
COLUMN LAYOUT -
CSS
0 Column- 0f Column-
1 count i g ap

03 Column- 04 Column-

rule fill
fi
8
FLEXBOX
IN CSS
FLEXBOX -
CONTAINER
.flex-container {
display: flex;
}
FLEXBOX –
ROW
.flex-container {
display: flex;
flex-direction:
row;
}

MAIN-AXIS

CROSS-AXIS
FLEXBOX -
COLUMN
.flex-container {
display: flex;
flex-direction:
row;
flex-direction:
Column;
}
MAIN-AXIS

CROSS-AXIS
FLEXBOX -
CONTAINER
.flex-container {
display: flex;
flex-direction: Column;
flex-direction: row;
justify-content:start
CROSS- }
AXIS

MAIN-AXIS
FLEXBOX -
CSS
.flex-container {
display: flex;
flex-direction:
row;
justify-
content:center
}
MAIN-AXIS

CROSS-AXIS
FLEXBOX -
CSS
.flex-container {
display: flex;
flex-direction: row;
justify-content:flex-end
}
FLEXBOX -
CSS
.flex-container {
display: flex;
flex-direction:
row;
justify-
content:space-
between
}
FLEXBOX -
CSS
.flex-container {
display: flex;
flex-direction:
row;
justify-
content:start;
}
FLEXBOX -
CSS .flex-container {
display: flex;
flex-direction: row;
justify-content:start;
align-items: start;
}
FLEXBOX -
CSS .flex-container {
display: flex;
flex-direction: row;
justify-content:start;
align-items: center;
}
FLEXBOX -
COLUMN .flex-container {
display: flex;
flex-direction: row;
justify-content:start;
align-items:end
}
FLEXBOX -
COLUMN .flex-container {
display: flex;
flex-direction: row;
justify-content:center
align-items:end;
}
FLEXBOX -
COLUMN .flex-container {
display: flex;
flex-direction: row;
justify-content:center
align-items:center
}
FLEXBOX -
COLUMN .flex-container {
display: flex;
flex-direction: row;
justify-content:center
align-items:center
}
🚀

GRID IN
CSS
fi
9
TRANSITIONS
IN CSS
TRANSITIONS -
CSS
01 transition- 03 transition-timing-

property function

0f transition- 0 transition-
i duration delay
4
3
0
TRANSFOR
M
IN CSS
TRANSFORM -
CSS
0 transform: 0f transform:
1 translate() i scale()

03 transform: 04 transform:

rotate() skew()
3
1
ANIMATIO
N
IN CSS
ANIMATION -
CSS
0 animation- 0f animation-
1 name i duration

03 animation-timing- 04 animation-

function delay

0 animation-iteration- 0 animation-
5 count 6 direction
3f
i
CSS
VARIABLES
IN
CSS
3
3
SPECIFICIT
Y
IN CSS
SELCTORS IN
CSS
Element /
0 * (universal 0f
pseudo-
1 selector) i element

03 Cla ss or pseudo- 04
cla ss id

0 Inline 0 !
5 style 6 importa
nt
The Level of SPECIFICITY -
CSS

0.0.0.0.0 * (Universal
Selector)

The universal selector has 0 specificity (No


priority)

Subscribe Thapa Technic


The Level of SPECIFICITY -
Element

0.0.0.0.1 Element / pseudo-


elements

Includes only element selectors, such as h1, img,


p::before. For each ID in a matching selector, add 0-0-0-
0-1 to the weight value.
The Level of SPECIFICITY -
Class

0.0.0.1.0 class / pseudo-classes /


data- attribute

Includes class selectors, such as .myClass,


[type="radio"],
:hover. For each class, attribute selector, or pseudo-
class in a matching selector, add 0-0-0-1-0 to the
weight value.
Subscribe Thapa Technic
The Level of SPECIFICITY
- ID

0.0.1.0.0 Id

Includes only ID selectors, such as #btn. For


each ID in a matching selector, add 0-0-1-0-0
to the weight value.
The Level of SPECIFICITY -
Inline

0.1.0.0.0
Inlin
e

For each inline style ex


<div class="container" style="background: #000;">,
add 0-1-0-0-0 to the weight value.

Subscribe Thapa Technic


The Level of SPECIFICITY - !
Important

!
importa
nt
1.0.0.0.0
For each important keyword ex h1 {color: red!
important}
add 1-0-0-0-0 to the weight value.
3
4
NEW CSS
FEATURES
New Features -
CSS
Media query
0 :is, :has, :not, : 0f
range syntax
1 where i

03 Container 04 Accent-color
queries

0 Aspect 0 Scroll
5 ratio 6 snap
New Features -
CSS
Individual
0 0 C SS
Transform
7 8 Nesting
Properties

C SS Logical
09 Gap Property for 1 Properties
Flexbox
0 (inline and block)

1 C SS Writing 1 :focus-
1 Mode fi visible
3
5
BONU
S
IN CSS
BONUS -
CSS
0 FLOA 0f C SS CLIP
1 TS i PATH

03 C SS AOS 04 C S S SHAPE

PLUGIN DIVIDER

0 SCROLL BAR 0 WEBSITE


5 STYLING 6 REFERENCES
CLIP PATH –
CSS
Left: 0%
Top: 100%
img{
clip-path: polygon(50% 0%, 0% 100%, 100%
100%);
} Left:50 Left:
% Top: 100%
0% Top:
100%
3
6
MINI
PROJECTS
IN CSS
🚀
HOW
TO
CENTER A
DIV INSIDE
A DIV
🔥

HOW TO
CENTER A DIV
INSIDE
IN DIV
CSS
POSITIONS –
Absolute
Top:0,
left:0
Top:0,
íight:0
.child {
position: absolute;
}
Child
Div

Parent
Div

bottom:0, bottom:0,
left:0 íight:0
POSITIONS –
Absolute
Top:0,
left:0
By Default: Top: 0,
left: 0
Top:0,
íight:0
.child {
position: absolute;
left: 50%
}

bottom:0, bottom:0,
left:0 íight:0
POSITIONS –
Absolute
Top:0,
left:0
Top:0,
íight:0
.child {
position: absolute;
left: 50%
top:50%
}

bottom:0, bottom:0,
left:0 íight:0
POSITIONS –
Absolute
Top:0,
left:0
Top:0,
íight:0

.child {
position: absolute;
left: 50%;
top:50%;
transform:translate
(-50%)
}

bottom:0, bottom:0,
left:0 íight:0
POSITIONS –
Absolute
Top:0,
left:0
Top:0,
íight:0

.child {
position: absolute;
left: 50%;
top:50%;
transform:translate
(-50%,-50%)
}

bottom:0, bottom:0,
left:0 íight:0
POSITIONS –
Absolute
Top:0,
left:0
Top:0,
íight:0

.child {
position: absolute;
left: 50%;
bottom:50%;
transform:translate
(-50%,-50%)
}

bottom:0, bottom:0,
left:0 íight:0
FLEXBOX -
CSS .flex-container {
display: flex;
flex-direction: row;
justify-content:start;
align-items: center;
}
FLEXBOX -
COLUMN .flex-container {
display: flex;
flex-direction: row;
justify-content:start;
align-items:end
}

Subscribe Thapa Technic


FLEXBOX -
COLUMN .flex-container {
display: flex;
flex-direction: row;
justify-content:center
align-items:end;
}
FLEXBOX -
COLUMN .flex-container {
display: flex;
flex-direction: row;
justify-content:center
align-items:center
}
FLEXBOX -
COLUMN
.flex-container {
display: flex;
flex-direction: row;
justify-content:center;
align-items:center;
}

Please Like & Share the


World’s Best CSS
Course Ever 💖
Contain
er
Queries
3
7
CSS
Architecture
& Best
Practices
VENDOR
PREFIXES
Browser Compatibility in CSS
VENDOR PREFIXES -
CSSThe -webkit- prefixed property will work in
0
WebKit-based
browsers such as Chrome
1
and S afari

0f The -moz- prefixed property will work


i in Firefox

0 The -ms- prefixed property will work in


3 Internet Explorer

04 The -o- prefixed property will work in

Opera
Browser Compatibility in
CSS

https://www.w3.org/community/webed/wiki/
Optimizing_content_for_different_browsers:_the_RIGHT_way
BE
M
BEM (Block,
Element,
Modifier)
Methodology
https://getbem.com/
https://css-tricks.com/bem-101/
SMACS
S
SMACSS
(Scalable and
Modular
Architecture for
Home - Scalable and Modular Architecture for C S S
(smacss.com)

CSS)
4
0
FINAL
PROJECTS
IN CSS
4

SE 1

O
IN
SEO -
CSSInclude a descriptive and keyword-rich <title>
0
tag within
<head> the of your HTML
section
1
document.

0f Meta Description
i Tag

0 Proper Heading
3 Tags

04 Imag e

O ptimiza tion
4
1
TESTING
IN CSS
CSS Performance and
Optimization
0 Minification and
1 Compression

0fi Critical CSS: "Above-the-fold"


content

03 Reducing Render

Blocking
Website Testing -
CSS
0 Lighthouse
1 testing

0fi https://
pagespeed.web.dev/

03 https://gtmetrix.com/
4
1
HOSTING
WEBSITE
LIVE
HOSTING WEBSITE
LIVE NETLI HOSTING
FY ER

https://www.netlify.com/ http://www.hostinger.com
/
Thank
s!
Subscribe Shieldx Academy if you like
d
the presentation.

You might also like