1) Elements
2) ID
3) Class
4) Universal
5) Grouping
1) The element selector
p{
text-align: center;
color: mediumorchid;
}
2) The CSS ID selector
#para1{
text-align: center;
color: mediumorchid;
}
3) CSS Class selector
.center{
text-align: center;
color: red;
}
p.center{
text-align: center;
color: red;
}
p.center{
text-align: center;
color: red;
}
p.large{
font-size: 250%;
}
4) CSS universal Selector
*{
text-align: center;
color: tomato;
}
5) CSS grouping Selector
h1,h2,p{
text-align: center;
color: tomato;
}
body{
background: white url("https://ic1.maxabout.us/autos/tw_india//2/2021/2/2021-yamaha-r1m.jpg");
background-repeat: no-repeat;
background-attachment:fixed;
background-size: 750px;
background-position:center;
background-origin: content-box;
}
CSS borders
The css border properties are used to specify the
style, color, and size of the border of an element.
1) border style
2) border color
3) border width
4) border radius
1) border style
p.none{border-style: none;}
p.dotted{border-style: dotted;}
p.dashed{border-style: dashed;}
p.solid{border-style: solid;}
p.double{border-style: double;}
p.groove{border-style: groove;}
p.ridge{border-style: ridge;}
p.inset{border-style: inset;}
p.outset{border-style: outset;}
p.hidden{border-style: hidden;}
Css border width
p.one{
border-style: solid;
border-width:5px;
}
p.two{
border-style: solid;
border-width:medium;
}
p.three{
border-style: solid;
border-width: 1px;
}
Css Border-color
1) name
2) RGB
3) Hex
p.one{
border-style: solid;
border-color: red;
}
p.two{
border-style: groove;
border-color: #98bf21;
}
Css border radius property
This css property sets the rounded borders and
provides the rounded corners around an element,
tags or div.
1) border top left radius
2) border top right radius
3) border bottom left radius
4) border bottom right radius
1) if we provide single value(border radius: 30px) to this property, it will set all
corners to the same value.
2) when we specify two values (border-radius: 20% 10%) then the first value will be
used for the top left and bottom right corners and the second value will be used for
the top right and bottom left corners.
3) when we use three values(border radius: 10% 30% 20%) then the first value will
be used for the top left corner, the second value will be applied on top right and
bottom left corners and the third value will be applied to the bottom right corner.
4) similarly when this property has four values(border radius 10% 30% 20% 40%)
then the first value will be radius of top left, the second value will be used for
the top right, the third value will be applied on bottom right and the fourth value
is used for bottom left.
*/
div{
padding: 50px;
margin: 20px;
border: 6px ridge #081591;
width: 350px;
float: left;
height: 200px;
}
p{
font-size: 15px;
}
#one{
border-radius: 90px;
border-color: #f3f702;
}
#two{
border-radius: 25% 10%;
background: #05f7c7;
}
#three{
border-radius: 35px 10em 10%;
background: rgb(253,16,107);
}
#four{
border-radius: 50px 80% 50cm 50em;
background: lime;
}
0 Comments