External CSS Examples in CSS

Definition : It is a process of writing css code outside the webpage then it is called as external css. Program : <html> <link rel=”stylesheet” href=”a.css”/> <body>                                 <p>HELLO</p>  <p class=”First Second”>HI</p>  <p>A</p>  <p class=”Second” style=”color:white;”>B</p>  <p>C</p>                                 </body> </html>                              

Inline CSS Examples in CSS

Definition: It is a process of writing css code within the html tags then it is called as inline css. Program : <html> <style type=”text/css”> .First { color:red; } .Second { background-color:green; } </style><body>                                <p>HELLO</p>  <p class=”First Second”>HI</p>  <p>A</p>  <p class=”Second” style=”color:white;”>B</p>  <p>C</p>                                 </body> </html>                              

Awesome Icons Examples in CSS

Definition : Awesome icons are a class as well as set of classes which are available for displaying the icons on the webpage. Program : <html> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/ libs/font-awesome/4.7.0/css/font-awesome.min.css”>                                 <body>  <ul>  <i class=”fa fa-car” aria-hidden=”true”>A</i>  <i class=”fa fa-car fa-2x” aria-hidden=”true”>B</i>  <i class=”fa fa-car fa-3x” aria-hidden=”true”>C</i>  <i class=”fa fa-car” …

3D Animation Examples in CSS

Program : <html> <style type=”text/css”> div { margin-left:100px; width:100px; height:100px; font-size:25px;  border:1px solid red;  background-color:green;   transform:rotateY(180deg);    transform:rotateZ(180deg);     transform:rotateX(180deg); } </style>                                 <body> <div>HELLO</div>                                           </body> </html>                              

Skew Examples in CSS

Definition : It will tight and bend cross the container. Program : <html>      <style type=”text/css”>                      div                                  {                                  margin-left: 100px;                                  width: 100px;                                  height: 100px;                                  font-size: 25px;                                  border: 1px solid red;                                  background-color: green;                                  transform: skew(20deg, 10deg);                                  }                 </style>                 …

Scale Examples in CSS

Definition : The scale() function defines a transformation that resizes an element on the 2d place because the amount of scaling is defined by a vector it can resize the horizontal and vertical dimensions at a different scales. Program : <html>      <style type=”text/css”>                      div                                  {                                 …

2D Animations Examples in CSS

Definition : These are the animations which are meant for performing operations based on the dimensions and directions provided within the animations. Program 1 : <html>      <style type=”text/css”>                      div                                  {                                  margin-top: 100px;                                  width: 100px;                                  height: 100px;                                  font-size: 25px;                                  border: 1px solid …

Borders Examples in CSS

Definition : Which is meant for when we have to give the background color to the content. Program : <html>      <style type=”text/css”>                      div                                  {                                  /*                                  border: 5px solid red;                                  border: 5px dashed red;                                  border: 5px dotted red;                                  border: 5px none red; …

Background Examples in CSS

Definition : Which is meant for when we have to give the background color to the content. Program : <html> <style type=”text/css”> div {  background:#ff00aa url(“unnamed.jpg”) no-repeat right top;  width:500px;  border:5px;  height:500px; } </style>                                 <body> <div>HELLO</div>                                           </body> </html>                              

Keyframes Examples in CSS

Definition : It means change the background color to the operation using animations. Program 1 : <html>      <style type=”text/css”>                     @keyframes ex                                 {                                 from {background-color: red;}                                 to {background-color: green}                                 }                                 div                                 {                                 width: 100px;                                 height: 100px;                                 background-color: red;                                 …