SlideShare a Scribd company logo
1 of 72
Download to read offline
APNA
COLLEGE
HTML
Structure/layout
CSS JS
Style Logic
Level 1
Basics of CSS
APNA
COLLEGE
CSS
Cascading Style Sheet
makeup
not a programming language, but a stying language
But for styling there should be some content, and that's why
we studied html before css
go to websites & remove css
APNA
COLLEGE
It is a language that is used to describe the style of a document.
Basic Syntax
Selector
h1 {
color: red;
}
Property Value
semicolon shows that one property has ended & it is
important to put this even though it won't incurr error
APNA
COLLEGE
Including Style
Inline
<style> tag
<h1 style="color: red"> </h1>
Apna College
Writing style directly inline on each element
Style is added using the <style> element in the same document
h1 {
<style>
color : red;
}
</style>
APNA
COLLEGE
Including Style
best way
External Stylesheet
Writing CSS in a separate document & linking it with HTML file
An inline style will override external and internal styles
APNA
COLLEGE
Color Property
Used to set the color of foreground
color: red;
color: pink;
color: blue;
color: green;
APNA
COLLEGE
APNA
COLLEGE
Background Color Property
Used to set the color of background
background-color: red;
background-color: pink;
background-
color: blue;
background-
color: green;
APNA
COLLEGE
Color Systems
color: rgb(255, 0, 0);
color: rgb(0, 255, 0);
RGB
we don't have to think on colors on our own, we can just use
color picker tools online or search online
APNA
COLLEGE
Color Systems
color
: #ff0000;
color
: #
00ff00;
Hex (Hexadecimal)
google color picker
APNA
COLLEGE
Selectors
Universal Selector
Element Selector
Id Selector
Class Selector
* { }
h1 { }
#myId { }
.myClass { }
APNA
COLLEGE
Practice Set 1
Create a simple div with an id "box".
Add some text content inside the div.
Set its background color to blue.
Q1:
Create 3 headings with h1, h2 & h3.
Give them all a class "heading" & set color of "heading" to red.
Q2:
green using css stylesheet
blue using <style> tag
pink using inline style
Create a button & set its background color to :
Q3:
APNA
COLLEGE
Text Properties
text-align : left / right / center
text-align
text alignement doesn't mean align according to the page; i.e.
right does not mean on the page's right side
but the parent's right side
in css3, latest css -> start and end are introduced for language
support like arabic
APNA
COLLEGE
Text Properties
text-decoration : underline / overline / line-through
text-decoration
also add style, wavy, dotted or color like red
can also set to none for hyperlinks
APNA
COLLEGE
Text Properties
font-weight : normal / bold / bolder / lighter
font-weight
font-weight : 100-900
font-weight is to show how dark or light our text is
it can be names or in terms of numbers
values from 100 to 900
APNA
COLLEGE
Text Properties
font-family : arial
font-family
font-family : arial, roboto
we can write multiple familiies as a
fall-back mechanism
APNA
COLLEGE
APNA
COLLEGE
Units in CSS
pixels (px)
Absolute
96px = 1 inch
font-size: 2px;
cm, mm, inch & others are also there
but pixels is the most used
APNA
COLLEGE
Text Properties
line-height : 2px
line-height
line-height : 3
line-height : normal
APNA
COLLEGE
Text Properties
text-tranform : uppercase / lowercase / capitalize / none
text-transform
APNA
COLLEGE
Create a heading centred on the page with all of its text capitalized by default.
Q1:
Set the font family of all the content in the document to "Times New Roman".
Q2:
Create one div inside another div.
Set id & text "outer" for the first one & "inner" for the second one.
Set the outer div text size to 25px & inner div text size to 10px.
Q3:
Practice Set 2
APNA
COLLEGE
Level 2
Box Model in
css
APNA
COLLEGE
Height
Width
Border
Padding
Margin
APNA
COLLEGE
Box Model in CSS Width
Height
Border
Padding
Margin
content
By default, it sets the content area h
eight of the element
div {
height: 50px;
}
Height
Height
content
APNA
COLLEGE
By default, it sets the content area 
width of the element
div {
width: 50px;
}
Width
Width
content
APNA
COLLEGE
Used to set an element's border
border-width : 2px;
border-style : solid / dotted / dashed
border-color : black;
Border
Border
content
APNA
COLLEGE
Shorthand
border : 2px solid black;
Border
APNA
COLLEGE
Used to round the corners of an element's outer border edge
border-radius : 10px;
Border
border-radius : 50%;
APNA
COLLEGE
padding-left
padding-right
padding-top
padding-bottom
Padding
APNA
COLLEGE
Padding
content
Shorthand
padding: 50px;
Padding
padding: 1px 2px 3px 4px;
top | right | bottom | left -> clockwise
APNA
COLLEGE
margin-right
margin-left
margin-top
margin-bottom
Margin
APNA
COLLEGE
Margin
content content
Shorthand
margin: 50px;
Margin
margin: 1px 2px 3px 4px;
top | right | bottom | left -> clockwise
APNA
COLLEGE
Create a div with height & width of 100px.
Set its background color to green & the border radius to 50%.
Q1:
Create the following navbar.
Q2:
Practice Set 3
APNA
COLLEGE
#f08804
(yellow)
#0f1111
(black)
60px
(height)
25px
(text)
200px
(gap)
anchor tags
(links)
APNA
COLLEGE
Display Property
inline - Takes only the space required by the element. (no margin/ padding)
block - Takes full space available in width.
inline-block - Similar to inline but we can set margin & padding.
none - To remove element from document flow.
display: inline / block / inline-block / none
APNA
COLLEGE
Visibility
Note : When visibility is set to none, space for the element is reserved.
But for display set to none, no space is reserved or blocked for the
element.
visibility: hidden;
APNA
COLLEGE
Alpha Channel
opacity (0 to 1)
color: rgba(255, 0, 0, 0.5);
RGBA
color: rgba(255, 0, 0, 1);
APNA
COLLEGE
Create a webpage layout with a header, a footer & a content area containing 3 divs.
Set the height & width of divs to 100px.
(add the previous navbar in the header)
Q1:
Add borders to all the divs.
Q2:
Add a different background color to each div with an opacity of 0.5
Q3:
Practice Set 4
Give the content area an appropriate height.
Q4:
APNA
COLLEGE
Level 3
position
APNA
COLLEGE
Units in CSS
%
Relative
em
rem
more like vh, vw etc
APNA
COLLEGE
Percentage (%)
It is often used to define a size as relative to an element's parent object.
width : 33% ;
margin-left : 50% ;
make one par & one child div
show 50% of parent for h1
sometimes the relation is also to some other property not
just size, but that is not very commonly used
APNA
COLLEGE
Em
font size of child will be half of parent for 0.5em
for padding & margin it's relative to same element's font size
show both on same par & div
make a button with border & font-size
then change its border radius from pixel to ems to set a constant shape
APNA
COLLEGE
Rem (Root Em)
font size of child will be half of parent for 0.5em
for padding & margin it's relative to same element's font size
show both on same par & div
make a button with border & font-size
then change its border radius from pixel to ems to set a constant shape
APNA
COLLEGE
Others
vh: relative to 1% viewport height
vw : relative to 1% viewport width
APNA
COLLEGE
Position
The position CSS property sets how an element is positioned in a document.
position : static / relative / absolute / fixed
APNA
COLLEGE
Position
static - default position (The top, right, bottom, left, and z-index properties have no effect)
relative - element is relative to itself. (The top, right, bottom, left, and z-index will work)
absolute - positioned relative to its clo
sest positioned ancestor. (removed from the flow)
fixed - positioned relative to browser. (removed from flow)
sti
cky - positioned based on use
r's scroll position
APNA
COLLEGE
z-index
It decides the stack level of elements
z-index : auto (0)
z-index : 1 / 2 / ...
z-index : -1 / -2 / ...
Overlapping elements with a larger z-index cover those with a smaller one.
show 3d space
APNA
COLLEGE
Background Image
Used to set an image as background
background-image : url("image.jpeg");
APNA
COLLEGE
Background Size
cover = fits with no empty space
contain - fits with image fully visible
auto = original size
background-size : cover / contain / auto
APNA
COLLEGE
Create the following layout using the given html.
Qs:
Practice Set 5
Use the appropriate position property for the div element to place it at the
right end of the page. (The div should not move even on scroll)
Use z-index to place the div on top of page.
<p> lorem*5 </p>
<div> Love Nature </div>
<p> lorem*5 </p>
Give the div a height, width & some background image.
APNA
COLLEGE
Level 4
Basics of CSS
APNA
COLLEGE
Flexbox
Flexible Box Layout
It is a one-dimensional layout method for arranging items in rows or columns.
APNA
COLLEGE
The Flex Model
set display property of container to flex first
APNA
COLLEGE
flex item
flex container
main axis
cross axis
Flexbox Direction
It sets ho
w flex items are placed in the flex container, along which axis and direction.
flex-direction : row; (default)
flex-direction : row-reverse;
flex-direction : column;
flex-direction : column-reverse;
APNA
COLLEGE
Flex Properties
for Flex Container
justify-content : alignment along the main axis.
flex-start / flex-end / centre / space-evenly /
flex-wrap : nowrap / wrap / wrap-reverse
align-items : alignment along the cross axis.
align-content : alignment of space between & around the content along cross-axis
APNA
COLLEGE
Flex Properties
for Flex Item
align-self : alignment of individual along the cross axis.
flex-grow : how much a flex item will grow relative to the rest of the flex items if
space is available
flex-shrink : how much a flex item will shrink relative to the rest of the flex items if
space is available
silmilar to align items but for individual element
and it overrides align items
grow & shrink take values like 0, 1, 2, 3
0 = doesn't grow at all
APNA
COLLEGE
Create a navbar with 4 options in the form of anchor tags inside list items.
Now, use flexbox to place them all spaced equally in a single line.
Qs:
Use flexbox to center one div inside another div.
Qs:
Which has higher priority - align-items or align-self?
Qs:
Practice Set 6
APNA
COLLEGE
Media Queries
Help create a responsive website
in today's world everyone has a different device with thousand of
different screen sizes
if you built a website people will use it on laptop, big screen
computers, an iphone, a big screen android phone or a small screen
one, an ipad
even orientation is different like landscape or portrait
so it's important that layout looks good on all
so we need design to be responsive, respond to different screen sizes
& orientation
@media (width : 600px) {
div {
background-color : red;
}
}
@media (min-width : 600px) {
div {
background-color : red;
}
}
APNA
COLLEGE
Media Queries
in today's world everyone has a different device with thousand of
different screen sizes
if you built a website people will use it on laptop, big screen
computers, an iphone, a big screen android phone or a small screen
one, an ipad
even orientation is different like landscape or portrait
so it's important that layout looks good on all
so we need design to be responsive, respond to different screen sizes
& orientation
@media (min-width : 200px) and (min-width : 300px) {
div {
background-color : red;
}
}
APNA
COLLEGE
Add a media query to implement the following:
Qs:
the color of a div changes to green for viewport width less than 300px
Practice Set 7
the color of a div changes to pink for width between 300px & 400px
the color of a div changes to red for width between 400px & 600px
the color of a div changes to blue for width above 600px
APNA
COLLEGE
Level 5
THESE ARE things that can be called advanced CSS
it is an important chapter because we should know
but practically itna aap use nahi karenge
but pata hona chahiye
APNA
COLLEGE
Transitions
Transitions enable you to define the transition between two states of an element.
to add some animation to elements
timing function is how the transition should be applied
show hover
transition-property : property you want to transition (font-size, width etc.)
transition-duration : 2s / 4ms ..
transition-timing-function : ease-in / ease-out / linear / steps ..
transition-delay : 2s / 4ms ..
APNA
COLLEGE
Transition Shorthand
property name | duration | timing-function | delay
transition: font-size 2s ease-in-out 0.2s;
to add some animation to elements
APNA
COLLEGE
CSS Transform
Used to apply 2D & 3D transformations to an element
transform: rotate(45deg);
rotate
to add some more animation to how an
element looks
rotate is simple to understand, will take
angles and degrees is most common
transform also applies to all content inside
APNA
COLLEGE
CSS Transform
transform: scale(2);
scale
x & y axis separately
transform: scale(0.5);
transform: scaleX(0.5);
transform: scaleY(0.5);
transform: scale(1, 2);
APNA
COLLEGE
CSS Transform
transform: translate(20px);
translate
transform: translateX(20px);
transform: translateY(20px);
transform: translate(20px, 50px);
we can also give distance in other units like
% ems rems etc
show -ve values too
APNA
COLLEGE
CSS Transform
transform: skew (30deg);
skew
now that we have done it we can go and make some advanced 3d
objects using transform if we are good at math
APNA
COLLEGE
Animation
@keyframe myName {
from { font-size : 20px; }
to { font-size : 40px; }
}
To animate CSS elements
APNA
COLLEGE
Animation Properties
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
APNA
COLLEGE
Animation Shorthand
animation : myName 2s linear 3s infinite normal
APNA
COLLEGE
% in Animation
@keyframe myName {
0% { font-size : 20px; }
50% { font-size : 30px; }
100% { font-size : 40px; }
}
APNA
COLLEGE
Create a simple loader using CSS
Qs:
Practice Set 8
Step1 : create a div with circular shape & a thick border from one end
(top/bottom/left/right)
Step2 : To make it spin create an animation which transforms it from 0deg to 360deg
Step3 : Add the animation property to the loader with infinite duration
APNA
COLLEGE

