CSS Notes
Prepared for Your College Use
HTML
• Structure/layout
• CSS
• JS
• Style
• Logic
Level 1
• Basics of CSS
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
• 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
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;
• }
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
Color Property
• Used to set the color of foreground
• color: red;
• color: pink;
• color: blue;
• color: green;
Background Color Property
• Used to set the color of background
• background-color: red;
• background-color: pink;
• background- color: blue;
• background- color: green;
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
Color Systems
• color : #ff0000;
• color : # 00ff00;
• Hex (Hexadecimal)
• google color picker
Selectors
• Universal Selector
• Element Selector
• Id Selector
• Class Selector
• *{}
• h1 { }
• #myId { }
• .myClass { }
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 :
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
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
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
Text Properties
• font-family : arial
• font-family
• font-family : arial, roboto
• we can write multiple familiies as a
• fall-back mechanism
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
Text Properties
• line-height : 2px
• line-height
• line-height : 3
• line-height : normal
Text Properties
• text-tranform : uppercase / lowercase / capitalize / none
• text-transform
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
Level 2
• Box Model in
• css
Height
• Width
• Border
• Padding
• Margin
• 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
By default, it sets the content area width of the element
• div {
• width: 50px;
• }
• Width
• Width
• content
Used to set an element's border
• border-width : 2px;
• border-style : solid / dotted / dashed
• border-color : black;
• Border
• Border
• content
Shorthand
• border : 2px solid black;
• Border
Used to round the corners of an element's outer border edge
• border-radius : 10px;
• Border
• border-radius : 50%;
padding-left
• padding-right
• padding-top
• padding-bottom
• Padding
• Padding
• content
Shorthand
• padding: 50px;
• Padding
• padding: 1px 2px 3px 4px;
• top | right | bottom | left -> clockwise
margin-right
• margin-left
• margin-top
• margin-bottom
• Margin
• Margin
• content
• content
Shorthand
• margin: 50px;
• Margin
• margin: 1px 2px 3px 4px;
• top | right | bottom | left -> clockwise
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
#f08804
• (yellow)
• #0f1111
• (black)
• 60px
• (height)
• 25px
• (text)
• 200px
• (gap)
• anchor tags
• (links)
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
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;
Alpha Channel
• opacity (0 to 1)
• color: rgba(255, 0, 0, 0.5);
• RGBA
• color: rgba(255, 0, 0, 1);
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:
Level 3
• position
Units in CSS
• %
• Relative
• em
• rem
• more like vh, vw etc
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
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
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
Others
• vh: relative to 1% viewport height
• vw : relative to 1% viewport width
Position
• The position CSS property sets how an element is positioned
in a document.
• position : static / relative / absolute / fixed
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
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
Background Image
• Used to set an image as background
• background-image : url("image.jpeg");
Background Size
• cover = fits with no empty space
• contain - fits with image fully visible
• auto = original size
• background-size : cover / contain / auto
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.
Level 4
• Basics of CSS
Flexbox
• Flexible Box Layout
• It is a one-dimensional layout method for arranging items in
rows or columns.
The Flex Model
• set display property of container to flex first
• 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;
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
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
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
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
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
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
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
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 ..
Transition Shorthand
• property name | duration | timing-function | delay
• transition: font-size 2s ease-in-out 0.2s;
• to add some animation to elements
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
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);
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
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
Animation
• @keyframe myName {
• from { font-size : 20px; }
• to { font-size : 40px; }
• }
• To animate CSS elements
Animation Properties
• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
Animation Shorthand
• animation : myName 2s linear 3s infinite normal
% in Animation
• @keyframe myName {
• 0% { font-size : 20px; }
• 50% { font-size : 30px; }
• 100% { font-size : 40px; }
• }
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
