Scribd
Upload
9 views

CSS Programe

The document discusses different CSS properties like background color, border, font, text formatting and positioning. It provides examples of using inline, internal and external CSS to style HTML elements. Key CSS properties covered include color, font, size, alignment, padding, margin and more.

Uploaded by

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

CSS Programe

The document discusses different CSS properties like background color, border, font, text formatting and positioning. It provides examples of using inline, internal and external CSS to style HTML elements. Key CSS properties covered include color, font, size, alignment, padding, margin and more.

Uploaded by

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

CSS CODING

CASCADING STYLE SHEET


1.Background Color Different Style :-

<html>

<head>

<style>

h1{

background-color:green;

div{

background-color:lightblue;

p{

background-color:yellow;

li{

background-color:tomato;

</style>

</head>

<h1> mahi raj iti infotech </h1>

<li> iti

<li> cti

<li> copa
1|P ag e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH
<li> csa

<p> hi this is my official youtube channel releted iti trade copa

available on copa theory video practical video and employabilty skill classes
completed.</p>

<div> powered by mr. dipak kumar burman

training officer copa @copyright 2023

govt iti pamgarh </div>

</body>

</html>

2. Background Color :-

<html>

<body>

<h1 style="background-color:dodgerblue;">

<center> mahi raj iti infotech </center> </h1>

<p style="background-color:tomato;">

this is paragraph background color change </p>

</body>

</html>

3. Border Color :-

<html>

<body><center>

<h1 style="border:2px solid dodgerblue;">

mahi raj iti infotech </h1>

<h2 style="border:3px solid tomato;">

welcome to my youtube channel </h2>


2|P ag e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH
<h3 style="border:4px solid violet;">

hunar hai to kadar hai </h3>

</body>

</html>

4. Border Style & Width :-

<html>

<head>

<style>

p.one{

border-style:solid;

border-witdth:5px;

p.two{

border-style:solid;

border-width:medium;

p.three{

border-style:dotted;

border-width:2px;

p.four{

border-style:dotted;

border-width:thick;

3|P ag e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH


p.five{

border-style:double;

border-width:15px;

p.six{

border-style:double;

border-width:thick;

</style>

</head>

<body>

<h2> border width </h2>

<p class="one"> border style solid width 5px </p>

<p class="two"> border style solid width medium </p>

<p class="three"> border style dotted width 2px</p>

<p class="four"> border style dotted width thick </p>

<p class="five"> border style double width 15px</p>

<p class="six"> border style double width thick </p>

</body>

</html>

5. Calculate The Total Width :-

<html>

<head>

<style>

4|P ag e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH


div{

width:320px;

border:5px solid grey;

padding:10px;

margin:0;

</style>

</head>

<body>

<h2> calculate the total width </h2>

<img src="dipak profile picture.jpg" width="350" height=265">

<div> this picture is above the box </div>

</body>

</html>

6. Class Selector All Element :-

<html>

<head>

<style>

.center {

background-color:yellow;

text-align:center;

color:blue;

font-size:50px; }

</style>

5|P ag e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH


</head>

<body>

<h1 class="center"> blue and center </h1>

<p class="center"> this paragraph is class selector using center alignment and text color is
blue font size is 50 px background color is yellow using </p>

<div class="center"> this is div class </div>

</body>

</html>

7. Class Selector Only P :-

<html>

<head>

<style>

p.center {

text-align:center;

color:red;

font-size:50px;

background-color:black;

</style>

</head>

<body>

<h1 class="center"> this is heading will not be affected </h1>

<p class="center"> thsi is paragraph will be red and center alingment affected only p class
than background color using black and font size is 50 px </p>

</body>

6|P ag e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH


</html>

8. Element Selector :-

<html>

<head>

<style>

p{

text-align:center;

color:blue;

font-size:50px;

</style>

</head>

<body>

<p> every paragraph will be affected by style </p>

<p id="para1"> mahi raj iti infotech </p>

<p> this is normal paragraph </p>

</body>

</html>

9. Font Size Font Family :-

<html>

<head>

<style>

.p1{

font-family:"kruti dev 010";

7|P ag e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH


font-size:100px;

color:red;

.p2{

font-family:arial,heletica,sans-serief;

font-size:15px;

font varient:small-caps;

.p3{

font-family:"lucida console", "courfier new", monospace;

font-style:italic;

.p4{

font-family:"times new roman", times, serif;

</style>

</head>

<body>

<h1> css font family </h1>

<p class="p1"> nhid dqekj ceZu </p>

<p class="p2"> hello word </p>

<p class="p3"> hello word </p>

<p class="p4"> hello word </p>

</body>

8|P ag e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH


</html>

10. Height & Width :-

<html>

<head>

<style>

div{

height:100px;

width:500px;

background-color:powderblue;

</style>

</head>

<body>

<h2> set the height or width </h2>

<div> this div element has a height 100 px or width 500 px </div>

</body>

</html>

11. Id Selector :-

<html>

<head>

<style>

#para1 {

text-align:center;

color:red; }

9|P ag e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH


</style>

</head>

<body>

<p id="para1"> hello word </p>

<h1 id="para1"> hi this is css id </h1>

</body>

</html>

12. Image Background :-

<html>

<head>

<style>

body{

background-image:url("green board.jpg");

</style>

</head>

<body><br><br><br><center><font color="white">

<h1> mahi raj iti infotech </h1>

<b> <i> <u> hunar hai to kadar hai </u> </i> </b>

</center></font></body>

</html>

13. Image Position :-

<html>

10 | P a g e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH


<head>

<style>

body{

background-image:url("logo.png");

background-repeat:no-repeat;

background-position:center top;

margin-right:200px;

background-attachment:fixed;

</style>

</head>

<body>

<h1> hello word </hi>

<p> this page on image position set change </p>

</body>

</html>

14. Margin Setup :-

<html>

<head>

<style>

div{

border:3px solid red;

margin-top:10px;

margin-bottom:100px;

11 | P a g e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH


margin-left:150;

margin-right:100;

background-color:lightblue;

</style>

</head>

<h2> using indivisual margin </h2>

<div> this div element has abord </div>

</body>

</html>

15. Outline :-

<html>

<head>

<style>

p{

border:2px solid black;

outline:#4caf50 solid 10px;

margin:auto;

padding:20px;

text-align:center;

</style>

</head>

<body>

12 | P a g e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH


<h3> css outline </h3>

<p> this element has outline </p>

</body>

</html>

16. Page Background Color :-

<html>

<head>

<style>

body{

background-color:lightblue;

color:blue;

border:2px solid red;

</style>

</head>

<body>

<h1> hello word </h1>

<p> html css ki class me aap sabka swagat hai </p>

<li>mr.dipak kumar burman

<li> mahi raj iti infotech

</body>

</html>

17. Text Color :-

<html>

13 | P a g e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH


<body>

<h3 style="color:tomato;">

mahi raj iti infotech </h3>

<p style="color:dodgerblue;">

this paragaraph text is color </p>

</body>

</html>

18. Text Decoration :-

<html>

<head>

<style>

h1{

text-decoration:underline;

text-align:center;

text-shadow:3px 2px red;

h2{

text-decoration:underline red;

text-align:right;

h3{

text-decoration:underline double;

text-align:left;

14 | P a g e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH


p{

text-decoration:underline red double 5px;

</style>

</head>

<body>

<h1> heading 1 </h1>

<h2> heading 2</h2>

<h3> heading 3</h3>

<br> <br>

<p> a paragraph is </p>

</body>

</html>

19. Top Border :-

<html>

<head>

<style>

p{

border-style:solid;

border-top-width:15px;

border-bottom-width:15px;

border-left-width:15px;

border-right-width:15px;

15 | P a g e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH


</style>

</head>

<body>

<p> <b> note: </b> welcome to my youtube channel <h1> mahi raj iti infotech </h1></p>

</body>

</html>

20. Inline CSS :-

<html>

<head> <title> inline css </title> </head>

</head>

<body>

<h1 style ="color:blue;

text-align:center;">

this is heading tag use in inline css </h1>

<p style="color:red;">

this is a paragraph design inline css </p>

</body>

</html>

21. External CSS 1 :-

<style>

body{

background-color:green;}

h1{

16 | P a g e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH


color:red;

margin-left:40px;}

p{

background-color:grey;

color:blue;

font-size:25px;

text-align:center;}

</style>

22. External CSS Link 2 :

<html>

<head>

<link rel="stylesheet" href="mystyle.css">

</head>

<body>

<h1> hi this is external css </h1>

<p> <marquee> mahi raj iti infotech </marquee> </p>

</body>

</html>

17 | P a g e DIPAK KUMAR BURMAN (T.O) GOVT ITI PAMGARH

You might also like