Type of CSS
Uploaded by
kumarashish543212Type of CSS
Uploaded by
kumarashish543212CSS
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
- E-Notes_2079_Content_Document_20250402084536AMNo ratings yetE-Notes_2079_Content_Document_20250402084536AM38 pages
- Be 5 It Gecbvn Bharatvainsh Unit 4(Css) Wd 3151606 2024No ratings yetBe 5 It Gecbvn Bharatvainsh Unit 4(Css) Wd 3151606 202463 pages
- CSS Tutorial: CSS Example With CSS EditorNo ratings yetCSS Tutorial: CSS Example With CSS Editor39 pages
- Inline CSS:: CSS: Cascading Style SheetNo ratings yetInline CSS:: CSS: Cascading Style Sheet44 pages
- E-Note_28179_Content_Document_20241127094830AMNo ratings yetE-Note_28179_Content_Document_20241127094830AM95 pages
- Cascading Style Sheets (CSS) : The Basics ofNo ratings yetCascading Style Sheets (CSS) : The Basics of64 pages
- CSS Notes Chitkara-till Combinators (2)No ratings yetCSS Notes Chitkara-till Combinators (2)67 pages
- 22 Research Review Meeting - 2022, Jntua, Ananthapuramu List of Journals ReferredNo ratings yet22 Research Review Meeting - 2022, Jntua, Ananthapuramu List of Journals Referred1 page
- Company Profile - Stellant Emporis SDN BHD 2019 PDFNo ratings yetCompany Profile - Stellant Emporis SDN BHD 2019 PDF32 pages
- 21 Series - CSE Curriculum - V SEMESTERNo ratings yet21 Series - CSE Curriculum - V SEMESTER25 pages
- Design of Shell and Tube Type Heat Exchanger Using CFD ToolsNo ratings yetDesign of Shell and Tube Type Heat Exchanger Using CFD Tools4 pages
- Creating and Applying Ip Acls On A Dell Powerconnect 62xx SERIESNo ratings yetCreating and Applying Ip Acls On A Dell Powerconnect 62xx SERIES11 pages
- Scribble Artist - Step-by-Step Guide PDFNo ratings yetScribble Artist - Step-by-Step Guide PDF5 pages
- Basic Electronics, Volumes 1-5, (1955) - Text PDFNo ratings yetBasic Electronics, Volumes 1-5, (1955) - Text PDF570 pages
