0% found this document useful (0 votes)
7 views

Type of CSS

The document discusses different types and properties of CSS including inline CSS, internal CSS, external CSS and various CSS properties for styling text, fonts, lists, borders and more. It provides examples of using different CSS properties like text-decoration, font-size, list-style-type, border-style etc.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
7 views

Type of CSS

The document discusses different types and properties of CSS including inline CSS, internal CSS, external CSS and various CSS properties for styling text, fonts, lists, borders and more. It provides examples of using different CSS properties like text-decoration, font-size, list-style-type, border-style etc.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 60

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.

Type of CSS:There are 3 types of CSS.

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.

For Ex: <h1 style=”color: red”>Hello Rachit</h1>

Internal CSS: If we use CSS with <head></head>tag using <style></style> tag, It mean we
are using Internal CSS.

For using Internal CSS, we use 5 selectors.

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.

We define to Class with dot (.) symbol.

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

CSS Used For Text

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.

Syntax: text-decoration: underline/overline/line-through/none

<html>

<head>

<style>

#b{text-decoration:underline}

</style>

</head>

<body>

<h1 id=”b”>Hello Rachit</h1>

</body>

</html>
Text-decoration-style: We use this property to show underline, overline, middle line
with different style.

Syntax: text-decoration-style: solid|double|dotted|dashed|wavy

<html>

<head>

<style>

#b{text-decoration:double}

</style>

</head>

<body>

<h1 id=”b”>Hello Rachit</h1>

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

<h1 id=”b”>Hello Rachit</h1>

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

Sytan: text-align: left/right/center/justify

<html>

<head>

<style>

#b{text-align:center}

</style>

</head>

<body>

<h1 id=”b”>Hello Rachit</h1>

</body>

</html>
Text-shadow: To show shadow with text content we use text-shadow.

Syntax: text-shadow: 10px 20px 3px red;

<html>

<head>

<style>

#b{text-shadow:2px 2px 2px blue}

</style>

</head>

<body>

<h1 id=”b”>Hello Rachit</h1>

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

<h1 id=”b”>Hello Rachit</h1>

</body>

</html>
Text-transform: To show text content in upper case, lower case or in capital form we
use text-transform.

Syntax: text-transform: uppercase/lowercase/capitalize

<html>

<head>

<style>

#b{text-transform: capitalize}

</style>

</head>

<body>

<h1 id=”b”>Hello Rachit</h1>

</body>

</html>
Text-Direction: We use to change the direction of text content.

Syntax: direction: rtl/ltr;

<html>

<head>

<style>

#g{direction:rtl;}

</style>

</head>

<body>

<p id="g">Hello Rachit</p>

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

<p id="g">Hello Rachit</p>

</body>

</html>
Font-family: To change font type of text content.

Syntax: font-family: times new roman/jokerman/arial.

<html>

<head>

<style>

#g{font-family:jokerman}

</style>

</head>

<body>

<p id="g">Hello Rachit</p>

</body>

</html>
Font-variant: To show all letters of any text content capital letter.

Syntax: font-variant: small-caps;

<html>

<head>

<style>

#g{font-variant:small-caps}

</style>

</head>

<body>

<p id="g">Hello Rachit</p>

</body>

</html>
Font-style: To show text content as italic.

Syntax: font-style:italic;

<html>

<head>

<style>

#g{font-style:italic}

</style>

</head>

<body>

<p id="g">Hello Rachit</p>

</body>

</html>
Font-weight: To show text content as bold.

Syntax: font-weight:bold;

<html>

<head>

<style>

#g{font-weight:bold}

</style>

</head>

<body>

<p id="g">Hello Rachit</p>

</body>

</html>
CSS Use for List

1. List-style-type
2. List-style-image
3. List-style-position

List-style-type: To Change format of list.

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>

List-style-image: To show image as list format.


Syntax: list-style-image:url(‘img.jpg’);

<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

Border-style: This property is used to show border of tag.

Syntax: border-style: groove/double/dotted/dashed/solid

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-style: To show border of tag in left direction, we use this property.


Syntax: border-left-style: groove/double/dashed/dotted/solid
Example:
<html>
<head>
<style>
#b{border-left-style:groove;}
</style>
</head>
<body>
<h1 id=”b”>Hi, This is example of border-style property.</h1>
</body>
</html>

