Scribd
Upload
9 views4 pages

Webtechnology 4

Uploaded by

mahakidrisi05
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
9 views4 pages

Webtechnology 4

Uploaded by

mahakidrisi05
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/ 4

Experment No.

8
Objective - Design a web page using CSS (Cascading Style Sheets) which includes the
following:
1) Use different font, styles: In the style definition you define how each selector
should work. Then, in the body of your pages, you refer to these selectors to
activate the styles.
2) Set a background image for both the page and single elements on the page.
DESCRIPTION:
CSS is a stylesheet language used to style documents written in markup languages like
HTML. It enables the separation of content and presentation by applying styles using
selectors, which define the elements to be styled.

Key Features:
 Syntax: selector {property: value;} (e.g., body {color: black;})
 Types of CSS:
1. External Stylesheet: Linked via <link> in the <head> for multiple pages.
2. Internal Stylesheet: Defined within <style> tags in the <head>.
3. Inline Styles: Directly applied to elements using the style attribute (e.g.,
<p style="color: sienna;">This is a paragraph</p>).

PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Web Page</title>
<style>
/* General Styles */
body {
font-family: Arial, sans-serif;
background-image: url('bb.jpg');
background-size: cover;
background-attachment: fixed;
color: #333;
margin: 0;
padding: 0;
}

/* Header Styling */
header {
text-align: center;
font-family: 'Georgia', serif;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
margin-bottom: 20px;
}

header h1 {
font-size: 2.5rem;
color: #444;
}

/* Section Styling */
section {
padding: 20px;
margin: 20px;
background-image: url('element-bb.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 2px solid #ddd;
border-radius: 10px;
}

/* Paragraph Styling */
section p {
font-family: 'Courier New', Courier, monospace;
font-size: 1.2rem;
line-height: 1.6;
}

/* Button Styling */
button {
display: inline-block;
padding: 10px 20px;
font-size: 1rem;
font-family: 'Verdana', sans-serif;
background-color: #0066cc;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

button:hover {
background-color: #004d99;
}

/* Footer Styling */
footer {
text-align: center;
padding: 10px;
font-family: 'Tahoma', sans-serif;
background-color: rgba(0, 0, 0, 0.8);
color: white;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Stylish Web Page</h1>
</header>
<section>
<p>This is a sample paragraph styled with a unique font and background image.</p>
<button>Click Me!</button>
</section>
<footer>
<p>&copy; 2025 Stylish Designs</p>
</footer>
</body>
</html>

OUTPUT:

RESULT: Thus different style of CSS and different type of the properties are applied.

You might also like