Scribd
Upload
30 views8 pages

Cma PMS

The document provides HTML programs that demonstrate different CSS selectors and properties including inline, internal, external and element, id, class, universal selectors. It also shows how to set styles for ordered and unordered lists, use RGBA colors, set background images and text styling using CSS.

Uploaded by

minakshisutar98
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
30 views8 pages

Cma PMS

The document provides HTML programs that demonstrate different CSS selectors and properties including inline, internal, external and element, id, class, universal selectors. It also shows how to set styles for ordered and unordered lists, use RGBA colors, set background images and text styling using CSS.

Uploaded by

minakshisutar98
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/ 8

1. Write a HTML program to implement inline CSS.

<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
<style>
p{
color:red;
font-size:50px;
font-style:italic;
text-align:center;
}
</style>
</head>
<body>
<p>
Computer Multimedia and Animation……………
</p>
<p>C Programming language, C++ Programming language…….</p>
</body>
</html>

2.Write a HTML program to implement internal CSS.

<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
.s1 {
text-align: center;
}

.s2 {
color: red;
font-size: 50px;
font-weight: bold;
}

.s3 {
font-style: bold;
font-size: 20px;
}
</style>
</head>
<body>
<div class="s1">WELCOME</div>
<div class="s2">computer multimedia and animation programming language……….</div>
<div class="s3">A computer science portal for geeks
</div>
</body>
</html>
3.Write a HTML program to implement external CSS.

body {
background-color: powderblue ;
}

P{
text-align: center;
}

h1 {
color: red;
font-size: 50px;
font-weight: bold;
}

h2 {
font-style: bold;
font-size: 20px;
}

Below code should be written in another file and save the file as .html

<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>CMA</p>
<h1> Computer Multimedia & Animation/h1>
<h2>Cloud Computing…</h2>
</body>
</html>

4.Write a HTML program to implement element selector


<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph in the web page will be affected by the style.</p>
<p>Simulation & Animation</p>
<p>Computer Multimedia and animation…….</p>
</body>
</html>

5.Write a HTML program to implement id selector

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

6.Write a HTML program to implement class selector

<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>

7.Write a HTML program to implement universal selector

<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p>Me too!</p>
<p>And me!</p>
</body>
</html>

8. Program to implement styles for unordered lists

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
</style>
</head>
<body>
<h2>The list-style-type Property</h2>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>cold coffee</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Coffee</li>
<li>cold Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
9.Write HTML program to implement styles for ordered lists.

<!DOCTYPE html>
<html>
<head>
<style>
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>The list-style-type Property</h2>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>cold coffee</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>cold Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of unordered lists:</p>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>pepsi</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>samosa</li>
<li>Coca Cola</li>
</ol>
</body>
</html>

10. Program to implement list style type property


<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>The list-style-type Property</h2>
<p>Example of unordered lists:</p>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>pepsi</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>samosa</li>
<li>Coca Cola</li>
</ol>
</body>
</html>

11.Write a HTML program to implement rgba colors.


<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,255,0.3);}
</style>
</head>
<body>
<h1>Define Colors With RGBA Values</h1>
<p id="p1">Red</p>
<p id="p2">Green</p>
<p id="p3">Blue</p>
<p id="p4">Grey</p>
<p id="p5">Yellow</p>
<p id="p6">Cerise</p>
</body>

12.Write a HTML program to implement rgba colors.


<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,255,0.3);}
#p2 {background-color:rgba(255,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(198,198,198,0.9);}
#p5 {background-color:rgba(255,255,0,0.9);}
#p6 {background-color:rgba(255,0,255,0.8);}
</style>
</head>
<body>
<h1>Define Colors With RGBA Values</h1>
<p id="p1">BCA1</p>
<p id="p2">BCA2</p>
<p id="p3">BCA3</p>
<p id="p4">BCA4</p>
<p id="p5">BCA5</p>
<p id="p6">BCA6</p>
</body>

13. Setting a background image for a page and setting the text, background colour using CSS.

<html>
<head>
<title></title>
<style>
body{
background-image : url("IMG_7537.gif");
background-color:lightorange;
color: darkindigo;
text-align:right;
margin: 40px;
border-style: dashed;
}
</style>
</head>

<body>
<h1>Journal program -06 Program to set background image, color and set the text using
CSS</h1>
<h1> CSS Program to set background image for the page , setting the text, background
color</h1>
</body>
</html>

14.

Journal program (06): Setting a background image for a page and setting the text,
background colour using CSS.

<html>
<head>
<title></title>
<style>
body{
background-image : url("IMG_7537.gif");
background-color:lightpink;
color: darkmagenta;
text-align:center;
margin: 50px;
border-style: dotted;
}
</style>
</head>

<body>
<h1>Journal program -06 Program to set background image, color and set the text using
CSS</h1>
<h1> CSS Program to set background image for the page , setting the text, background
color</h1>
</body>
</html>

You might also like