Type of CSS
Type of CSS
CSS Stands for Case Cading Stylesheet. CSS is just collection of designing code, to which we call CSS
properties and we use these CSS properties to design our web content and webpage as per as
requirement.
1. Inline CSS
2. Internal CSS
3. External CSS
Inline CSS: If we use CSS properties with tag, it mean we are using Inline CSS.
Internal CSS: If we use CSS with <head></head>tag using <style></style> tag, It mean we
are using Internal CSS.
1. ID
2. Class
3. Group
4. Name
5. Nth-child
ID: To Perform CSS property with individual tag. Than we use ID. We Define to ID with # symbol.
Example:
<html>
<head>
<style>
#b{color:red}
</style>
</head>
<body>
<h1 id=”b”>Hello Rachit</h1>
</body>
</html>
Class:To perform same CSS properties with multiple tag than we use Class.
Example:
<html>
<head>
<style>
.m{color:blue}
</style>
</head>
<body>
<h1 class=”m”>Hello Rachit</h1>
<h1 class=”m”>Hello Amit</h1>
<h1 class=”m”>How R You Both.?</h1>
</body>
</html>
Name:To perform same css property on all those tags, which are with same name, than we used name
selector.
Example:
<html>
<head>
<style>
h1{
color:red;
}
p{
color:darkgrey;
}
h3{
color:orange;
}
</style>
</head>
<body>
<h1>About My Company</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugiat consequatur doloribus delectus saepe suscipit necessitatibus
repudiandae possimus, minima corrupti et deleniti, eaque amet voluptatem alias. Aliquam illum deserunt accusamus at?</p>
<h3>Services</h3>
<p>1. Web Development</p>
<p>2. SEO</p>
<p>3. Graphic Designing</p>
<h1>Our Clients</h1>
<p>1. Chhavi Enterprises</p>
<p>2. Manav Swajan Foundation</p>
<p>3. Shivansh Icchha Foundation</p>
<p>4. Maa Chemist & Surgicals</p>
<p>5. E-Tendering</p>
</body>
</html>
Group: Group Selector is used as ID but work as class.
Example:
<html>
<head>
<style>
#v{background-color:red}
#v h1{color:white}
</style>
</head>
<body>
<div id=”v”>
<h1>Hello Rachit</h1>
</div>
</body>
</html>
Nth-Child: if we have to differentiate a tag with different property. But It is used with class, than we
will used nth-child selector to differentiate that tag.
Syntax:
.class-name:nth-child(tag-position)
{
Property-name:value;
}
Universal Selector: if we want to use same property all tag of body tag, than we will use universal
selector.
Syntax:
*{
Property-name:value;
}
External CSS: In this type of css, we used all css code in an addition file which will save with (.css).
To Link that external css in html page we will used link tag.
Syntax: <link type=”text/css” rel=”stylesheet” href=”filename.css”/>
CSS Properties Are Used For
1. Text
2. Font
3. List
4. Border
5. Space
6. Other
1. Text-decoration
2. Text-decoration-style
3. Text-decoration-color
4. Text-align
5. Text-shadow
6. Text-indent
7. Text-transform
8. Text-direction
Text-decoration: To show underline, overline, middileline we use text-decoration.
<html>
<head>
<style>
#b{text-decoration:underline}
</style>
</head>
<body>
</body>
</html>
Text-decoration-style: We use this property to show underline, overline, middle line
with different style.
<html>
<head>
<style>
#b{text-decoration:double}
</style>
</head>
<body>
</body>
</html>
Text-decoration-color: To set text decoration color, we used this property.
Syntax: text-decoration-color:color-name;
<html>
<head>
<style>
#b{
Text-decoration:underline;
Text-decoration-color:red;
text-decoration-style:double}
</style>
</head>
<body>
</body>
</html>
Text-align: To shift text content at specific place such as left, right, center we use
text-align property. We also use text-align to justify our text content.
<html>
<head>
<style>
#b{text-align:center}
</style>
</head>
<body>
</body>
</html>
Text-shadow: To show shadow with text content we use text-shadow.
<html>
<head>
<style>
</style>
</head>
<body>
</body>
</html>
Text-indent: To shift text content from left to right. We just text content only not tag.
We use Text-indent.
Syntax: text-indent:200px;
<html>
<head>
<style>
#b(text-indent:200px}
</style>
</head>
<body>
</body>
</html>
Text-transform: To show text content in upper case, lower case or in capital form we
use text-transform.
<html>
<head>
<style>
#b{text-transform: capitalize}
</style>
</head>
<body>
</body>
</html>
Text-Direction: We use to change the direction of text content.
<html>
<head>
<style>
#g{direction:rtl;}
</style>
</head>
<body>
</body>
</html
CSS use for font
1. Font-size
2. Font-style
3. Font-family
4. Font-variant
5. Font-weight
Font-size: To increase font size of any text content, we use this property.
Syntax: font-size:30px/em;
<html>
<head>
<style>
#g{font-size:50px}
</style>
</head>
<body>
</body>
</html>
Font-family: To change font type of text content.
<html>
<head>
<style>
#g{font-family:jokerman}
</style>
</head>
<body>
</body>
</html>
Font-variant: To show all letters of any text content capital letter.
<html>
<head>
<style>
#g{font-variant:small-caps}
</style>
</head>
<body>
</body>
</html>
Font-style: To show text content as italic.
Syntax: font-style:italic;
<html>
<head>
<style>
#g{font-style:italic}
</style>
</head>
<body>
</body>
</html>
Font-weight: To show text content as bold.
Syntax: font-weight:bold;
<html>
<head>
<style>
#g{font-weight:bold}
</style>
</head>
<body>
</body>
</html>
CSS Use for List
1. List-style-type
2. List-style-image
3. List-style-position
Syntax: list-style-type:circle|disc|square|decimal|none;
<html>
<head>
<style>
#g{list-style-type:square}
</style>
</head>
<body>
<ul id=”g”>
<li>Rachit</li>
<li>Kumar</li>
</ul>
</body>
</html>
<html>
<head>
<style>
#g{list-style-image:url(‘img.jpg’);}
</style>
</head>
<body>
<ul id=”g”>
<li>Rachit</li>
<li>Kumar</li>
</ul>
</body>
</html>
List-style-position: To change list position.
Syntax: list-style-position:outside|inside;
<html>
<head>
<style>
#g{list-style-position:outside}
</style>
</head>
<body>
<ul id=”g”>
<li>Rachit</li>
<li>Kumar</li>
</ul>
</body>
</html>
CSS Use for Border
Border-style
Border-left-style
Border-right-style
Border-top-style
Border-bottom-style
Border-color
Border-left-color
Border-right-color
Border-top-color
Border-bottom-color
Border-radius
Box-shadow
Example:
<html>
<head>
<style>
#b{border-style:groove;}
</style>
</head>
<body>
<h1 id=”b”>Hi, This is example of border-style property.</h1>
</body>
</html>
Border-left-color: To change color of border for any tag in left direction, we use this
property.
Syntax: border-left-color:color-name;
Example:
<html>
<head>
<style>
#b{border-bottom-style:groove;
border-left-color:red;
}
</style>
</head>
<body>
<h1 id=”b”>Hi, This is example of border-left-color property.</h1>
</body>
</html>
Border-right-color: To change color of border for any tag in right direction, we use
this property.
Syntax: border-left-color:color-name;
Example:
<html>
<head>
<style>
#b{border-bottom-style:groove;
border-right-color:red;
}
</style>
</head>
<body>
<h1 id=”b”>Hi, This is example of border-right-color property.</h1>
</body>
</html>
Border-left-color: To change color of border for any tag in top direction, we use this
property.
Syntax: border-left-color:color-name;
Example:
<html>
<head>
<style>
#b{border-bottom-style:groove;
border-top-color:red;
}
</style>
</head>
<body>
<h1 id=”b”>Hi, This is example of border-top-color property.</h1>
</body>
</html>
Border-left-color: To change color of border for any tag in bottom direction, we use
this property.
Syntax: border-left-color:color-name;
Example:
<html>
<head>
<style>
#b{border-bottom-style:groove;
border-bottom-color:red;
}
</style>
</head>
<body>
<h1 id=”b”>Hi, This is example of border-bottom-color property.</h1>
</body>
</html>
Margin
Margin-left
Margin-right
Margin-top
Margin-bottom
Padding
Padding-left
Padding-right
Padding-top
Padding-bottom
Float
Letter-spacing
Word-spacing
Line-height
Margin-left: To shift tag from left to right, we use this property.
Syntax: margin-left:value(px/percentage);
Example:
<html>
<head>
<style>
#b{margin-left:20px;
}
</style>
</head>
<body>
<h1 id=”b”>Hi, You Are Learning CSS In Infority IT Services.</h1>
</body>
</html>
Padding: This property all four direction value in it for content shifting.
Syntax: padding: Top-value Right-value Bottom-value Left-value;
Example:
<html>
<head>
<style>
#b{padding: 20px 0px 0px 20px;
}
</style>
</head>
<body>
<h1 id=”b”>Hi, You Are Learning CSS In Infority IT Services.</h1>
</body>
</html>
Float: This property is used to perform floating.
Syntax: float: left/right;
Example:
<html>
<head>
<style>
.f{
height:200px;
width:50%;
background-color:red;
float:left;
}
</style>
</head>
<body>
<div class=”f”></div>
<div class=”f”></div>
</body>
</html>
Line-height: This property is used to provide space between each line of paragraph.
Syntax: line-height:value(px);
Example:
<html>
<head>
<style>
#b{line-height:5px;
}
</style>
</head>
<body>
<h1 id=”b”>Hi, You Are Learning CSS In Infority IT Services.</h1>
</body>
</html>
CSS Use for Color
Color
Height
Width
Background-color
Background-image
Background-repeat
Background-size
Background-position
Background-attachment
Background-origin
Background-bland-mode
Display
Position
Opacity
Filter
Resize
Cursor
Overflow
Outline
Clear
Visibility
Important
Nth selector
Hover
Transition
Color: To show color of any text tag, we used this property.
Syntax: color:color-name;
Example:
Example:
<html>
<head>
<style>
#b{color:red;
}
</style>
</head>
<body>
<h1 id=”b”>Hi, You Are Learning CSS In Infority IT Services.</h1>
</body>
</html>
</style>
</head>
<body id=”b”>
</body>
</html>
Background-repeat: To set the repetition of background image, we use background-
repeat property.
Syntax: background-repeat:repeat-x/repeat-y/no-repeat.
Example:
<html>
<head>
<style>
#b{background-image:url(dark-size.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body id=”b”>
</body>
</html>
Background-size: To set size of background-image, we used background-size
property.
Syntax:
Background-size:value/cover;
Example:
<html>
<head>
<style>
#b{background-image:url(dark-size.jpg);
Background-size:cover;
}
</style>
</head>
<body id=”b”>
</body>
</html>
Background-position: To set background image position, we used background-
position property.
Syntax: background-position: left/top/bottom/center/right//left top/left bottom/left
center/ right top/ right bottom/ right center/ center top/ center bottom/ center center;
Example:
<html>
<head>
<style>
#b{background-image:url(dark-size.jpg);
Background-position:top;
}
</style>
</head>
<body id=”b”>
</body>
</html>
Background-attachment: To set feature of background-attachment, we used
background attachment property.
Syntax: background-attachment: fixed/scroll.
Example:
<html>
<head>
<style>
#b{background-image:url(dark-size.jpg);
Background-position:top;
}
#n{height:200px;
width:100%;
background-image:url(vi.jpg’);
background-attachment:fixed:
}
</style>
</head>
<body id=”b”>
<div id=”n”></div>
</body>
</html>
Background-origin: This property is used to set origin position of background-image.
Syntax: background-origin: padding-box|border-box|content-box|initial|inherit;
Example:
Example:
<html>
<head>
<style>
#b{background-image:url(dark-size.jpg);
Background-position:top;
}
#n{height:200px;
width:100%;
background-image:url(vi.jpg’);
background-origin:padding-box;
}
</style>
</head>
<body id=”b”>
<div id=”n”></div>
</body>
</html>
Background-blend-mode: This property specify blending mode of background.
Syntax: background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-
dodge|saturation|color|luminosity;
Example:
<html>
<head>
<style>
#my {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: lighten;
}
</style>
</head>
<body>
<div id="my"></div>
</body>
</html>
Display: To set display behavior of tag, we used display property.
Syntax: display: inline/block/inline-block/none/flex;
Example:
<html>
<head>
<style>
#nav li{ display:inline;}
</style>
</head>
<body>
<ul id="nav">
<li>
<a href="">Home</a>
</li>
<li>
<a href="">About</a>
</li>
<li>
<a href="">Contact</a>
</li>
<li>
<a href="">Services</a>
</li>
</ul>
</body>
</html>
Position: This property is used to set position of tag. it is basically used to set position
of tag behind the another tag.
Syntax: position: static/absolute/fixed/relative.
Example:
<html>
<head>
<style>
#nav li{ display:inline;}
h2{right:5px; position:fixed;}
</style>
</head>
<body>
<ul id="nav">
<li>
<a href="">Home</a>
</li>
<li>
<a href="">About</a>
</li>
<li>
<a href="">Contact</a>
</li>
<li>
<a href="">Services</a>
</li>
</ul>
<h2>Hello This is my</h2>
</body>
</html>
Opacity: This property is used to specify the transparency of tag.
Syntax: opacity:value;
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#c{background-color: red}
#b{height: 200px;width: 300px; background-color: yellow; opacity: 0.8;}
</style>
</head>
<body id="c">
<div id="b">
</div>
</body>
</html>
Filter: This property is used to apply filter with tag.
Syntax: filter: blue(value)/brightness(value in point)/contrast(value in
percentage)/drop-shadow(horizontal value/vertical value)/grayscale(value in
percentage)/hue-rotate(value in deg)/opacity(value in px);
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#b{height: 200px;width: 300px; background-color: yellow;filter:
blur(5px);
}
</style>
</head>
<body bgcolor="red">
<div id="b">
</div>
</body>
</html>
Resize: This property is used to set and block resize feature in tag.
Syntax: resize:none;
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</textarea>
</body>
</html>
Cursor: This property is used to define about type of mouse cursor.
Syntax:cursor: alias/auto/all-scroll/col-resize/cell/context-menu/default/copy/crosshair/
e-resize/ew-resize/n-resize/ne-resize/move/help/zoome-in/zoom-out.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</textarea>
</body>
</html>
</div>
</body>
</html>
Clear: This property is used to clear floating of previous tag for another tag.
Syntax: clear: both;
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.c{
height: 300px;width: 40%;float: left; background-color: red;
margin-left: 6.5%;
}
.clear{clear: both;}
#d{height: 300px;width: 100%; background-color: blue; margin-
top:5% ;}
</style>
</head>
<body >
<div class="c"></div>
<div class="c"></div>
<div class="clear"></div>
<div id="d"></div>
</body>
</html>
.c{
height: 300px;width: 40%;float: left; background-color: red;
margin-left: 6.5%;
}
.clear{clear: both;}
#d{height: 300px;width: 100%; background-color: blue; margin-top:5% ;
visibility: hidden;}
</style>
</head>
<body >
<div class="c">
</div>
<div class="c"></div>
<div class="clear"></div>
<div id="d"></div>
</body>
</html>
Important: This property in CSS is used to give more importance compare to normal
property. The !important means 'this is important'. This rule provides a way of
making the Cascade in CSS.
If we apply this property to the text, then the priority of that text is higher than other
priorities. It is to be recommended not to use this CSS property into your program until
it is highly required. It is because the more use of this property will cause a lot of
unexpected behavior.
Syntax: !important
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white ;
}
H1 {
color:blue !important;
}
body {
background-color:lightblue !important;
text-align:center;
background-color:yellow;
}
</style>
</head>
<body>
<h1>Hello World.</h1>
<h1> This is an example of <i>!important</i> property.</h1>
<p></p>
</body>
</html>
Nth-child select: To perform some different property in one of tag, who is part of
class. We used nth-child selector.
Syntax: selector:nth-child(tag-position);
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.c{
height: 300px;width: 40%;float: left; background-color: red;
margin-left: 6.5%;
}
.c:nth-child(1)
{
background-color: yellowgreen;
}
</style>
</head>
<body >
<div class="c"></div>
<div class="c"></div>
</body>
</html>
Hover selector: hover selector is for selecting the elements when we move the mouse
on them. It is not only limited to the links. We can use it on almost every HTML
element. To style the link to unvisited pages, we can use the : link selector. To style the
link for visited pages, we can use the : visited selector and to style the active links we
can use the :active selector.
Syntax:
:hover {
css declarations;
}
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#c{
height: 300px;width: 40%;float: left; background-color: red;
margin-left: 6.5%;
}
#c:hover
{
background-color: yellowgreen;
}
</style>
</head>
<body >
<div id="c"></div>
</body>
</html>
Transition: Transitions are effects that are added to change the element gradually
from one style to another, without using flash or JavaScript.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#c{
height: 300px;width: 40%;float: left; background-color: red;
margin-left: 6.5%;
}
#c:hover
{
background-color: lightgreen;
transition: 3s;
}
</style>
</head>
<body >
<div id="c">
</div
</body>
</html>
Advance
Animation
key frames rule
Pseudo-classes
Pseudo-elements
Radial-gradient
Translate
Gradient
z-index
minify
Loader
units
Combinators
masking
Transition
Tooltips
Arrow
FlexBox
flex property
flex-basis property
flex-grow property
flex-shrink property
flex-flow property
@Media Query
2D Transforms
3D Transforms
Aural Media
User Interface
Pagination