Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
26 views

Simple HTML For Bloggers

The document contains code snippets for different HTML elements and CSS styles including: highlighting text with grey background and white text; creating a blinking text effect with opacity; displaying static circles; centering a button horizontally and vertically; creating an unstyled bullet list; adding square bullets without color; and displaying a basic table with questions and answers.

Uploaded by

Hareesh K V
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
26 views

Simple HTML For Bloggers

The document contains code snippets for different HTML elements and CSS styles including: highlighting text with grey background and white text; creating a blinking text effect with opacity; displaying static circles; centering a button horizontally and vertically; creating an unstyled bullet list; adding square bullets without color; and displaying a basic table with questions and answers.

Uploaded by

Hareesh K V
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

BELOW CODE IS FOR HIGHLIGHTING EFFECT

<!DOCTYPE html>
<html>
<body>

<div style="background-color:grey;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history
going back to its founding by the Romans, who named it Londinium.</p>
</div>

</body>
</html>
BELOW CODE IS FOR BLINKING EFFECT
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blink {
animation: blinker 1.5s linear infinite;
color: #1c87c9;
font-size: 30px;
font-weight: bold;
font-family: sans-serif;
}
@keyframes blinker {
50% { opacity: 0; }
}
.blink-one {
animation: blinker-one 1s linear infinite;
}
@keyframes blinker-one {
0% { opacity: 0; }
}
.blink-two {
animation: blinker-two 1.4s linear infinite;
}
@keyframes blinker-two {
100% { opacity: 0; }
}
</style>
</head>
<body>
<p class="blink">Blinking text</p>
<p class="blink blink-one">CSS blinking effect for opacity starting with 0%</p>
<p class="blink blink-two">CSS blinking effect for opacity starting with 100%</p>
</body>
</html>

Simple Button

<button type="button">Click Me!</button>
BELOW CODE IS FOR BLINKING EFFECT ONE LINE
ONLY
<style>
.blink {
animation: blinker 1.5s linear infinite;
color: #1c87c9;
font-size: 30px;
font-weight: bold;
font-family: sans-serif;
}
@keyframes blinker {
50% { opacity: 0; }
</style>
<p class="blink">Blinking text</p>
BELOW CODE IS FOR BLINKING EFFECT WITH
BUTTON
<style>
.blink {
animation: blinker 1.5s linear infinite;
color: #1c87c9;
font-size: 16px;
font-weight: bold;
font-family: sans-serif;
}
@keyframes blinker {
50% { opacity: 0; }
</style>
<BUTTON <p class="blink">CLICK HERE</p> </button>
BELOW CODE IS FOR SHOWING STATIC CIRCLES
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dot {
height: 25px;
width: 25px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
</style>
</head>
<body>

<div style="text-align:center">
<h1>Round Dots / Circles</h1>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>

</body>
</html>
BELOW CODE IS FOR CENTERED HORIZONTALLY
AND VERTICALLY BUTTON
<!DOCTYPE html>
<html>
<head>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;

}
</style>
</head>
<body>

<div class="center">
<button>Centered Button</button>
</div>

</body>
</html>
BULLETS WITHOUT COLOUR
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Table

<table>
<tr>
<td>question 1</td>
<td>answer 1</td>
</tr>
<tr>
<td>question 2</td>
<td>answer 2</td>
</tr>
</table>

You might also like