Krishna Verma

Add Border Left

Program Info

Program Code

Add Border Left

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  border-left: 5px solid red;
}

h2 {
  border-left: 4px dotted blue;
}

div {
  border-left: double;
}
</style>
</head>
<body>

<h1>A heading with a solid red left border</h1>

<h2>A heading with a dotted blue left border</h2>

<div>A div element with a double left border.</div>

</body>
</html>

Add Bottom Tooltip

Program Info

Program Code

Download Program

Add Bottom Tooltip

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Bottom Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Add Box Shadow

Program Info

Program Code

Download Program

Add Box Shadow

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px;
}

#example2 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px #888888;
}

#example3 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px red;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>
<p>The box-shadow property defines the shadow of an element:</p>

<h2>box-shadow: 5px 10px:</h2>
<div id="example1">
  <p>A div element with a shadow. The first value is the horizontal offset and the second value is the vertical offset. The shadow color will be inherited from the text color.</p>
</div>

<h2>box-shadow: 5px 10px #888888:</h2>
<div id="example2">
  <p>You can also define the color of the shadow. Here the shadow color is grey.</p>
</div>

<h2>box-shadow: 5px 10px red:</h2>
<div id="example3">
  <p>A red shadow.</p>
</div>

</body>
</html>

Create an Button

Program Info

Program Code

Download Program

Create an Button

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
</head>
<body>

<h2>CSS Buttons</h2>

<button>Default Button</button>
<a href="#" class="button">Link Button</a>
<button class="button">Button</button>
<input type="button" class="button" value="Input Button">

</body>
</html>

Change Font Size of Text

Program Info

Program Code

Download Program

Change Font Size of Text

<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
  border: 1px solid black;
  width: 400px;
  height: 100px;
  animation: mymove 5s infinite;
}

@keyframes mymove {
  50% {font-size: 40px;}
}
</style>
</head>
<body>

<h1>Animation of font-size</h1>

<p>Gradually change the font-size of the text:<p>
<div id="myDIV">
  <p>This is a paragraph</p>
</div>

</body>
</html>

Set Background Color

Program Info

Program Code

Download Program

Set Background Color

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>

</body>
</html>