CSS For Bold and Italic texts

<!DOCTYPE html> <html> <head> <style> p { font-weight: bold; } p1 { font-style: italic; } </style> </head> <body> <p>This is my bold text.</p> <p1>This is an italic text.</p1> </body> </html>

Write texts on an image in html

<!DOCTYPE html> <html> <head> <style> .text-image { margin: 5%; position: relative; color: #03fc5a; } img { width: 100%; max-width: 100%; height: auto; min-height: 100%; } .top-left { position: absolute; top: 5%; left: 5%; } .center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .bottom-left { position: absolute; bottom: 5%; left: 5%; } .top-right { position: absolute; top: 5%; right: 5%; } .bottom-right { position: absolute; bottom: 5%; right: 5%; } </style> </head> <body> <div class="text-image"> <a href="https://v815.blogspot.com" target="_blank"><img src="https://i.ytimg.com/vi/GOhcAuQbGJE/maxresdefault.jpg"/></a> <p1 class="top-left">This is our top left text.</p1> <p1 class="center">This is our center text.</p1> <p1 class="bottom-left">This is our bottom left text.</p1> <p1 class="top-right">This is our top right text.</p1> <p1 class="bottom-right">This is our bottom right text.</p1> </div> </body> </html>

Hover & Hover Link in HTML

<html> <title>HTML Class</title> <head> <style> .blink { background-color: green; color: #08f8fc; font-size: 33px; width: 380px; height: 100px; cursor: pointer; text-align: center; display: table-cell; vertical-align: middle; border-radius: 55px; } .blink:hover { background-color: red; color: blue; font-size: 40px; } .all { margin-left: auto; margin-top: auto; } </style> </head> <body> <div class="all"> <a href="https://v815.blogspot.com/2021/05/hover-hover-link-in-html.html" target="_blank"><div class="blink">CSS for Hover</div></a> </div> </body> <footer> </footer> </html>

CSS for an Oval Shape

<html> <title>HTML Class</title> <head> <style> .egg { border: 5px solid #4cf58f; height: 200px; width: 300px; border-radius: 50%; background-color: #4cc2f5; margin-left: 100px; } </style> </head> <body> <h2>CSS for an oval shape</h2> <div class="egg"></div> </body> <footer> </footer> </html>

strong tag & em tags

<html> <title>HTML Class</title> <head> <style></style> </head> <body> <p>The <strong> element is used when the content has strong importance. By default, the web browsers show the <strong> tag in bold.</p> <strong>This is very important!</strong> <p> <strong>Be Alert!</strong> VIP may visit at any time. </p><br/> <p>The <em> tag defines the emphasized text that subtly changes the meaning of content. By default, the browser shows the <em> tag in italic.</p> <p> We are the <em>first</em> people to reach here. </p> <p> We are the first people to reach <em>here</em>. </p> <p> <em>We</em> are the first people to reach here. </p> </body> <footer></footer> </html>

Code For A Blogger's Search Bar

<style> #whole-search-bar { padding:10px; text-align: center; } #search-input { -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border:1px solid #34ebc0; background:#ffffff; padding:5px; color:#888888; font:14px verdana; width: 78%; } #submit-button { border:1px solid #111111; background: #111111; padding:5px; color:#ffffff; font:14px verdana; } </style> <form action='/search/max-results=8' method='get' id="whole-search-bar"> <input name='q' id='search-input' onblur='if (this.value == "") {this.value = "You can search here...";}' onfocus='if (this.value == "You can search here...") {this.value = ""}' type='text' value='You can search here...'/> <input id='submit-button' type='submit' value='Search'/> </form>

Result: _⮯

CSS For Circle

<!DOCTYPE html> <html> <title>Circle</title> <head> <style> .circle { height: 300px; width: 300px; background: #00fc7e; border-radius: 50%; margin-top: 250px; margin-left: 250px; } </style> </head> <body> <div class="circle"></div> </body> </html>

CSS For An HTML Triangle

You can use the code below to create a Triangle in an HTML coding.
<!DOCTYPE html> <html> <title>My Triangle</title> <head> <style> .triangle { border-bottom: 200px solid #ff00ea; border-left: 115px solid transparent; border-right: 115px solid transparent; width: 0; margin-top: 100px; margin-left: 300px; } </style> </head> <body> <div class="triangle"></div> </body> </html>