Border-right-style: To show border of tag in right direction, we use this property.


Syntax: border-right-style: groove/double/dashed/dotted/solid
Example:
<html>
<head>
<style>
#b{border-right-style:groove;}
</style>
</head>
<body>
<h1 id=”b”>Hi, This is example of border-style property.</h1>
</body>
</html>
Border-top-style: To show border of tag in top direction, we use this property.
Syntax: border-top-style: groove/double/dashed/dotted/solid
Example:
<html>
<head>
<style>
#b{border-top-style:groove;}
</style>
</head>
<body>
<h1 id=”b”>Hi, This is example of border-style property.</h1>
</body>
</html>

Border-bottom-style: To show border of tag in bottom direction, we use this


property.
Syntax: border-bottom-style: groove/double/dashed/dotted/solid
Example:
<html>
<head>
<style>
#b{border-bottom-style:groove;}
</style>
</head>
<body>
<h1 id=”b”>Hi, This is example of border-style property.</h1>
</body>
</html>
Border-color: To change color of border for any tag, we use this property.
Syntax: border-color:color-name;
Example:
<html>
<head>
<style>
#b{border-bottom-style:groove;
border-color:red;
}
</style>
</head>
<body>
<h1 id=”b”>Hi, This is example of border-color 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>

Box-Shadow: To show shadow of any tag, we use this property.


Syntax: box-shadow: Horizontal Vertical Blur Color;
Example:
<html>
<head>
<style>
#b{ box-shoadow:10px 10px 10px red;
}
</style>
</head>
<body>
<h1 id=”b”>Hi, This is example of Box-shadow property.</h1>
</body>
</html>
Border-Radius: To Show tag in any radius format such as ovel and circle, we use this
property.
Syntax: border-radius: x-value v-value;
Or
Border-radius: x1-value y1-value x2-value y2-value;
Or
Border-radius: value;
Example:
<html>
<head>
<style>
#b{border-bottom-style:groove;
Border-radius:20px 20px;
}
</style>
</head>
<body>
<h1 id=”b”>Hi, This is example of border-radius property.</h1>
</body>
</html>

Border-width: To set border width, we use this property.


Syntax: border-width:value(px);
Example:
<html>
<head>
<style>
#b{border-bottom-style:groove;
Border-width:30px;
}
</style>
</head>
<body>
<h1 id=”b”>Hi, This is example of border-width property.</h1>
</body>
</html>
CSS Use for Space

 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>

Margin-right: To shift tag from right to left, we use this property.


Syntax: margin-right:value(px/percentage);
Example:
<html>
<head>
<style>
#b{margin-right:20px;
}
</style>
</head>
<body>
<h1 id=”b”>Hi, You Are Learning CSS In Infority IT Services.</h1>
</body>
</html>
Margin-top: To shift tag from Top to Bottom, we use this property.
Syntax: margin-top:value(px/percentage);
Example:
<html>
<head>
<style>
#b{margin-top:20px;
}
</style>
</head>
<body>
<h1 id=”b”>Hi, You Are Learning CSS In Infority IT Services.</h1>
</body>
</html>

Margin-bottom: To shift tag from bottom to top, we use this property.


Syntax: margin-bottom:value(px/percentage);
Example:
<html>
<head>
<style>
#b{margin-bottom:20px;
}
</style>
</head>
<body>
<h1 id=”b”>Hi, You Are Learning CSS In Infority IT Services.</h1>
</body>
</html>
Margin: This property all four direction value in it for tag shifting.
Syntax: margin: Top-value Right-value Bottom-value Left-value;
Example:
<html>
<head>
<style>
#b{margin: 20px 0px 0px 20px;
}
</style>
</head>
<body>
<h1 id=”b”>Hi, You Are Learning CSS In Infority IT Services.</h1>
</body>
</html>

Padding-left: To shift content from left to right, we use this property.


