Scribd
Upload
6 views

CSS

Hello friends

Uploaded by

sanjeevkumarmaurya221716
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
6 views

CSS

Hello friends

Uploaded by

sanjeevkumarmaurya221716
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/ 7

Unit -2 CSS

1. Backgraound
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>
<p style="background-color: red;">heelfe</p>
</body>
</html>
2. Background Image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body style="background-image: url(./download.jfif);">

</body>
</html>
3. Background repeat
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body style="background-image: url(./download.jfif); background-
repeat: no-repeat;">
</body>
</html>
4. Bg-size
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body style="background-image: url(./download.jfif);background-size:
300px 100px; background-repeat: no-repeat;">
</body>
</html>

5. Extranl css
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./extranl.css">
</head>
<body>

<p class="hello">This is a paragraph.</p>


</body>
</html>
6. Inline css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>
<p style="color: palegreen;">This is a paragraph.</p>
</body>
</html>
7. Internal CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<style>
.hello{
color: blueviolet;
}
</style>
<body>

<p class="hello">This is a paragraph.</p>


</body>
</html>
8. OL list
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>good </li>
<li>bad boy </li>
<li>worse boy</li>
</ol>
</body>
</html>

9. UL imge
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
ul {
list-style-image: url('/1img.PNG');
}
</style>
</head>
<body>
list
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
</html>
10. Position list
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>Document</title>
<style>
ul.a {
list-style-position: outside;
}

ul.b {
list-style-position: inside;
}
</style>
</head>
<body>
<h2>list-style-position: outside (default):</h2>
<ul>
<li>
Coffee - A brewed drink prepared from roasted coffee beans, which
are
the seeds of berries from the Coffea plant
</li>
<li>
Tea - An aromatic beverage commonly prepared by pouring hot or
boiling
water over cured leaves of the Camellia sinensis, an evergreen
shrub
(bush) native to Asia
</li>
<li>
Coca Cola - A carbonated soft drink produced by The Coca-Cola
Company.
The drink's name refers to two of its original ingredients, which
were
kola nuts (a source of caffeine) and coca leaves
</li>
</ul>
<h2>list-style-position: inside:</h2>
<ul class="b">
<li>
Coffee - A brewed drink prepared from roasted coffee beans, which
are
the seeds of berries from the Coffea plant
</li>
<li>
Tea - An aromatic beverage commonly prepared by pouring hot or
boiling
water over cured leaves of the Camellia sinensis, an evergreen
shrub
(bush) native to Asia
</li>
<li>
Coca Cola - A carbonated soft drink produced by The Coca-Cola
Company.
The drink's name refers to two of its original ingredients, which
were
kola nuts (a source of caffeine) and coca leaves
</li>
</ul>
</body>
</html>

You might also like