CSS TUTORIAL IN HINDI
Agenda
1 Pseudo Classes
2 CSS Border
3 CSS Box Model
4 CSS Project
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Pseudo classes
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Pseudo classes
CSS pseudo-classes
A pseudo-class can be defined as a keyword which is combined to a selector that defines the special state of the
selected elements. It is added to the selector for adding an effect to the existing elements based on their states.
Syntax
A pseudo-class starts with a colon (:). Let's see its syntax.
selector: pseudo-class {
property: value;
}
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Pseudo classes
Pseudo-class
:active - It is used to add style to an active element.
:hover - It adds special effects to an element when the user moves the mouse pointer over the element.
:link - It adds style to the unvisited link.
:visited - It adds style to a visited link.
first-child - It adds special effects to an element, which is the first child of another element.
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Pseudo classes
<style> <body>
body{ <h1>Hello world </h1>
text-align:center; <h2>This is an example of :hover pseudo class</h2>
} <h3>Click the following link to see the effect</h3>
h1:hover{ <a href="https://www.google.com">Click the link</a>
color:red; <a href="https://www.youtube.com">Click the link</a>
} </body>
a:visited{
color: red;
}
a:active{
color: yellow;
}
a:link{
color:green;
}
</style>
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
CSS Border
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
CSS Border
● Helps in setting up the border for HTML elements
● There are 4 properties that can help in setting up of border:
○ Width - sets the width of the border
○ Style - sets the style of border; Eg: solid, dashed etc.
○ Color - sets the color of the border
○ Radius - determines the roundness of the border
● You can set the border for specifically top, right, bottom and left
● We can also club top and bottom together and same goes for left and right
○ Eg: border-width: 2px 5px; sets top and bottom 2px; left and right 5px
● Border can also be set in a single line
○ Eg: border : 2px solid blue;
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
CSS Box Model
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
CSS Box Model
● Every element in CSS can be represented using BOX model
● It helps developer to develop and manipulate the elements
● It consist of 4 edges
○ Content edge - It comprises of the actual content
○ Padding edge - It lies in between content and border edge
○ Border edge - Padding is followed by the border edge
○ Margin edge - It is outside border and controls margin of the element
● Example:
#styled{
border: 2px solid blue;
margin: 5px;
padding: 20px;
content: 50px; }
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
PROJECT
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Thank You
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
