EXPERIMENT 5: CSS with Color, Background, Font, Text and CSS Box Model
a. Write a program to demonstrate the various ways you can reference a color in CSS.
b. Write a CSS rule that places a background image halfway down the page, tilting it horizontally. The image should remain in place when the user scrolls up or down.
c. Write a program using the following terms related to CSS font and text:
- font-size
- text-decoration
- font-weight
- font-style
- text-transformation
- text-alignment
d. Write a program, to explain the importance of CSS Box model using
- Content
- Border
- Margin iv.padding
a. Write a program to demonstrate the various ways you can reference a color in CSS.
PROCEDURE STEPS:
Step 1: Open the Visual Studio Code and create a HTML file named index.html file. Write HTML content using the:
- Named Colors (
red,blue,green, etc.) - Hexadecimal (
#RRGGBBand#RGB) - RGB (
rgb(r, g, b)) - RGBA (
rgba(r, g, b, a)) - HSL (
hsl(h, s%, l%)) - HSLA (
hsla(h, s%, l%, a)) - CSS Custom Variables (
var(--color-name))
Step 2: Locate the HTML file in File Explorer.
Step 3: Open the HTML in a Web Browser.
SOURCE CODE
index.html
</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Color References</title>
<style>
/* Defining CSS variables */
:root {
--custom-blue: #4A90E2;
--custom-green: rgb(34, 197, 94);
}
body {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
.color-box {
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 14px;
text-align: center;
margin: 10px;
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
/* Different ways to define colors */
.named-color { background-color: red; }
.hex-color { background-color: #00ff00; color: black; } /* Green */
.short-hex-color { background-color: #0af; } /* Light Blue */
.rgb-color { background-color: rgb(255, 165, 0); } /* Orange */
.rgba-color { background-color: rgba(255, 0, 0, 0.5); } /* Semi-transparent Red */
.hsl-color { background-color: hsl(240, 100%, 50%); } /* Blue */
.hsla-color { background-color: hsla(300, 76%, 72%, 0.8); color: black; } /* Semi-transparent Pink */
.css-variable { background-color: var(--custom-blue); } /* Custom variable */
.css-variable-green { background-color: var(--custom-green); color: black; } /* Custom Green */
</style>
</head>
<body>
<div class="color-box named-color">Named Color: Red</div>
<div class="color-box hex-color">Hex: #00ff00</div>
<div class="color-box short-hex-color">Short Hex: #0af</div>
<div class="color-box rgb-color">RGB: rgb(255, 165, 0)</div>
<div class="color-box rgba-color">RGBA: rgba(255, 0, 0, 0.5)</div>
<div class="color-box hsl-color">HSL: hsl(240, 100%, 50%)</div>
<div class="color-box hsla-color">HSLA: hsla(300, 76%, 72%, 0.8)</div>
<div class="color-box css-variable">CSS Variable: var(--custom-blue)</div>
<div class="color-box css-variable-green">CSS Variable: var(--custom-green)</div>
</body>
</html>OUTPUT
b. Write a CSS rule that places a background image halfway down the page, tilting it horizontally. The image should remain in place when the user scrolls up or down.
PROCEDURE STEPS:
Step 1: Open the Visual Studio Code and create a HTML file named index.html file.
Step 2: Locate the HTML file in File Explorer.
Step 3: Open the HTML in a Web Browser.
SOURCE CODE
index.html
</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Background Image Halfway Down</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
color: white;
text-align: center;
background-color: #333;
}
/* Ensures enough scrolling space */
.content {
height: 200vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
/* Background Image Section */
.background-image {
position: fixed;
top: 50%;
left: 0;
width: 100%;
height: 50vh;
background-image: url('https://www.tutorialkart.com/img/mountains.jpg');
background-size: cover;
background-position: center;
transform: scaleX(-1); /* Flip horizontally */
z-index: -1; /* Keeps it in the background */
}
/* Text Content on Top */
.text-overlay {
position: relative;
z-index: 1;
font-size: 28px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="content">
<div class="text-overlay">
Scroll to see the effect. The background stays fixed!
</div>
</div>
<div class="background-image"></div>
</body>
</html>
OUTPUT
c. Write a program using the following terms related to CSS font and text.
index.html
</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Font and Text Effects</title>
<style>
h2 {
text-align: center;
}
/* Different Text Effects */
.large-text {
font-size: 24px;
}
.bold-text {
font-weight: bold;
}
.italic-text {
font-style: italic;
}
.underline-text {
text-decoration: underline;
}
.uppercase-text {
text-transform: uppercase;
}
.capitalize-text {
text-transform: capitalize;
}
.center-text {
text-align: center;
}
.justify-text {
text-align: justify;
}
</style>
</head>
<body>
<h2>CSS Font and Text Properties</h2>
<p class="large-text">This paragraph has a larger font size.</p>
<p class="bold-text">This paragraph has bold text.</p>
<p class="italic-text">This paragraph is in italic style.</p>
<p class="underline-text">This paragraph is underlined.</p>
<p class="uppercase-text">this text is in uppercase.</p>
<p class="capitalize-text">this text is capitalized.</p>
<p class="center-text">This text is center-aligned.</p>
<p class="justify-text">This paragraph has justified text. Justified text ensures that both edges of the paragraph are aligned, creating a neat block of text.</p>
</body>
</html>OUTPUT
d. Write a program, to explain the importance of CSS Box model
The CSS Box Model is essential in web design because it defines how elements are structured and spaced. It consists of four main components:
- Content – The actual text or image inside the box.
- Padding – The space between the content and the border.
- Border – The edge surrounding the padding and content.
- Margin – The space between the element and other elements.
index.html
</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Box Model Example</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
}
.box {
width: 300px;
background-color: white;
padding: 20px; /* Adds space inside the border */
border: 5px solid blue; /* Defines the edge around the box */
margin: 20px auto; /* Adds space around the element */
text-align: center;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.label {
font-weight: bold;
color: blue;
margin-bottom: 10px;
}
.content {
background-color: lightgray;
padding: 10px;
}
</style>
</head>
<body>
<h2>CSS Box Model: Content, Padding, Border, Margin</h2>
<div class="box">
<div class="label">Content</div>
<div class="content">This is the content area</div>
</div>
<div class="box" style="padding: 40px;">
<div class="label">Padding</div>
<div class="content">This box has extra padding</div>
</div>
<div class="box" style="border: 10px solid red;">
<div class="label">Border</div>
<div class="content">This box has a thick red border</div>
</div>
<div class="box" style="margin: 50px auto;">
<div class="label">Margin</div>
<div class="content">This box has extra margin</div>
</div>
</body>
</html>OUTPUT
