Scribd
Upload
24 views

Css Program

The document contains 6 programs demonstrating different CSS properties: 1. Font properties like style, size, weight etc. and text properties like alignment. 2. Box properties like width, height, background color, border, padding etc. and how they are affected on hover. 3. Using class, ID, hover, active and visibility properties to show/hide an element. 4. Different list styles like ordered, unordered and customizing bullets and numbers. 5. Using form elements like text, password, radio buttons, checkboxes etc to create a sample form. 6. Setting a background image for the body and adding a semi-transparent layer for text readability.

Uploaded by

Sumalatha Tharan
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
24 views

Css Program

The document contains 6 programs demonstrating different CSS properties: 1. Font properties like style, size, weight etc. and text properties like alignment. 2. Box properties like width, height, background color, border, padding etc. and how they are affected on hover. 3. Using class, ID, hover, active and visibility properties to show/hide an element. 4. Different list styles like ordered, unordered and customizing bullets and numbers. 5. Using form elements like text, password, radio buttons, checkboxes etc to create a sample form. 6. Setting a background image for the body and adding a semi-transparent layer for text readability.

Uploaded by

Sumalatha Tharan
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 11

Program#1 .

TEXT Properties
<!DOCTYPE html>
<html>
<head>
<style>
.fontProperties
{
/* Font properties */
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: bold;
font-style: italic;
text-decoration: underline;
text-transform: uppercase;
color: #333;
}
.textProperties
{
/* Text alignment */
text-align: center;

/* Letter spacing and line height */


letter-spacing: 2px;
line-height: 1.5;

/* Text shadow */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
/* Word spacing */
word-spacing: 5px;
}
</style>
</head>
<body>
<h1 class="textProperties">
This is a sample text demonstrating various font properties in CSS.</h1>

<h2 class="fontProperties">
This is the sample text demonstrating various text properties in CSS</h2>

</body>
</html>

Pgm # 2 box properties

<!DOCTYPE html>
<html>
<head>
<style>
/* CSS for box properties */
.box {
width: 300px;
height: 200px;
background-color: cyan;
border: 6px double blue;
border-radius: 10px;
padding: 20px;
margin: 20px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
text-align: center;
font-family: Arial, sans-serif;
line-height: 1.6;
transition: transform 0.5s ease-in-out;
color:red
}

.box:hover {
transform: scale(1.05);
box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
}

h2 {
color: #333;
margin-bottom: 10px;
}

p{
color: #555;
}
</style>
</head>
<body>
<div class="box">
<h2>This is a Box</h2>
<p>It demonstrates various box properties.</p>
</div>
</body>
</html>

Pgm#3. Sector Example


<!DOCTYPE html>
<html>
<head>
<style>
/* CSS for class, ID, hover, visibility, and active */
.button {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

#hiddenText {
display: none;
margin-top: 10px;
padding: 15px;
background-color: #f1c40f;
color: #333;
border-radius: 5px;
}

/* Style for visited link */


a:visited {
color:purple;
}
.button:hover {
background-color:cyan;
}
.button:active {
background-color: red;
}
.button:hover + #hiddenText {
display: block;
}
</style>
</head>
<body>
<a href="https://example.com" class="button">Visit Example.com</a>
<div id="hiddenText">You found the hidden text!</div>
</body>
</html>
Pgm4# list program
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS for list */
ul {
list-style-type: circle; /* Type of bullet point */
margin-left: 20px; /* Indentation for the list */
}

ol.upper-roman {
list-style-type: upper-roman; /* Roman numerals (uppercase) for ordered list */
}

ol.lower-alpha {
list-style-type: lower-alpha; /* Lowercase alphabetical for ordered list */
}

ul.square {
list-style-type: square; /* Square bullet points for unordered list */
}

/* Styling for list items */


li {
margin-bottom: 8px;
padding: 8px;
border-radius: 5px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<h2>Types of Lists</h2>

<h3>Unordered List (Circle)</h3>


<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<h3>Ordered List (Upper Roman Numerals)</h3>


<ol class="upper-roman">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

<h3>Ordered List (Lowercase Alphabets)</h3>


<ol class="lower-alpha">
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
</ol>

<h3>Unordered List (Square)</h3>


<ul class="square">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</body>
</html>

Prg# 5 using form element


<!DOCTYPE html>
<html>
<head>
<title>Form Example</title>
</head>
<body>
<h2>Sample Form</h2>
<form action="/submit_form" method="post">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br><br>

<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>

<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>

<label for="age">Age:</label><br>
<input type="number" id="age" name="age"><br><br>

<label for="gender">Gender:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>

<label for="newsletter">Subscribe to newsletter:</label><br>


<input type="checkbox" id="newsletter" name="newsletter"><br><br>

<label for="comments">Comments:</label><br>
<textarea id="comments" name="comments" rows="4"
cols="40"></textarea><br><br>

<input type="submit" value="Submit">


</form>
</body>
</html>

Pgm#6 image
<!DOCTYPE html>
<html>
<head>
<title>Background Image Example</title>
<style>
body {
background-image: url('images.jpg'); /* Replace with your image URL */
background-size: cover; /* Cover the entire background */
background-position: center; /* Center the background image */
background-repeat: no-repeat; /* Prevent image from repeating */
height: 100vh; /* Full viewport height */
margin: 0; /* Remove default margin */
display: flex;
justify-content: center;
align-items: center;
color: white;
font-family: Arial, sans-serif;
text-align: center;
}

.content {
background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background for
readability */
padding: 20px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="content">
<h1>Welcome to Background Image Example</h1>
<p>This is a demonstration of setting a background image using CSS
properties.</p>
</div>
</body>
</html>

You might also like