0% found this document useful (0 votes)

269 views

Cascading Style Sheets (CSS)

The document provides information about different ways to insert style sheets in HTML documents and describes various CSS properties. It discusses the three main ways to insert style sheets: external style sheets, internal style sheets, and inline styles. It also covers CSS selectors like ID, class, and universal selector that are used to target specific elements. Finally, it describes different color property values in CSS like color names, RGB, HEX and HSL formats to specify colors.

Uploaded by

Gilbert MUHIRE

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

0% found this document useful (0 votes)

269 views

Cascading Style Sheets (CSS)

Uploaded by

Gilbert MUHIRE

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/ 373

WEB

DESIGNING

CSS
CASCADING STYLE SHEETS

Learn coding fast

Written by

SUMIT SARKAR
www.teknowize.com
Page 1 of 372
www.teknowize.com CSS

Cascading Style Sheets

• Cascading Style Sheets (CSS) is a markup language responsible for how
your web pages will look like. It controls the colors, fonts, and layouts of
your website elements.
• This style sheet language also allows you to add effects or animations to
your website. You can use it to display some CSS animations like click
button effects, spinners or loaders, and animated backgrounds.
• Multiple web pages are designed by one css file.
• It is supported by all browsers and is designed primarily to separate the
document content from document presentation.
• Extension used to save CSS files is ".css".

There are three ways of inserting a style sheet

1)External style sheet

• With external CSS, you’ll link your web pages to an external .css file, which
can be created by any text editor in your device (e.g., Notepad++).
• This CSS type is a more efficient method, especially for styling a large
website. By editing one .css file, you can change your entire site at once.

Follow these steps to use external CSS:-

a) Step 1
• Create a new .css file with the text editor.
• Don’t forget to change style.css with the name of your .css file.

b) Step 2
• In the <head> section of your HTML sheet, add a reference of your
external .css file after <title> tag.
• Reference use:-<link rel="stylesheet" type="text/css" href="enter css file
location with file name.css" >
Page 2 of 372
www.teknowize.com CSS

for example

code
<html>
<head>

<title>technical simit</title>

<link rel="stylesheet" type="text/css" href="E:/style.css">

</head>

<body>

<h2> welcome to technical sumit</h>

</body>

</html>

c) Step3
• Now start coding in .css file.
• We need to write css code after the html tag in which we apply css.
• we have to write only tag without ‘<>’symbol.
• Write html tag and then write css code inside the ‘{ }’ in css file.
Page 3 of 372
www.teknowize.com CSS

For example

Code
h2
{

color:red;
}

Output

2) internal style sheet <style>

• Internal or embedded CSS requires you to add <style> tag inside

the <head> tag of your HTML document but after title tag.
• This CSS style is an effective method of styling a single page. However,
using this style for multiple pages is time-consuming as you need to put CSS
rules to every page of your website.

For example
Page 4 of 372
www.teknowize.com CSS

Code
<html>
<head>
<style>
p{
color: green;
}
h1 {background-color: red; color:black;}
</style>
</head>
<body>
<h1>TECHNICAL SUMIT </h1>
<p>This is our website<p>
</body>
</html>

Output
Page 5 of 372
www.teknowize.com CSS

3) inline style sheet style=”css attribute;”

• in this we need to use css attribute inside the particular html tag
• Inline CSS is used to style a specific HTML element. For this CSS style,
you’ll only need to add the style attribute to each HTML tag, without using
selectors.
• This CSS type is not really recommended, as each HTML tag needs to be
styled individually. Managing your website may become too hard if you only
use inline CSS.
• However, inline CSS in HTML can be useful in some situations. For
example, in cases where you don’t have access to CSS files or need to apply
styles for a single element only.

For example

Code
<html>
<head>
</head>
<body>
<h1 style="color:red;background-color:blue;"> TECHNICAL SUMIT </h1>
<p>This is our website<p>
Page 6 of 372
www.teknowize.com CSS

</body>
</html>

Output

CSS Id , Class and universal selector

It is use to indicate that which tag need to apply css because in html page there
are many tag are use again and again so if we select any tag which use more
than one then if we apply css by using external css inserting methodthen every
line with same tag will be change.

1) Id id=”enter unique id name for one html page”( in html page) and
#write unique name that written in html page{ use css attribute ; }(in
css page)
• It is use to apply css in a particular html tag.
• We must have use ‘id’ with unique name to specify a single element and
apply css in this.
• Id name is use in css with hash character (#), after these we can use css
attribute in ‘{ }’.
• Id name must have no space.

For example
Page 7 of 372
www.teknowize.com CSS

Html Code
<html>
<head>
<title>technical simit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h2> welcome to technical sumit</h2>
<h2 id="kuchv"> thank you </h2>
<p> this is my website </p>
</body>
</html>

Css code
#kuchv
{
Color: red;
}

output
Page 8 of 372
www.teknowize.com CSS

2) Class class=”enter name”( in html page)and .write class

…………...name{......use css attribute; }(in css page)

• It is use to apply css in a many html element or many html pages with one
css file.
• We use ‘class’ with same class name in many html element or pages and we
can use different class name in single html element or pages.
• class name is use in css with punctuation character (.), after these we can
use css attribute in ‘ { } ’.
• class name must have no space.

For example

Html Code
Page 9 of 372
www.teknowize.com CSS

<html>
<head>
<title>technical simit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h2 class="kuchvni"> welcome to technical sumit</h2>
<h2> thank you </h2>
<p class="kuchvni"> this is my website </p>
</body>
</html>

Css code
#kuchvni
{
Color: red;
}

Output

3) The CSS Universal Selector *

The universal selector (*) selects all HTML elements on the page.

The CSS rule below will affect every HTML element on the page.

For example
Page 10 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<title>technical simit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h2> welcome to technical sumit</h2>
<h2> thank you </h2>
<p> this is my website </p>
</body>
</html>

Css code
*
{
color:tomato;
}
Page 11 of 372
www.teknowize.com CSS

Output

CSS background colorand text color property

In this we know how to set color , image,height ,width ,padding and many
more attribute in css.

a) color names

Colors can be specifiedby using color name like- red , green , orange, blue
,white, black ,yellowand many more.

b) RGB color values

A color can be specified as an RGB value, using this formula-

rgb(red, green, blue)

• Each parameter (red, green, and blue) defines the intensity of the color with
a value between 0 and 255.
• This means that there are 256 x 256 x 256 = 16777216 possible colors!
• For example, rgb(255, 0, 0) is displayed as red, because red is set to its
highest value (255), and the other two (green and blue) are set to 0.
• Another example, rgb(0, 255, 0) is displayed as green, because green is set to
its highest value (255), and the other two (red and blue) are set to 0.
• To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
• To display white, set all color parameters to 255, like this: rgb(255, 255,
255).
• we can set parameter according to need of color by changing different
values.
Page 12 of 372
www.teknowize.com CSS

for example

c) HEX color values

A color can be specified using a hexadecimal value in the form-

#rrggbb

• Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00

and ff (same as decimal 0-255).
• For example, #ff0000 is displayed as red, because red is set to its highest
value (ff), and the other two (green and blue) are set to 00.
• Another example, #00ff00 is displayed as green, because green is set to its
highest value (ff), and the other two (red and blue) are set to 00.

• To display black, set all color parameters to 00, like this: #000000.
• To display white, set all color parameters to ff, like this: #ffffff.
• we can set parameter according to need of color by changing different
values.
Page 13 of 372
www.teknowize.com CSS

for example

d) HSL color values

A color can be specified using hue, saturation, and lightness (HSL) in the
form- hsl(hue, saturation, lightness)

• Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and
240 is blue.
• Saturation is a percentage value, 0% means a shade of gray, and 100% is the
full color.
• Lightness is also a percentage value, 0% is black, and 100% is white.

For example
Page 14 of 372
www.teknowize.com CSS

Saturation

• Saturation can be described as the intensity of a color.

• 100% is pure color, no shades of gray
• 50% is 50% gray, but you can still see the color.
• 0% is completely gray, you can no longer see the color.

For example

Lightness

The lightness of a color can be described as how much light you want to give
the color, where 0% means no light (black), 50% means 50% light (neither dark
nor light) 100% means full lightness (white).

For example

Note-Hue change the color if brightness and lightness are maintained ( if

brightness and lightness are not too much low or too much high)
Page 15 of 372
www.teknowize.com CSS

e) HSLA Color Values

An HSLA color value is specified in the form -

.....hsla(hue, saturation, lightness, alpha)

• HSLA color values are an extension of HSL color values with an Alpha
channel which specifies the opacity (transpancy) for a color.
• The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all)

For example

CSS background property

In this we know about many property related to css background.

1) Background color background-color :values;

It is use to color the background of any element.
Default background color is transparent .

Values
color names RGB color HEX color

HSL color HSLA Color

Page 16 of 372
www.teknowize.com CSS

For example

Css code
h1
{
background-color:orange;
}
Page 17 of 372
www.teknowize.com CSS

Output

CSS Padding padding:value;

The CSS padding property defines a padding (space) between the text and the
border.

For manually give space between the text and border-

• padding-top:value;
• padding-right:value;
• padding-bottom:value;
• padding-left:value;

values

length specifies a padding in px, pt, cm, etc.

% specifies a padding in % of the width of the containing element

For example
Page 18 of 372
www.teknowize.com CSS

Css code
p
{
background-color:orange
}
p
{
padding:5;
}
h1
{
border: 3px solid powderblue;
padding: 30px;
}
Page 19 of 372
www.teknowize.com CSS

Output

CSS Margin margin:value;

The CSS margin property defines a margin (space) outside the border.

• margin-top:value;
• margin-right:value;
• margin-bottom:value;
• margin-left:value;

values

length specifies a margin in px, pt, cm,in,pc,mm etc.

% specifies a margin in % of the width of the containing element

auto The browser calculate a margin

For example
Page 20 of 372
www.teknowize.com CSS

Css code
p
{
background-color:orange

}
Page 21 of 372
www.teknowize.com CSS

p
{
border:3px solid red;
margin: 0;
}
h1
{
border: 3px solid powderblue;
margin: 100;
}

Output

2) Background image background-image: url(‘write full file location

.........................................with.file format’) ;

• It is use to add image in back ground.

• In this if we use any image then it repeat vertically and horizontally many
time, so there are some tag , which fix this problem.

For example
Page 22 of 372
www.teknowize.com CSS

Css code
p
{
width:100%;
height: 100%;
background-color:orange;
background-image: url('E:/god/maa saraswati.jpeg')
}

Output
Page 23 of 372
www.teknowize.com CSS

3) Background repeat
It is use to control the repetition of background image on the screen

a) Background no repeat background-repeat : no-repeat;

• It is use to does not repeat image vertically and horizontally .
• Only one image will be displayed.
• Note that if we use background-repeat : repeat then it is by default ,so we
not need to use this tag.

For example

Css code
p
{
width:100%;
height: 100%;
background-color:orange;
background-image: url('E:/god/maa saraswati.jpeg');
background-repeat:no-repeat;
}

Output

b) Background repeat horizontally background-repeat : repeat-x;

• It is use to repeat image horizontally .

For example
Page 25 of 372
www.teknowize.com CSS

Css code
p
{
width:100%;
height: 100%;
background-color:orange;
background-image: url('E:/god/maa saraswati.jpeg');
background-repeat:repeat-x;
}

Output
Page 26 of 372
www.teknowize.com CSS

c) Background repeat vertically background-repeat : repeat-y;

• It is use to repeat image vertically.

For example

Css code
p
{
width:100%;
height: 100%;
background-color:orange;
background-image: url('E:/god/maa saraswati.jpeg');
background-repeat:repeat-y;
}

Output
Page 28 of 372
www.teknowize.com CSS

4) Background gradients
It is use to create background using mixing of two or more colors.

a) Background linear gradient background-image:linear-

……………………………….gradient.(direction, color1,color2, ...);

It is use to create a smooth transition of different color in a back ground.

Values
It is use to show direction of color
gradient
• To right , to left ,to top, to top left,
to top right ,to bottom , to bottom
Direction left , to bottom right .
Also use direction as a degree
• 90deg,180deg,60deg,45deg ,25deg,
30deg, 360deg , 15deg........ etc.
color It is use to describe colors value to be
use in a color gradient.

For example
Page 29 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<title>technical simit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>technical sumit</h1>
</body>
</html>

Css code
h1
{
background-image:linear-gradient(to right,red
, orange, yellow, green, blue, indigo, violet);
}

Output

b) Background repeating linear gradient background-image:

...........................repeating-linear-gradient(direction, color1,color2,..);

It is use to create a smooth transition of different color in a back ground with

repeat same gradient.

For example

Html code
<html>
<head>
<title>technical simit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>technical sumit</h1>
</body>
</html>

Css code
h1
{
background-image: repeating-linear-gradient(red, yellow 10%, green
20%);
}

Output
Page 31 of 372
www.teknowize.com CSS

c) Background radial gradient background-image: radial-

…………………gradient.(shape size position,color_start.....,....,color_end);

It is use to create a smooth transition of different color in a back ground in the

shape of circle or sphere.

Values
There are two type of shape in radial
gradiant.
shape • ellipse (default)
• Circle
There are four size of the radial
gradient.
• farthest-corner (default)
Size • closest-side
• closest-corner
• farthest-side
Position Default position is center.
Start color and stop color It is use to put starting and end color
in radial gradient.

For example
Page 32 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1></h1>
</body>
</html>

Css code
h1
{
background-image: radial-gradient(circle,blue,green,yellow,black)
}

Output

d) Background repeatingradial gradientbackground-image:

....................................................repeating-radial-gradient(shape size
...............................................position,color_start....,.........color_end);

It is use to create a smooth transition of different color in a back ground in the

shape of circle or sphere with repeat same color.
Page 33 of 372
www.teknowize.com CSS

For example

Html code
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
Page 34 of 372
www.teknowize.com CSS

Css code
h1
{
height: 100px;
width: 100px;
background-image: repeating-radial-gradient(circle,red, yellow 10%, green
15%);
}

Output

e) Conic gradient

A conic gradient is similar to a radial gradient.

Both are circular and use the centre of the element but radial gradient emerge
from the centre and conic gradient place them around the centre.

Example-
Page 35 of 372
www.teknowize.com CSS

Using this we can create pie chart or many more.

In radial gradient there is two attribute to define shape such as circle and
ellipses , but in conic gradient there are no any attribute to define shape.

In conic gradient we need to use border tag for square shape or use border-
radius tag along with border tag for circular shape or we can also use conic
gradient with radial gradient tag but after write radial gradient tag we need to
put only a comma (,) and then write conical gradient tag .

If we use radial gradient for shape then must need to write first color of radial
gradient is transparent with 100% and second color will be same as background
color.

Cicle or ellipse shape will be show when we set radial gradiant size as a closest-
side or set border radius is 50%.
• Conic gradient code

Background-image:conic-gradient{color1,color2,.........);

Html code
<!DOCTYPE html>
<html>
Page 36 of 372
www.teknowize.com CSS

<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1></h1>
</body>
</html>

CSS code
h1
{
background-image:conic-gradient(red,blue,yellow,green);
width:200px;
height: 200px;
}
Output

• Conic gradient code with radial gradient for ellipses and circle shape

Background-color:radial-gradient(shape sizeposition, transparent

100%,white);
Note:-Height and width is also must.
Page 37 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1></h1>
</body>
</html>

CSS code
h1
{
background-image: radial-gradient(circle closest-side,transparent
100%,white),
conic-gradient(red,yellow,lime,aqua,blue,magenta,red);
height:200px;
width:200px;
}

Output
Page 38 of 372
www.teknowize.com CSS

• To set (from , at , color range )

background-image:conic-gradient(fromrange at x-axis

y-axis ,color1startdeg,color1stopdeg, color2 start deg,color2

stop deg , ...............................);

From :-

it is use to set angle from which degree the first color will be start (it should be
negative value).
At: –

it is use to set the centre point from where the center will be start and there
should two value ,fist value for x-axis and second value for y-axis.
Color range :-

• it is use to set color range from where a color start and where they end.
• The color range value must be in percent (0% to 100%) or in degree (0 deg
to 360deg).
• To set color range, we must have to write each color name two times, where
in first we set from where color start and in second where color will end.
Page 39 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1></h1>
</body>
</html>

CSS code
h1
{
background-image:conic-gradient(from -30deg at 20%
25%,aqua 0deg,aqua 90deg,blue 90deg, blue 180deg,
magenta 180deg,magenta 270deg,red 270deg,red 360deg);
height:400px;
width:400px;
}
Output
Page 40 of 372
www.teknowize.com CSS

5) Background size background-size:value;

Background size use to resize the any type of back ground image.

Values Values
Auto It is use to display background size as
a original size.
It is use to set background image with
its height percentage and width
Percentage percentage.
First percentage value set the width
and second percentage value set the
height of the image.

It is use to set background image with

its height length and width length.
Length First length value set the width and
second length value set the height of
the image.
It is use to cover the entire container .
By applying this it has to stretch the
cover image or cut a little bit off one of the
edges
Contain It is use to resize the background
image to fully visible.

For example
Page 41 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h6></h6>
</body>
</html>

Css code
h6
{
height: 100px;
width: 100px;
background-size:75% 75%;
background-image: repeating-radial-gradient(circle,red, yellow 10%, green
15%);
}

Output

6) Background blend modebackground-blend-mode : value;

The background-blend-mode defines the blending mode of each background

layer (color and/or image).
Page 42 of 372
www.teknowize.com CSS

Values
Normal Sets the blending mode to
normal(default)
Screen Sets the blending mode to screen
Multiply Set the blending mode to multiply
overlay Set the blending mode to overlay
darken Set the blending mode to darken
lighten Set the blending mode to lighten
color-dodge Set the blending mode to color-dodge
saturation Set the blending mode to saturation
color Set the blending mode to color
luminosity Set the blending mode to luminosity

For example
Page 43 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h6></h6>
</body>
</html>

Css code
h6
{
height: 100px;
width: 100px;
background-size:75% 75%;
background-image: linear-gradient(to right,blue 0%,red
100%),url('E:/download.jpg');
background-blend-mode:darken;
}
Output
Page 44 of 372
www.teknowize.com CSS

7) Background clip background-clip:value;

It is use to defines how far the background (color or image) should extend
within an element.

Values
Border-box This is default value
It is use to extend back ground behind
the boarder.
padding-box It is use to extend back ground to
inside edge of the boarder.
content-box It is use to extend back ground to
content box.
It is use to set background only behind
Text the text structure.(need prefix
according to browser or OS like
webkit, moz etc to run text value.)
Initial It is use to set back ground to default
value.

For example
Page 45 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h6></h6>
</body>
</html>

Css code
h6
{
border: 10px dotted black;
padding: 15px;
background: lightblue;
background-clip: content-box;
}

Output
Page 46 of 372
www.teknowize.com CSS

8) Background attachment background-attachment : fixed ;

It is use to fix the background image on the display screen.

For example

Html code
<html>
<head>
<title>technical simit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1> welcome to technical sumit</h1>
<h2> thank you </h2>
<p> this is my website </p>
<pre>CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper,
or in other media.
Page 47 of 372
www.teknowize.com CSS

CSS saves a lot of work. It can control the layout of multiple web pages
all at once.
External stylesheets are stored in CSS files.</pre>
</body>
</html>

Css code
p
{
width:100%;
height: 100%;
background-color:orange;
background-image: url('E:/god/krishna.jpg');
background-repeat:no-repeat;
background-attachment: fixed;
}

Output

Note – if we use same image after a image and text then it look like-
Page 48 of 372
www.teknowize.com CSS

Note – if we use different image after a image and text then it look like-

9) Background position background-position : value;

The background-position property sets the starting position of a background.

image according to given values.
Page 49 of 372
www.teknowize.com CSS

Values
center
center bottom
center top
left top If we only specify one keywordlike “left”, the othervalue
left center will be "center".
So we need to write full value like “left top” or “center top”
left bottom
etc.
right top
right center
right bottom
• The first value is the horizontal position and the second
value is the vertical.
• The top left corner is 0% 0%. The right bottom corner is
x% y% 100% 100%.
• If you only specify one value, the other value will be
50%.
• Default value is: 0% 0%
• The first value is the horizontal position and the second
value is the vertical.
• The top left corner is 0 0. Units can be pixels (0px 0px)
xpos ypos or any other CSS units.
• If you only specify one value, the other value will be
50%.
• You can mix % and positions

For example
Page 50 of 372
www.teknowize.com CSS

Css code
p
{
width:100%;
height: 100%;
background-image: url("E:/god/maa saraswati.jpeg");
background-position:center;
background-repeat: no-repeat;
}

Output
Page 51 of 372
www.teknowize.com CSS

10) Background origin background-origin: value;

