<html>
<body style="background-color:powderblue;">
<h1>I was centered using < style > </h1>
<!--Centering a solo line-->
<p style="text-align:center">I was centered using text-align:center in the same line!</p>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<!--With this code every h1, p or div gets aligned to the center-->
<style>
h1 {
text-align: center;
}
p {
text-align: center;
}
</style>
<!--Centering a solo line-->
<p style="text-align:center">Center this text!</p>
<h6 style="text-align:center">This is heading 6</h6>
<!--IMAGES-->
<h2>HTML Image on pc in folder (offline)</h2>
<img src="images\300px-Sboperationkp_mrkrabsmodel.png" alt="Test" width="500" height="333">
<h2>Url Image from an online source (online)</h2>
<img src="https://pngimage.net/wp-content/uploads/2018/06/noragami-yato-png-2.png" alt="RandomLink">
<!--IMAGES-->
<!--CSS STYLING OF AN BUTTON-->
<style>
.button {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
text-align: center;
transform: translate(700px,150px);
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
.button2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
text-align: center;
transform: translate(950px,150px);
}
.button2:hover {
background-color: #008CBA;
color: white;
}
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
-ms-transform: translate(50px,100px); /* IE 9 */
transform: translate(50px,100px); /* Standard syntax */
text-align: center;
}
</style>
<div>Whats going on</div>
<h1>The button element - Styled with CSS</h1>
<p>Use the :hover selector to change the style of the button when you move the mouse over it.</p>
<p><strong>Tip:</strong> Use the transition-duration property to determine the speed of the "hover" effect:</p>
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
</body>
</html>