Scribd
Upload
833 views

CSS Tutorial in Hindi

The document discusses topics in CSS including pseudo classes, borders, and box model. Pseudo classes allow adding styles to elements based on their state like :hover or :active. CSS border properties control the width, style, color, and radius of element borders. The box model represents HTML elements as boxes that include content, padding, border, and margin edges that can be styled individually.

Uploaded by

Ramnath Ray Yadav
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
833 views

CSS Tutorial in Hindi

The document discusses topics in CSS including pseudo classes, borders, and box model. Pseudo classes allow adding styles to elements based on their state like :hover or :active. CSS border properties control the width, style, color, and radius of element borders. The box model represents HTML elements as boxes that include content, padding, border, and margin edges that can be styled individually.

Uploaded by

Ramnath Ray Yadav
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

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

You might also like