CSS
CSS
● Cascading Style Sheet
● It is used to beautify web pages
● It plays main role in order to make webpages more attractive
●
ID Class
1. ID is unique in page and can be 1. Class can be applied to multiple
applied to almost one element element so it is called by multiple
time in a single page
2. ‘#’ symbol is used. 3. ‘.’ symbol is used.
Types of CSS:
1. Inline CSS:
<h1 style=”background-color=red’“>Hello</h1>
2. Internal CSS:
<html>
<head>
<style>
</style>
</head>
<body>
<h1 id=”head”></h1>
</body>
</html>
3. External CSS:
Create a separate CSS file and using link tag just link your file
E.g.:
<head>
<link = “stylesheet.” href=>
CSS
Priority based:
Selector:
1. Id selector
2. Class selector
3. Element selector
4. Child selector
5. Universal selector
6. Group selector
7. Adjacent sibling selector.
● Denoted by ‘+’ sign.
8. Pseudo selector
9. Descendent selector.
There are two types of boxes:
1. Standard box: It means in that added border.
2. Alternative box:
Div → Block level →
Box-model:
It helps to create HTML layouts.
Block box Inline Box
It can be break on new line It cannot be break on new line
It will take available space It will take content space
Height & width can be affected by box Height & width cannot be affected
CSS
To apply type of box we have to use display property in css
Display property has some values:
1. Inline
2. Block
3. Inline-block
4. Flex
5. Grid
Margin:
● It is invisible space present outside the boxes.
● It will not be granted in height & width in both type of models.
● Providing negative margin can cause overlapping of elements.
● There four sides of margin: margin-top, margin-right, margin-bottom, margin-left
● Margin(Top, right, bottom, left)
Border:
● Border-top
● Border-left
● Border-right
● Border-bottom
● Border-width
● Border-height
Padding:
● It is a space between content and border
● It is used to push away content from border
● padding(Top, right, bottom, left)
● padding-top, padding-right, padding-bottom, padding-left
Pseudo element:
● Link
CSS
● Visited
● Hover
● Active
Flex-box model: It makes easier to design flexible response layout structure without using
positioning & floating.
Flex-wrap:
● Wrap
CSS
● No-wrap
● Wrap-reverse
Flex-Direction:
Align-self:
Flex-basis:
flex-grow
CSS
Grid layout:
CSS grid layout module offers a grid based layout system with rows & columns making it
easier to design web pages without having to use floats positioning
Display grid:
An HTML element
Grid-template-columns: auto auto auto (these are the columns)
CSS
CSS COLORS: Colors are specified using predefined color names or RGB, HEX, HSLA,
HSL, RGBA.
a) Css color names: specified color names (e.g.: red, blue, black, green.)
b) Css text color: you can set the color of the text.
c) Css background color: you can set the background color for the html element:
1. RGB value (RED, GREEN, BLUE): In css color can be specified as an RGB
value using formula rgb(red, green, blue);
Each parameter (red, green, blue) defines the intensity of the color 0(lower) to
255(higher)
E.g.: rgb(255,0,0)===> displaying red color
rgb(0,255,0)===> displaying green color
rgb(0,0,255)===> displaying blue color
rgb(0,0,0)===> displaying black color
rgb(255, 255, 255)===> displaying white color
2. HEX Values: In css color can be specified using hexadecimal value in the
form #rrggbb where rr(red) gg(green) bb(blue) are hexadecimal values
between 00 & ff same as 0 to 255
E.g.: (#ff0000)===> displaying red color
(#00ff00)===> displaying green color
(#0000ff)===> displaying blue color
(#000000)===> displaying black color
(#ffffff)===> displaying white color
3. HSL Value (Hue, Saturation, Lightness): In css color can be specified using
the Hue, Saturation, Lightness in the form HSL (Hue, Saturation, Lightness).
● Hue: It is a degree on the color wheel from 0 to 360, 0 is red, 120 is
green, 240 is blue.
● Saturation: It is a percentage values 0% means grey color, 100% full
colors.
● Lightness: It is a percentage 0% black color, 50% neither light or
black, 100% white.
4. HSLA Value: In css color can be specified using the Hue, Saturation,
Lightness in the form HSL (Hue, Saturation, Lightness).
● Hue: It is a degree on the color wheel from 0 to 360, 0 is red, 120 is
green, 240 is blue.
● Saturation: It is a percentage values 0% means grey color, 100% full
colors.
● Lightness: It is a percentage 0% black color, 50% neither light or
black, 100% white.
● Alpha: Value is nothing but it define the opacity to increase the
transparency of an object range (0.1 to 1).
CSS Gradients: css gradients let you display smooth transition between two or more
specified colors.
There three types of gradient:
a. Linear gradient.(goes down, up, left, right, diagonal).
CSS
b. Radial gradient.(defined by their center).
c. Conic gradient.(rotated around center point).
A. Linear gradients: To create a linear gradients you must defines at least two color
stops are the colors stops are the colors you want to render smooth transition among
you can also set a starting.
B. Radial gradients: It is define by their center to create a radial gradient you must also
define at least 2 color stops
Types of positioning:
a. Static: Default positioning of each element of html webpage. It will show the element
in normal flow. We cannot apply top, right, bottom, left properties to static positioning
element
b. Relative: It will be positioning according to their original position. Top/bottom/left/right.
This properties are used to add force form that corresponding side.
c. Absolute: It will be no more part of normal flow. It lead elements to create its own
flow there we can position element anywhere on document using absolute
positioning. We can develop UI based feature popup on webpage.
d. Fixed: It works same as absolute with one difference.
e. Z-index: Its used to give the priority for elements to display above other elements. It
works exact z-index in 3rd dimension.
f. Sticky: It is used to make elements stick to the given position whenever elements will
go outside of browser viewport.
Navigation Bar:
Home
Contact
About Us
Animation:
It makes it possible to animate transitions from one css style configuration to another.
What is exactly animations?
Animation is one method in which figures are manipulated to appear as moving images
Advantages of animation?
Easy to use simple animation
It performs smooth on under moderate system load
a) Animation-name: Specifies the name of the keyframes at rules describing the
animation keyframes.
b) Animation-duration: Configures of the length of time that animation should take to
complete one cycle.
c) Animation-timing function: Configures the timing of the animation that is how the
animation transitions through keyframes by establishing acceleration curves.
d) Animation-delay: Configures the delay between the time the element is loaded and
the beginning of the animation sequence.
CSS
e) Animation-iteration-count: Configures the number of the times animation should
repeat, you can specify infinite to the animation.
f) Animation-direction: Configures Whether or not the animation should alternate
direction on each run through the sequence or reset to the start point and repeat
itself.
g) Animation-fill-mode: Configures what values are applied by the animation before and
after it is executing.
Media Queries: They are useful when you want to modify your application or site depending
On a device’s general type (such as screen) or specific characteristics and parameters (such
as screen resolution or browser viewport width).