Syntax: padding-left:value(px/percentage);
Example:
<html>
<head>
<style>
#b{padding-left:20px;
}
</style>
</head>
<body>
<h1 id=”b”>Hi, You Are Learning CSS In Infority IT Services.</h1>
</body>
</html>
Padding-right: To shift content from right to left, we use this property.
Syntax: padding-right:value(px/percentage);
Example:
<html>
<head>
<style>
#b{Padding-right:20px;
}
</style>
</head>
<body>
<h1 id=”b”>Hi, You Are Learning CSS In Infority IT Services.</h1>
</body>
</html>

Padding-top: To shift Content from Top to Bottom, we use this property.


Syntax: Padding-top:value(px/percentage);
Example:
<html>
<head>
<style>
#b{margin-bottom:20px;
}
</style>
</head>
<body>
<h1 id=”b”>Hi, You Are Learning CSS In Infority IT Services.</h1>
</body>
</html>
Padding-bottom: To shift content from bottom to top, we use this property.
Syntax: padding-bottom:value(px/percentage);
Example:
<html>
<head>
<style>
#b{padding-bottom: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>

Letter-spacing: This property is used to provide space between each letter.


Syntax: letter-spacing:value(px);
Example:
<html>
<head>
<style>
#b{letter-spacing:5px;
}
</style>
</head>
<body>
<h1 id=”b”>Hi, You Are Learning CSS In Infority IT Services.</h1>
</body>
</html>
Word-spacing: This property is used to provide space between each word.
Syntax: word-spacing:value(px);
Example:
<html>
<head>
<style>
#b{word-spacing:5px;
}
</style>
</head>
<body>
<h1 id=”b”>Hi, You Are Learning CSS In Infority IT Services.</h1>
</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>

Height: To set height of tag, we used this property.


Syntax: height:value(px/percentage);
Example:
Example:
<html>
<head>
<style>
#b{height:200px;
}
</style>
</head>
<body>
<div id=”b”></div>
</body>
</html>
Width: To set width of tag, we used this property.
Syntax: width: value(px/percentage);
Example:
Example:
<html>
<head>
<style>
#b{width:200px;
}
</style>
</head>
<body>
<div id=”b”></div>
</body>
</html>

Background-color: To set background-color of tag, we used this property.


Syntax: background-color: color-name;
Example:
Example:
<html>
<head>
<style>
#b{background-color: red;
}
</style>
</head>
<body>
<h1 id=”b”>Hi, You are Learning CSS in Infority It Services…</h1>
</body>
</html>
Background-image: To set image as background image of any tag and page, we
used this property.
Syntax: background-image:url(image-name.extension);
Example:
<html>
<head>
<style>
#b{background-image:url(dark-size.jpg);
}

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

#b{height: 200px;width: 300px; background-color: yellow; resize: none;


}
</style>
</head>
<body bgcolor="red">
<textarea id="b">

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

#b{height: 200px;width: 300px; background-color:red; cursor:auto;


}
</style>
</head>
<body >
<textarea id="b">

</textarea>
</body>
</html>

Overflow: To stop the overflow of any tag, we used overflow property.


Syntax: overflow: visible/hidden/scroll/auto.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">

#b{height: 200px;width: 300px; border: groove; overflow: scroll;


}
</style>
</head>
<body >
<div id="b">
<p>According to consensus in modern genetics anatomically modern
humans first arrived on the Indian subcontinent from Africa between 73,000 and 55,000
years ago.[1] However, the earliest known human remains in South Asia date to 30,000
years ago. Settled life, which involves the transition from foraging to farming and
pastoralism, began in South Asia around 7,000 BCE. At the site of Mehrgarh presence
can be documented of the domestication of wheat and barley, rapidly followed by that
of goats, sheep, and cattle.[2] By 4,500 BCE, settled life had spread more widely,[2]
and began to gradually evolve into the Indus Valley Civilization, an early civilization of
the Old world, which was contemporaneous with Ancient Egypt and Mesopotamia. This
</p>
</div>
</body>
</html>

Outline:It’s a border property. It is used to draw an extra border with tag.


Syntax: outline: border-width border-type color;
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">

#b{height: 200px;width: 300px; border: groove; overflow: scroll; outline:


10px groove red;
}
</style>
</head>
<body >
<div id="b">

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

Visibility: This property is used to set visibility of tag.


Syntax: visibility: hidden/visible;
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% ;
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.

Syntax: trainsition: time(in second)

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

You might also like