Assignments Of Class 8: CSS Colors

Assignments Of Class 8: CSS Colors

Assignment 1: Create a Webpage with Hex Color Codes

Objective:

Use hexadecimal color values to create a color palette.

Task:

Create a webpage with at least 5 different colors using hexadecimal values.

Solution:

1. HTML Structure:

o Create a basic HTML page with a container to hold the color palette.

2. CSS Styling:

o Define the colors using hex codes for each div element.

3. Code:

html

Copy code

<!DOCTYPE html>

<head>

<title>Hexadecimal Color Palette</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: #f4f4f4;

}

.palette {

display: grid;

grid-template-columns: repeat(5, 1fr);

gap: 10px;

width: 80%;

}

.color-box {

height: 150px;

border-radius: 10px;

color: #fff;

display: flex;

justify-content: center;

align-items: center;

font-weight: bold;

}

</style>

</head>

<body>

</div>

</body>

</html>

Explanation:

The colors are defined using hex values in the background-color property for each .color-box.
A grid layout is used to display the colors.

Assignment 2: Create a Webpage with RGB Color Codes

Objective:

Use RGB color values to create a color palette.

Task:

Create a webpage with at least 5 different colors using RGB values.

Solution:

1. HTML Structure:
Similar to Assignment 1.

2. CSS Styling:
Define colors using RGB values instead of hex codes.

3. Code:

html

Copy code

<!DOCTYPE html>

<head>

<title>RGB Color Palette</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: #f4f4f4;

}

.palette {

display: grid;

grid-template-columns: repeat(5, 1fr);

gap: 10px;

width: 80%;

}

.color-box {

height: 150px;

border-radius: 10px;

color: #fff;

display: flex;

justify-content: center;

align-items: center;

font-weight: bold;

}

</style>

</head>

<body>

</div>

</body>

</html>

Explanation:

The RGB values are specified inside the background-color property.
This task helps students understand how colors are created through red, green, and blue combinations.

Assignment 3: Create a Webpage with RGBA Color Codes

Objective:

Use RGBA values to create a color palette with transparency.

Task:

Create a webpage with at least 5 different colors using RGBA values.

Solution:

1. HTML Structure:
Similar to the previous assignments.

2. CSS Styling:
Define colors using RGBA values to introduce transparency.

3. Code:

html

Copy code

<!DOCTYPE html>

<head>

<title>RGBA Color Palette</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: #f4f4f4;

}

.palette {

display: grid;

grid-template-columns: repeat(5, 1fr);

gap: 10px;

width: 80%;

}

.color-box {

height: 150px;

border-radius: 10px;

color: #fff;

display: flex;

justify-content: center;

align-items: center;

font-weight: bold;

}

</style>

</head>

<body>

</div>

</body>

</html>

Explanation:

RGBA values are used where the fourth value defines the transparency (alpha).
This assignment introduces the concept of opacity/transparency with colors.

Assignment 4: Create a Webpage with HSL Color Codes

Objective:

Use HSL color values to create a color palette.

Task:

Create a webpage with at least 5 different colors using HSL values.

Solution:

1. HTML Structure:
Similar to previous assignments.

2. CSS Styling:
Define colors using HSL values.

3. Code:

html

Copy code

<!DOCTYPE html>

<head>

<title>HSL Color Palette</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: #f4f4f4;

}

.palette {

display: grid;

grid-template-columns: repeat(5, 1fr);

gap: 10px;

width: 80%;

}

.color-box {

height: 150px;

border-radius: 10px;

color: #fff;

display: flex;

justify-content: center;

align-items: center;

font-weight: bold;

}

</style>

</head>

<body>

</div>

</body>

</html>

Explanation:

HSL stands for Hue, Saturation, and Lightness.
This assignment helps in understanding how to control colors based on these three parameters.

Assignment 5: Apply Color on Text Using Different Methods

Objective:

Apply color to text using different color methods: hex, RGB, RGBA, HSL.

Task:

Create a webpage with text elements styled using the four color methods.

Solution:

1. HTML Structure:
Create text elements like headings and paragraphs.

2. CSS Styling:
Apply each color method to different text elements.

3. Code:

html

Copy code

<!DOCTYPE html>

<head>

<title>Text Color Styling</title>

<style>

h1 {

color: #FF5733; /* Hex */

}

p {

color: rgb(51, 255, 87); /* RGB */

}

span {

color: rgba(255, 87, 51, 0.7); /* RGBA */

}

.highlight {

color: hsl(210, 100%, 60%); /* HSL */

}

</style>

</head>

<body>

<h1>Hexadecimal Color Heading</h1>

<p>This is a paragraph with RGB color.</p>

<span>This is a span with RGBA color.</span>

<p class="highlight">This is a paragraph with HSL color.</p>

</body>

</html>

Explanation:

Different text elements are styled using various color methods.
This assignment shows how color can be applied to text in various ways.

The other 5 assignments can follow similar patterns, incorporating more complex use cases such as gradients, color mixing, color contrast for accessibility, and interactive color changes using CSS hover effects. Let me know if you'd like to dive deeper into any specific topic!

4o mini

You said:

yes

ChatGPT said:

ChatGPT

Here are additional assignments, diving deeper into CSS color concepts, covering gradients, hover effects, and color contrast for accessibility:

Assignment 6: Create a Gradient Background

Objective:

Use CSS gradients to create a background that transitions between two or more colors.

