Scribd
Upload
3 views

css(2-05-24)

The document contains multiple HTML examples demonstrating various CSS styles, including background colors, image properties, borders, and scrollbar customization. It also showcases table formatting and different display properties such as inline, block, and inline-block. Each section provides specific examples of how to apply these styles to HTML elements.

Uploaded by

tanusreedutta310
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

css(2-05-24)

The document contains multiple HTML examples demonstrating various CSS styles, including background colors, image properties, borders, and scrollbar customization. It also showcases table formatting and different display properties such as inline, block, and inline-block. Each section provides specific examples of how to apply these styles to HTML elements.

Uploaded by

tanusreedutta310
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

Date – 2/05/2024 css

<html>

<head><title>css- background</title>

<style type="text/css">

body {background-color:yellow}

.colorful{color:green;font-size:40px;}

</style>

</head>

<body>

<p class="colorful">Nature lovers</p>

</body>

</html>
<html>
<head>
</head>
<body>
<h2>Image Height</h2>
<div>
<p>Height in length - 300px</p>
<img style="height: 300px;" src="D:\2-05-24\vegetables.jpg" alt="vegetables">
</div>
<div>
<p>Height in percentage - 30%</p>
<img style="height: 30%;" src="D:\2-05-24\vegetables.jpg" alt="vegetables">
</div>
<p>Height - auto</p>
<img style="height: auto;" src="D:\2-05-24\vegetables.jpg" alt="vegetables">
</div>
</body>
</html>
<html>
<head>
</head>
<body>
<h2>Image Border</h2>
<div>
<img style="border: 10px inset gold; margin-bottom=5px;" src="D:\2-05-24\
vegetables.jpg" alt="vegetables"><br><br>
<img style="border: 10px dashed red;" src="D:\2-05-24\vegetables.jpg"
alt="vegetables">
</div>
</body>
</html>
<html>

<head>

<style>

img {

border: 2px solid black; margin-bottom: 5px; height: 200px;

</style>

</head>

<body>

<h2>Image Border Radius</h2>

<div>

<img style="border-radius: 40px 60px;" src="D:\2-05-24\vegetables.jpg" >

<head>

<style>

img {

border: 2px solid black; margin-bottom: 5px; height: 200px;

</style>

</head>

<body>
<h2>Image Border Radius</h2>

<div>

<img style="border-radius: 40px 60px;" src="D:\2-05-24\vegetables.jpg" alt="vegetables">

</div><hr width="50%" color="red" align="left">

<div>

<img style="border-radius: 50%;" src="D:\2-05-24\vegetables.jpg" alt="vegetables">

</div><hr width="20%" color="red" align="left">

<div>

<img style="border-top-left-radius: 50%;" src="D:\2-05-24\vegetables.jpg" alt="vegetables">

</div><hr width="50%" color="red" align="left">

<div>

<img style="border-bottom-right-radius: 2em;" src="D:\2-05-24\vegetables.jpg"


alt="vegetables">

</div><hr width="50%" color="red" align="left">

<div>

<img style="border-radius: 50%;" src="D:\2-05-24\vegetables.jpg" alt="vegetables">

</div><hr width="50%" color="red" align="left">

<div>

<img style="border-top-left-radius: 50%;" src="D:\2-05-24\vegetables.jpg" alt="vegetables">

</div><hr width="50%" color="red" align="left">

<div>

<img style="border-bottom-right-radius: 2em;" src="D:\2-05-24\vegetables.jpg"


alt="vegetables">

</div>

</body>

</html>
<html>
<head>
<style>
div {
width: 370px;
height: 120px;
background-color: #F1EFB0;
overflow: auto;
}
div::-webkit-scrollbar {
width: 25px;
}
div::-webkit-scrollbar-track {
background: #90e9e4;
}
div::-webkit-scrollbar-thumb {
background: #e77f7f;
border-radius: 10px;
border: 3px solid yellow;
}
div::-webkit-scrollbar-thumb:hover {
background: #da3e3e;
}
.heading{
color: #DC4299;
text-align: center;
}
</style>
</head>
<body>
<div>
<h3 class="heading">Scrollbars using -webkit-scrollbar</h3>
This block includes a large amount of content to demonstrate how scrollbars work when
there is an overflow within an element box.
They consist of vertical or horizontal bars with a draggable thumb, enabling users to
move the content up and down or left to right.Video provides a powerful way to help you
prove your point. When you click Online Video, you can paste in the embed code for the
video you want to add. You can also type a keyword to search online for the video that best
fits your document.
To make your document look professionally produced, Word provides header, footer, cover
page, and text box designs that complement each other. For example, you can add a
matching cover page, header, and sidebar. Click Insert and then choose the elements you
want from the different galleries.

</div>
</body>
</html>
<html>
<head>
<style>
div {
width: 370px;
height: 120px;
scrollbar-color: #8b8484 #ddd;
scroll-margin-block-end: 20px;
background-color: #F1EFB0;
overflow: auto;
}
div::-webkit-scrollbar {
width: 15px;
}
div::-webkit-scrollbar-track {
background: #f1f1f1;
}
div::-webkit-scrollbar-thumb {
background: #888;
}
div::-webkit-scrollbar-thumb:hover {
background: #555;
}
h3 {
color: #DC4299;
}
</style>
</head>
<body>
<div>
<h3>Scrollbars using -webkit-scrollbar</h3>
This block includes a large amount of content to demonstrate how scrollbars work when
there is an overflow within an element box.
They consist of vertical or horizontal bars with a draggable thumb, enabling users to
move the content up and down or left to right.
</div>
</body>
</html>
<html>
<head>
<style>
table {
border: 3px solid green;
}
th, td {
border: 1px solid yellow;
}
</style>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
<html>
<head>
<style>
table {
border-collapse: collapse;
border-spacing: 1em 0.5em;
padding: 0 2em 1em 0;
border: 3px solid purple;
}
td {
width: 1.5em;
height: 1.5em;
background: #d2d2d2;
text-align: center;
vertical-align: middle;
}
</style>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
</body>
</html>

<html>
<head>
<style>
.display-inline {
display: inline;
background-color: #99FF00;
border: 2px solid #000000;
color: #993399;
padding: 5px;
text-align: center;
}
.display-block {
display: block;
background-color: #CC3399;
border: 2px solid #000000;
color: #ff3366;
padding: 5px;
height: 30px;
text-align: center;
}
.display-inline-block {
display: inline-block;
background-color: #1f9c3f;
border: 2px solid #000000;
color: #FFFF66;
padding: 5px;
height: 30px;
text-align: center;
}
</style>
</head>
<body>
<h2>Display Inline</h2>
<div>There are many variations of passages of Lorem Ipsum available,
<span class="display-inline">WEBEL</span> ,
by injected humour, or randomised words which don't
look even slightly believable.</div>

<h2>Display Block</h2>
<div>There are many variations of passages of Lorem Ipsum available,
<span class="display-block">WEBEL</span> ,
by injected humour, or randomised words which don't
look even slightly believable.</div>

<h2>Display Inline Block</h2>


<div>There are many variations of passages of Lorem Ipsum available,
<span class="display-inline-block">WEBEL</span> ,
by injected humour, or randomised words which don't
look even slightly believable.</div>
</body>
</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy