Scribd
Upload
16 views3 pages

FSD Week5

The document outlines various CSS concepts including color referencing, background image placement, font and text properties, and the CSS Box Model. It provides example programs demonstrating how to implement these concepts in HTML and CSS. Each section includes code snippets and descriptions of the intended visual effects and functionalities.

Uploaded by

DEVIKA G
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
16 views3 pages

FSD Week5

The document outlines various CSS concepts including color referencing, background image placement, font and text properties, and the CSS Box Model. It provides example programs demonstrating how to implement these concepts in HTML and CSS. Each section includes code snippets and descriptions of the intended visual effects and functionalities.

Uploaded by

DEVIKA G
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/ 3

Week-5

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:
i. font-size ii. font-weight iii. font-style
iv. text-decoration v. text-transformation vi. text-alignment
d. Write a program, to explain the importance of CSS Box model using
i. Content ii. Border iii. Margin iv. Padding

a. Write a program to demonstrate the various ways you can reference a color in CSS.
Program:
<!DOCTYPE html>
<html>
<head>
<style>
/* Named color */
.named-color {
color: red;
}

/* Hexadecimal color */
.hex-color {
color: #1E90FF;
}

/* RGB color */
.rgb-color {
color: rgb(34, 139, 34);
}

/* RGBA color */
.rgba-color {
color: rgba(255, 165, 0, 0.5);
}

/* HSL color */
.hsl-color {
color: hsl(300, 50%, 50%);
}

/* HSLA color */
.hsla-color {
color: hsla(120, 100%, 50%, 0.5);
}
</style>
</head>
<body>
<p class="named-color">This text uses a named color (red).</p>
<p class="hex-color">This text uses a hexadecimal color (#1E90FF).</p>
<p class="rgb-color">This text uses an RGB color (rgb(34, 139, 34)).</p>
<p class="rgba-color">This text uses an RGBA color (rgba(255, 165, 0, 0.5)).</p>
<p class="hsl-color">This text uses an HSL color (hsl(300, 50%, 50%)).</p>
<p class="hsla-color">This text uses an HSLA color (hsla(120, 100%, 50%, 0.5)).</p>
</body>
</html>

Outout:

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.
Program:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
height: 200vh; /* Make the page taller to enable scrolling */
background-image: url('https://via.placeholder.com/800');
background-position: center 50%; /* Horizontally centered, halfway down */
background-repeat: no-repeat; /* Prevent tiling */
background-attachment: fixed; /* Keep the image in place when scrolling */
}
</style>
</head>
<body>
<h1>Scroll to see the effect of the background image!</h1>
</body>
</html>
Output:

Scroll to see the effect of the background image!

c.Write a program using the following terms related to CSS font and text:
i. font-size ii. font-weight iii. font-style
iv. text-decoration v. text-transformation vi. text-alignment
Program:
<!DOCTYPE html>
<html>
<head>
<style>
.text {
font-size: 20px; /* Adjusts text size */
font-weight: bold; /* Makes the text bold */
font-style: italic; /* Makes the text italic */
text-decoration: underline; /* Underlines the text */
text-transform: uppercase; /* Converts text to uppercase */
text-align: center; /* Centers the text */
}
</style>
</head>
<body>
<p class="text">This paragraph demonstrates various CSS font and text properties.</p>
</body>
</html>

Output:
THIS PARAGRAPH DEMONSTRATES VARIOUS CSS FONT AND TEXT PROPERTIES.

d.Write a program, to explain the importance of CSS Box model using


ii. Content ii. Border iii. Margin iv. Padding

Program:

<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px; /* Content width */
height: 100px; /* Content height */
padding: 20px; /* Space between content and border */
border: 5px solid blue; /* Border around the box */
margin: 30px; /* Space outside the box */
background-color: lightgray; /* Background color of the content */
}
</style>
</head>
<body>
<div class="box">This box demonstrates the CSS Box Model.</div>
</body>
</html>

Output:

You might also like