It is use to specifies the origin position (the background positioning

area) of a background image.

Values
Border-box The background image starts from the
upper left corner of the border
padding-box The background image starts from the
upper left corner of the padding edge
content-box The background image starts from the
upper left corner of the content
Initial It is use to set back ground to default
value.

For example
Page 52 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<title>technical simit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h6><pre>technical sumit</pre></h6>

</body>
</html>

Css code
h6
{

border: 10px dashed black;

padding: 25px;
background-position: center;
background: url('E:/nature.jpg');
background-repeat: no-repeat;
background-origin: border-box;
}
pre
{
color: white;
}

Output
Page 53 of 372
www.teknowize.com CSS

CSS font property

Font property define the font family,boldness,size,and thestyle of text etc.

font-family font-family:value;

• The font-family specifies the font for an element.

• The font family property hold several font name because if the browser does
not support first font then it try to next font.
• MustSeparate each value with a comma.

There are two types of font family name :-

• family-name - The name of a font-family, like "times", "courier", "arial",
etc.
• generic-family - The name of a generic-family, like "serif", "sans-serif",
"cursive", "fantasy", "monospace".

Note:- if font family name contain white space like Lucida Sans Unicode
and need to write more then one font family name ,Then we must write
it inside “ “ this.

For example
Page 54 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">

</head>
<body>
<h6> technical sumit </h6>
<h5> welcome to my website </h5>
</body>
</html>

Css code
h6
{
font-family:Helvetica, sans-serif,serif;
}
h5
{
font-family: 'Chilanka', cursive;
}

Output
Page 55 of 372
www.teknowize.com CSS

Google font

It is use to set font of the text using google font available on fonts.google.com .

Step need to follow for use google font :-

Step 1- go to fonts.google.com

Step 2- now click on font style that you need to use

Step 3- now click on ‘select this style’

Page 56 of 372
www.teknowize.com CSS

Step 4- after click on select this style you need to select ‘embed’

Step 5-
1) now copy given link and paste it to inside head tag but after title tag.
2) copy font family name inside css file.

For example
Page 57 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
<link
href="https://fonts.googleapis.com/css2?family=Lobster&display=swap"
rel="stylesheet">
</head>
<body>
<h6> technical sumit </h6>
<h5> welcome to my website </h5>
</body>
</html>

Css code
h5
{
font-family:'Lobster', cursive;
}

Output

font-size font-size:value;

it is use to set the size of the font.

Values
Sets the font-size to a medium size. This
Medium
is default
xx-small Sets the font-size to an extra small size
x-small Sets the font-size to x- small size
Small Sets the font-size to a small size
Large Sets the font-size to a large size
x-large Sets the font-size tox-large size
xx-large Sets the font-size to an extra large size
Page 58 of 372
www.teknowize.com CSS

smaller Sets the font-size to a smaller size

Larger Sets the font-size to a larger size
Sets the font-size to a fixed size in px,
Length
cm, em etc.
% Sets the font-size in percent.

For example
Page 59 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h6> technical sumit </h6>
<h4> welcome to my website </h4>
<h2> welcome to my website </h2>
<h1> welcome to my website </h1>
</body>
</html>
Css code
h6
{
font-size:0.5em;
}
h4
{
font-size:20px;
}
h2
{
font-size:xx-large;
}
h1
{
font-size:50%;
}

Output
Page 60 of 372
www.teknowize.com CSS

Font style font-style: value ;

It is use to set the style of font for a text.

Values
Normal To display normal font style. (default)
Italic To display italic font style.
Oblique To display oblique font style. (it is
same as italic)

For example
Page 61 of 372
www.teknowize.com CSS

</body>
</html>
Css code

h6
{
font-style:normal;
}

h4{
font-style:italic;
}

h2 {
font-style:oblique;
}

Output
Page 62 of 372
www.teknowize.com CSS

Font weight font-weight:value;

it is use to sets how thick or thin characters in text.

Values
Normal Defines normal characters.(default)
Bold Defines thick characters.
Bolder Defines thicker characters.
lighter Defines lighter characters.
100 Defines from thin to thick characters.
200 400 is the same as normal, and 700 is
300 the same as bold.
400
500
600
700
800
900
For example
Page 63 of 372
www.teknowize.com CSS

h6
{
font-weight:bold;
}
h4{
font-weight:lighter;
}
h2 {
font-weight:900;
}

Output
Page 64 of 372
www.teknowize.com CSS

Font variant font-variant:small-caps;

It is use to change small letters to capital letters but it also decrease the letter
size.

Note:-we can change small letter to capital letter , capital letter to small
letter or capitalize first letter without change in size of text using text
transform property.
For example

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1 class=variant> technical sumit </h1>
Page 65 of 372
www.teknowize.com CSS

<h1> welcome to my website </h1>

</body>
</html>
Css code
h1.variant
{
font-variant:small-caps;
}
Output

CSS text property

Text property use to format text and style text.

Text Color color: value;

It is used to set the color of the text.

Values
color names RGB color HEX color

HSL color HSLA Color

For example
Page 66 of 372
www.teknowize.com CSS

</html>
Css code
h1
{
color: red;
}
h2
{
color: blue;
}
p
Page 67 of 372
www.teknowize.com CSS

{
color: green;

}
Output

Text Alignment text-align: value;

It is use to set the horizontal alignment of the text that means it is use to display
text in left ,right ,center or cover full line (justify).
Values
Left It is use to display texts in left
side.(default)
Right It is use to display texts in right side.
center It is use to display text in center.
justify It is use to display text in full line .

For example
Page 68 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<title>technical simit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h6> It's a web designer's responsibility to construct the overall look and
feel of a website, using images, HTML, CSS, and JavaScript to do so.</h6>
<br><br>
<h5> It's a web designer's responsibility to construct the overall look and
feel of a website, using images, HTML, CSS, and JavaScript to do so. </h5>
<br><br>
<h4>It's a web designer's responsibility to construct the overall look and
feel of a website, using images, HTML, CSS, and JavaScript to do so.</h4>
<br><br>
<p> It's a web designer's responsibility to construct the overall look and
feel of a website, using images, HTML, CSS, and JavaScript to do so. </p>
</body>
</html>
Page 69 of 372
www.teknowize.com CSS

Css code
h6
{
text-align:left;
}
h5
{
text-align:right;
}
h4
{
text-align:center;
}
p
{
text-align:justify;
}

Output

Text Alignment last text-align-last: value;

It is use to set the horizontal alignment of the last line text that means it is use to
display last line text in left ,right ,center or cover full line (justify).
Values
Left It is use to display texts in left
side.(default)
Page 70 of 372
www.teknowize.com CSS

Right It is use to display texts in right side.

center It is use to display text in center.
justify It is use to display text in full line .
For example

Html code
<html>
<head>
<title>technical simit</title>
Page 71 of 372
www.teknowize.com CSS

<link rel="stylesheet" type="text/css" href="E:/style.css">

</head>
<body>
<h1> These three “languages” are the backbone of most websites, and are
the three biggest tools in a web designer’s toolbox. They’re all technically
“languages,” although HTML and CSS are not technically considered to be true
programming languages.</h6>
<br><br>
<h5> These three “languages” are the backbone of most websites, and are
the three biggest tools in a web designer’s toolbox. They’re all technically
“languages,” although HTML and CSS are not technically considered to be true
programming languages. </h5>
<br><br>
<h4>These three “languages” are the backbone of most websites, and are
the three biggest tools in a web designer’s toolbox. They’re all technically
“languages,” although HTML and CSS are not technically considered to be true
programming languages.</h4>
<br><br>
<p> These three “languages” are the backbone of most websites, and are
the three biggest tools in a web designer’s toolbox. They’re all technically
“languages,” although HTML and CSS are not technically considered to be true
programming languages. </p>
</body>
Css code
h6
{
text-align-last:left;
}
h5
{
text-align-last:right;
}
h4
{
text-align-last:center;
}
p
{
text-align-last:justify;
}
Page 72 of 372
www.teknowize.com CSS

Output

Text Direction direction:value;

It is used to change the text direction horizontally from left or from right(it is
same as text alignment value left and right).

• ltr-left to right
• rtl-right to left
Values
ltr It is use to display texts in left
side.(default)
rtl It is use to display texts in right side.

For example
Page 73 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<title>technical simit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h4>This is the default text direction.</h4>

<h3>This is right-to-left text direction.</h3>

</body>
</html
Css code
h4
{
direction: ltr;
}
h3
{
direction: rtl;
}

Output
Page 74 of 372
www.teknowize.com CSS

Vertical Alignment vertical-align: value;

It is use to sets the vertical alignment of an image.

Values
top It is use to display image at top.
middle It is use to display image at middle.
bottom It is use to display image at bottom.

For example

Html code
<html>
<head>
<title>technical simit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<p>An <img class="top" src="http://placekitten.com/100/100"> image with a
top alignment.</p><br>
Page 75 of 372
www.teknowize.com CSS

<p>An <img class="middle" src="http://placekitten.com/100/100" > image with

a middle alignment.</p><br>

<p>An <img class="bottom" src="http://placekitten.com/100/100"> image with

a bottom alignment.</p>
</body>
</html></html
Css code
img.top {
vertical-align: top;
}

img.middle {
vertical-align: middle;
}

img.bottom {
vertical-align: bottom;
}

Output
Page 76 of 372
www.teknowize.com CSS

Text decoration text-decoration: value;

• It is use to add decoration to text.

• We can add text decoration, text decoration color and text decoration style in
text decoration tag like text-decoration: underline overline line -through
dotted red;

Values
Underline It is use to draw line below the
text
Overline It is use to draw line over the text
Line-through It is use to draw line on the text

There are three property of text decoration:-

a) text-decoration-line (it is new version of text decoration and it always

required for implement text decoration color and text decoration style.)
b) text-decoration-color
c) text-decoration-style
d)
For example

e)
Page 77 of 372
www.teknowize.com CSS

f)
Html code
<html>
<head>
<title>technical simit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<p class="underline">its show underline</p><br>
<p class="overline"> its show over line </p><br>
<p class="line-through">its show line-through</p><br>
<p class="all_values"> it show all value of text decoration </p>
</body>
</html>
Css code
.underline
{
text-decoration: underline;
}
.overline
{
text-decoration:overline;
Page 78 of 372
www.teknowize.com CSS

}
.line-through
{
text-decoration: line-through;
}
.all_values
{
text-decoration: underline overline line-through;
}

Output
Page 79 of 372
www.teknowize.com CSS

a) Text decoration line text-decoration-line: value;

• It is use to add decoration to text.

• We can add text decoration, text decoration color and text decoration style in
text decoration tag like text-decoration: underline overline line -through
dotted red;

• it is similar to text decoration.

Values
Underline It is use to draw line below the
text
Overline It is use to draw line over the text
Line-through It is use to draw line on the text

For example

g)
Page 80 of 372
www.teknowize.com CSS

h)
Html code
<html>
<head>
<title>technical simit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<p class="underline">its show underline</p><br>
<p class="overline"> its show over line </p><br>
<p class="line-through">its show line-through</p><br>
<p class="all_values"> it show all value of text decoration </p>
</body>
</html>
Css code
.underline
{
text-decoration-line: underline;
}
.overline
{
text-decoration-line:overline;
}
.line-through
Page 81 of 372
www.teknowize.com CSS

{
text-decoration-line: line-through;
}
.all_values
{
text-decoration-line: underline overline line-through;
}

Output
Page 82 of 372
www.teknowize.com CSS

b) Text decoration color text-decoration-color:value;

It is use to color the lines create using text decoration or text decoration line
Values

color names RGB color HEX color

HSL color HSLA Color

For example
Page 83 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<title>technical simit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<p class="underline">its show underline</p><br>
<p class="overline"> its show over line </p><br>
<p class="line-through">its show line-through</p><br>
<p class="all_values"> it show all value of text decoration </p>
</body>
</html>
Css code
.underline
{
text-decoration: underline;
Page 84 of 372
www.teknowize.com CSS

text-decoration-color:springgreen;
}
.overline
{
text-decoration:overline;
text-decoration-color:#ffff00;
}
.line-through
{
text-decoration: line-through;
text-decoration-color:rgb(255,0,153);
}
.all_values
{
text-decoration: underline overline line-through;
text-decoration-color:orange;
}
Output
Page 85 of 372
www.teknowize.com CSS

c) Text decoration style text-decoration-style:value;

It is use to design the underline ,overline, line-throughcreated using text

decoration or text decoration line.

Values
Solid The line will display as a single line.
(default)
Double The line will display as a double line.
Dotted The line will display as a dotted line.
Dashed The line will display as a dashed line.
Wavy The line will display as a wavy line.

For example
Page 86 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<title>technical simit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<p class="solid">its show solid line</p><br>
<p class="double"> its show double line </p><br>
<p class="dotted">its show dotted line</p><br>
<p class="dashed"> it show dashes line </p>
<p class="wavy"> it show wavy line </p>

</body>
</html>

Css code
.solid
{
text-decoration: underline overline;
text-decoration-style:solid;
}
.double
{
Page 87 of 372
www.teknowize.com CSS

text-decoration:underline overline;
text-decoration-style:double;
}
.dotted
{
text-decoration: underline overline;
text-decoration-style:dotted;
}
.dashed
{
text-decoration: underline overline;
text-decoration-style:dashed;
}
.wavy
{
text-decoration: underline overline;
text-decoration-style:wavy;
}

Output
Page 88 of 372
www.teknowize.com CSS

Text transform text-transform:value;

It is use to control capitalization of text.

Values
Capitalize Transforms the first character of each
word to uppercase
Uppercase Transforms all characters to uppercase
Lowercase Transforms all characters to lowercase
For example

Html code
<html>
<head>
<title>technical simit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
Page 89 of 372
www.teknowize.com CSS

<body>
<p class="capitalize">its set first character of each word to
uppercase</p><br>
<p class="uppercase"> its set all character to uppercase. </p><br>
<p class="lowercase">its set all character to lowercase.</p><br>
</body>
</html>
Css code
.capitalize
{
text-transform:capitalize;
}
.uppercase
{
text-transform:uppercase;
}
.lowercase
{
text-transform:lowercase;
}

Output
Page 90 of 372
www.teknowize.com CSS

White space white-space:value;

It is use to show text how white space inside an element is handled.

Values
Nowrap text display in single line.
Pre text display in single line but take two
space down from top.
Pre-line text display in more than one line but
take one space down from top.
Pre-wrap text display in more than one line but
take two space down from top.
Normal It is normal text.

For example
Page 91 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<title>technical simit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<p class="nowrap">Web design refers to the design of websites that are
displayed on the internet. It usually refers to the user experience aspects of
website development rather than software development. </p><br>
<p class="pre"> Web design refers to the design of websites that are displayed
on the internet. It usually refers to the user experience aspects of website
development rather than software development. </p><br>
<p class="pre-line">Web design refers to the design of websites that are
displayed on the internet. It usually refers to the user experience aspects of
website development rather than software development. </p><br>
<p class="pre-wrap"> Web design refers to the design of websites that are
displayed on the internet. It usually refers to the user experience aspects of
website development rather than software development. </p>
Page 92 of 372
www.teknowize.com CSS

<p class="normal">Web design refers to the design of websites that are displayed
on the internet. It usually refers to the user experience aspects of website
development rather than software development. </p>

</body>
</html>

CSS code
.nowrap
{
white-space: nowrap;
}
.pre
{
white-space: pre;
}
.pre-line
{
white-space:pre-line;
}
.pre-wrap
{
white-space:pre-wrap;
}
.normal
{
white-space:normal;
}

Output
Page 93 of 372
www.teknowize.com CSS

Overflow overflow:value;

It is specifies what should happen if content overflows an element's box.

• The overflow property only works for block elements with a specified height
and width.
• There are two types of overflow which we discuss in next.
Values
visible The overflow is not clipped. It renders
outside the element's box. This is
default
hidden The overflow is clipped, and the rest of
the content will be invisible
scroll The overflow is clipped, but a scroll-
bar is added to see the rest of the
content
If overflow is clipped, a scroll-bar
auto should be added to see the rest of the
content

For example
Page 94 of 372
www.teknowize.com CSS

<p class="scroll">Web design refers to the design of websites that are displayed
on the internet. It usually refers to the user experience aspects of website
development rather than software development. </p><br>
<p class="auto"> Web design refers to the design of websites that are displayed
on the internet. It usually refers to the user experience aspects of website
development rather than software development. </p>

</body>
</html>

Css code
.visible
{
background-color: lightblue;
width: 110px;
height: 110px;
overflow:visible;
}
.hidden
{
background-color: lightblue;
width: 110px;
height: 110px;
overflow:hidden;
}
.scroll
{
background-color: lightblue;
width: 110px;
height: 110px;
overflow:scroll;
}
.auto
{
background-color: lightblue;
width: 110px;
height: 110px;
overflow:auto;
}
Page 96 of 372
www.teknowize.com CSS

Output

a) Overflow x overflow-x: value;

The overflow-x property specifies whether to clip the content, add a scroll bar,
or display overflow content of a block-level element, when it overflows at the
left and right edges.

The overflow property only works for block elements with a specified width.

Note :-Use the overflow-y property to determine clipping at the top and bottom
edges.
Values
The content is not clipped, and it may
visible be rendered outside the left and right
edges. This is default
hidden The content is clipped - and no
scrolling mechanism is provided
scroll The content is clipped and ascrolling
mechanism is provided
auto Should cause a scrolling mechanism to
be provided for overflowing boxes
Page 97 of 372
www.teknowize.com CSS

For example
Page 98 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical simit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<p class="visible">Web design refers to the design of websites that are
displayed on the internet. It usually refers to the user experience aspects of
website development rather than software development. </p><br>
<p class="hidden"> Web design refers to the design of websites that are
displayed on the internet. It usually refers to the user experience aspects of
website development rather than software development. </p><br>
<p class="scroll">Web design refers to the design of websites that are displayed
on the internet. It usually refers to the user experience aspects of website
development rather than software development. </p><br>
<p class="auto"> Web design refers to the design of websites that are displayed
on the internet. It usually refers to the user experience aspects of website
development rather than software development. </p>

</body>
</html>

Css code
.visible
{
background-color: lightblue;
width: 40px;
overflow-x:visible;
}
.hidden
{
background-color: lightblue;
width: 40px;
overflow-x:hidden;
}
.scroll
{
background-color: lightblue;
width: 40px;
overflow-x:scroll;
}
Page 99 of 372
www.teknowize.com CSS

.auto
{
background-color: lightblue;
width: 40px;
overflow-x:auto;
}

Output

b) Overflow y overflow-y: value;

The overflow-x property specifies whether to clip the content, add a scroll bar,
or display overflow content of a block-level element, when it overflows at the
left and right edges.

The overflow property only works for block elements with a specified width.

Note :-Use the overflow-y property to determine clipping at the top and bottom
edges.
Page 100 of 372
www.teknowize.com CSS

Values
The content is not clipped, and it may
visible be rendered outside the left and right
edges. This is default
hidden The content is clipped - and no
scrolling mechanism is provided
scroll The content is clipped and ascrolling
mechanism is provided
auto Should cause a scrolling mechanism to
be provided for overflowing boxes

For example
Page 101 of 372
www.teknowize.com CSS

</body>
</html>

Css code
.visible
{
background-color: lightblue;
height:40px;
width: 200px;
overflow-y:visible;
}
.hidden
{
background-color: lightblue;
height:40px;
width: 200px;
overflow-y:hidden;
}
.scroll
{
background-color: lightblue;
height:40px;
width: 200px;
overflow-y:scroll;
}
.auto
{
background-color: lightblue;
height:40px;
width: 200px;
overflow-y:auto;
}
Page 103 of 372
www.teknowize.com CSS

Output

Text overflow text-overflow: value;

The text-overflow property specifies how overflowed content that is not

displayed to the user. It can be clipped, display an ellipsis (...), or display a
custom string.
Note:- The text-overflow: "string" only works in Firefox.

Text overflow required both properties:-

• white-space: nowrap;
• overflow: hidden;
Page 104 of 372
www.teknowize.com CSS

values
clip The text outside the given width area
should be hidden.
The text outside the given width area
ellipsis should be hidden and display three dot
("...") to representthe clipped text
string It is use to write custom short word
like ‘etc’ thats we need to show in
place of hidden word

For example
Page 105 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1> text-overflow: clip </h1>
<p class="clip">Web design refers to the design of websites that are
displayed on the internet. It usually refers to the user experience aspects of
website development rather than software development.
</p><br><br><br><br>
<h1> text-overflow: ellipsis</h1>
<p class="ellipsis"> Web design refers to the design of websites that are
displayed on the internet. It usually refers to the user experience aspects of
website development rather than software development. </p>
<h1> text-overflow: "----" (user defined string) </h1>
<p class="string">Web design refers to the design of websites that are displayed
on the internet. It usually refers to the user experience aspects of website
development rather than software development. </p>
</body>
</html>