Task:

Create a webpage with a linear gradient background.

Solution:

1. HTML Structure:
Use a basic HTML page structure with a div element for content.

2. CSS Styling:
Apply a linear gradient background using the background property.

3. Code:

html

Copy code

<!DOCTYPE html>

<head>

<title>Linear Gradient Background</title>

<style>

body {

margin: 0;

padding: 0;

height: 100vh;

background: linear-gradient(to right, #FF5733, #33FF57); /* Linear gradient from left to right */

display: flex;

justify-content: center;

align-items: center;

color: white;

}

.content {

font-size: 2rem;

text-align: center;

}

</style>

</head>

<body>

<p>Linear Gradient Background</p>

</div>

</body>

</html>

Explanation:

The background property with linear-gradient(to right, #FF5733, #33FF57) creates a gradient that goes from red to green horizontally.
The page content is centered using flexbox.

Assignment 7: Create a Radial Gradient Background

Objective:

Use CSS radial gradients to create a circular gradient effect.

Task:

Create a webpage with a radial gradient background.

Solution:

1. HTML Structure:
Use a basic HTML page structure with a div element for content.

2. CSS Styling:
Apply a radial gradient background.

3. Code:

html

Copy code

<!DOCTYPE html>

<head>

<title>Radial Gradient Background</title>

<style>

body {

margin: 0;

padding: 0;

height: 100vh;

background: radial-gradient(circle, #FF5733, #33FF57); /* Radial gradient */

display: flex;

justify-content: center;

align-items: center;

color: white;

}

.content {

font-size: 2rem;

text-align: center;

}

</style>

</head>

<body>

<p>Radial Gradient Background</p>

</div>

</body>

</html>

Explanation:

The background property with radial-gradient(circle, #FF5733, #33FF57) creates a gradient that radiates outward from the center of the screen.
The content is centered using flexbox.

Assignment 8: Add Hover Effects to Buttons with Color Transitions

Objective:

Use CSS hover effects and color transitions for buttons.

Task:

Create a webpage with a button that changes color on hover using CSS transitions.

Solution:

1. HTML Structure:
Create a button element in HTML.

2. CSS Styling:
Apply :hover selector to change the button's background color and smooth the transition.

3. Code:

html

Copy code

<!DOCTYPE html>

<head>

<title>Button Hover Effect</title>

<style>

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: #f4f4f4;

}

.button {

background-color: #FF5733;

color: white;

padding: 15px 30px;

border: none;

border-radius: 5px;

font-size: 1rem;

cursor: pointer;

transition: background-color 0.3s ease; /* Smooth transition */

}

.button:hover {

background-color: #33FF57; /* Color changes on hover */

}

</style>

</head>

<body>

<button class="button">Hover Me</button>

</body>

</html>

Explanation:

The .button:hover selector changes the background color when the button is hovered over.
The transition: background-color 0.3s ease; makes the color change smooth.

Assignment 9: Apply Color Contrast for Accessibility

Objective:

Ensure text and background have sufficient contrast for accessibility.

Task:

Create a webpage with high contrast between the text and background color for better readability.

Solution:

1. HTML Structure:
Create a page with a heading and paragraph.

2. CSS Styling:
Choose colors with high contrast for better accessibility.

3. Code:

html

Copy code

<!DOCTYPE html>

<head>

<title>Accessible Color Contrast</title>

<style>

body {

margin: 0;

padding: 0;

background-color: #000000; /* Black background */

color: #FFFFFF; /* White text */

font-family: Arial, sans-serif;

line-height: 1.6;

}

h1 {

font-size: 2.5rem;

margin-top: 20px;

}

p {

font-size: 1.2rem;

margin: 20px;

}

</style>

</head>

<body>

<h1>Accessible Color Contrast</h1>

<p>This is an example of a webpage with high contrast between the text and background.</p>

</body>

</html>

Explanation:

The black background and white text (#000000 and #FFFFFF) provide a high contrast ratio for readability.
This setup is essential for accessibility and ensures that people with vision impairments can read the text clearly.

Assignment 10: Create a Gradient Text Effect

Objective:

Use CSS gradients to apply color to text, creating a gradient text effect.

Task:

Create a webpage with a heading that has a gradient color applied to the text.

Solution:

1. HTML Structure:
Create a heading element.

2. CSS Styling:
Use background-image and -webkit-background-clip to apply a gradient to text.

3. Code:

html

Copy code

<!DOCTYPE html>

<head>

<title>Gradient Text Effect</title>

<style>

h1 {

font-size: 5rem;

font-weight: bold;

background: linear-gradient(to right, #FF5733, #33FF57);

-webkit-background-clip: text;

color: transparent; /* Makes the text color transparent */

text-align: center;

margin-top: 20%;

}

</style>

</head>

<body>

<h1>Gradient Text Effect</h1>

</body>

</html>

Explanation:

The background property applies a linear gradient to the text.
The -webkit-background-clip: text property ensures that the background (gradient) is clipped to the text, making the text appear in gradient colors.
The color: transparent; property ensures that the text itself is transparent so the gradient is visible.

Wednesday, 19 February 2025

Assignments Of Class 8: CSS Colors

No comments:

Post a Comment

Search This Blog

Labels

Report Abuse

About Me

Popular Posts

Subscribe Us

Blog Archive

Facebook

Random Posts

Random Posts

Recent Posts