More Related Content

What's hot

What's hot (20)

Nhập môn Css
Nhập môn CssNhập môn Css
Nhập môn Css
 
HTML5 - Insert images and Apply page backgrounds
HTML5 - Insert images and Apply page backgroundsHTML5 - Insert images and Apply page backgrounds
HTML5 - Insert images and Apply page backgrounds
 
Css floats
Css floatsCss floats
Css floats
 
Html tags
Html tagsHtml tags
Html tags
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Html1
Html1Html1
Html1
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
HTML & CSS Masterclass
HTML & CSS MasterclassHTML & CSS Masterclass
HTML & CSS Masterclass
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
 
Anchor tag HTML Presentation
Anchor tag HTML PresentationAnchor tag HTML Presentation
Anchor tag HTML Presentation
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
Css notes
Css notesCss notes
Css notes
 
CSS Box Model Presentation
CSS Box Model PresentationCSS Box Model Presentation
CSS Box Model Presentation
 
Css tables
Css tablesCss tables
Css tables
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
 
CSS.ppt
CSS.pptCSS.ppt
CSS.ppt
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
 

Similar to CSS Notes in PDF, Easy to understand. For beginner to advanced. d.

Web topic 17 font family in css
Web topic 17  font family in cssWeb topic 17  font family in css
Web topic 17 font family in css
CK Yang
 
CSS Basic and Common Errors
CSS Basic and Common ErrorsCSS Basic and Common Errors
CSS Basic and Common Errors
Hock Leng PUAH
 

Similar to CSS Notes in PDF, Easy to understand. For beginner to advanced. d. (20)

Cascading Style Sheet presentation .pptx
Cascading Style Sheet presentation .pptxCascading Style Sheet presentation .pptx
Cascading Style Sheet presentation .pptx
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
Web topic 17 font family in css
Web topic 17  font family in cssWeb topic 17  font family in css
Web topic 17 font family in css
 
Css
CssCss
Css
 
CSS3 notes
CSS3 notesCSS3 notes
CSS3 notes
 
CSS Cascade Style Sheet
CSS Cascade Style SheetCSS Cascade Style Sheet
CSS Cascade Style Sheet
 
CSS
CSSCSS
CSS
 
CSS INHERITANCE
CSS INHERITANCECSS INHERITANCE
CSS INHERITANCE
 
Web Layout
Web LayoutWeb Layout
Web Layout
 
Sass Essentials
Sass EssentialsSass Essentials
Sass Essentials
 
CSS Basic and Common Errors
CSS Basic and Common ErrorsCSS Basic and Common Errors
CSS Basic and Common Errors
 
Css layouts-continued
Css layouts-continuedCss layouts-continued
Css layouts-continued
 
Art of css
Art of cssArt of css
Art of css
 
Designing for the web - 101
Designing for the web - 101Designing for the web - 101
Designing for the web - 101
 
basics of css
basics of cssbasics of css
basics of css
 
Deep Dive into Line-Height
Deep Dive into Line-HeightDeep Dive into Line-Height
Deep Dive into Line-Height
 
Css
CssCss
Css
 
Css
CssCss
Css
 
Web Design Course: CSS lecture 3
Web Design Course: CSS lecture 3Web Design Course: CSS lecture 3
Web Design Course: CSS lecture 3
 
Pemrograman Web 2 - CSS
Pemrograman Web 2 - CSSPemrograman Web 2 - CSS
Pemrograman Web 2 - CSS
 

Recently uploaded

Jax, FL Admin Community Group 05.14.2024 Combined Deck
Jax, FL Admin Community Group 05.14.2024 Combined DeckJax, FL Admin Community Group 05.14.2024 Combined Deck
Jax, FL Admin Community Group 05.14.2024 Combined Deck
Marc Lester
 
Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...
Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...
Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...
Lisi Hocke
 

Recently uploaded (20)

Prompt Engineering - an Art, a Science, or your next Job Title?
Prompt Engineering - an Art, a Science, or your next Job Title?Prompt Engineering - an Art, a Science, or your next Job Title?
Prompt Engineering - an Art, a Science, or your next Job Title?
 
