- Get link
- Other Apps
Css components with explanation -
NOTE - for more about this go to our youtube channel link
1. Color in css -
it is predefined value in css where we set color through name, RGB code etc you can change color in border , background , font color etc
syntax -
color: red;
code -
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>color in css</title>
<style>
.color1{
color: red;
}
.color2{
background-color: blue;
}
.color3{
border: 2px solid red;
}
</style>
</head>
<body>
<!-- lets take paragarph -->
<p class="color1">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos, ex obcaecati. Culpa nulla molestias consectetur maiores quia atque quas aliquid, quaerat quis. Culpa consequatur blanditiis aut dignissimos facere. Suscipit, non.
</p>
<p class="color2">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos, ex obcaecati. Culpa nulla molestias consectetur maiores quia atque quas aliquid, quaerat quis. Culpa consequatur blanditiis aut dignissimos facere. Suscipit, non.
</p>
<p class="color3">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos, ex obcaecati. Culpa nulla molestias consectetur maiores quia atque quas aliquid, quaerat quis. Culpa consequatur blanditiis aut dignissimos facere. Suscipit, non.
</p>
</body>
</html>
Live server -
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos, ex obcaecati. Culpa nulla molestias consectetur maiores quia atque quas aliquid, quaerat quis. Culpa consequatur blanditiis aut dignissimos facere. Suscipit, non.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos, ex obcaecati. Culpa nulla molestias consectetur maiores quia atque quas aliquid, quaerat quis. Culpa consequatur blanditiis aut dignissimos facere. Suscipit, non.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos, ex obcaecati. Culpa nulla molestias consectetur maiores quia atque quas aliquid, quaerat quis. Culpa consequatur blanditiis aut dignissimos facere. Suscipit, non.
2. Border property in css -
In this property you make a border on the element with the help of specify width heigth.
Syntax -
border : 2px solid red ;
border-radius : the meaning is it make curve on the edges.
code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border property </title>
<style>
/* Border property */
.container1{
border: 2px solid black;
}
.container2{
border: 2px solid black;
border-radius: 23px;
}
.container3{
/* we can do this with bottom and right and left */
border-top: 2px solid red ;
}
</style>
</head>
<body>
<p class="container1">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi, necessitatibus? Libero rerum illo autem culpa. Doloribus eveniet reprehenderit autem iure quidem nesciunt id, provident dignissimos est voluptate. Vel, eius maiores.</p>
<p class="container2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi, necessitatibus? Libero rerum illo autem culpa. Doloribus eveniet reprehenderit autem iure quidem nesciunt id, provident dignissimos est voluptate. Vel, eius maiores.</p>
<p class="container3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi, necessitatibus? Libero rerum illo autem culpa. Doloribus eveniet reprehenderit autem iure quidem nesciunt id, provident dignissimos est voluptate. Vel, eius maiores.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border property </title>
<style>
/* Border property */
.container1{
border: 2px solid black;
}
.container2{
border: 2px solid black;
border-radius: 23px;
}
.container3{
/* we can do this with bottom and right and left */
border-top: 2px solid red ;
}
</style>
</head>
<body>
<p class="container1">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi, necessitatibus? Libero rerum illo autem culpa. Doloribus eveniet reprehenderit autem iure quidem nesciunt id, provident dignissimos est voluptate. Vel, eius maiores.</p>
<p class="container2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi, necessitatibus? Libero rerum illo autem culpa. Doloribus eveniet reprehenderit autem iure quidem nesciunt id, provident dignissimos est voluptate. Vel, eius maiores.</p>
<p class="container3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi, necessitatibus? Libero rerum illo autem culpa. Doloribus eveniet reprehenderit autem iure quidem nesciunt id, provident dignissimos est voluptate. Vel, eius maiores.</p>
</body>
</html>
Online server -
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi, necessitatibus? Libero rerum illo autem culpa. Doloribus eveniet reprehenderit autem iure quidem nesciunt id, provident dignissimos est voluptate. Vel, eius maiores.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi, necessitatibus? Libero rerum illo autem culpa. Doloribus eveniet reprehenderit autem iure quidem nesciunt id, provident dignissimos est voluptate. Vel, eius maiores.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi, necessitatibus? Libero rerum illo autem culpa. Doloribus eveniet reprehenderit autem iure quidem nesciunt id, provident dignissimos est voluptate. Vel, eius maiores.
Comments
Post a Comment