Scribd
Upload
3 views

HTML Word Programs

The document contains multiple HTML examples showcasing various CSS styles and layouts, including background colors, text formatting, centered content, button styling, hover effects, and responsive designs. Each example demonstrates a specific feature such as flexbox layout, CSS grid, sticky headers, and tooltips. These snippets serve as practical references for web design and development.

Uploaded by

rajeev1969sharma01
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
3 views

HTML Word Programs

The document contains multiple HTML examples showcasing various CSS styles and layouts, including background colors, text formatting, centered content, button styling, hover effects, and responsive designs. Each example demonstrates a specific feature such as flexbox layout, CSS grid, sticky headers, and tooltips. These snippets serve as practical references for web design and development.

Uploaded by

rajeev1969sharma01
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/ 17

*simple webpage with background color*

<!DOCTYPE html>

<html>

<head>

<style>

Body { background-color: lightblue; }

</style>

</head>

<body>

<h1>Welcome!</h1>

</body>

</html>

*text formatting*

<!DOCTYPE html>

<html>

<head>

<style>

P { color: green; font-size: 18px; font-style: italic; }

</style>

</head>

<body>

<p>This is styled text.</p>

</body>

</html>
*centred content*

<!DOCTYPE html>

<html>

<head>

<style>

Div {

Text-align: center;

Margin-top: 50px;

</style>

</head>

<body>

<div><h2>Centered Heading</h2></div>

</body>

</html>

*button styling*

<!DOCTYPE html>

<html>

<head>

<style>

Button {

Background-color: teal;

Color: white;
Padding: 10px 20px;

Border: none;

</style>

</head>

<body>

<button>Click Me</button>

</body>

</html>

*hover effect*

<!DOCTYPE html>

<html>

<head>

<style>

A:hover { color: red; }

</style>

</head>

<body>

<a href=”#”>Hover over me</a>

</body>

</html>

*box model example*

<!DOCTYPE html>
<html>

<head>

<style>

Div {

Padding: 20px;

Border: 5px solid black;

Margin: 30px;

</style>

</head>

<body>

<div>This is a box.</div>

</body>

</html>

*flexbox layout*

<!DOCTYPE html>

<html>

<head>

<style>

.container {

Display: flex;

Justify-content: space-between;

.box {

Width: 100px;

Height: 100px;

Background-color: orange;

}
</style>

</head>

<body>

<div class=”container”>

<div class=”box”></div>

<div class=”box”></div>

<div class=”box”></div>

</div>

</body>

</html>

*navigation bar*

<!DOCTYPE html>

<html>

<head>

<style>

Ul {

List-style-type: none;

Margin: 0;

Padding: 0;

Background-color: #333;

Li {

Display: inline;

Padding: 10px;

}
Li a {

Color: white;

Text-decoration: none;

</style>

</head>

<body>

<ul>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>About</a></li>

</ul>

</body>

</html>

*gradient background*

<!DOCTYPE html>

<html>

<head>

<style>

Body {

Background: linear-gradient(to right, red, yellow);

</style>

</head>

<body>
<h1>Gradient Background</h1>

</body>

</html>

*Css grid layout*

<!DOCTYPE html>

<html>

<head>

<style>

.grid {

Display: grid;

Grid-template-columns: auto auto;

Gap: 10px;

.item {

Background-color: lightgray;

Padding: 20px;

</style>

</head>

<body>

<div class=”grid”>

<div class=”item”>Box 1</div>

<div class=”item”>Box 2</div>

<div class=”item”>Box 3</div>

<div class=”item”>Box 4</div>

</div>
</body>

</html>

*responsive image*

<!DOCTYPE html>

<html>

<head>

<style>

Img {

Width: 100%;

Max-width: 400px;

Height: auto;

</style>

</head>

<body>

<img src=https://via.placeholder.com/400 alt=”Placeholder Image”>

</body>

</html>

*circle with border*

<!DOCTYPE html>

<html>

<head>

<style>
.circle {

Width: 100px;

Height: 100px;

Background: blue;

Border-radius: 50%;

Border: 5px solid black;

</style>

</head>

<body>

<div class=”circle”></div>

</body>

</html>

*sticky header*

<!DOCTYPE html>

<html>

<head>

<style>

Header {

Position: sticky;

Top: 0;

Background-color: gray;

Color: white;

Padding: 10px;

</style>
</head>

<body>

<header>Sticky Header</header>

<p style=”height:2000px;”>Scroll down to see the sticky effect.</p>

</body>

</html>

*Login from design*

<!DOCTYPE html>

<html>

<head>

<style>

.login {

Width: 300px;

Margin: auto;

Padding: 20px;

Border: 1px solid #ccc;

Border-radius: 10px;

Input {

Width: 100%;

Padding: 8px;

Margin: 10px 0;

</style>

</head>
<body>

<div class=”login”>

<h2>Login</h2>

<input type=”text” placeholder=”Username”>

<input type=”password” placeholder=”Password”>

</div>

</body>

</html>

*card ui*

<!DOCTYPE html>

<html>

<head>

<style>

.card {

Border: 1px solid #ddd;

Border-radius: 8px;

Padding: 16px;

Width: 200px;

Box-shadow: 2px 2px 5px gray;

</style>

</head>

<body>

<div class=”card”>

<h3>Card Title</h3>

<p>This is a simple card.</p>

</div>
</body>

</html>

*animated loader*

<!DOCTYPE html>

<html>

<head>

<style>

.loader {

Border: 8px solid #f3f3f3;

Border-top: 8px solid #333;

Border-radius: 50%;

Width: 50px;

Height: 50px;

Animation: spin 1s linear infinite;

Margin: auto;

@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

</style>

</head>

<body>

<div class=”loader”></div>

</body>
</html>

*tooltip on hover*

<!DOCTYPE html>

<html>

<head>

<style>

.tooltip {

Position: relative;

Display: inline-block;

.tooltip .tip {

Visibility: hidden;

Background-color: black;

Color: #fff;

Padding: 5px;

Position: absolute;

Bottom: 125%;

Left: 50%;

Transform: translateX(-50%);

Border-radius: 4px;

.tooltip:hover .tip {
Visibility: visible;

</style>

</head>

<body>

<div class=”tooltip”>

Hover me

<span class=”tip”>Tooltip Text</span>

</div>

</body>

</html>

*table styling*

<!DOCTYPE html>

<html>

<head>

<style>

Table {

Border-collapse: collapse;

Width: 50%;

Margin: auto;

Td, th {

Border: 1px solid #999;

Padding: 8px;

Text-align: center;

}
Th {

Background-color: #eee;

</style>

</head>

<body>

<table>

<tr><th>Name</th><th>Age</th></tr>

<tr><td>Alice</td><td>24</td></tr>

<tr><td>Bob</td><td>30</td></tr>

</table>

</body>

</html>

*text shadow and box shadow*

<!DOCTYPE html>

<html>

<head>

<style>

H1 {

Text-shadow: 2px 2px 5px gray;

Div {

Box-shadow: 4px 4px 8px lightgray;

Padding: 20px;

</style>

</head>
<body>

<h1>Shadow Text</h1>

<div>Box with shadow</div>

</body>

</html>

*responsive layout in media queries*

<!DOCTYPE html>

<html>

<head>

<style>

Body {

Background-color: lightblue;

@media (max-width: 600px) {

Body {

Background-color: lightcoral;

</style>

</head>

<body>

<h2>Resize the browser window</h2>

</body>

</html>

You might also like