Workshop: Enabling GenAI Breakthroughs with Knowledge Graphs - GraphSummit Milan
Workshop: Enabling GenAI Breakthroughs with Knowledge Graphs - GraphSummit MilanWorkshop: Enabling GenAI Breakthroughs with Knowledge Graphs - GraphSummit Milan
Workshop: Enabling GenAI Breakthroughs with Knowledge Graphs - GraphSummit Milan
 
Abortion Clinic Pretoria ](+27832195400*)[ Abortion Clinic Near Me ● Abortion...
Abortion Clinic Pretoria ](+27832195400*)[ Abortion Clinic Near Me ● Abortion...Abortion Clinic Pretoria ](+27832195400*)[ Abortion Clinic Near Me ● Abortion...
Abortion Clinic Pretoria ](+27832195400*)[ Abortion Clinic Near Me ● Abortion...
 
^Clinic ^%[+27788225528*Abortion Pills For Sale In birch acres
^Clinic ^%[+27788225528*Abortion Pills For Sale In birch acres^Clinic ^%[+27788225528*Abortion Pills For Sale In birch acres
^Clinic ^%[+27788225528*Abortion Pills For Sale In birch acres
 
The Evolution of Web App Testing_ An Ultimate Guide to Future Trends.pdf
The Evolution of Web App Testing_ An Ultimate Guide to Future Trends.pdfThe Evolution of Web App Testing_ An Ultimate Guide to Future Trends.pdf
The Evolution of Web App Testing_ An Ultimate Guide to Future Trends.pdf
 
Abortion Clinic In Polokwane ](+27832195400*)[ 🏥 Safe Abortion Pills in Polok...
Abortion Clinic In Polokwane ](+27832195400*)[ 🏥 Safe Abortion Pills in Polok...Abortion Clinic In Polokwane ](+27832195400*)[ 🏥 Safe Abortion Pills in Polok...
Abortion Clinic In Polokwane ](+27832195400*)[ 🏥 Safe Abortion Pills in Polok...
 
The mythical technical debt. (Brooke, please, forgive me)
The mythical technical debt. (Brooke, please, forgive me)The mythical technical debt. (Brooke, please, forgive me)
The mythical technical debt. (Brooke, please, forgive me)
 
COMPUTER AND ITS COMPONENTS PPT.by naitik sharma Class 9th A mittal internati...
COMPUTER AND ITS COMPONENTS PPT.by naitik sharma Class 9th A mittal internati...COMPUTER AND ITS COMPONENTS PPT.by naitik sharma Class 9th A mittal internati...
COMPUTER AND ITS COMPONENTS PPT.by naitik sharma Class 9th A mittal internati...
 
From Theory to Practice: Utilizing SpiraPlan's REST API
From Theory to Practice: Utilizing SpiraPlan's REST APIFrom Theory to Practice: Utilizing SpiraPlan's REST API
From Theory to Practice: Utilizing SpiraPlan's REST API
 
Effective Strategies for Wix's Scaling challenges - GeeCon
Effective Strategies for Wix's Scaling challenges - GeeConEffective Strategies for Wix's Scaling challenges - GeeCon
Effective Strategies for Wix's Scaling challenges - GeeCon
 
Automate your OpenSIPS config tests - OpenSIPS Summit 2024
Automate your OpenSIPS config tests - OpenSIPS Summit 2024Automate your OpenSIPS config tests - OpenSIPS Summit 2024
Automate your OpenSIPS config tests - OpenSIPS Summit 2024
 
How to install and activate eGrabber JobGrabber
How to install and activate eGrabber JobGrabberHow to install and activate eGrabber JobGrabber
How to install and activate eGrabber JobGrabber
 
Transformer Neural Network Use Cases with Links
Transformer Neural Network Use Cases with LinksTransformer Neural Network Use Cases with Links
Transformer Neural Network Use Cases with Links
 
Community is Just as Important as Code by Andrea Goulet
Community is Just as Important as Code by Andrea GouletCommunity is Just as Important as Code by Andrea Goulet
Community is Just as Important as Code by Andrea Goulet
 
Salesforce Introduced Zero Copy Partner Network to Simplify the Process of In...
Salesforce Introduced Zero Copy Partner Network to Simplify the Process of In...Salesforce Introduced Zero Copy Partner Network to Simplify the Process of In...
Salesforce Introduced Zero Copy Partner Network to Simplify the Process of In...
 
Jax, FL Admin Community Group 05.14.2024 Combined Deck
Jax, FL Admin Community Group 05.14.2024 Combined DeckJax, FL Admin Community Group 05.14.2024 Combined Deck
Jax, FL Admin Community Group 05.14.2024 Combined Deck
 
What is a Recruitment Management Software?
What is a Recruitment Management Software?What is a Recruitment Management Software?
What is a Recruitment Management Software?
 
Alluxio Monthly Webinar | Simplify Data Access for AI in Multi-Cloud
Alluxio Monthly Webinar | Simplify Data Access for AI in Multi-CloudAlluxio Monthly Webinar | Simplify Data Access for AI in Multi-Cloud
Alluxio Monthly Webinar | Simplify Data Access for AI in Multi-Cloud
 
Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...
Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...
Team Transformation Tactics for Holistic Testing and Quality (NewCrafts Paris...
 
how-to-download-files-safely-from-the-internet.pdf
how-to-download-files-safely-from-the-internet.pdfhow-to-download-files-safely-from-the-internet.pdf
how-to-download-files-safely-from-the-internet.pdf
 

CSS Notes in PDF, Easy to understand. For beginner to advanced. d.

  • 2. Level 1 Basics of CSS APNA COLLEGE
  • 3. CSS Cascading Style Sheet makeup not a programming language, but a stying language But for styling there should be some content, and that's why we studied html before css go to websites & remove css APNA COLLEGE It is a language that is used to describe the style of a document.
  • 4. Basic Syntax Selector h1 { color: red; } Property Value semicolon shows that one property has ended & it is important to put this even though it won't incurr error APNA COLLEGE
  • 5. Including Style Inline <style> tag <h1 style="color: red"> </h1> Apna College Writing style directly inline on each element Style is added using the <style> element in the same document h1 { <style> color : red; } </style> APNA COLLEGE
  • 6. Including Style best way External Stylesheet Writing CSS in a separate document & linking it with HTML file An inline style will override external and internal styles APNA COLLEGE
  • 7. Color Property Used to set the color of foreground color: red; color: pink; color: blue; color: green; APNA COLLEGE APNA COLLEGE
  • 8. Background Color Property Used to set the color of background background-color: red; background-color: pink; background- color: blue; background- color: green; APNA COLLEGE
  • 9. Color Systems color: rgb(255, 0, 0); color: rgb(0, 255, 0); RGB we don't have to think on colors on our own, we can just use color picker tools online or search online APNA COLLEGE
  • 10. Color Systems color : #ff0000; color : # 00ff00; Hex (Hexadecimal) google color picker APNA COLLEGE
  • 11. Selectors Universal Selector Element Selector Id Selector Class Selector * { } h1 { } #myId { } .myClass { } APNA COLLEGE
  • 12. Practice Set 1 Create a simple div with an id "box". Add some text content inside the div. Set its background color to blue. Q1: Create 3 headings with h1, h2 & h3. Give them all a class "heading" & set color of "heading" to red. Q2: green using css stylesheet blue using <style> tag pink using inline style Create a button & set its background color to : Q3: APNA COLLEGE
  • 13. Text Properties text-align : left / right / center text-align text alignement doesn't mean align according to the page; i.e. right does not mean on the page's right side but the parent's right side in css3, latest css -> start and end are introduced for language support like arabic APNA COLLEGE
  • 14. Text Properties text-decoration : underline / overline / line-through text-decoration also add style, wavy, dotted or color like red can also set to none for hyperlinks APNA COLLEGE
  • 15. Text Properties font-weight : normal / bold / bolder / lighter font-weight font-weight : 100-900 font-weight is to show how dark or light our text is it can be names or in terms of numbers values from 100 to 900 APNA COLLEGE
  • 16. Text Properties font-family : arial font-family font-family : arial, roboto we can write multiple familiies as a fall-back mechanism APNA COLLEGE
  • 18. Units in CSS pixels (px) Absolute 96px = 1 inch font-size: 2px; cm, mm, inch & others are also there but pixels is the most used APNA COLLEGE
  • 19. Text Properties line-height : 2px line-height line-height : 3 line-height : normal APNA COLLEGE
  • 20. Text Properties text-tranform : uppercase / lowercase / capitalize / none text-transform APNA COLLEGE
  • 21. Create a heading centred on the page with all of its text capitalized by default. Q1: Set the font family of all the content in the document to "Times New Roman". Q2: Create one div inside another div. Set id & text "outer" for the first one & "inner" for the second one. Set the outer div text size to 25px & inner div text size to 10px. Q3: Practice Set 2 APNA COLLEGE
  • 22. Level 2 Box Model in css APNA COLLEGE
  • 23. Height Width Border Padding Margin APNA COLLEGE Box Model in CSS Width Height Border Padding Margin content
  • 24. By default, it sets the content area h eight of the element div { height: 50px; } Height Height content APNA COLLEGE
  • 25. By default, it sets the content area  width of the element div { width: 50px; } Width Width content APNA COLLEGE
  • 26. Used to set an element's border border-width : 2px; border-style : solid / dotted / dashed border-color : black; Border Border content APNA COLLEGE
  • 27. Shorthand border : 2px solid black; Border APNA COLLEGE
  • 28. Used to round the corners of an element's outer border edge border-radius : 10px; Border border-radius : 50%; APNA COLLEGE
  • 30. Shorthand padding: 50px; Padding padding: 1px 2px 3px 4px; top | right | bottom | left -> clockwise APNA COLLEGE
  • 32. Shorthand margin: 50px; Margin margin: 1px 2px 3px 4px; top | right | bottom | left -> clockwise APNA COLLEGE
  • 33. Create a div with height & width of 100px. Set its background color to green & the border radius to 50%. Q1: Create the following navbar. Q2: Practice Set 3 APNA COLLEGE
  • 35. Display Property inline - Takes only the space required by the element. (no margin/ padding) block - Takes full space available in width. inline-block - Similar to inline but we can set margin & padding. none - To remove element from document flow. display: inline / block / inline-block / none APNA COLLEGE
  • 36. Visibility Note : When visibility is set to none, space for the element is reserved. But for display set to none, no space is reserved or blocked for the element. visibility: hidden; APNA COLLEGE
  • 37. Alpha Channel opacity (0 to 1) color: rgba(255, 0, 0, 0.5); RGBA color: rgba(255, 0, 0, 1); APNA COLLEGE
  • 38. Create a webpage layout with a header, a footer & a content area containing 3 divs. Set the height & width of divs to 100px. (add the previous navbar in the header) Q1: Add borders to all the divs. Q2: Add a different background color to each div with an opacity of 0.5 Q3: Practice Set 4 Give the content area an appropriate height. Q4: APNA COLLEGE
  • 40. Units in CSS % Relative em rem more like vh, vw etc APNA COLLEGE
  • 41. Percentage (%) It is often used to define a size as relative to an element's parent object. width : 33% ; margin-left : 50% ; make one par & one child div show 50% of parent for h1 sometimes the relation is also to some other property not just size, but that is not very commonly used APNA COLLEGE
  • 42. Em font size of child will be half of parent for 0.5em for padding & margin it's relative to same element's font size show both on same par & div make a button with border & font-size then change its border radius from pixel to ems to set a constant shape APNA COLLEGE
  • 43. Rem (Root Em) font size of child will be half of parent for 0.5em for padding & margin it's relative to same element's font size show both on same par & div make a button with border & font-size then change its border radius from pixel to ems to set a constant shape APNA COLLEGE
  • 44. Others vh: relative to 1% viewport height vw : relative to 1% viewport width APNA COLLEGE
  • 45. Position The position CSS property sets how an element is positioned in a document. position : static / relative / absolute / fixed APNA COLLEGE
  • 46. Position static - default position (The top, right, bottom, left, and z-index properties have no effect) relative - element is relative to itself. (The top, right, bottom, left, and z-index will work) absolute - positioned relative to its clo sest positioned ancestor. (removed from the flow) fixed - positioned relative to browser. (removed from flow) sti cky - positioned based on use r's scroll position APNA COLLEGE
  • 47. z-index It decides the stack level of elements z-index : auto (0) z-index : 1 / 2 / ... z-index : -1 / -2 / ... Overlapping elements with a larger z-index cover those with a smaller one. show 3d space APNA COLLEGE
  • 48. Background Image Used to set an image as background background-image : url("image.jpeg"); APNA COLLEGE
  • 49. Background Size cover = fits with no empty space contain - fits with image fully visible auto = original size background-size : cover / contain / auto APNA COLLEGE
  • 50. Create the following layout using the given html. Qs: Practice Set 5 Use the appropriate position property for the div element to place it at the right end of the page. (The div should not move even on scroll) Use z-index to place the div on top of page. <p> lorem*5 </p> <div> Love Nature </div> <p> lorem*5 </p> Give the div a height, width & some background image. APNA COLLEGE
  • 51. Level 4 Basics of CSS APNA COLLEGE
  • 52. Flexbox Flexible Box Layout It is a one-dimensional layout method for arranging items in rows or columns. APNA COLLEGE
  • 53. The Flex Model set display property of container to flex first APNA COLLEGE flex item flex container main axis cross axis
  • 54. Flexbox Direction It sets ho w flex items are placed in the flex container, along which axis and direction. flex-direction : row; (default) flex-direction : row-reverse; flex-direction : column; flex-direction : column-reverse; APNA COLLEGE
  • 55. Flex Properties for Flex Container justify-content : alignment along the main axis. flex-start / flex-end / centre / space-evenly / flex-wrap : nowrap / wrap / wrap-reverse align-items : alignment along the cross axis. align-content : alignment of space between & around the content along cross-axis APNA COLLEGE
  • 56. Flex Properties for Flex Item align-self : alignment of individual along the cross axis. flex-grow : how much a flex item will grow relative to the rest of the flex items if space is available flex-shrink : how much a flex item will shrink relative to the rest of the flex items if space is available silmilar to align items but for individual element and it overrides align items grow & shrink take values like 0, 1, 2, 3 0 = doesn't grow at all APNA COLLEGE
  • 57. Create a navbar with 4 options in the form of anchor tags inside list items. Now, use flexbox to place them all spaced equally in a single line. Qs: Use flexbox to center one div inside another div. Qs: Which has higher priority - align-items or align-self? Qs: Practice Set 6 APNA COLLEGE
  • 58. Media Queries Help create a responsive website in today's world everyone has a different device with thousand of different screen sizes if you built a website people will use it on laptop, big screen computers, an iphone, a big screen android phone or a small screen one, an ipad even orientation is different like landscape or portrait so it's important that layout looks good on all so we need design to be responsive, respond to different screen sizes & orientation @media (width : 600px) { div { background-color : red; } } @media (min-width : 600px) { div { background-color : red; } } APNA COLLEGE
  • 59. Media Queries in today's world everyone has a different device with thousand of different screen sizes if you built a website people will use it on laptop, big screen computers, an iphone, a big screen android phone or a small screen one, an ipad even orientation is different like landscape or portrait so it's important that layout looks good on all so we need design to be responsive, respond to different screen sizes & orientation @media (min-width : 200px) and (min-width : 300px) { div { background-color : red; } } APNA COLLEGE
  • 60. Add a media query to implement the following: Qs: the color of a div changes to green for viewport width less than 300px Practice Set 7 the color of a div changes to pink for width between 300px & 400px the color of a div changes to red for width between 400px & 600px the color of a div changes to blue for width above 600px APNA COLLEGE
  • 61. Level 5 THESE ARE things that can be called advanced CSS it is an important chapter because we should know but practically itna aap use nahi karenge but pata hona chahiye APNA COLLEGE
  • 62. Transitions Transitions enable you to define the transition between two states of an element. to add some animation to elements timing function is how the transition should be applied show hover transition-property : property you want to transition (font-size, width etc.) transition-duration : 2s / 4ms .. transition-timing-function : ease-in / ease-out / linear / steps .. transition-delay : 2s / 4ms .. APNA COLLEGE
  • 63. Transition Shorthand property name | duration | timing-function | delay transition: font-size 2s ease-in-out 0.2s; to add some animation to elements APNA COLLEGE
  • 64. CSS Transform Used to apply 2D & 3D transformations to an element transform: rotate(45deg); rotate to add some more animation to how an element looks rotate is simple to understand, will take angles and degrees is most common transform also applies to all content inside APNA COLLEGE
  • 65. CSS Transform transform: scale(2); scale x & y axis separately transform: scale(0.5); transform: scaleX(0.5); transform: scaleY(0.5); transform: scale(1, 2); APNA COLLEGE
  • 66. CSS Transform transform: translate(20px); translate transform: translateX(20px); transform: translateY(20px); transform: translate(20px, 50px); we can also give distance in other units like % ems rems etc show -ve values too APNA COLLEGE
  • 67. CSS Transform transform: skew (30deg); skew now that we have done it we can go and make some advanced 3d objects using transform if we are good at math APNA COLLEGE
  • 68. Animation @keyframe myName { from { font-size : 20px; } to { font-size : 40px; } } To animate CSS elements APNA COLLEGE
  • 70. Animation Shorthand animation : myName 2s linear 3s infinite normal APNA COLLEGE
  • 71. % in Animation @keyframe myName { 0% { font-size : 20px; } 50% { font-size : 30px; } 100% { font-size : 40px; } } APNA COLLEGE
  • 72. Create a simple loader using CSS Qs: Practice Set 8 Step1 : create a div with circular shape & a thick border from one end (top/bottom/left/right) Step2 : To make it spin create an animation which transforms it from 0deg to 360deg Step3 : Add the animation property to the loader with infinite duration APNA COLLEGE