Css code
.clip {
white-space: nowrap;
width: 50px;
overflow: hidden;
text-overflow: clip;
}
.ellipsis {
white-space: nowrap;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
}
.string {
white-space: nowrap;
width: 50px;
overflow: hidden;
Page 106 of 372
www.teknowize.com CSS

text-overflow: "----";
}

Output

text-shadow text-shadow:h-shadow value v-shadow valueblur-radius

...........................value color value;

it is use to adds shadow to text.

Note:- To add more than one shadow to the text, add a comma-separated list
of shadowslike, text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;

values
h-shadow • Always Required.
• It is use to add position of the
horizontal shadow.
• Negative values are allowed.
• Always Required.
v-shadow • It is use to add position of the
vertical shadow.
• Negative values are allowed.
Blur-radius • It is Optional.
• It is use to add radius of the blur.
• Defaultvalue is 0.
color • It is Optional.
• It is use to add color of the shadow.
• You can use all color values of CSS.
Page 107 of 372
www.teknowize.com CSS

For example

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h3> one shadow value clip </h3>
<h1 class="textshadow1">TECHNICAL SUMIT </h1>
<h3> more than one shadow value</h3>
<h1 class="textshadow2"> TECHNICAL SUMIT </h1>

<b>note:-</b>To add more than one shadow to the text, add a comma-separated
list of shadows.
</body>
</html>
Page 108 of 372
www.teknowize.com CSS

Css code
.textshadow1 {
text-shadow: 10px 10px 0px red;
}
.textshadow2 {
text-shadow: 0 0 3px #FF0000, 00 5px #0000FF;

Output

Text spacing
Text spacing in CSS is controlled using the letter-spacing, word-spacing, line-
height, and text-indent properties.

a) Letter spacing letter-spacing: value;

it is use to increases or decreases the space between characters in a text.

values
Normal • It is normal space between words
(0.25em)
• This is default
• It is use to add additional space
Length between characters (in px, pt, cm,
em, etc).
• Negative values are allowed.
Page 109 of 372
www.teknowize.com CSS

For example

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1> normal value (default) </h1>
<h3 class="normal">The letter-spacing property is used to specify the
amount of space between letters. The amount indicated is in addition to the
default spacing. The amount is specified in units.
</h3>
<h1> lengthvalue</h1>
<h3 class="length"> The letter-spacing property is used to specify the amount
of space between letters. The amount indicated is in addition to the default
spacing.The amount is specified in units. </h3>
</body>
</html>
Page 110 of 372
www.teknowize.com CSS

Css code
.normal {
letter-spacing:normal;
}
.length {
letter-spacing:8px;
}

Output

b) Word spacing word-spacing: value;

it is use to increases or decreases the space between words in a text.

values
Normal • It is normal space between words
(0.25em)
• This is default
• It is use to add additional space
Length between words (in px, pt, cm, em,
etc).
• Negative values are allowed.
Page 111 of 372
www.teknowize.com CSS

For example

Css code
.normal {
word-spacing:normal;
}
.length {
word-spacing:8px;
}

Output

c) Line height line-height:value;

The line-height property is used to specify the amount of vertical space between
lines of text

values
• It is normal line height.
Normal
• it is default

number Any number that need to set line height.

length It is use to set line height inlength(in px, pt, cm,in,pc,mm etc).

% It is use to set line height in percent.

Page 113 of 372
www.teknowize.com CSS

For example

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1> normal (default) </h1>
<h3 class="normal">The letter-spacing property is used to specify the amount
of space between letters. The amount indicated is in addition to the default
spacing. The amount is specified in units.The letter-spacing property is used to
specify the amount of space between letters. The amount indicated is in addition
to the default spacing.The amount is specified in units.
</h3><br>
<h1> line height (default) </h1>
Page 114 of 372
www.teknowize.com CSS

<h3 class="line_height">The letter-spacing property is used to specify

the amount of space between letters. The amount indicated is in addition to the
default spacing. The amount is specified in units.The letter-spacing property is
used to specify the amount of space between letters. The amount indicated is in
addition to the default spacing.The amount is specified in units.
</h3>
</body>
</html>

Css code
.normal
{
line-height: normal;
}
.line_height
{
line-height: 50px;
}

Output

d) Text indent text-indent:value;

It is use to set from where first line will be start.

Page 115 of 372
www.teknowize.com CSS

Note:- Negative values are allowed. The first line will be indented to the left
if the value is negative .if negative value is more, then some character or
word may me hide.
Values
length Set the value in px, pt, cm, em, etc.
Default value is 0.
% Set the value in percent.
For example
Page 116 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<title>technical simit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<p class="em">Web design refers to the design of websites that are
displayed on the internet. It usually refers to the user experience aspects of
website development rather than software development. </p><br>
<p class="px"> Web design refers to the design of websites that are displayed
on the internet. It usually refers to the user experience aspects of website
development rather than software development. </p><br>
<p class="pt">Web design refers to the design of websites that are displayed on
the internet. It usually refers to the user experience aspects of website
development rather than software development. </p><br>
<p class="cm"> Web design refers to the design of websites that are displayed
on the internet. It usually refers to the user experience aspects of website
development rather than software development. </p>
<p class="percent">Web design refers to the design of websites that are
displayed on the internet. It usually refers to the user experience aspects of
website development rather than software development. </p>
</body>
</html>

Css code
.em
{
text-indent:3em;
}
.px
{
text-indent:100px;
}
.pt
{
text-indent:15pt;
}
.cm
{
text-indent:1cm;
}
.percent
Page 117 of 372
www.teknowize.com CSS

{
text-indent:50%;
}

Output

CSS Links
It is use to styling the link which we write in html ancor tag.

Links a:link_state{write any tag according to need like color, font-

............family, background, etc.)

It is use to style a link that how it will look when not visited to the link, when
visited to the link,when hover to the link and when user click on the link.

When write the css link code then, there are some order rules:

• a:hover MUST come after a:link and a:visited

• a:active MUST come after a:hover

The four links states are:-

• a:link - a normal, unvisited link.

• a:visited - a link the user has visited.
• a:hover - a link when the user mouses over it.
• a:active - a link the moment it is clicked.
Page 118 of 372
www.teknowize.com CSS

For example

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
Page 119 of 372
www.teknowize.com CSS

<p><b><a href="https://www.facebook.com/" target="_blank">This is a

link</a></b></p>
</body>
</html>

CSS code
a:link {
color: red;
background: white;
}
a:visited {
color: green;
}
a:hover {
color: hotpink;
background-color: yellow;
text-decoration:underline overline;
}
a:active {
color: blue;
}

Output
Page 120 of 372
www.teknowize.com CSS

CSS border
The border properties allow you to specify how the border should look.

Border border: border-width border-style border-color ;

It is use to customize the border style ,border width,border color of the border.

• You can write all this property of border in border tag but at least border-style
value is must in border tag or you can also use all this border properties
separately ,which we discuss next.
• You must write border-width ,border-style and border-color in same order if
write all properties in border tag.

There are three properties of a border

• border-width
• border-style (required)
• border-color

For example
Page 121 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>element with a solid red border</h1>
<h2>element with a dotted blue border</h2>
<h3>element with a double border.</h3>
</body>
</html>
CSS code
h1 {
border: 5px solid red;
}
h2 {
border: 4px dotted blue;
}
h3 {
border: double;
}

Output
Page 122 of 372
www.teknowize.com CSS

Border color border-color: value;

It is use to set color of the border.

Some conditions are:-

• If we use one color value in border-color property then color of all four
side of the border will same color.
• If we use two color value in border-color property then, first color value
use in top and bottom border color but second color value use in right and
left border.
• If we use three color value in border property then , first color value use
in top border , second color use in bottom border and third color use in
left & right border.
• If we use four color value in border property then , first color value use
in top border,second color value use in right border , third color value use
in bottom border and fourth color value use in left border.(it start from
top border and move clockwise to left)

Example:-

If the border-color property has one value:

• border-color: red;
o all four borders are red

If the border-color property has two values:

• border-color: red green;
o top and bottom borders are red
o right and left borders are green

If the border-color property has three values:

• border-color: red green blue;
o top border is red
o right and left borders are green
o bottom border is blue

If the border-color property has four values:

• border-color: red green blue pink;
o top border is red
o right border is green
o bottom border is blue
o left border is pink
Page 123 of 372
www.teknowize.com CSS

Values

color names RGB color HEX color

HSL color HSLA Color

For example
Page 124 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h4 class="one_color">One-colored border!</h4>
<h4 class="two_color">two-colored border!</h4>
<h4 class="three_color">three-colored border!</h4>
<h4 class="four_color">four-colored border!</h4>
</body>
</html>

CSS code
.one_color{
border-style: solid;
border-color: #0000ff;
}
.two_color {
border-style: solid;
border-color: red yellow;
}
.three_color {
border-style: solid;
border-color:red green blue;
}
.four_color {
border-style: solid;
border-color: red green yellow pink;
}
Page 125 of 372
www.teknowize.com CSS

Output

Color each side of border with different color

We can write separate tag for coloring each border
a) Border-top-color:value;
b) Border-bottom-color:value;
c) Border-left-color:value;
d) Border-right-color:value;

Values

color names RGB color HEX color

HSL color HSLA Color

Page 126 of 372
www.teknowize.com CSS

For example
Page 127 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h4 class="top_color">top-colored border!</h4>
<h4 class="bottom_color">bottom-colored border!</h4>
<h4 class="left_color">left-colored border!</h4>
<h4 class="right_color">right-colored border!</h4>
</body>
</html>

CSS code
.top_color
{
border-style: solid;
border-top-color: #0000ff;
}
.bottom_color
{
border-style: solid;
border-bottom-color: blue;
}
.left_color
{
border-style: solid;
border-left-color:green;
}
.right_color
{
border-style: solid;
border-right-color:hotpink;
}
Page 128 of 372
www.teknowize.com CSS

Output

Border style border-style: value;

It is use to set style of the border.

Some conditions are:-

• If we use one style value in border-style property then style of all four
side of the border will same style.
• If we use two stylevalues in border-style property then, first style value
use in top and bottom border style but second stylevalue use in right and
left border.
• If we use three style values in border property then , first stylevalue use in
top border , second stylevalue use in bottom border and third style value
use in left & right border.
• If we use four stylevalues in border property then , first stylevalue use in
top border,second style value use in right border , third style value use in
bottom border and fourth style value use in left border.(it start from top
border and move clockwise to left border).

Example:-

If the border-style property has one value:

• border-style: dotted;
o all four borders are dotted

If the border-style property has two value:

• border-style: dotted solid;
o top and bottom borders are dotted
o right and left borders are solid
Page 129 of 372
www.teknowize.com CSS

If the border-color property has one value:

• border-style: dotted solid double;
o top border is dotted
o right and left borders are solid
o bottom border is double

If the border-color property has one value:

• border-style: dotted solid double dashed;
o top border is dotted
o right border is solid
o bottom border is double
o left border is dashed

Values
Dotted Specifies a dotted border.
dashed Specifies a dashed border.
Solid Specifies a solid border.
double Specifies a double border.
groove Specifies a 3D grooved border. The
effect depends on the border-color
value.
ridge Specifies a 3D ridge border. The effect
depends on the border-color value.
inset Specifies a 3D inset border. The effect
depends on the border-color value.
outset Specifies a 3D outset border. The
effect depends on the border-color
value.

For example
Page 130 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h4 class="one_style">One style border!</h4>
<h4 class="two_style">two style border!</h4>
<h4 class="three_style">three style border!</h4>
<h4 class="four_style">four style border!</h4>
</body>
</html>

CSS code
.one_style
{
border-style:dashed;
}
.two_style{
border-style:solid dotted;
}
Page 131 of 372
www.teknowize.com CSS

.three_style
{
border-style:solid dashed dotted;
}
.four_style
{
border-style:solid dotted dashed groove;
}

Output

Style each side of border with different style

We can write separate tag for styling each border.
a) Border-top-style:value;
b) Border-bottom-style:value;
c) Border-left-style:value;
d) Border-right-style:value;

ridge Specifies a 3D ridge border. The effect

depends on the border-color value.
inset Specifies a 3D inset border. The effect
depends on the border-color value.
outset Specifies a 3D outset border. The
effect depends on the border-color
value.

For example
Page 133 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h4 class="top_style">One style border!</h4>
<h4 class="bottom_style">two style border!</h4>
<h4 class="left_style">three style border!</h4>
<h4 class="right_style">four style border!</h4>
</body>
</html>

CSS code
.top_style
{
border-top-style:dotted;
}
.bottom_style
{
border-bottom-style:dashed;
}
.left_style
{
border-left-style:solid;
}
.right_style
{
border-right-style:double;
}

Output
Page 134 of 372
www.teknowize.com CSS

Border width border-width: value;

It is use to set width of the border.

Some conditions are:-

• If we use one width value in border-width property then width of all four
side of the border will same width.
• If we use two widthvalues in border-width property then, first width value
use in top and bottom border but second width use in right and left
border.
• If we use three width values in border property then , first widthvalue use
in top border , second width values use in bottom border and third width
use in left & right border.
• If we use four widthvalues in border property then , first widthvalue use
in top border,second width use in right border , third width use in bottom
border and fourth width use in left border.(it start from top border and
move clockwise to left border)

Example :-

If the border-width property has one value:

border-width: thin;
o all four borders are thin

If the border-width property has one value:

border-width: thin medium;
o top and bottom borders are thin
o right and left borders are medium

If the border-width property has one value:

border-width: thin medium thick;
o top border is thin
o right and left borders are medium
o bottom border is thick

If the border-width property has one value:

border-width: thin medium thick 10px;
o top border is thin
o right border is medium
o bottom border is thick
o left border is 10px
Page 135 of 372
www.teknowize.com CSS

Values
medium Specifies a medium border.

thin Specifies a thin border.

thik Specifies a thik border.

length Allows you to define the thickness of

the border.(in em, pt,px etc)

For example
Page 136 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h4 class="one_width">One width border!</h4>
<h4 class="two_width">two width border!</h4>
<h4 class="three_width">three width border!</h4>
<h4 class="four_width">four width border!</h4>
</body>
</html>

CSS code
.one_width
{
border-style:solid;
border-width:thick;
}
.two_width
{
border-style:solid;
border-width:thick 4px;
}
.three_width
{
border-style:solid;
border-width: thin medium 6pt;
}
.four_width
{
border-style:solid;
border-width:5px 2em 3pt thin;
}
Page 137 of 372
www.teknowize.com CSS

Output

Change width of each side of border

We can write separate tag for change width of each border.
a) Border-top-width:value;
b) Border-bottom-width:value;
c) Border-left-width:value;
d) Border-right-width:value;

Values
medium Specifies a medium border.

thin Specifies a thin border.

thik Specifies a thik border.

length Allows you to define the thickness of

the border.(in em, pt,px etc)

For example
Page 138 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h4 class="top_width">top width border!</h4>
<h4 class="bottom_width">bottom width border!</h4>
<h4 class="left_width">left width border!</h4>
<h4 class="right_width">right width border!</h4>
</body>
</html>
Page 139 of 372
www.teknowize.com CSS

CSS code
.top_width
{
border-style:solid;
border-top-width:thick;
}
.bottom_width
{
border-style:solid;
border-bottom-width:thick;
}
.left_width
{
border-style:solid;
border-left-width: thick;
}
.right_width
{
border-style:solid;
border-right-width:thick;
}

Output

