It is similar to the border but it must be define in all direction of any particular on web page. While border can be define with any direction. Outline is not part of element while border is part of element is knows as Outline Style CSS.
Outline style Property
- Outline-style: solid/ dashed/ dotted;
- Outline-width:15px;
- Outline-color: red;
Shorthand property; outline:red solid 10px;
Outline style
It is use to set the appearance of the outline of an element.
Example
<html>
<head>
<style>
.dotted {
outline-style: dotted;
color: red;
text-align: center;
}
</style>
</head>
<body >
<h1 class="dotted">Outline is not part of element while border is part of element</h1>
</body>
</html>
Outline-width
It is use to specify the width of this outline.
Example
<html>
<head>
<style>
h1 {
border: solid brown 14px;
outline-style: solid;
outline-width: 10px;
text-align: center;
margin-top : 100px;
}
</style>
</head>
<body>
<h1>Outline-width</h1>
</body>
</html>
Outline-color
It is use to sets the outline color of an element.
<html>
<head>
<style>
h1 {
border: solid orange 14px;
outline-style: solid;
outline-color: green;
text-align: center;
margin-top: 25px;
}
</style>
</head>
<body>
<h1>outline-color</h1>
</body>
</html>
Pseudo class
This class is use to perform special task / state of particular element on webpage . it must be start with colon(:) sign. The names of the pseudo-class are not case-sensitive.
Syntax
selector : pseudo class
{
property : value ;
----------------------
-----------------------
}
eg :-
a : hover
{
color : green ;
}
NOTE : Hover must come after link pseudo class and visited and active must come after hover in css1.
The most commonly used pseudo-classes
- link pseudo-classes.
- visited pseudo-classes.
- active pseudo-classes.
- hover pseudo-classes.
- focus pseudo-classes.
- first-child pseudo-classes.
- lang pseudo-classes.
Hover pseudo-classes
<html>
<head>
<style>
body{
text-align:center;
}
h1:hover{
color:red;
}
</style>
</head>
<body>
<h1>Hello basic engineer </h1>
</body>
</html>
Active pseudo-classes.
<html>
<head>
<style>
body{
text-align:center;
}
a:active{
color: yellow;
}
h1{
color:red; ;
}
</style>
</head>
<body>
<h1>active pseudo-class</h1>
<a href="#">Click here this link</a>
</body>
</html>
Visited pseudo-classes
<head>
<style>
body{
text-align:center;
}
a:visited{
color: green ;
}
</style>
</head>
<body>
<h1>Visited click</h1>
<a href="#">Click here this link</a>
</body>
</html>
First-child pseudo-classes
<html>
<head>
<style>
h1:first-child {
text-indent: 200px;
color:blue;
}
</style>
</head>
<body>
<div>
<h1>First-child pseudo-class</h1>
<h1>hello basic engineer</h1>
</div>
</body>
</html>
Element of pseudo classes
- First-child selector
- This pseudo class is use to select only the first specifies child of its parent.
- Last-child selector :-
- It is use to select the only last specifies child of its parent.
- Nth-child selector :-
- It is use to select every nth child element.
- Checked selector :-
- This selector is use to style check element as check box and radio button .
- Enabled selector :-
- This selector is use to style all enabled elements.
- Disabled selector :-
- This selector is use to style all disabled element.
- Focus selector :-
- This selector is use to select the element that has focus or selection .
- Required selector :-
- This selector selects form element which are required .
- Optional selector :-
- It is use to select form element which are optional.
- Read-only selector :-
- It is use to select element which are read only.
- Read-write selector :-
- It is use top select form element which are readable.
Syntax
selector::pseudo-element {
property: value;
}
If you have any queries regarding this article or if I have missed something on this topic, please feel free to add in the comment down below for the audience. See you guys in another article.
To know more about CSS please check Wikipedia Click here.
Stay Connected Stay Safe. Thank you.
0 Comments