`
Page 140 of 372
www.teknowize.com CSS

border-radius border-radius: value;

it is use to set the radius of the border corner.

• This property allows you to add rounded corners to border.

• This property can have from one to four values.

Some conditions are:-

• If we use two radius values in border-radius property then value applies
to all four corners, which are rounded equally
• If we use two radius values in border-radius property then, first value
applies to top-left and bottom-right corners, and the second value applies
to top-right and bottom-left corners
• If we use three radius values in radius property then , first value applies to
top-left corner, second value applies to top-right and bottom-left corners,
and third value applies to bottom-right corner.
• If we use four radius values in border radius property then , first value
applies to top-left corner, second value applies to top-right corner, third
value applies to bottom-right corner, and fourth value applies to bottom-
left corner (it start from top border and move clockwise to left border)

Example:-
If the border-radius property has one value:
• border-radius: 15px;
o all four borders radius are same

If the border-radius property has two values:

• border-radius: 15px 50px;
o first value applies to top-left and bottom-right corners,
o second value applies to top-right and bottom-left corners.

If the border-radius property has three values:

• border-radius: 15px 50px 30px;
o first value applies to top-left corner.
o second value applies to top-right and bottom-left corners.
o third value applies to bottom-right corner.

If the border-radius property has four values:

• border-radius: 15px 50px 30px 5px;
o first value applies to top-left corner.
o second value applies to top-right corner.
o third value applies to bottom-right corner.
o fourth value applies to bottom-left corner
•
Page 141 of 372
www.teknowize.com CSS

Values
length Allows you to define the thickness of
the border.(in em, pt,px etc)
% Set value in percent.

For example
Page 142 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h4 class="one_radius">One radius border!</h4>
<h4 class="two_radius">two radius border!</h4>
<h4 class="three_radius">three radius border!</h4>
<h4 class="four_radius">four radius border!</h4>
</body>
</html>
CSS code
.one_radius
{
border-style:solid;
border-radius:15px;
}
.two_radius
{
border-style:solid;
border-radius:15px 50px;
}
.three_radius {
border-style:solid;
border-radius:15px 50px 30px;
}
.four_radius
{
border-style:solid;
border-radius:15px 5px 30px 5px;
}
Page 143 of 372
www.teknowize.com CSS

Output

Change radius of each side of border

We can write separate tag for change radius of each border.
a) Border-top-radius:value;
b) Border-bottom-radius:value;
c) Border-left-radius:value;
d) Border-right-radius:value;

Values
length Allows you to define the thickness of
the border.(in em, pt,px etc)
% Set value in percent.

For example
Page 144 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h4 class="top_left">top left border radius!</h4>
<h4 class="top_right">top right border radius!</h4>
<h4 class="bottom_left">bottom left border radius!</h4>
<h4 class="bottom_right">bottom right border radius!</h4>
</body>
</html>
Page 145 of 372
www.teknowize.com CSS

CSS code
.top_left
{
border-style:solid;
border-top-left-radius:25px;
}
.top_right
{
border-style:solid;
border-top-right-radius:25px;
}
.bottom_left
{
border-style:solid;
border-bottom-left-radius:25px;
}
.bottom_right
{
border-style:solid;
border-bottom-right-radius:25px;
}

Output
Page 146 of 372
www.teknowize.com CSS

Border top border-top: border-widthborder-style border-color;

It is use to customize the top border with border width border style border color.

The properties that can be set must be in the following order:

• border-top-width
• border-top-style (required)
• border-top-color

value
we can use all the value separately which we already read above.
border-top-width Specifies the width of the top border.
border-top-style Specifies the style of the top border.
border-top-color Specifies the color of the top border.

For example
Page 147 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>A heading with a solid red top border</h1>

<h2>A heading with a dotted blue top border</h2>

<div>A div element with a double top border.</div>

</body>
</html>

CSS code
h1
{
border-top: 5px solid red;
}

h2 {
border-top: 4px dotted blue;
}

div {
border-top: double;
}

Output
Page 148 of 372
www.teknowize.com CSS

Border bottom border-bottom: border-widthborder-style border-color;

It is use to customize the bottom border with border width border style border
color.

The properties that can be set must be in the following order:

• border-bottom-width
• border-bottom-style (required)
• border-bottom-color

value
we can use all the value separately which we already read above.
border-bottom-width Specifies the width of the bottom
border.
border-bottom-style Specifies the style of the bottom
border.
border-bottom-color Specifies the color of the bottom
border.

For example
Page 149 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>A heading with a solid red bottom border</h1>

<h2>A heading with a dotted blue bottom border</h2>

<div>A div element with a double bottom border.</div>

</body>
</html>

CSS code
h1
{
border-bottom: 5px solid red;
}
Page 150 of 372
www.teknowize.com CSS

h2 {
border-bottom: 4px dotted blue;
}

div {
border-bottom: double;
}

Output

Border left border-left: border-widthborder-style border-color;

It is use to customize the left border with border width border style border color.

The properties that can be set must be in the following order:

• border-left-width
• border-left-style (required)
• border-left-color

value
we can use all the value separately which we already read above.
border-left-width Specifies the width of the left border.
border-left-style Specifies the style of the left border.
border-left-color Specifies the color of the left border.
Page 151 of 372
www.teknowize.com CSS

For example
Page 152 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>A heading with a solid red left border</h1>

<h2>A heading with a dotted blue left border</h2>

<div>A div element with a double left border.</div>

</body>
</html>

CSS code
h1
{
border-left: 5px solid red;
}

h2 {
border-left: 4px dotted blue;
}

div {
border-left: double;
}

Output
Page 153 of 372
www.teknowize.com CSS

Border right border-right: border-widthborder-style border-color;

It is use to customize the right border with border width border style border
color.

The properties that can be set must be in the following order:

• border-right-width
• border-right-style (required)
• border-right-color

values
we can use all the value separately which we already read above.
border-right-width Specifies the width of the right
border.
border-right-style Specifies the style of the right border.
border-right-color Specifies the color of the right border.

For example
Page 154 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>A heading with a solid red right border</h1>

<h2>A heading with a dotted blue right border</h2>

<div>A div element with a double right border.</div>

</body>
</html>

CSS code
h1
{
border-right: 5px solid red;
}

h2 {
border-right: 4px dotted blue;
}

div {
border-right: double;
}

Output
Page 155 of 372
www.teknowize.com CSS

Border spacing border-spacing:value;

It is use to sets the distance between the borders of adjacent cells.

This property works only when border-collapse is separate.

Value
Specifies the distance between the
borders of adjacent cells in px, cm,
etc. Negative values are not allowed.

• If one value is specified, it defines

both the horizontal and vertical
length spacing between cells
• If two values are specified, the
first sets the horizontal spacing
and the second sets the vertical
spacing

For example
Page 156 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h2>border-spacing: 15px:</h2>
<p>When using "border-collapse: separate", the border-spacing property can be
used to set the space between the cells:</p>
<table id="table1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
Page 157 of 372
www.teknowize.com CSS

CSS code
table, td, th {
border: 1px solid black;
}

#table1 {
border-collapse: separate;
border-spacing: 15px;
}

Output

Border collapse border-collapse:value;

The border-collapse property sets whether table borders should collapse into a
single border or be separated into a double border as in standard html .
Value
separate • Borders are separated; each cell will
display its own borders.
• This is default.
Borders are collapsed into a single
collapse border when possible (border-spacing
and empty-cells properties have no
effect)
Page 158 of 372
www.teknowize.com CSS

For example
Page 159 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h2>border-spacing: 15px:</h2>
<p>When using "border-collapse: separate", the border-spacing property can be
used to set the space between the cells:</p>
<table id="table1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<h2>border-collapse: collapse:</h2>
<table id="table2">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
Page 160 of 372
www.teknowize.com CSS

CSS code
table, td, th {
border: 1px solid black;
}
#table1 {
border-collapse: separate;
border-spacing: 15px;
}
#table2 {
border-collapse:collapse;
border-spacing: 15px 50px;
}

Output
Page 161 of 372
www.teknowize.com CSS

Border image border-image:border-image-sourceborder-image-

slice..border-image-widthborder-image-outset.border-image-repeat ;

It is use to set border with a image and also set the border image slice,
width,outset,repeat property.

Note:-We can use all these property separately.

The border-image property contain all these property
• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

values
border-image-source It is use to add image source.
border-image-slice How to slice the border image(in
number and % only )
border-image-width The width of the border image(in px
only)
border-image-outset It is use to set border image to
outside the border box ( in px only).
border-image-repeat Whether the border image should be
repeated, rounded or stretched

For example
Page 162 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
<link
href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap"
rel="stylesheet">
</head>
<body>
<div><h1> welcome to teknow sumit channel</h1></div>
</body>
</html>

CSS code
h1
{
border: 10px solid transparent;
border-image: url(E:/border.png) 30 10 20 stretch ;
}

Output

Border image source border-image-source:url () ;

The border-image-source property specifies the path to the image to be used as

a border .

values
It is use to set path of the image file in
url ( ) which need to use as a border
image.
Page 163 of 372
www.teknowize.com CSS

For example

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
<link
href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap"
rel="stylesheet">
</head>
<body>
<p id="borderimg">border-image-slice: 10%;</p>
</body>
</html>

CSS code
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image-source: url(border.png);
border-image-slice: 30%;
}
Page 164 of 372
www.teknowize.com CSS

Output

Border image slice border-image-slice: value ;

It is specifies how to slice the image specified by border-image source. The

image is always sliced into nine sections: four corners, four edges and the
middle.

Note :-The "middle" part is treated as fully transparent, unless the fill
keyword is set.
Values
The number(s) represent pixels for
number raster images or coordinates for
vector images.
% Percentages are relative to the height
or width of the image.
...% fill Causes the middle part of the image
to be displayed.

For example
Page 165 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
<link
href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap"
rel="stylesheet">
</head>
<body>
<p id="borderimg1">border-image-slice: 10%;</p>
<p id="borderimg2">border-image-slice: 20%;</p>
<p id="borderimg3">border-image-slice: 10% fill;</p>
Page 166 of 372
www.teknowize.com CSS

<p>Here is the image used:</p>

CSS code
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) round;
border-image-slice: 10%;
box-sizing: border-box;
width:50%;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) stretch;
border-image-slice: 20%;
box-sizing: border-box;
width:50%;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) round;
border-image-slice: 10% fill;
box-sizing: border-box;
width:50%;
}
Output
Page 167 of 372
www.teknowize.com CSS

Border image width border-image-width: value ;

It is use to increase or decrease width of the border.

Values
length A length unit (px) specifying the size of
the border width.
number Default value 1. Represents multiples of
the corresponding border-width.

% It is use to set width of the border in %.

auto If we using auto then the width is

automatically set according to border
image slice.

For example
Page 168 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
<link
href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap"
rel="stylesheet">
</head>
<body>
<p id="borderimg1">border-image-width: 10px;</p>
<p id="borderimg2">border-image-width: 20px;</p>
Page 169 of 372
www.teknowize.com CSS

<p id="borderimg3">border-image-width: 30px;</p>

</body>
</html>

CSS code
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(border.png);
border-image-repeat: round;
border-image-slice: 30 30;
border-image-width: 10px;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 20% 10px 14px ;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(border.png);
border-image-repeat: round;
border-image-slice: 30 10;
border-image-width: 30px 10% 10% 25px;
}

Output
Page 170 of 372
www.teknowize.com CSS

Border image outset border-image-outset: value ;

It is use to specifies the amount by which the border image area extends beyond
the border box.

Values
length A length unit (px) specifying the size of
the border outset.
Default value is 0.
number Represent multiples of the
corresponding border-width.
% It is use to set width of the border in %.

For example
Page 171 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
<link
href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap"
rel="stylesheet">
</head>
<body>
<p id="borderimg1">border-image-outse: </p>
<p id="borderimg2">border-image-outset</p>
Page 172 of 372
www.teknowize.com CSS

<p id="borderimg3">border-image-outset</p>
</body>
</html>

CSS code
#borderimg1 {
border: 15px solid transparent;
padding: 15px;
border-image: url(border.png);
border-image-slice: 30;
border-image-repeat: round;
border-image-outset: 1 0 1 0;
}
#borderimg2 {
border: 15px solid transparent;
padding: 15px;
border-image: url(border.png);
border-image-slice: 30;
border-image-repeat: round;
border-image-outset: 2px;
}
#borderimg3 {
border: 15px solid transparent;
padding: 15px;
border-image: url(border.png);
border-image-slice: 30;
border-image-repeat: round;
border-image-outset: 2px 1px 2 4px;
}

Output
Page 173 of 372
www.teknowize.com CSS

Border image repeat border-image-repeat: value ;

It is use to specifies whether the border image should be repeated, rounded or

stretched.

Values
stretch The image is stretched to fill the area.
It is by default.
round The image is repeated to fill the area.
repeat The image is repeated to fill the area

For example
Page 174 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
<link
href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap"
rel="stylesheet">
</head>
<body>
<p id="borderimg1">border-image-repeat: </p>
<p id="borderimg2">border-image-round</p>
<p id="borderimg3">border-image-stretch</p>
</body>
</html>
Page 175 of 372
www.teknowize.com CSS

CSS code
#borderimg1 {
border: 15px solid transparent;
padding: 15px;
border-image-source: url(border.png);
border-image-repeat: repeat;
border-image-slice: 30;
}
#borderimg2 {
border: 15px solid transparent;
padding: 15px;
border-image-source: url(border.png);
border-image-repeat: round;
border-image-slice: 30;
}
#borderimg3 {
border: 15px solid transparent;
padding: 15px;
border-image-source: url(border.png);
border-image-repeat: stretch;
border-image-slice: 30;
}

Output

CSS list
List style list-style: list-style-type list-style-position list-style-image;

It is use to styling the list using css.

• If one of the values are missing, the default value for that property will be
used.
• If list style image is used then list style type is not work.
Page 176 of 372
www.teknowize.com CSS

The list-style property is using with following properties

• list-style-type
• list-style-position
• list-style-image

Values
list-style-type • Specifies the type of list-item
marker. (disc,circle,square,decimal
etc)
• Default value is "disc"
list-style-position • Specifies where to place the list-
item marker.(inside or outside)
• Default value is "outside"
list-style-image Specifies the type of list-item marker.
Default value is "none"

For example
Page 177 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
<link
href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap"
rel="stylesheet">
</head>
<body>
<ul>
<li>sumit </li>
<li>saurav</li>
<li>hariom</li>
</ul>
</body>
</html>

CSS code
ul
{
list-style: circle inside url("d:/new.gif");
}

Output

List style type list-style-type:value;

It is use to styling the list type.

Page 178 of 372
www.teknowize.com CSS

Values
disc Default value. The marker is a filled
circle
circle The marker is a circle
decimal The marker is a number
decimal-leading-zero The marker is a numberwith leading
zeros (01, 02, 03, etc.)
lower-alpha The marker is lower-alpha (a, b, c, d,
e, etc.)
lower-greek The marker is lower-greek
lower-latin The marker is lower-latin (a, b, c, d,
e, etc.)
lower-roman The marker is lower-roman (i, ii, iii,
iv, v, etc.)
square The marker is a square
upper-alpha The marker is upper-alpha (A, B, C,
D, E, etc.)
upper-greek The marker is upper-greek
upper-latin The marker is upper-latin (A, B, C, D,
E, etc.)
upper-roman The marker is upper-roman (I, II, III,
IV, V, etc.)

For example
Page 179 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
<link
href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap"
rel="stylesheet">
</head>
<body>
<ul class="example1">
<li>sumit </li>
<li>saurav</li>
<li>hariom</li>
</ul>
<ul class="example2">
<li>sumit </li>
<li>saurav</li>
<li>hariom</li>
</ul>
</body>
</html>

CSS code
.example1
{
list-style: circle ;
}
.example2
{
list-style: upper-roman;
}
Page 180 of 372
www.teknowize.com CSS

Output

List style position list-style-position:value;

It is use to set the position of marker of the list.

Values
Inside It is use to set marker inside the list .
outside It is use to set marker outside the list.

For example
Page 181 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The list-style-position Property</h1>

<h2>list-style-position: outside (default):</h2>

<ul class="a">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the
seeds of berries from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling
water over cured leaves of the Camellia sinensis, an evergreen shrub (bush)
native to Asia</li>
</ul>

<h2>list-style-position: inside:</h2>
<ul class="b">
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling
water over cured leaves of the Camellia sinensis, an evergreen shrub (bush)
native to Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company.
The drink's name refers to two of its original ingredients, which were kola nuts
(a source of caffeine) and coca leaves</li>
</ul>
</body>
</html>

CSS code
ul.a {
list-style-position: outside;
}

ul.b {
list-style-position: inside;
}
Page 182 of 372
www.teknowize.com CSS

Output

List style image list-style-image:url(image link);

It is use to set image as marker and if we use list style image then list type will
not in use.
Values
url( ) It is use to insert image link

For example
Page 183 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<ul>
<li>sumit </li>
<li>saurav</li>
<li>hariom</li>
</ul>
</body>
</html>

CSS code
ul
{
list-style: circle inside url("D:/new.gif");
}

Output

CSS BOX
It is use to set box size and shadow of the box.

CSS box property always use with border property because border property
create a border and then by using box property we can set size and shadow of
the border.
Page 184 of 372
www.teknowize.com CSS

Box sizing box-sizing:value;

It is use to set box sizing.

Values
Content-box • Width and height only apply to the
content of the element
• It is default
Border-box Width and height apply to all parts of
the element: content, padding and
borders

For example
Page 185 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h2>box-sizing: content-box (default):</h2>
<p>Width and height only apply to the content of the element:</p>
<div id="example1">This div has a width of 300px. But the full width is 300px
+ 20px (left and right border) + 60px (left and right padding) = 380px!</div>

<h2>box-sizing: border-box:</h2>
<p>Width and height apply to all parts of the element: content, padding and
borders:</p>
<div id="example2">Here, the full width is 300px, no matter what!</div>
</body>
</html>

CSS code
#example1 {
box-sizing: content-box;
width: 300px;
height: 100px;
padding: 30px;
border: 10px solid blue;
}
#example2 {
box-sizing: border-box;
width: 300px;
height: 100px;
padding: 30px;
border: 10px solid blue;
}
Page 186 of 372
www.teknowize.com CSS

Output

Box shadow box-shadow:value;

It is use to set box shadow.

Values
h-offset • The horizontal offset of the
shadow.
• A positive value puts the shadow
on the right side of the box, a
negative value puts the shadow on
the left side of the box.
• It is always required.
Page 187 of 372
www.teknowize.com CSS

h-offset • The vertical offset of the shadow.

• A positive value puts the shadow
below the box, a negative value
puts the shadow above the box.
• This value always required.
blur • The blur radius. The higher the
number, the more blurred the
shadow will be
• It is Optional.
spread • A positive value increases the size
of the shadow, a negative value
decreases the size of the shadow
• It is Optional.
color • The color of the shadow. The
default value is the text color.
• It is Optional.

For example
Page 188 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<div></div>
</body>
</html>

CSS code
div
{
border:solid;
height:5rem;
width:5rem;
box-shadow: 5px -10px #888888;
}

Output

Box decoration break box-decoration-break:value;

It is specify that how thebackground, padding, border, border-image, box-

shadow, margin, and clip-path etc of an element is appliedwhen a line is break
into many part using <br>tag.
Values
• It isdefault
Slice • It is use to set only one border,
background margin, padding etc to
all breakable element.
clone • It is use to set border, background
margin, padding etc to each
breakable element separately.
Page 189 of 372
www.teknowize.com CSS

For example
Page 190 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h2>box-decoration-break: clone:</h2>
<span class="ex1">CSS<br>is<br>easy<br>to learn</span>

<h2>box-decoration-break: slice (default):</h2>

<span class="ex2">CSS<br>is<br>easy<br>to learn</span>

<p><strong>Note:</strong> IE/Edge do not support the box-decoration-break

property.</p>
</body>
</html>

CSS code
span
{
border: 5px solid red;
padding: 0em 1em;
border-radius: 16px;
font-size: 24px;
line-height: 2;
}

span.ex1
{
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
}

span.ex2
{
-webkit-box-decoration-break: slice;
-o-box-decoration-break: slice;
box-decoration-break: slice;
}
Page 191 of 372
www.teknowize.com CSS

Output

CSS scroll
scroll-behavior scroll-behavior:value;

it is specifies whether to smoothly animate the scroll position, instead of a

straight jump, when the user clicks on a link within a scrollable box.

Values
• Allows a straight jump "scroll
Auto effect" between elements within
the scrolling box.
• This is default
Allows a smooth animated "scroll
smooth effect" between elements within the
scrolling box.
Page 192 of 372
www.teknowize.com CSS

For example

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>Smooth Scroll</h1>
<div class="main" id="section1">
Page 193 of 372
www.teknowize.com CSS

<h2>Section 1</h2>
<p>Click on the link to see the "smooth" scrolling effect.</p>
<a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
<p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>
<div class="main" id="section2">
<h2>Section 2</h2>
<a href="#section1">Click Me to Smooth Scroll to Section 1 Above</a>
</div>
</body>
</html>

CSS code
html {
scroll-behavior: smooth;
}
#section1 {
height: 600px;
background-color: pink;
}
#section2 {
height: 600px;
background-color: yellow;
}

Output
Page 194 of 372
www.teknowize.com CSS

Custom Scrollbar

It is use to deign scrollbar according to us.

We need to use all the tag with related prefix to support browsers .

Hide Scrollbars But Keep Functionality

It is use to hide the scrollbars, but still be able to keep scrolling.

Never use overflow hidden because if we use over flow hidden then the
scrolling features not work.

• Hide scrollbar for Chrome, Safari and Opera :-

Tag /class/id::-webkit-scrollbar

display: none;

• Hide scrollbar for IE, Edge and Firefox :-

Tag /class/id
{

-ms-overflow-style: none; /* IE and Edge */

scrollbar-width: none; /* Firefox */

Note:-Webkit browsers, such as Chrome, Safari and Opera, supports the

non-standard ::-webkit-scrollbar pseudo element, which allows us to
modify the look of the browser's scrollbar. IE and Edge supports the -ms-
overflow-style: property, and Firefox supports the scrollbar-
width property, which allows us to hide the scrollbar, but keep
functionality.
Page 195 of 372
www.teknowize.com CSS

For example

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<body>
<h2>Hide scrollbar but keep functionality</h2>
<div class="example">Some text to enable scrolling.. Some text to enable
scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some
Page 196 of 372
www.teknowize.com CSS

text to enable scrolling.. Some text to enable scrolling.. Some text to enable
scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some
text to enable scrolling.. Some text to enable scrolling.. Some text to enable
scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some
text to enable scrolling.. Some text to enable scrolling.. Some text to enable
scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some
text to enable scrolling.. Some text to enable scrolling.. Some text to enable
scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some
text to enable scrolling.. Some text to enable scrolling.. Some text to enable
scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some
text to enable scrolling.. Some text to enable scrolling.. </div>
</body>
</html>

CSS code
.example {
background-color: #eee;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow-y: scroll; /* Add the ability to scroll */
}

/* Hide scrollbar for Chrome, Safari and Opera */

.example::-webkit-scrollbar {
display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */

.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}

Output
Page 197 of 372
www.teknowize.com CSS

Custom design Scrollbar

It is use to design scrollbar thumb , scrollbar track ,scrollbar width etc
manually.
Note :-Custom scrollbars are not supported in Firefox or IE/Edge.
(a) ::-webkit-scrollbar {tag with value which ned to change }
(b) ::-webkit-scrollbar-button{tag with value which ned to change }

(c) ::-webkit-scrollbar-thumb {tag with value which ned to change }

(d) ::-webkit-scrollbar-track {tag with value which ned to change }

(e) ::-webkit-scrollbar-track-piece {tag with value which ned to change }

(f) ::-webkit-scrollbar-corner . {tag with value which ned to change }

(g) ::-webkit-resizer {tag with value which ned to change }

::-webkit-scrollbar To modify scrollbar .

::-webkit-scrollbar-button the buttons on the scrollbar (arrows
pointing upwards and downwards).
::-webkit-scrollbar-thumb To modify the draggable scrolling
handle.
::-webkit-scrollbar-track To modify the track (progress bar) of
the scrollbar.
::-webkit-scrollbar-track-piece To modify the track (progress bar)
NOT covered by the handle.
::-webkit-scrollbar-corner To modify the bottom corner of the
scrollbar, where both horizontal and
vertical scrollbars meet.
::-webkit-resizer To modify the draggable resizing
handle that appears at the bottom
corner of some elements.
For example
Page 198 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title>technical sumit</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<body>
<h2>Custom Scrollbar Example</h2>

<p><strong>Note:</strong> The -webkit-scrollbar is not supported by Firefox

or IE and Edge.</p>

<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
</body>
</html>

CSS code
/* width */
::-webkit-scrollbar {
width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;

/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
Page 200 of 372
www.teknowize.com CSS

Output

CSS all type position setting

It is use to set position of the element using different tag.

CSS Position position: values;

It is specifies the type of positioning method used for an element (static,

relative, absolute, fixed, or sticky).
Page 201 of 372
www.teknowize.com CSS

Position property use with helper property (top right left bottom) to change
position manually.
Values

• It is the default value.

Static • if we declare it or not, elements
are positioned in a normal order on
the webpage.
when we use relative then the element
Relative position start from top left corner of
the main web page (means it work as
a parent)
when we use absolute then the
Absolute element position start from top left
corner of the parent element (means
it work as a parent)
Fixed It is use to fix element at any position
which does not affect scrolling
It is mix of position relative and
position fix.
Sticky Its means if you use sticky at any
point then it fix the element but it fix
at top of the webpage

For example
Page 202 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The position Property</h1>
<h2>This is a heading with an absolute position</h2>
<p>With absolute positioning, an element can be placed anywhere on a page.
The heading below is placed 100px from the left of the page and 150px from
the top of the page.</p>
</body>
</html>

CSS code
h2
{
position: absolute;

left: 100px;

top: 150px;
}
</style>

Output
Page 203 of 372
www.teknowize.com CSS

Top bottom left right

It is use to repositioning element.

Negative value are allowed.

Note- it is always use with position property ,other wise it does not work

a) top:value; (The top property affects the vertical position of a positioned

element. This property has no effect on non-positioned elements.)

b) bottom: value; (The bottom property affects the vertical position of a

positioned element. This property has no effect on non-positioned elements.)

c) left: value;(value (The left property affects the vertical position of a

positioned element. This property has no effect on non-positioned elements.)

d) right:value; (The rightproperty affects the vertical position of a positioned

element. This property has no effect on non-positioned elements.)

Values
length It is use to set length in px,em, rem
etc
% It is use to set value in percent.

For example
Page 204 of 372
www.teknowize.com CSS

Html code

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h2>This is a heading with an absolute position</h2>
<p>With absolute positioning, an element can be placed anywhere on a page.
The heading below is placed 100px from the left of the page and 150px from
the top of the page.</p>
</body>
</html>

CSS code
h2
{
position: absolute;

left: 100px;

top: 150px;
}
</style>

Output

Float float:value;

It is specifies how an element should float.

Note:- Absolutely positioned elements ignore the float property!

Page 205 of 372
www.teknowize.com CSS

Note:- Elements after a floating element will flow around it. To avoid this,
use the clear property (clear:both) or the clearfix hack.

Values
left The element floats to the left
of its container.
right The element floats to the
right of its container.

For example

Html code
<!DOCTYPE html>
<html>
<head>
Page 206 of 372
www.teknowize.com CSS

<link rel="stylesheet" type="text/css" href="E:/style.css">

</head>

<body>
<img src="E:/border.png" width="100" height="132">
<p>This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text.</p>
<p class="clear">This is also some text. This is also some text. This is also
some text. This is also some text. This is also some text. This is also some
text.</p>
<p><strong>Remove the "clear" class to see the effect.</strong></p>

</body>
</html>

CSS code
img {
float: left;
}

p.clear {
clear: both;
}

Output

Display display: value;

The display property specifies the display behaviour of an element.

Note:- The values "flex" and "inline-flex" requires the -webkit- prefix to
work in Safari.

Note:-"display: contents" does not work in Edge/Internet Explorer.

Page 207 of 372
www.teknowize.com CSS

Values
block Displays an element as a block element
(like <p>). It starts on a new line, and
takes up the whole width.
contents Makes the container disappear, making
the child elements children of the
element the next level up in the DOM.
flex Displays an element as a block-level
flex container.(horizontally )
grid Displays an element as a block-level
grid container.(vertically)
inline-block Displays an element as an inline-level
block container, but you can apply
height and width values.
inline-flex Displays an element as an inline-level
flex container.
inline-grid Displays an element as an inline-level
grid container.
inline-table The element is displayed as an inline-
level table.
list-item Let the element behave like a <li>
element.
run-in Displays an element as either block or
inline, depending on context.
table Let the element behave like a
<table>element.
table-caption Let the element behave like a
<caption> element.
table-column-group Let the element behave like a
<colgroup> element.
table-header-group Let the element behave like a <thead>
element.
table-cell Let the element behave like a <td>
element.
table-column Let the element behave like a
<col>element.
table-row Let the element behave like a <tr>
element.
table-footer-group Let the element behave like a <tfoot>
element.
table-row-group Let the element behave like a <tbody>
element.
Page 208 of 372
www.teknowize.com CSS

inherit Inherits this property from its parent

element.
none The element is completely removed.

For example
Page 209 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>

<body>
<h1>The display Property</h1>
<h2>display: none:</h2>

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at
erat pulvinar, at pulvinar felis blandit. <p class="ex1">HELLO WORLD!</p>
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
<h2>display: inline:</h2>

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at
erat pulvinar, at pulvinar felis blandit. <p class="ex2">HELLO WORLD!</p>
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<h2>display: block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at
erat pulvinar, at pulvinar felis blandit. <p class="ex3">HELLO WORLD!</p>
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
<h2>display: inline-block:</h2>

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at
erat pulvinar, at pulvinar felis blandit. <p class="ex4">HELLO WORLD!</p>
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
</body>

CSS code
p
{
color: red;
Page 210 of 372
www.teknowize.com CSS

p.ex1
{
display: none;
}
p.ex2
{
display: inline;
}
p.ex3
{
display: block;
}
p.ex4
{
display: inline-block;
}

Output
Page 211 of 372
www.teknowize.com CSS

Justify content justify-content: value;

The justify-content aligns the flexible container’s items horizontally.

• It must be use with display property.

Note:-use ‘align-items’ for set position of single line element and ‘align-
content’ for set position of double line element vertically, which we read in
next topic.
Values
flex-start Default value. Items are positioned at the beginning of
the container
flex-end Items are positioned at the end of the container
center Items are positioned at the center of the container
space-between Items are positioned with space between the lines
space-around Items are positioned with space before, between, and
after the lines
initial Sets this property to its default value.

For example
Page 212 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The justify-content Property</h1>
<p>The "justify-content: flex-end;" aligns the flex items at the end of the
container:</p>
<div id="main">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:pink;">3</div>
</div>
<p>The "justify-content: space-around;" aligns the items with space,
before,between and after the line :</p>
Page 213 of 372
www.teknowize.com CSS

CSS code
#main {
width: 400px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
justify-content: flex-end;
}
#main2 {
width: 400px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
justify-content:space-around;
align-items: center;
}
div {
width: 70px;
height: 70px;
}

Output
Page 214 of 372
www.teknowize.com CSS

Align items align-items: value;

The align item aligns the flexible container’s items vertically if there is single
line.
• It must be use with display property.

Note:-use ‘align-content’ for more than one line elementset vertically,

which we read in next topic.

Note:-use ‘display:grid’ for set line vertically.

Values
stretch Default. Items are stretched to fit the container.

center Items are positioned at the center of the container.

flex-start Items are positioned at the beginning of the container.

flex-end Items are positioned at the end of the container.

baseline Items are positioned at the baseline of the container.

For example
Page 215 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<div id="main1">
<div style="background-color:coral;">RED</div>
<div style="background-color:lightblue;">BLUE</div>
<div style="background-color:lightgreen;">Green div with more content.</div>
</div>
<br>
<div id="main2">
<div style="background-color:hotpink;">pink</div>
<div style="background-color:lime;">lime</div>
<div style="background-color:yellow;">yellow div with more content.</div>
</div>
</body>
</html>
Page 216 of 372
www.teknowize.com CSS

CSS code
#main1 {
width: 220px;
height: 200px;
border: 1px solid black;
display: flex;
align-items: center;
}
#main2 {
width: 220px;
height: 200px;
border: 1px solid black;
display: flex;
align-items: center;
}
#main1 div , #main2 div{
flex:1;
}

Output
Page 217 of 372
www.teknowize.com CSS

Align content align-content: value;

The align content aligns the flexible container’s items vertically if there is more
than one lines.
• It must be use with display:grid property if the items in single line, so
grid help to rotate horizontal item vertically.

Note:-use ‘display:grid’ for set items vertically.

Values

stretch Default value. Lines stretch to take up the remaining space

center Lines are in the middle of the container .

flex-start Lines are in the top of the container.

flex-end Lines are in the bottom of the container.

space-between Lines are evenly distributed in the container,without half-size

spaces on top and bottom.
space-around Lines are evenly distributed in the flex container, with half-size
spaces on top and bottom.

For example
Page 218 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The align-content Property</h1>
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:pink;"></div>
</div>
<br>
<div id="main1">
<div style="background-color:hotpink;"></div>
<div style="background-color:green;"></div>
<div style="background-color:aqua;"></div>
</div>
</body>
</html>
Page 219 of 372
www.teknowize.com CSS

CSS code
#main {
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
#main1 {
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
#main div {
width: 70px;
height: 70px;
}
#main1 div {
width: 70px;
height: 70px;
}

Output
Page 220 of 372
www.teknowize.com CSS

Align self align-self: value;

The align self , aligns the flexible container’s items vertically but using this we
can change position(align) of one element which inside the container.
• It must be use with display property .
• The align self is same as align items property but in align self we can
change position of selected element of a line which inside the container
and in align items we can change position of whole lines.

Note:-use ‘display:grid’ for set items vertically.

Values
auto Default. The element inherits its parent container's align-
items property, or "stretch" if it has no parent container.
stretch The element is positioned to fit the container.
center The element is positioned at the center of the container.
flex-start The element is positioned at the beginning of the container.
flex-end The element is positioned at the end of the container.
baseline The element is positioned at the baseline of the container.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

For example
Page 221 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<div id="main">
<div style="background-color:coral;">RED</div>
<div style="background-color:lightblue;" id="myBlueDiv">BLUE</div>
<div style="background-color:lightgreen;">Green div with more content.</div>
</div>
<p><b>Note:</b> The align-self property overrides the container's align-items
property.</p>
</body>
</html>

CSS code
#main {
width: 220px;
height: 300px;
border: 1px solid black;
display: flex;
align-items: flex-start;
}
Page 222 of 372
www.teknowize.com CSS

#main div {
flex: 1;
}

#myBlueDiv {
align-self: center;
}

Output

Place item place-item: yvalue xvalue;

The place-items property is a combination of align-items and justify-
items properties , The property accepts dual values, the first for align-items and
the second for justify-items. align-items aligns content along the vertical
(column) axis whereas justify-items aligns along the horizontal (row) axis.

Note:-it must use with display property.

Note:-These properties have gained use with the introduction of Flexbox

and Grid layouts, but are also applied to:

• Block-level boxes
• Absolutely-positioned boxes
• Static-position of absolutely positioned boxes
• Table cells
Page 223 of 372
www.teknowize.com CSS

• Values
auto The value adjusts accordingly based on the context of the
element. It uses the justify-items value of the element’s parent
element. If not parent exists or it is applied to an element that is
positioned with absolute, then the value becomes normal.
normal Takes the default behavior of the layout context where it is
applied.
• Block-level layouts: start

• Absolute-positioning: start for replaced absolute elements

and stretch for all others
• Table layouts: Value is ignored

• Flexbox layouts: Value is ignored

• Grid layouts: stretch, unless an aspect ratio or intrinsic

sizing is used where it behaves like start
stretch Expands the element to both edges of the container vertically
for align-items and horizontally for justify-items.
start All elements are aligned against each other on the starting (left)
edge of the container
end All elements are aligned against each other on the ending
(right) edge of the container
center Items are aligned next to each other toward the center of the
container
left Items are aligned next to each other toward the left side of the
container. If the property is not parallel to a standard top, right,
bottom, left axis, then it behaves like end.
right Items are aligned next to each other toward the right side of the
container. If the property is not parallel to a standard top, right,
bottom, left axis, then it behaves like start.
flex-start A flexbox-only value (that falls back to start) where items are
packed toward the starting edge of the container.
flex-end A flexbox-only value (that falls back to end) where items are
packed toward the ending edge of the container.
self-start Allows an item in a layout to align itself on the container edge
based on its own starting side. Basically overrides what the set
value is on the parent.
self-end Allows an item in a layout to align itself on the container edge
based on its own ending side instead of inheriting the the
container’s positional value.
Page 224 of 372
www.teknowize.com CSS

For example

.item{
display: grid;
place-items: start center;
}

This is the same as writing:

.item{
display: grid;
align-items: start;
justify-items: center;
}

If only one value is provided, then it sets both properties. For example, this:

.item{
display: grid;
place-items: start;
}

…is the same as writing this:

.item{
display: grid;
align-items: start;
justify-items: start;
}

Object fit object-fit: values;

The object-fit property is used to specify how an <img> or <video> should be

resized to fit its container.

Note:-This property tells the content to fill the container in a variety of

ways; such as "preserve that aspect ratio" or "stretch up and take up as
much space as possible".
Page 225 of 372
www.teknowize.com CSS

Values

fill This is default. The replaced content is sized to fill the

element's content box. If necessary, the object will be
stretched or squished to fit
contain The replaced content is scaled to maintain its aspect ratio
while fitting within the element's content box
cover The replaced content is sized to maintain its aspect ratio
while filling the element's entire content box. The object will
be clipped to fit
none The replaced content is not resized
scale- The content is sized as if none or contain were specified
down (would result in a smaller concrete object size)
initial Sets this property to its default value.
For example
Page 226 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h2>The object-fit Property</h2>
<h2>object-fit: cover:</h2>
<p>Cut off the sides of an image, preserving the aspect ratio, and also filling in
the space:</p>
<img class="a" src="D:/paris.jpg" alt="Paris" width="400" height="300">
<h2>Original image:</h2>
<img src="D:/paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>

CSS code
img.a
{
width: 200px;
height: 400px;
object-fit: cover;
}

Output
Page 227 of 372
www.teknowize.com CSS

Object position object-position: values;

The object-position property is used together with object-fit to specify how an

<img> or <video> should be positioned with x/y coordinates inside its "own
content box".

Values
Specifies the position of the image or
video inside its content box.
First value controls the x-axis and the
position second value controls the y-axis.
Can be a string (left, center or right),
or a number (in px or %).
Negative values are allowed

For example
Page 228 of 372
www.teknowize.com CSS

CSS code
img.a {
width: 200px;
height: 400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}

Output
Page 229 of 372
www.teknowize.com CSS

Clear clear:value;

It is use to float element when element are not allow to float.

Note:- it is use together with ‘float’.

Values
none Default. Allows floating elements on both sides
left No floating elements allowed on the left side
right No floating elements allowed on the right side
both No floating elements allowed on either the left or the right side
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

For example
Page 230 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The clear Property</h1>
<img src="D:/paris.jpg" width="100" height="132">
<p>This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text.</p>
<p class="clear">This is also some text. This is also some text. This is also
some text. This is also some text. This is also some text. This is also some
text.</p>
<p><strong>Remove the "clear" class to see the effect.</strong></p>
</body>
</html>

CSS code
img {
float: left;
}
p.clear {
clear: both;
}

Output
Page 231 of 372
www.teknowize.com CSS

CSS elements size

It is use to set size of the element.

Width and Height width:value; and height:value;

It is use to sets width and height of the element.

Value for both tag

auto Default value. The browser calculates the width and height.
length Defines the width and height in px, cm,rem,em etc.
% Defines the width and height in percent of the containing block.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

For example
Page 232 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The width and height Property</h1>
<img class="normal" src="D:/paris.jpg" width="95" height="84"><br><br>
<img class="big" src="D:/paris.jpg" width="95" height="84"><br><br>
<img class="small" src="D:/paris.jpg" width="95" height="84">
</body>
</html>

CSS code
img.normal {
width: auto;
height:auto;
}
img.big {
width: 30%;
height: 20rem;
}
img.small {
width: 100px;
height:20%;
}

Output
Page 233 of 372
www.teknowize.com CSS

Min width ,max width , min height, and max height

The min width , max width, min height and max height use to set minimum and
maximum width and height of the element.

• If the content is larger than the minimum width or minimum height then
the min-width and min-height property has no effect.

• If the content is smaller than the maximum width or maximum height then
the max-width and max-height property has no effect.

Note:- If the content is larger than the maximum height, it will overflow.
How the container will handle the overflowing content is defined by
the overflow property.

Value for all tag

none No maximum height. This is default
length Definesthe width (min and max ) and height (min and max) in
px,rem,cm, etc.
% Defines the width (min and max ) and height (min and max) in
percent of the containing block.
initial Sets property to its default value.
inherit Inherits this property from its parent element.

For example
Page 234 of 372
www.teknowize.com CSS

Output

CSS cursor
It is use to specifies the mouse cursor to be displayed when pointing over an
element.
Values
alias The cursor indicates an alias of something is to be created.
all-scroll The cursor indicates that something can be scrolled in any
direction.
auto Default. The browser sets a cursor.
cell The cursor indicates that a cell (or set of cells) may be
selected.
context-menu The cursor indicates that a context-menu is available.
col-resize The cursor indicates that the column can be resized
horizontally.
Page 235 of 372
www.teknowize.com CSS

copy The cursor indicates something is to be copied.

crosshair The cursor render as a crosshair.
default The default cursor.
e-resize The cursor indicates that an edge of a box is to be moved
right (east).
ew-resize Indicates a bidirectional resize cursor.
grab The cursor indicates that something can be grabbed.
grabbing The cursor indicates that something can be grabbed.
help The cursor indicates that help is available.
move The cursor indicates something is to be moved.
n-resize The cursor indicates that an edge of a box is to be moved
up (north).
ne-resize The cursor indicates that an edge of a box is to be moved
up and right (north/east).
nesw-resize Indicates a bidirectional resize cursor.
ns-resize Indicates a bidirectional resize cursor.
nw-resize The cursor indicates that an edge of a box is to be moved
up and left (north/west).
nwse-resize Indicates a bidirectional resize cursor.
no-drop The cursor indicates that the dragged item cannot be
dropped here.
none No cursor is rendered for the element.
not-allowed The cursor indicates that the requested action will not be
executed.
pointer The cursor is a pointer and indicates a link.
progress The cursor indicates that the program is busy (in progress).
row-resize The cursor indicates that the row can be resized vertically.
s-resize The cursor indicates that an edge of a box is to be moved
down (south).
se-resize The cursor indicates that an edge of a box is to be moved
down and right (south/east).
sw-resize The cursor indicates that an edge of a box is to be moved
down and left (south/west).
text The cursor indicates text that may be selected.
URL A comma separated list of URLs to custom
cursors. Note: Always specify a generic cursor at the end of
the list, in case none of the URL-defined cursors can be
used.
vertical-text The cursor indicates vertical-text that may be selected.
w-resize The cursor indicates that an edge of a box is to be moved
left (west).
wait The cursor indicates that the program is busy.
Page 236 of 372
www.teknowize.com CSS

zoom-in The cursor indicates that something can be zoomed in.

zoom-out The cursor indicates that something can be zoomed out.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

For example
Page 237 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The cursor Property</h1>
<p>Mouse over the words to change the mouse cursor.</p>
<p class="alias">alias</p><p class="all-scroll">all-scroll</p>
<p class="auto">auto</p><p class="cell">cell</p>
<p class="context-menu">context-menu</p><p class="col-resize">col-
resize</p>
<p class="copy">copy</p>
<p class="crosshair">crosshair</p><p class="default">default</p>
<p class="e-resize">e-resize</p><p class="ew-resize">ew-resize</p>
<p class="grab">grab</p><p class="grabbing">grabbing</p>
<p class="help">help</p><p class="move">move</p>
<p class="n-resize">n-resize</p><p class="ne-resize">ne-resize</p>
<p class="nesw-resize">nesw-resize</p><p class="ns-resize">ns-resize</p>
<p class="nw-resize">nw-resize</p><p class="nwse-resize">nwse-resize</p>
<p class="no-drop">no-drop</p><p class="none">none</p>
<p class="not-allowed">not-allowed</p><p class="pointer">pointer</p>
<p class="progress">progress</p><p class="row-resize">row-resize</p>
<p class="s-resize">s-resize</p><p class="se-resize">se-resize</p>
<p class="sw-resize">sw-resize</p><p class="text">text</p>
<p class="url">url</p><p class="w-resize">w-resize</p>
<p class="wait">wait</p><p class="zoom-in">zoom-in</p>
<p class="zoom-out">zoom-out</p>
</body>
</html>

CSS code
.alias {cursor: alias;}.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}.cell {cursor: cell;}
.context-menu {cursor: context-menu;}.col-resize {cursor: col-resize;}
.copy {cursor: copy;}.crosshair {cursor: crosshair;}
.default {cursor: default;}.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}.grab {cursor: -webkit-grab; cursor: grab;}
.grabbing {cursor: -webkit-grabbing; cursor: grabbing;}.help {cursor: help;}
.move {cursor: move;}.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}.no-drop {cursor: no-drop;}
Page 238 of 372
www.teknowize.com CSS

.none {cursor: none;}.not-allowed {cursor: not-allowed;}

.pointer {cursor: pointer;}.progress {cursor: progress;}
.row-resize {cursor: row-resize;}.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}.sw-resize {cursor: sw-resize;}
.text {cursor: text;}.url {cursor: url(myBall.cur),auto;}
.w-resize {cursor: w-resize;}.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}.zoom-out {cursor: zoom-out;}

Output
We can not see any operation in this output because cursor property is visible
when cursor move over it.
Page 239 of 372
www.teknowize.com CSS

Some CSS tags

Here we know some css tags which use when create a webpage.

User select user-select:value;

It is specifies that the text of an element can be selected or not.

Note:-
• In web browsers, if you double-click on some text it will be
selected/highlighted. This property can be used to prevent this.
• We need to use prefix because these property not supported in all
browser.

Values
auto Default. Text can be selected if the browser allows it
none Prevent text selection
text The text can be selected by the user
all Text selection is made with one click instead of a double-click

For example
Page 240 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The user-select Property</h1>
<div>The text of this div element cannot be selected. If you double-click me,
my text will not be highlighted.</div>
</body>
</html>

CSS code
div {
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10+ and Edge */
user-select: none; /* Standard syntax */
}

Output
We can not see any operation in this output because user select property is
visible when cursor move over it.

Table layout table-layout:value;

It is defines what algorithm the browser should use to lay out table rows, cells,
and columns.

Note:- The main benefit of ‘table-layout: fixed;’ is that the table renders
much faster. On large tables, users will not see any part of the table until
the browser has rendered the whole table. So, if you use table-layout: fixed,
users will see the top of the table while the browser loads and renders rest
of the table. This gives the impression that the page loads a lot quicker.
Page 241 of 372
www.teknowize.com CSS

Values

auto Browsers use an automatic table layout algorithm. The column width
is set by the widest unbreakable content in the cells. The content will
dictate the layout

fixed Sets a fixed table layout algorithm. The table and column widths are
set by the widths of table and col or by the width of the first row of
cells. Cells in other rows do not affect column widths. If no widths
are present on the first row, the column widths are divided equally
across the table, regardless of content inside the cells

initial Sets this property to its default value.

inherit Inherits this property from its parent element.

For example
Page 242 of 372
www.teknowize.com CSS
Page 243 of 372
www.teknowize.com CSS
Page 244 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The table-layout Property</h1>
<table class="a">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
Page 245 of 372
www.teknowize.com CSS

<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
<h2>table-layout: fixed; width: 180px:</h2>
<table class="b">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
<h2>table-layout: auto; width: 100%:</h2>
<table class="c">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
Page 246 of 372
www.teknowize.com CSS

<td>Germany</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
<h2>table-layout: fixed; width: 100%:</h2>
<table class="d">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>

Css code
table {
border-collapse: collapse;
border: 1px solid black;
Page 247 of 372
www.teknowize.com CSS

}
th,td {
border: 1px solid black;
}
table.a {
table-layout: auto;
width: 180px;
}
table.b {
table-layout: fixed;
width: 180px;
}
table.c {
table-layout: auto;
width: 100%;
}
table.d {
table-layout: fixed;
width: 100%;
}

Output
Page 248 of 372
www.teknowize.com CSS

Writing mode writing-mode:value;

It is use to specifies whether lines of text are shown horizontally or vertically.

Values
horizontal-tb Let the content flow horizontally from left to right, vertically
from top to bottom
vertical-rl Let the content flow vertically from top to bottom,
horizontally from right to left
vertical-lr Let the content flow vertically from top to bottom,
horizontally from left to right
Page 249 of 372
www.teknowize.com CSS

For example

Html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The writing-mode Property</h1>

<p class="test1">Some text with default writing-mode.</p>

<p>Some text with a span element with a <span class="test2">vertical-

rl</span> writing-mode.</p>
Page 250 of 372
www.teknowize.com CSS

<p class="test2">Some text with writing-mode: vertical-rl.</p>

</body>
</html>

CSS file
p.test1 {
writing-mode: horizontal-tb;
}

p.test2 {
writing-mode: vertical-rl;
}

span.test2 {
writing-mode: vertical-rl;
}

Output
Page 251 of 372
www.teknowize.com CSS

Word break word-break:value;

It is specifies how words should break when reaching the end of a line.
Values
normal Default value. Uses default line break rules.
break-all To prevent overflow, word may be broken at any character.
Word breaks should not be used for
keep-all Chinese/Japanese/Korean (CJK) text. Non-CJK text
behavior is the same as value "normal".
break- To prevent overflow, word may be broken at arbitrary
word (where any word be end) points.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

For example
Page 252 of 372
www.teknowize.com CSS

Html file
<<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>

<body>
<h1>The word-break Property</h1>
<h2>word-break: normal (default):</h2>
<p class="a">Thisissomeveryveryverylong word. Words will break according
to usual rules.</p>
<h2>word-break: keep-all:</h2>
<p class="b">Thisissomeveryveryverylong word. This text will-break-at-
hyphens.</p>
<h2>word-break: break-all:</h2>
<p class="c">Thisissomeveryveryverylong word. This text will break at any
character.</p>
<h2>word-break: break-word:</h2>
<p class="d">Thisissomeveryveryverylong word. This text will break at any
character.</p>
</body>

</html>

CSS file
p{
width: 140px;
border: 1px solid #000000;
}
p.a {
word-break: normal;
}
p.b {
word-break: keep-all;
}
p.c {
word-break: break-all;
}
p.d {
word-break: break-word;
}
Page 253 of 372
www.teknowize.com CSS

Output

Word wrap word-wrap:value;

The word-wrap property allows long words to be able to be broken and wrap
onto the next line.
Page 254 of 372
www.teknowize.com CSS

Values
normal Break words only at allowed break points.
break-word Allows unbreakable words to be broken.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

For example

Html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The word-wrap Property</h1>
Page 255 of 372
www.teknowize.com CSS

<h2>word-wrap: normal (default):</h2>

<div class="a"> This div contains a very long word:
thisisaveryveryveryveryveryverylongword. The long word will break and wrap
to the next line.</div>
<h2>word-wrap: break-word:</h2>
<div class="b"> This div contains a very long word:
thisisaveryveryveryveryveryverylongword. The long word will break and wrap
to the next line.</div>
</body>
</html>
CSS file
div {
width: 150px;
border: 1px solid #000000;
}
div.a {
word-wrap: normal;
}
div.b {
word-wrap: break-word;
}

Output
Page 256 of 372
www.teknowize.com CSS

Empty cells empty-cells:value;

It is use to show or hide the border of empty cells in the table .

Values
show Display borders on empty cells. This is default
hide Hide borders on empty cells
initial Sets this property to its default value.

For example
Page 257 of 372
www.teknowize.com CSS

Html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The empty-cells Property</h1>
<h2>empty-cells: hide:</h2>
<table class="ex1" border="1">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
<h2>empty-cells: show (default):</h2>
<table class="ex2" border="1">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
</body>
</html></html>
Page 258 of 372
www.teknowize.com CSS

CSS file
table.ex1 {
empty-cells: hide;
}

table.ex2 {
empty-cells: show;
}

Output

Visibility visibility:value;

It is use to specifies whether or not an element is visible.

Note:-Hidden elements take up space on the page. Use the display property
to both hide and remove an element from the document layout!
Page 259 of 372
www.teknowize.com CSS

Values
visible Default value. The element is visible
hidden The element is hidden (but still takes up space)
Only for table rows (<tr>), row groups (<tbody>), columns (<col>),
column groups (<colgroup>). This value removes a row or column,
collapse but it does not affect the table layout. The space taken up by the
row or column will be available for other content.
If collapse is used on other elements, it renders as "hidden"
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

For example

Html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
Page 260 of 372
www.teknowize.com CSS

<body>
<h1>The visibility Property</h1>

<h2 class="a">This heading is visible</h2>

<h2 class="b">This heading is hidden</h2>

<p>Notice that the hidden heading still takes up space on the page.</p>

</body>
</html>

CSS file
h2.a {
visibility: visible;
}

h2.b {
visibility: hidden;
}

Output

Filter filter:value;

The filter property defines visual effects (like blur and saturation) to an element
(often <img>).
Page 261 of 372
www.teknowize.com CSS

Values
none Default value. Specifies no effects
• Adjusts the contrast of the image.
• 0% will make the image completely black.
contrast(%) • 100% (1) is default, and represents the original image.
• Values over 100% will provide results with more
contrast.
Applies a drop shadow effect to the image.

Possible values:-
• h-shadow - Required. Specifies a pixel value for the
horizontal shadow. Negative values place the shadow to
the left of the image.
• v-shadow - Required. Specifies a pixel value for the
vertical shadow. Negative values place the shadow
above the image.
• blur - Optional. This is the third value, and must be in
pixels. Adds a blur effect to the shadow. A larger value
will create more blur (the shadow becomes bigger and
drop-shadow(h- lighter). Negative values are not allowed. If no value is
shadow v-shadow specified, 0 is used (the shadow's edge is sharp).
blur spread color) • spread - Optional. This is the fourth value, and must be
in pixels. Positive values will cause the shadow to
expand and grow bigger, and negative values will cause
the shadow to shrink. If not specified, it will be 0 (the
shadow will be the same size as the element).
Note: Chrome, Safari and Opera, and maybe other
browsers, do not support this 4th length; it will not
render if added.
• color - Optional. Adds a color to the shadow. If not
specified, the color depends on the browser (often
black).
filter: drop-shadow(8px 8px 10px red);

Tip: This filter is similar to the box-shadow property.

Converts the image to grayscale.

0% (0) is default and represents the original image.

grayscale(%) 100% will make the image completely gray (used for black
and white images).

Note: Negative values are not allowed.

Page 262 of 372
www.teknowize.com CSS

• Applies a blur effect to the image. A larger value will

blur(px) create more blur.
• If no value is specified, 0 is used.
• Adjusts the brightness of the image.
brightness(%) • 0% will make the image completely black.
• 100% (1) is default and represents the original image.
Values over 100% will provide brighter results.
Applies a hue rotation on the image. The value defines the
number of degrees around the color circle the image
hue-rotate(deg) samples will be adjusted. 0deg is default, and represents the
original image.

Note: Maximum value is 360deg.

Inverts the samples in the image.

invert(%) 0% (0) is default and represents the original image.

100% will make the image completely inverted.

Note: Negative values are not allowed.

Sets the opacity level for the image. The opacity-level
describes the transparency-level, where:
• 0% is completely transparent.
opacity(%) • 100% (1) is default and represents the original image
(no transparency).
Note: Negative values are not allowed.
Tip: This filter is similar to the opacity property.
Saturates the image.
• 0% (0) will make the image completely un-saturated.
saturate(%) • 100% is default and represents the original image.
• Values over 100% provides super-saturated results.
Note: Negative values are not allowed.
Converts the image to sepia.
sepia(%) • 0% (0) is default and represents the original image.
• 100% will make the image completely sepia.
Note: Negative values are not allowed.
The url() function takes the location of an XML file that
specifies an SVG filter, and may include an anchor to a
url() specific filter element. Example:

filter: url(svg-url#element-id)
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
Page 263 of 372
www.teknowize.com CSS

For example

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The filter Property</h1>
<p>Convert the image to grayscale:</p>
<img src="D:/paris.jpg" alt="Pineapple" width="200" height="200">
<p><strong>Note:</strong> The filter property is not supported in Edge 12 or
Internet Explorer.</p>
</body>
</html>

CSS code
img {
filter: grayscale(100%);
}
Page 264 of 372
www.teknowize.com CSS

Output

Resize resize:value;

The resize property defines if (and how) an element is resizable by the user.
Note:- The resize property does not apply to inline elements or to block
elements where overflow="visible". So, make sure that overflow is set to
"scroll", "auto", or "hidden".

Values
none Default value. The user cannot resize the element
both The user can resize both the height and width of the element
horizontal The user can resize the width of the element
vertical The user can resize the height of the element
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
Page 265 of 372
www.teknowize.com CSS

For example

Html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The resize Property</h1>

<div>
<p>Let the user resize both the height and the width of this div element.</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

</body>
</html>
Page 266 of 372
www.teknowize.com CSS

CSS file
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}

Output

Opacity opacity:value;

The opacity property sets the opacity level for an element.

The opacity-level describes the transparency-level, where 1 is not transparent at

all, 0.5 is 50% see-through, and 0 is completely transparent.

Values
number Specifies the opacity. From 0.0 (fully transparent) to 1.0 (fully
opaque)
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
Page 267 of 372
www.teknowize.com CSS

For example

Html code
<html>

<head>

<link rel="stylesheet" type="text/css" href="E:/style.css">

</head>

<body>

<h1>The opacity Property</h1>

<p>The following div element's opacity is 0.5. Note that both the text and the
background-color are affected by the opacity level:</p>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper
diam at erat pulvinar, at pulvinar felis blandit...</div>

</body>

</html>
Page 268 of 372
www.teknowize.com CSS

CSScode
div {

background-color: red;

opacity: 0.5;

Output

Clip clip:value;

The clip property lets you specify a rectangle to clip an absolutely positioned
element. The rectangle is specified as four coordinates, all from the top-left
corner of the element to be clipped.

Note:- The clip property does not work if "overflow:visible".

Values
auto No clipping will be applied. This is default
shape Clips an element. The only valid value is: rect (top, right, bottom, left)
initial Sets this property to its default value.

For example
Page 269 of 372
www.teknowize.com CSS

Html code
<html>

<head>

<link rel="stylesheet" type="text/css" href="E:/style.css">

</head>

<body>

<img src="D:/paris.jpg" width="100" height="140">

</body>

</html>

CSScode
img {

position: absolute;

clip: rect(0px,60px,200px,0px);

Output
Page 270 of 372
www.teknowize.com CSS

Clip path clip-path:value;

The clip-path property lets you clip an element to a basic shape or to an SVG
source.

Note:- The clip-path property will replace the deprecated clip property.

Values
clip-source Defines a URL to an SVG <clipPath> element.
basic-shape Clips an element to a basic shape: circle, ellipse, polygon or
inset.
margin-box Uses the margin box as the reference box.
border-box Uses the border box as the reference box.
padding-box Uses the padding box as the reference box.
content-box Uses the content box as the reference box.
fill-box Uses the object bounding box as reference box.
stroke-box Uses the stroke bounding box as reference box.
view-box Uses the SVG viewport as reference box.
none This is default. No clipping is done.

For example

Html code
<html>

<head>

<link rel="stylesheet" type="text/css" href="E:/style.css">

Page 271 of 372
www.teknowize.com CSS

</head>

<body>

<img src="D:/paris.jpg" width="100" height="140">

</body>

</html>

CSScode

img {

clip-path: circle(60%);

Output

CSS Padding padding: value;

The CSS padding property defines a padding (space) between the text and the
border.

For manually give space between the text and border-

• padding-top:value;
• padding-right:value;
• padding-bottom:value;
• padding-left:value;
Page 272 of 372
www.teknowize.com CSS

values

length specifies a padding in px, pt, cm, rem , em etc.

% specifies a padding in % of the width of the containing element

For example

</body>
</html>

Css code
p
{
background-color:orange
}
p
{
padding:5;
}
h1
{
border: 3px solid powderblue;
padding: 30px;
}

Output

CSS Margin margin:value;

The CSS margin property defines a margin (space) outside the border.

For manually give space between the text and border-

• margin-top:value;
• margin-right:value;
• margin-bottom:value;
• margin-left:value;
Page 274 of 372
www.teknowize.com CSS

values

length specifies a margin in px, pt, cm,in,pc,mm etc.

% specifies a margin in % of the width of the containing element

auto The browser calculate a margin

For example
Page 275 of 372
www.teknowize.com CSS

Css code
p
{
background-color:orange
}
p
{
border:3px solid red;
margin: 0;
}
h1
{
border: 3px solid powderblue;
margin: 100;
}

Output
Page 276 of 372
www.teknowize.com CSS

CSS outline
An outline is a line that is drawn around elements.

Outline outline:width style color;

An outline is a line that is drawn around elements, outside the borders, to make
the element "stand out".

We can set width ,style and color of outline seperetly :-

• outline-width
• outline-style (required)
• outline-color

value
outline-width Specifies the width of outline
outline-style Specifies the style of the outline
outline-color Specifies the color of the outline
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read
about inherit

For example
Page 277 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The outline Property</h1>

<h2>A Heading with a 5 pixels green dotted outline</h2>

<div class="a">A div element with a 2 pixels blue dashed outline. Also notice
that the outline is outside of any border.</div>
</body>
</html>

CSS code
h2 {
border: 1px solid red;
outline: 5px dotted green;
}
div.a {
border: 1px solid red;
outline: 2px dashed blue;
}

Output
Page 278 of 372
www.teknowize.com CSS

Outline width outline-width:value;

It is use to set width of the outline .

Note:- Always declare the outline-style property before the outline-
width property. An element must have an outline before you change the
width of it.

An outline is a line around an element. It is displayed around the margin of

the element. However, it is different from the border property.

The outline is not a part of the element's dimensions, therefore the

element's width and height properties do not contain the width of the
outline.

value
medium Specifies a medium outline. This is default
thin Specifies a thin outline
thick Specifies a thick outline
length Allows you to define the thickness of the outline.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

For example
Page 279 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The outline-width Property</h1>

<h2>A Heading with a thick outline</h2>

<div class="a">A div element with a thick outline.</div>

<br>

<div class="b">Notice that the outline is outside of any border.</div>

</body>
</html>

CSS code
h2 {
outline-style: solid;
outline-width: thick;
}
Page 280 of 372
www.teknowize.com CSS

div.a {
outline-style: solid;
outline-width: thick;
}
div.b {
border: 1px solid red;
outline-style: solid;
outline-width: thick;
}

Output

Outline style outline-style:value;

It is use to set the outline style.

Note:- An outline is a line around an element. It is displayed around the
margin of the element. However, it is different from the border property.

The outline is not a part of the element's dimensions, therefore the

element's width and height properties do not contain the width of the
outline.
Page 281 of 372
www.teknowize.com CSS

value
none Specifies no outline. This is default
hidden Specifies a hidden outline
dotted Specifies a dotted outline
dashed Specifies a dashed outline
solid Specifies a solid outline
double Specifies a double outliner
groove Specifies a 3D grooved outline. The effect depends on the outline-
color value
ridge Specifies a 3D ridged outline. The effect depends on the outline-
color value
inset Specifies a 3D inset outline. The effect depends on the outline-color
value
outset Specifies a 3D outset outline. The effect depends on the outline-
color value
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

For example
Page 282 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The outline-style Property</h1>
<h2>A Heading with a dotted outline</h2>
<div class="a">A div element with a dotted outline.</div>
<br>
<div class="b">Notice that the outline is outside of any border.</div>
</body>
</html>

CSS code
h2 {
outline-style: dotted;
}
div.a {
outline-style: dotted;
}
div.b {
border: 1px solid red;
outline-style: dotted;
}

Output
Page 283 of 372
www.teknowize.com CSS

Out line color outline-color:value;

It is use to set the outline color.

Note:- An outline is a line around an element. It is displayed around the

margin of the element. However, it is different from the border property.

The outline is not a part of the element's dimensions, therefore the

element's width and height properties do not contain the width of the
outline.

value
color names RGB color HEX color
HSL color HSLA Color

For example
Page 284 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The outline-color Property</h1>
<h2>A heading with a colored outline</h2>
<div class="a">The outline-color can be specified with a color name.</div>
<br>
<div class="b">Notice that the outline is outside of any border.</div>
</body>
</html>

CSS code
h2 {
outline-style: solid;
outline-color: coral;
}
div.a {
outline-style: solid;
outline-color: green;
}
div.b {
border: 1px solid black;
outline-style: solid;
outline-color: tomato;
}

Output
Page 285 of 372
www.teknowize.com CSS

Outline offset outline-offset:value;

The outline-offset property adds space between an outline and the edge or
border of an element.

The space between an element and its outline is transparent.

Outlines differ from borders in three ways:-

• An outline is a line drawn around elements, outside the border edge

• An outline does not take up space
• An outline may be non-rectangular

value
length The distance the outline is outset from the border edge. Default value
is 0
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

For example
Page 286 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The outline-offset Property</h1>
<div class="ex1">This div has a 4 pixels solid red outline 15 pixels outside the
border edge.</div>
<br>
<div class="ex2">This div has a 5 pixels dashed blue outline 5 pixels outside
the border edge.</div>
</body>
</html>

CSS code
div.ex1 {
margin: 20px;
border: 1px solid black;
background-color: yellow;
outline: 4px solid red;
Page 287 of 372
www.teknowize.com CSS

outline-offset: 15px;
}
div.ex2 {
margin: 10px;
border: 1px solid black;
background-color: yellow;
outline: 5px dashed blue;
outline-offset: 5px;
}

Output

CSS columns
We can create coloumn for writing text.

Columns columns: width count ;

The column-width part will define the minimum width for each column, while
the column-count part will define the maximum number of columns.

Note:-By using this property, the multi-column layout will automatically

break down into a single column at narrow browser widths, without the
need of media queries or other rules.

We can use width and count of coloumn seperatly by using this tag:-
• column-width
• column-count
Page 288 of 372
www.teknowize.com CSS

values
auto Default value. Sets both the column-width and column-count to
"auto"
column-width Defines the minimum width for each column in px,em,rem,etc.
column-count Defines the maximum number of columns
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read
about inherit

For example
Page 289 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The columns Property</h1>
<p>The columns property is a shorthand property for column-width and
column-count:</p>
<p><strong>Set the minimum width for each column to 100px, and the
maximum number of columns to 3:</strong></p>
<div class="newspaper1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend
option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit
eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod
ii legunt saepius.
</div>
<p><strong>Set the minimum width for each column to 50px, and the
maximum number of columns to 4:</strong></p>
Page 290 of 372
www.teknowize.com CSS

<div class="newspaper2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend
option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit
eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod
ii legunt saepius.
</div>
</body>
</html>

CSS code
.newspaper1 {
columns: 100px 3;
}

.newspaper2 {
columns: 50px 4;
}

Output
Page 291 of 372
www.teknowize.com CSS

Columns width columns-width:value;

It is use to set the width of each coloumn.

Note:-if we not set coloumn count then browser automatically set the
column count according to width of column.

Values
auto Default value. The column width will be determined by the browser.
length A length that specifies the width of the columns. The number of
columns will be the minimum number of columns needed to show all
the content across the element.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

For example
Page 292 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The column-width Property</h1>
<p>The column-width property specifies the column width:</p>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo .
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend
option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit
eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod
ii legunt saepius.
</div>
</body>
</html>

CSS code
.newspaper {
column-width: 100px;
}

Output
Page 293 of 372
www.teknowize.com CSS

Columns count columns-count:value;

It is use to set the number of column.

Note:-if we not set coloumn count then browser automatically set the
column count according to width of column.

Values
auto Default value. The number of columns will be determined by other
properties, like e.g. "column-width"
number It is use to set number of column .

For example
Page 294 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>

<body>
<h1>The column-width Property</h1>
<p>The column-width property specifies the column width:</p>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo .
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend
option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit
eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod
ii legunt saepius.
</div>
</body>

</html>

CSS code
.newspaper {
column-count:3;
}

Output
Page 295 of 372
www.teknowize.com CSS

Columns fill columns-fill:value;

It is use to fill each coloumn evenly.

Note:-if we add a height to all column element, you can control how the
content fills the columns. The content can be balanced or filled
sequentially.

Values
auto Fills each column until it reaches the height, and do this until it runs
out of content (so, this value will not necessarily fill all the columns
nor fill them evenly)
Balance • It is use to fill all the column with element evenly horizontally.
• Default value

For example
Page 296 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>

<body>
<h1>The column-fill Property</h1>
<h2>column-fill: auto:</h2>
<div class="newspaper1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat...
</div>
<h2>column-fill: balance (default):</h2>
<div class="newspaper2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat...
</div>

</body>
</html>

CSS code
div {
column-count: 3;
height: 100px;
}

.newspaper1 {

column-fill: auto;
}
.newspaper2 {

column-fill: balance;
}
Page 297 of 372
www.teknowize.com CSS

Output

Column gap column-gap:value;

It is use to set the gap between the columns.

Note:- If there is a column-rule between columns, it will appear in the

middle of the gap.
Values
length It is use to set length in cm,em,rem,px.
normal Default value. Specifies a normal gap between the columns.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

For example
Page 298 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The column-gap Property</h1>
<p>The column-gap property defines the gap between the columns of the
element:</p>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam
liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id
quod mazim placerat facer possim assum. Typi non habent claritatem insitam;
est usus legentis in iis qui facit eorum claritatem. Investigationes
demonstraverunt lectores legere me lius quod ii legunt saepius.

</body>
</html>

Css code
.newspaper {
column-count: 3;
column-gap: 40px;
}
Page 299 of 372
www.teknowize.com CSS

Output

CSS column rule

It is use to set the lines (rule) between columns and costomize them.

Coloumn rule column-rule:width style color;

It is use to set the width, style, and color of the lines (rule) between columns.

We can also use all these property of colomn rule separetly.

• column-rule-width
• column-rule-style (required)
• column-rule-color

column-rule-width Sets the width of the line between columns.

Default value is medium.
column-rule-style Sets the style of the rule between columns.
Default value is none.
column-rule-color Sets the color of the rule between columns.
Default value is the color of the element.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
Page 300 of 372
www.teknowize.com CSS

For example

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">

</head>

<body>
<h1>The column-rule Property</h1>
<p>The column-rule property sets the width, style, and color of the rule between the columns of the
element:</p>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue
Page 301 of 372
www.teknowize.com CSS

nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem
insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores
</div>

</body>
</html>

CSS code
.newspaper
{
column-count: 3;
column-gap: 40px;
column-rule: 4px double #ff00ff;
}

Output

Column rule width column-rule-width:value;

It is use to set the width of the lines (rule) between columns.

values
medium Default value. Defines a medium rule
thin Defines a thin rule
thick Defines a thick rule
length Specifies the width of the rule
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
Page 302 of 372
www.teknowize.com CSS

For example

Html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>

<body>

<h1>The column-rule-width Property</h1>

nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam
liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id
quod mazim placerat facer possim assum. Typi non habent claritatem insitam;
est usus legentis in iis qui facit eorum claritatem. Investigationes
demonstraverunt lectores.

</div>

</body>

</html>

CSS file
.newspaper
{
column-count: 3;
column-gap: 40px;
column-rule-style: outset;
column-rule-width: 10px;
}

Output

Column rule style column-rule-style:value;

It is use to set the style of the lines (rule) between columns.

Page 304 of 372
www.teknowize.com CSS

values
none Default value. Defines no rule.
hidden Defines a hidden rule.
dotted Defines a dotted rule.
dashed Defines a dashed rule.
solid Defines a solid rule.
double Defines a double rule.
groove Specifies a 3D grooved rule. The effect depends on the width and
color values.
ridge Specifies a 3D ridged rule. The effect depends on the width and
color values.
inset Specifies a 3D inset rule. The effect depends on the width and
color values.
outset Specifies a 3D outset rule. The effect depends on the width and
color values.
initial Sets this property to its default value.

For example
Page 305 of 372
www.teknowize.com CSS

Html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The column-rule-width Property</h1>
<p>The column-rule-width property sets the width of the rule between the
columns of the element:</p>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam
liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id
quod mazim placerat facer possim assum. Typi non habent claritatem insitam;
est usus legentis in iis qui facit eorum claritatem. Investigationes
demonstraverunt lectores.
</div>
</body>
</html>

CSSfile
.newspaper {
column-count: 3;
column-gap: 40px;
column-rule-style: dotted;
}

Output
Page 306 of 372
www.teknowize.com CSS

Column rule color column-rule-color:value;

It is use to set the color of the lines (rule) between columns.

values
color names RGB color HEX color

HSL color HSLA Color

For example

Html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
Page 307 of 372
www.teknowize.com CSS

<body>

<h1>The column-rule-width Property</h1>

<p>The column-rule-width property sets the width of the rule between the
columns of the element:</p>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam
liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id
quod mazim placerat facer possim assum. Typi non habent claritatem insitam;
est usus legentis in iis qui facit eorum claritatem. Investigationes
demonstraverunt lectores.
</div>

</body>
</html>

CSS file
.newspaper
{
column-count: 3;
column-rule-width:10px;
column-rule-style:double;
column-rule-color: hotpink;
}

Output
Page 308 of 372
www.teknowize.com CSS

Css flex box

The flex box called flexible box. Flexbox bake it easier to design flexible
responsive layout structure without using float or position.
• All flex box property must be use with display flex

Flex flex:grow value shrink value basis-value;

It is use to sets the flexible length on flexible items.

The flex property is a shorthand property for:

• flex-grow
• flex-shrink
• flex-basis

Note:- If the element is not a flexible item, the flex property has no effect.

Values
flex-grow A number specifying how much the item will grow relative to
the rest of the flexible items.
flex- A number specifying how much the item will shrink relative to
shrink the rest of the flexible items.
flex-basis The length of the item. Legal values: "auto", "inherit", or a
number followed by "%", "px", "em" or any other length unit.
auto Same as 1 1 auto.
initial Same as 0 1 auto.
none Same as 0 0 auto.
inherit Inherits this property from its parent element.

For example
Page 309 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The flex Property</h1>
<div id="main">
<div style="background-color:coral;">RED</div>
<div style="background-color:lightblue;">BLUE</div>
<div style="background-color:lightgreen;">Green div with more content.</div>
</div>
</body>
</html>

CSS code
#main {
width: 300px;
height: 300px;
border: 1px solid black;
display: flex;
}
#main div {
Page 310 of 372
www.teknowize.com CSS

-ms-flex: 0; /* IE 10 */
flex: 1 0;
}

Output

Flex grow flex-grow: value;

It is use to specifies how much the item will grow relative to the rest of the
flexible items inside the same container.

Note:- If the element is not a flexible item, the flex property has no effect.
Page 311 of 372
www.teknowize.com CSS

Values
number A number specifying how much the item will grow relative to
the rest of the flexible items.
Default value is 0.

For example

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
Page 312 of 372
www.teknowize.com CSS

</head>
<body>
<h1>The flex-grow Property</h1>
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:khaki;"></div>
<div style="background-color:pink;"></div>
<div style="background-color:lightgrey;"></div>
</div>
</body>
</html>

CSS code
#main {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}

Output
Page 313 of 372
www.teknowize.com CSS

Flex shrink flex-shrink: value;

It is use to specifies how the item will shrink relative to the rest of the flexible
items inside the same container.

Note:- If the element is not a flexible item, the flex property has no effect.

Values
Number • A numberspecifying how much the item will shrink relative to
the rest of the flexible items.
• Default value is 1.

For example
Page 314 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The flex-shrink Property</h1>
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:khaki;"></div>
<div style="background-color:pink;"></div>
<div style="background-color:lightgrey;"></div>
</div>
</body>
</html>

CSS code
#main {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div {
flex-grow: 1;
flex-shrink: 1;

flex-basis: 100px;
}
#main div:nth-of-type(2) {
flex-shrink: 3;

}
Page 315 of 372
www.teknowize.com CSS

Output

Flex basis flex-basis: value;

It is use to specifies the initial length of a flexible item.

Note:- If the element is not a flexible item, the flex property has no effect.

Values
number A length unit, or percentage, specifying the initial length of the
flexible items
• Default value.
Auto • The length is equal to the length of the flexible item. If the
item has no length specified, the length will be according to
its content

For example
Page 316 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The flex-basis Property</h1>
<p>Set the initial length of the flex items to 50 pixels, with an exception; set the
initial length of the second flex item to 100 pixels:</p>
<div id="main">
<div style="background-color:coral;">50px</div>
<div style="background-color:lightblue;">100px</div>
<div style="background-color:khaki;">50px</div>
<div style="background-color:pink;">50px</div>
<div style="background-color:lightgrey;">50px</div>
</div>
</body>
</html>

CSS code
#main {
width: 300px;
height: 100px;
border: 1px solid #c3c3c3;
Page 317 of 372
www.teknowize.com CSS

display: flex;
}
#main div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50px;
}
#main div:nth-of-type(2) {
flex-basis: 100px;
}

Output

Flex direction flex-direction:value;

It is use to specifies the direction of the flexible items.

Note:- If the element is not a flexible item, the flex property has no effect.

Values
row Default value. The flexible items are displayed
horizontally, as a row.
row-reverse Same as row, but in reverse order.
column The flexible items are displayed vertically, as a column.
column- Same as column, but in reverse order.
reverse
initial Sets this property to its default value.
Page 318 of 372
www.teknowize.com CSS

inherit Inherits this property from its parent element.

For example

Html code
<html>
<head>
Page 319 of 372
www.teknowize.com CSS

<link rel="stylesheet" type="text/css" href="E:/style.css">

</head>
<body>
<h1>The flex-basis Property</h1>

<p>Set the initial length of the flex items to 50 pixels, with an exception; set the
initial length of the second flex item to 100 pixels:</p>
<div id="main">
<div style="background-color:coral;">50px</div>
<div style="background-color:lightblue;">100px</div>
<div style="background-color:khaki;">50px</div>
<div style="background-color:pink;">50px</div>
<div style="background-color:lightgrey;">50px</div>
</div>
</body>
</html>

CSS code
#main
{
width: 300px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50px;
}
#main div:nth-of-type(2)
{
flex-basis: 100px;
Page 320 of 372
www.teknowize.com CSS

}
Output

Flex wrap flex-direction:value;

It is use to specifies whether the flexible items should wrap(item split into
double line) or not.

Note:- If the element is not a flexible item, the flex property has no effect.

Values
nowrap Default value. Specifies that the flexible items will not
wrap
wrap Specifies that the flexible items will wrap if necessary
wrap-reverse Specifies that the flexible items will wrap, if necessary, in
reverse order.
initial Sets this property to its default value.

For example
Page 321 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The flex-wrap Property</h1>
<div id="main">
<div style="background-color:coral;">A</div>
<div style="background-color:lightblue;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div>
</body>
</html>

CSS code
#main {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
Page 322 of 372
www.teknowize.com CSS

display: flex;
flex-wrap: wrap;
}
#main div {
width: 50px;
height: 50px;
}

Output

Flex flow flex-flow:flex-direction flex-wrap;

It is a combination of flex direction and flex wrap. In this we can use these both
property in single property.

Note:- If the element is not a flexible item, the flex property has no effect.
Page 323 of 372
www.teknowize.com CSS

Values
Specifying the direction of the flexible items
Values:-
• Row
• row-reverse
flex- • column
direction • column-reverse
• initial
Default value is "row".
Specifying whether the flexible items should wrap or
not
Values:-
• Nowrap
flex-wrap • Wrap
• wrap-reverse
• initial
Default value is "nowrap".

For example
Page 324 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The flex-flow Property</h1>
<div id="main">
<div style="background-color:coral;">A</div>
<div style="background-color:lightblue;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div>
</body>
</html>

CSS code
#main
{
width: 200px;
height: 200px;
Page 325 of 372
www.teknowize.com CSS

border: 1px solid #c3c3c3;

display: flex;
flex-flow: row-reverse wrap;
}
#main div
{
width: 50px;
height: 50px;
}

Output

CSS transform
The transform property applies a 2D or 3D transformation to an element.

Transform transform:value;

It is use to applies a 2D or 3D transformation to an element. This property

allows you to rotate, scale, move, skew, etc., elements.
Page 326 of 372
www.teknowize.com CSS

Values
none No transformation
matrix(n,n,n,n,n,n) 2D transformation, using a matrix of six
values
matrix3d 3D transformation, using a 4x4 matrix of 16
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) values
translate(x,y) 2D translation (change the position)
translate3d(x,y,z) 3D translation
translateX(x) translation, using only the value for the X-
axis
translateY(y) translation, using only the value for the Y-
axis
translateZ(z) 3D translation, using only the value for the Z-
axis
scale(x,y) 2D scale( increase the size)transformation
scale3d(x,y,z) 3D scale transformation
scaleX(x) scale transformation by giving a value for the
X-axis
scaleY(y) scale transformation by giving a value for the
Y-axis
scaleZ(z) 3D scale transformation by giving a value for
the Z-axis
rotate(angle) 2D rotationthe angle is specified in the
parameter
rotate3d(x,y,z,angle) 3D rotation
rotateX(angle) 3D rotation along the X-axis
rotateY(angle) 3D rotation along the Y-axis
rotateZ(angle) 3D rotation along the Z-axis
skew(x-angle,y-angle) 2D skew transformation along the X- and the
Y-axis
skewX(angle) 2D skew transformation along the X-axis
skewY(angle) 2D skew transformation along the Y-axis
perspective(n) perspective view for a 3D transformed
element
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
Page 327 of 372
www.teknowize.com CSS

For example
Page 328 of 372
www.teknowize.com CSS

Html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The transform Property</h1>
<h2>transform: rotate(20deg):</h2>
<div class="a">Hello World!</div>
<br>
<h2>transform: skewY(20deg):</h2>
<div class="b">Hello World!</div>
<br>
<h2>transform: scaleY(1.5):</h2>
<div class="c">Hello World!</div>
</body>
</html>

CSS file
height: 80px;
background-color: yellow;
-ms-transform: rotate(20deg); /* IE 9 */
transform: rotate(20deg);
}
div.b {
width: 150px;
height: 80px;
background-color: yellow;
-ms-transform: skewY(20deg); /* IE 9 */
transform: skewY(20deg);
}
div.c {
width: 150px;
height: 80px;
background-color: yellow;
-ms-transform: scaleY(1.5); /* IE 9 */
transform: scaleY(1.5);
}
Page 329 of 372
www.teknowize.com CSS

Output

Transform style transform-style:value;

It is specifies how nested elements are rendered in 3D space.

Note:- This property must be used together with the transform property.

Values
flat Specifies that child elements will NOT preserve its 3D position.
This is default
preserve- Specifies that child elements will preserve its 3D position
3d
Page 330 of 372
www.teknowize.com CSS

For example
Page 331 of 372
www.teknowize.com CSS

Html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<div id="div">
<div id="div2">HELLO
<div id="div3">YELLOW</div>
</div>
</div><br><br><br><br><br><br>
Page 332 of 372
www.teknowize.com CSS

<div id="div4">
<div id="div5">HELLO
<div id="div6">YELLOW</div>
</div>
</div>
</body>
</html>

CSS file
#div1 {
position: relative;
height: 200px;
width: 100%;
margin: 100px;
padding: 10px;
border: 1px solid black;
}

#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateY(60deg);
transform-style: preserve-3d;
}

#div3 {
padding: 40px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateY(-60deg);
}
#div4 {
position: relative;
height: 100px;
Page 333 of 372
www.teknowize.com CSS

width: 100px;
margin: 100px;
}
#div5
{
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateY(60deg);
transform-style: flat;
}
#div6
{
padding: 40px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateY(-60deg);
output
Page 334 of 372
www.teknowize.com CSS

Transform origin transform-origin:value;

It is allows you to change the center point of transform element.

2D transformations can change the x- and y-axis of an element. 3D

transformations can also change the z-axis of an element.

Note:- This property must be used together with the transform property.

Values
x-axis Defines where the view is placed at the x-axis. Possible values:
• left
• center(default)
• right
• length
• %
y-axis Defines where the view is placed at the y-axis. Possible values:
• top
• center (default)
• bottom
• length
• %
z-axis Defines where the view is placed at the z-axis (for 3D
transformations). Possible values:
• length

For example
Page 335 of 372
www.teknowize.com CSS

Html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The transform-origin Property</h1>

<div id="div1">
<div id="div2">HELLO</div>
</div>
</body>
</html>
Page 336 of 372
www.teknowize.com CSS

CSS file
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding: 10px;
border: 1px solid black;
}
#div2
{
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: red;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin: 20% 40%; /* IE 9 */
transform: rotate(45deg);
transform-origin: 20% 40%;
}
output
Page 337 of 372
www.teknowize.com CSS

CSS transition
It is use to set transition property to element.

• Transition transition: transition-propertytransition-

durationtransition-timing-functiontransition-delay;

CSS transition use all the below transition propert y in transition tag or we can
use it separately .

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

values
transition-property Specifies the name of the CSS property the
transition effect is for.
transition-duration Specifies how many seconds or milliseconds
the transition effect takes to complete.
transition-timing-function Specifies the speed curve of the transition
effect
transition-delay Defines when the transition effect will start.

For example
Page 338 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and
earlier versions.</p>
</body>
</html>

CSS code
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
Page 339 of 372
www.teknowize.com CSS

Output

Transition property transition-property:value;

It is specifies the name of the CSS property the transition effect is for (the
transition effect will start when the specified CSS property changes).

Note:-

• A transition effect could typically occur when a user hover over an

element.
• Always specify the transition-duration property, otherwise the
duration is 0, and the transition will have no effect.
•

values
none No property will get a transition effect
all All properties will get a transition effect
Default value.
property Defines a comma separated list of CSS property names the
transition effect is for
initial Sets this property to its default value.
•
For example
Page 340 of 372
www.teknowize.com CSS

CSS code
div {
width: 100px;
height: 100px;
background: red;
transition-property: width;
transition-duration: 2s;
}
div:hover {
width: 300px;
}
Page 341 of 372
www.teknowize.com CSS

Output
•

Transition duration transition-duration:value;

It is use to specifies how many seconds (s) or milliseconds (ms) a transition

effect takes to complete.

Note:- A transition effect could typically occur when a user hover over an
element.

values
Time Specifies how many seconds or milliseconds a transition effect takes to
complete. Default value is 0s, meaning there will be no effect.

•
For example
Page 342 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The duration Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and
earlier versions.</p>
</body>
</html>

CSS code
div {
width: 100px;
height: 100px;
background: red;
transition-property: width;
transition-duration: 2s;
}
div:hover {
width: 300px;
}
Page 343 of 372
www.teknowize.com CSS

Output
•

Transition timing function transition-timing-function:value;

It is use to specifies the speed curve of the transition effect.

Note:- This property allows a transition effect to change speed over its
duration.

values
ease Default value. Specifies a transition effect with a slow
start, then fast, then end slowly (equivalent to cubic-
bezier(0.25,0.1,0.25,1))

linear Specifies a transition effect with the same speed from

start to end (equivalent to cubic-bezier(0,0,1,1))

ease-in Specifies a transition effect with a slow start (equivalent

to cubic-bezier(0.42,0,1,1))

ease-out Specifies a transition effect with a slow end (equivalent

to cubic-bezier(0,0,0.58,1))

ease-in-out Specifies a transition effect with a slow start and end

(equivalent to cubic-bezier(0.42,0,0.58,1))
Page 344 of 372
www.teknowize.com CSS

step-start Equivalent to steps(1, start)

step-end Equivalent to steps(1, end)
steps(int,start|end) Specifies a stepping function, with two parameters. The
first parameter specifies the number of intervals in the
function. It must be a positive integer (greater than 0).
The second parameter, which is optional, is either the
value "start" or "end", and specifies the point at which
the change of values occur within the interval. If the
second parameter is omitted, it is given the value "end"

cubic-bezier(n,n,n,n) Define your own values in the cubic-bezier function.

Possible values are numeric values from 0 to 1

For example
Page 345 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The transition timing function Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and
earlier versions.</p>
</body>
</html>

CSS code
div {
width: 100px;
height: 100px;
background: red;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
}
div:hover
Page 346 of 372
www.teknowize.com CSS

{
width: 300px;
}

Output

Transition delay transition-delay:value;

It is use to specifies when the transition effect will start.

Values
Time Specifies the number of seconds or milliseconds to wait before the
transition effect will start.

For example
Page 347 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h1>The transition delay</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and
earlier versions.</p>
</body>
</html>

CSS code
div {
width: 100px;
height: 100px;
background: red;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 3s;
Page 348 of 372
www.teknowize.com CSS

}
div:hover {
width: 300px;
}

Output

CSS animation
It is use to set animationproperty to element.

Animation animation: animation-name animation-durationanimation-

timing-functionanimation-delayanimation-iteration-countanimation-
directionanimation-fill-mode animation-play-state;

CSS animation use all the below animation property in animation tag or we can
use it separately .

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

values
animation-name Specifies the name of the keyframe you want to
bind to the selector
Page 349 of 372
www.teknowize.com CSS

animation-duration Specifies how many seconds or milliseconds an

animation takes to complete

animation-timing- Specifies the speed curve of the animation

function
animation-delay Specifies a delay before the animation will start
animation-iteration-count Specifies how many times an animation should
be played

animation-direction Specifies whether or not the animation should

play in reverse on alternate cycles

animation-fill-mode Specifies what values are applied by the

animation outside the time it is executing

animation-play-state Specifies whether the animation is running or

paused

For example
Page 350 of 372
www.teknowize.com CSS

Html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="F:/style.css">
</head>
<body>
<h1>The animation Property</h1>

<p>Move an element from 0px to 200px left. The animation lasts for 5 seconds.
It then starts over again, and go on forever (infinite).</p>
<div></div>

<p><strong>Note:</strong> The animation property is not supported in Internet

Explorer 9 and earlier versions.</p>
</body>
</html>
Page 351 of 372
www.teknowize.com CSS

CSS code
div
{
width: 100px;
height: 100px;
background: lime;
position: relative;
animation: mymove 5s infinite;
}

@keyframes mymove
{
from
{left: 0px;}
to
{left: 200px;}
}

Output

Animation delay animation-delay:value;

It is use to specifies a delay for the start of an animation effect.

Values
Defines the number of seconds (s) or milliseconds (ms) to wait before
Time the animation will start.
Default value is 0.
Negative values are allowed.
Page 352 of 372
www.teknowize.com CSS

For example

Html code
<!DOCTYPE html>
<html>
<head>
<title></title>
Page 353 of 372
www.teknowize.com CSS

<link rel="stylesheet" type="text/css" href="E:/new class/style.css">

</head>
<body>
<p>animation delay 12s.</p>
<div></div>

</body>
</html>

CSS code
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s 1;
animation-delay: -2s;
}
@keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}

Output

Animation duration animation-duration:value;

It is use to specifies the time take to complete one circle animation.

Values
Defines the number of seconds (s) or milliseconds (ms) to complete
Time one animation circle
Default value is 0.
Negative values are allowed.
Page 354 of 372
www.teknowize.com CSS

For example
Page 355 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>

<link rel="stylesheet" type="text/css" href="E:/new class/style.css">

</head>

<body>

<p>animation duration.</p>

</body>
</html>
CSS code
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s 1;
animation-duration: 1s;
}
@keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}

Output
Page 356 of 372
www.teknowize.com CSS

Animation name animation-name:write any thing without space;

It is use to give a name to the animation for use this name in keyframes.

For example
Page 357 of 372
www.teknowize.com CSS

Html code

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="E:/new class/style.css">
</head>
<body>
<p>animation name</p>
<p> there my moves is the animation name that we taken</p>
<div></div>
</body>
</html>

CSS code
div
{
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s 1;
animation-duration: 1s;
}
@keyframes mymove
{
from {left: 0px;}
to {left: 200px;}
}

Output
Page 358 of 372
www.teknowize.com CSS

Animation timing function animation-timing-function:value;

It is use to specifies the time take to complete one circle animation.

Values
linear The animation has the same speed from start to end
ease Default value. The animation has a slow start, then fast, before it
ends slowly
ease-in The animation has a slow start
ease-out The animation has a slow end
ease-in- The animation has both a slow start and a slow end
out
step-start Equivalent to steps(1, start)
step-end Equivalent to steps(1, end)

For example
Page 359 of 372
www.teknowize.com CSS

Html code

<!DOCTYPE html>

<link rel="stylesheet" type="text/css" href="E:/new class/style.css">

</head>

<body>

<h1>The animation-timing-function Property</h1>

<p>Play an animation with the same speed from beginning to end if using
linear:</p>

</html>
Page 360 of 372
www.teknowize.com CSS

CSS code
div
{
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
animation-timing-function: linear;
}

@keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}

Output

Animation iteration count animation-iteration-count:value;

It is use to specifies the number of times an animation should be played.

Values
number A number that defines how many times an animation should be
played.
Default value is 1
infinite Specifies that the animation should be played infinite times (for
ever)
Page 361 of 372
www.teknowize.com CSS

For example

Html code

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="E:/new class/style.css">

Page 362 of 372
www.teknowize.com CSS

</head>
<body>

<h1>The animation-iteration-time Property</h1>

<p>play an animation for 3 iteration count</p>

</body>

</html>
CSS code
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
animation-timing-function: linear;
animation-iteration-count: 3;
}

@keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}

Output
Page 363 of 372
www.teknowize.com CSS

Animation direction animation-direction:value;

It is use to specifies whether animation should be played forwards,

backwards or in alternate cycles.

Values
normal Default value. The animation is played as normal
(forwards)
reverse The animation is played in reverse direction (backwards)
alternate The animation is played forwards first, then backwards
alternate- The animation is played backwards first, then forwards
reverse

For example
Page 364 of 372
www.teknowize.com CSS

Html code

<!DOCTYPE html>
<html>

<link rel="stylesheet" type="text/css" href="E:/new class/style.css">

</head>

<body>

<h1>The animation-direction</h1>

</body>

</html>
CSS code
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: myfirst 5s 2;
animation-direction: alternate;
}

@keyframes myfirst {
0% {background: red; left: 0px; top: 0px;}
25% {background: yellow; left: 200px; top: 0px;}
50% {background: blue; left: 200px; top: 200px;}
75% {background: green; left: 0px; top: 200px;}
100% {background: red; left: 0px; top: 0px;}
}
Page 365 of 372
www.teknowize.com CSS

Output

Animation fill mode animation-fill-mode:value;

By using this property the animated element will stoped at the end according to
which fill mode we used .

Values
forwards The element will retain the style values that is set by the last
keyframe (depends on animation-direction and animation-
iteration-count)
backwards The element will get the style values that is set by the first
keyframe (depends on animation-direction), and retain this
during the animation-delay period
both The animation will follow the rules for both forwards and
backwards, extending the animation properties in both directions
Page 366 of 372
www.teknowize.com CSS

For example

Html code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="E:/new class/style.css">
</head>
<body>
<h1>The animation-fill-mode Property</h1>
<div></div>
</body>
</html>
Page 367 of 372
www.teknowize.com CSS

CSS code
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 3s;
animation-fill-mode: both;
}

@keyframes mymove {
from {top: 0px;}
to {top: 200px; background-color: blue;}
}

Output

CSS @keyframes Rule

@keyframes animationname {keyframes-selector {css-styles;}}

The @keyframes rule specifies the animation code.

During the animation, you can change the set of CSS styles many times.
Specify when the style change will happen in percent, or with the keywords
"from" and "to", which is the same as 0% and 100%. 0% is the beginning of
the animation, 100% is when the animation is complete.
Page 368 of 372
www.teknowize.com CSS

Values
animationname Required. Defines the name of the animation.
Required. Percentage of the animation duration.
Legal values:
0-100%
keyframes-selector from (same as 0%)
to (same as 100%)
Note: You can have many keyframes-selectors in one
animation.
css-styles Required. One or more legal CSS style properties

For example
Page 369 of 372
www.teknowize.com CSS

Html code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="E:/new class/style.css">
</head>
<body>
<h1>The @keyframes Rule</h1>
<div></div>
</body>
</html>

CSS code
div {
width: 100px;
height: 100px;
background: red;
Page 370 of 372
www.teknowize.com CSS

position: relative;
animation: mymove 5s infinite;
}

@keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
75% {top: 50px}
100% {top: 100px;}
}

Output

z-index Property
z-index: value;

It is use to show or hide the element when two elements are in same position .

An element with greater number order is always in front of an element with a

lower number order.

Negative value are allowed.

Note:- z-index only works on positioned elements (position: absolute,

position: relative, position: fixed, or position: sticky) .

Values
Sets the stack order equal to its parents. This is default.
auto
number Sets the stack order of the element. Negative numbers are allowed
Page 371 of 372
www.teknowize.com CSS

For example

Html code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="E:/new class/style.css">
</head>
<body>
<h1>The z-index Property</h1>

<img src="E:/title.png" width="100" height="140">

<p> the image has a z-index of -1, it will be placed behind the heading.</p>
</body>
</html>
Page 372 of 372
www.teknowize.com CSS

CSS code
img {
position: relative;
left: 0px;
top:-6rem;
z-index: -1;
}

Output

Learn Javascript Visually PDF
No ratings yet
Learn Javascript Visually PDF
148 pages
Flexbox Cheatsheet PDF
No ratings yet
Flexbox Cheatsheet PDF
1 page
Advanced JavaScript Cheat Sheet - Zero To Mastery
No ratings yet
Advanced JavaScript Cheat Sheet - Zero To Mastery
150 pages
Javascript
No ratings yet
Javascript
280 pages
JavaScript Part 2
100% (1)
JavaScript Part 2
309 pages
07DOM and JS Events
No ratings yet
07DOM and JS Events
54 pages
Java Script
100% (1)
Java Script
230 pages
Crockford Douglas JavaScript
100% (1)
Crockford Douglas JavaScript
39 pages
The Web Developer Bootcamp Outline (BA) - 2018-05-29
No ratings yet
The Web Developer Bootcamp Outline (BA) - 2018-05-29
79 pages
Front End Best Practices
No ratings yet
Front End Best Practices
40 pages
CSS Interview Questions: Click Here
No ratings yet
CSS Interview Questions: Click Here
25 pages
Css Intro2023
100% (1)
Css Intro2023
29 pages
React Bits PDF
No ratings yet
React Bits PDF
126 pages
Node Js in 30days
100% (2)
Node Js in 30days
300 pages
React Cheat Sheet
No ratings yet
React Cheat Sheet
2 pages
React Js Tutorial
No ratings yet
React Js Tutorial
46 pages
BootStrap Basics
No ratings yet
BootStrap Basics
30 pages
Array Methods
No ratings yet
Array Methods
19 pages
The React Handbook
No ratings yet
The React Handbook
187 pages
Mern Stack
No ratings yet
Mern Stack
8 pages
Css Animations
100% (4)
Css Animations
78 pages
Javascript Hard Parts v2
No ratings yet
Javascript Hard Parts v2
94 pages
Node Js
100% (1)
Node Js
51 pages
Dynamic Rendering in NextJS
No ratings yet
Dynamic Rendering in NextJS
8 pages
Full-Stack-Web-Development by Stevenvinothkumar
No ratings yet
Full-Stack-Web-Development by Stevenvinothkumar
193 pages
UIJAVAKIT
100% (1)
UIJAVAKIT
33 pages
CSS Rule: Selector
100% (2)
CSS Rule: Selector
8 pages
A Practical Introduction To Modern JavaScript (Zsolt Nagy)
100% (2)
A Practical Introduction To Modern JavaScript (Zsolt Nagy)
205 pages
Sass Documentation
No ratings yet
Sass Documentation
32 pages
25 React Interview
No ratings yet
25 React Interview
12 pages
HTML Intuitive Guide I PDF
No ratings yet
HTML Intuitive Guide I PDF
218 pages
React JS
No ratings yet
React JS
49 pages
React Cheatsheet
No ratings yet
React Cheatsheet
10 pages
HTML JavaScript
No ratings yet
HTML JavaScript
271 pages
JavaScript Fundamentals
100% (6)
JavaScript Fundamentals
80 pages
Javascript Coding Book For Beginners Web Development Crash Course Head First Javascript Programming Book For Modern Software Engineering Javascript The Definitive Guide For Coding Interview
100% (2)
Javascript Coding Book For Beginners Web Development Crash Course Head First Javascript Programming Book For Modern Software Engineering Javascript The Definitive Guide For Coding Interview
251 pages
React 2020 Cheatsheet Small PDF
No ratings yet
React 2020 Cheatsheet Small PDF
30 pages
Learn CSS - Selectors and Visual Rules Cheatsheet - Codecademy
No ratings yet
Learn CSS - Selectors and Visual Rules Cheatsheet - Codecademy
6 pages
Bootstrap (Front-End Framework)
No ratings yet
Bootstrap (Front-End Framework)
4 pages
Important ReactJs Interview Questions
No ratings yet
Important ReactJs Interview Questions
27 pages
Type Script
No ratings yet
Type Script
103 pages
Building A React Native JWT Client - API Requests and AsyncStorage
No ratings yet
Building A React Native JWT Client - API Requests and AsyncStorage
24 pages
React Interview Questions With Examples
No ratings yet
React Interview Questions With Examples
7 pages
React JS Questions
No ratings yet
React JS Questions
13 pages
Web Design Workshop
No ratings yet
Web Design Workshop
49 pages
Angular
No ratings yet
Angular
15 pages
Css
100% (3)
Css
32 pages
HTML CSS JS Interview Questions
No ratings yet
HTML CSS JS Interview Questions
5 pages
CSS Tutorial: Examples in Each Chapter
100% (2)
CSS Tutorial: Examples in Each Chapter
332 pages
Hello React and Typescript
No ratings yet
Hello React and Typescript
56 pages
CSSGrid Reference PDF
No ratings yet
CSSGrid Reference PDF
22 pages
Master ReactJS Part 6 MFurqan Riaz
No ratings yet
Master ReactJS Part 6 MFurqan Riaz
40 pages
React: Installation
No ratings yet
React: Installation
164 pages
Angular Cheat Sheet
100% (1)
Angular Cheat Sheet
6 pages
Master ReactJS Part 5 MFurqan Riaz
No ratings yet
Master ReactJS Part 5 MFurqan Riaz
53 pages
Web Programming Chapter II (HTML&CSS)
100% (1)
Web Programming Chapter II (HTML&CSS)
100 pages
Namaste JavaScript Notes
No ratings yet
Namaste JavaScript Notes
58 pages
CSS3 Practico-Diseño y Desarrollo
100% (3)
CSS3 Practico-Diseño y Desarrollo
350 pages
By:-Mr. Sachin Kumar Sonker
No ratings yet
By:-Mr. Sachin Kumar Sonker
77 pages
Introduction To CSS (Cascading Style Sheets) : Technological University of The Philippines Cavite Campus
No ratings yet
Introduction To CSS (Cascading Style Sheets) : Technological University of The Philippines Cavite Campus
12 pages
Basic To Advance Tutorial of SQL
No ratings yet
Basic To Advance Tutorial of SQL
37 pages
Server Admin Ict Question Student
No ratings yet
Server Admin Ict Question Student
87 pages
User Accounts, Roles and Privileges
No ratings yet
User Accounts, Roles and Privileges
25 pages
User Accounts, Roles and Privileges
No ratings yet
User Accounts, Roles and Privileges
25 pages
Email Classification Using Naive Bayes Classifier: Domain Algorithms Framework Platform
No ratings yet
Email Classification Using Naive Bayes Classifier: Domain Algorithms Framework Platform
7 pages
TwinmotionTutorial A55453929dcae993
No ratings yet
TwinmotionTutorial A55453929dcae993
26 pages
Cloze Deletion Issue
No ratings yet
Cloze Deletion Issue
6 pages
Conference Paper
No ratings yet
Conference Paper
10 pages
Download Information technology in medical diagnostics II : proceedings of the International Scientific Internet Conference "Computer Graphics and Image Processing" and the XLVIIIth International scientific and Practical Conference "Application of Lasers in Medici Kalimoldayev ebook All Chapters PDF
100% (1)
Download Information technology in medical diagnostics II : proceedings of the International Scientific Internet Conference "Computer Graphics and Image Processing" and the XLVIIIth International scientific and Practical Conference "Application of Lasers in Medici Kalimoldayev ebook All Chapters PDF
52 pages
Account Information : Required
No ratings yet
Account Information : Required
3 pages
Federal Security Agency, Inc.: A. Administration
No ratings yet
Federal Security Agency, Inc.: A. Administration
7 pages
Change-Point Detection in Time Series Data by Relative Density-Ratio Estimation
No ratings yet
Change-Point Detection in Time Series Data by Relative Density-Ratio Estimation
12 pages
IMAC XV 15th Int 15-5-3 The MAC Revisited Updated
No ratings yet
IMAC XV 15th Int 15-5-3 The MAC Revisited Updated
8 pages
Stepper Motors
No ratings yet
Stepper Motors
49 pages
Eng Ind CS Bangalore Mall PDF
No ratings yet
Eng Ind CS Bangalore Mall PDF
4 pages
TWIX-1 Datasheet
No ratings yet
TWIX-1 Datasheet
2 pages
SESSION: Business Processes and Enterprise Applications: Amjad Umar
No ratings yet
SESSION: Business Processes and Enterprise Applications: Amjad Umar
31 pages
BASIC ELECTRONICS 21ELN14-24 - NOTES (All MODULES) 2021-22
No ratings yet
BASIC ELECTRONICS 21ELN14-24 - NOTES (All MODULES) 2021-22
154 pages
ZAKAT DAN PUASA-WPS Office
No ratings yet
ZAKAT DAN PUASA-WPS Office
21 pages
minors4proj_1
No ratings yet
minors4proj_1
13 pages
MM in SAP PDF
No ratings yet
MM in SAP PDF
64 pages
Lab6
No ratings yet
Lab6
10 pages
Report Sharad Argawal
No ratings yet
Report Sharad Argawal
32 pages
DL syllabus 3164601
No ratings yet
DL syllabus 3164601
4 pages
ELS 08 September 2021
No ratings yet
ELS 08 September 2021
11 pages
Sidhu - Understanding of Facts - Outsource (Final)
No ratings yet
Sidhu - Understanding of Facts - Outsource (Final)
16 pages
Applied Business Tools and Technology Syllabus
No ratings yet
Applied Business Tools and Technology Syllabus
14 pages
Creates A Phone Application
No ratings yet
Creates A Phone Application
11 pages
Artes Visuales I
No ratings yet
Artes Visuales I
130 pages
NetSafe Kit For ECE
No ratings yet
NetSafe Kit For ECE
42 pages
EMPOWERMENT TECHNOLOGY 1-2
No ratings yet
EMPOWERMENT TECHNOLOGY 1-2
17 pages
Rotation Direction Discriminator 1-Channel MS23-R
No ratings yet
Rotation Direction Discriminator 1-Channel MS23-R
2 pages
Force10 s4048 On Setup Guide en Us
No ratings yet
Force10 s4048 On Setup Guide en Us
43 pages
Fpga Timeline & Applications: Fpgas Past, Present & Future
No ratings yet
Fpga Timeline & Applications: Fpgas Past, Present & Future
39 pages