Wednesday, 19 February 2025

Assignments Of Class 6: CSS Units


 Assignments Of Class 6: CSS Units

Assignment 1: Understanding Pixels (px)

Task:

  • Create an HTML page with a header (h1) and paragraph (p). Apply pixel-based font sizes and margins to these elements.

Solution:

1.   Create HTML structure:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Pixel Units</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <h1>Welcome to CSS Units</h1>

    <p>This paragraph demonstrates the use of pixels for font size and margin.</p>

</body>

</html>

2.   CSS Code:

css

Copy code

h1 {

    font-size: 24px;

    margin: 15px;

}

 

p {

    font-size: 16px;

    margin: 10px;

}

Explanation:

  • The h1 font-size is set to 24px, and it will take up 24 pixels of space.
  • The p font-size is 16px, and its margin is 10px on all sides.

Assignment 2: Using Em Units for Font Sizes

Task:

  • Create an HTML page and apply em units for the font size of a div element and its nested h2.

Solution:

1.   HTML Structure:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Em Units</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div>

        <h2>This is a heading inside a div</h2>

    </div>

</body>

</html>

2.   CSS Code:

css

Copy code

div {

    font-size: 2em; /* 2 times the font size of the parent */

}

 

h2 {

    font-size: 1.5em; /* 1.5 times the font size of the div */

}

Explanation:

  • The div font-size is 2em, meaning it's 2 times the font size of its parent element.
  • The h2 font-size is 1.5em, meaning it's 1.5 times the size of the div's font size.

Assignment 3: Using Rem Units for Consistent Font Size

Task:

  • Create an HTML page and use rem units for font sizes across multiple elements.

Solution:

1.   HTML Structure:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Rem Units</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <h1>Heading 1</h1>

    <p>Paragraph text with rem unit.</p>

</body>

</html>

2.   CSS Code:

css

Copy code

html {

    font-size: 16px; /* Root font size */

}

 

h1 {

    font-size: 2rem; /* 2 times the root font size (32px) */

}

 

p {

    font-size: 1rem; /* Same as root font size (16px) */

}

Explanation:

  • The root html font-size is set to 16px.
  • The h1 uses 2rem, making its font size 32px (2 times the root font size).
  • The p uses 1rem, so its font size is 16px.

Assignment 4: Using Percentages for Width and Font Size

Task:

  • Create a webpage with a container that uses percentage-based width. Apply percentage-based font size to a p element inside it.

Solution:

1.   HTML Structure:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Percentage Units</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="container">

        <p>Text with percentage font size and container width.</p>

    </div>

</body>

</html>

2.   CSS Code:

css

Copy code

.container {

    width: 80%; /* 80% of the parent's width */

    margin: 0 auto;

}

 

p {

    font-size: 150%; /* 150% of the default font size */

}

Explanation:

  • The .container takes up 80% of its parent element’s width.
  • The p font-size is 150% of the default size, making the text slightly larger than the usual size.

Assignment 5: Viewport Units for Responsive Font Size

Task:

  • Create a webpage where the font size adjusts based on the viewport width using vw units.

Solution:

1.   HTML Structure:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Viewport Units</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <h1>Responsive Font Size</h1>

</body>

</html>

2.   CSS Code:

css

Copy code

h1 {

    font-size: 5vw; /* Font size is 5% of the viewport width */

}

Explanation:

  • The h1 font-size will be 5% of the width of the viewport, so it will adjust as the screen size changes.

Assignment 6: Combining Multiple Units

Task:

  • Create an HTML page and apply a combination of pixel, em, rem, and percentage-based units to style a container and its text.

Solution:

1.   HTML Structure:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Multiple Units</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="container">

        <h1>Heading</h1>

        <p>Paragraph demonstrating different CSS units.</p>

    </div>

</body>

</html>

2.   CSS Code:

css

Copy code

.container {

    width: 80%; /* Percentage of the parent element */

    padding: 20px; /* 20px padding */

    font-size: 1.2rem; /* Font size relative to the root font size */

}

 

h1 {

    font-size: 2em; /* 2 times the parent element's font size */

}

 

p {

    font-size: 1.5em; /* 1.5 times the parent element's font size */

}

Explanation:

  • The .container takes up 80% of the parent width with 20px padding and a font-size relative to the root (1.2rem).
  • The h1 is 2 times the size of its parent element's font size, and the p is 1.5 times the parent's font size.

Assignment 7: Implementing Viewport Height for Full Page Layout

Task:

  • Create an HTML page where the height of an element takes up the entire viewport using vh.

Solution:

1.   HTML Structure:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Viewport Height</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <section>

        <h1>Full Page Section</h1>

    </section>

</body>

</html>

2.   CSS Code:

css

Copy code

section {

    height: 100vh; /* Takes up the full viewport height */

    background-color: lightblue;

    text-align: center;

}

 

h1 {

    font-size: 5vw; /* Font size adjusts based on viewport width */

    color: darkblue;

}

Explanation:

  • The section element takes up 100% of the viewport height using 100vh.
  • The h1 font-size is responsive using 5vw and will adjust based on the viewport width.

Assignment 8: Combining Percentages and Viewport Units

Task:

  • Create a webpage layout with a container using vw and vh and text inside it using percentages.

Solution:

1.   HTML Structure:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Combined Units</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="container">

        <p>Responsive container with text.</p>

    </div>

</body>

</html>

2.   CSS Code:

css

Copy code

.container {

    width: 60vw; /* 60% of the viewport width */

    height: 60vh; /* 60% of the viewport height */

    background-color: lightcoral;

}

 

p {

    font-size: 5%; /* 5% of the container's width */

}

Explanation:

  • The .container takes up 60% of the viewport width and height.
  • The p font-size is 5% of the container’s width, so it adjusts as the container size changes.

Assignment 9: Experiment with CSS Grid and Units

Task:

  • Create a simple grid layout using fr units and style the grid items with px, em, and rem units.

Solution:

1.   HTML Structure:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CSS Grid Units</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="grid-container">

        <div class="grid-item">Item 1</div>

        <div class="grid-item">Item 2</div>

        <div class="grid-item">Item 3</div>

        <div class="grid-item">Item 4</div>

    </div>

</body>

</html>

2.   CSS Code:

css

Copy code

.grid-container {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    gap: 10px;

}

 

.grid-item {

    padding: 20px;

    background-color: lightseagreen;

    font-size: 1.2rem;

    text-align: center;

}

Explanation:

  • The grid is divided into 3 equal columns using 1fr, and there’s a 10px gap between the items.
  • Each .grid-item has a 1.2rem font size and a 20px padding.

Assignment 10: Applying Units to Buttons

Task:

  • Style buttons with px, em, and rem units for padding, font size, and border radius.

Solution:

1.   HTML Structure:

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Button Styling</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <button>Click Me</button>

</body>

</html>

2.   CSS Code:

css

Copy code

button {

    padding: 10px 20px; /* px units for padding */

    font-size: 1.5em; /* em units for font size */

    border-radius: 2rem; /* rem units for border radius */

    background-color: #4CAF50;

    color: white;

    border: none;

}

Explanation:

  • The button has a 10px top and bottom padding, 20px left and right padding, and a 1.5em font size.
  • The border-radius is set to 2rem for rounded corners based on the root font size.

No comments:

Post a Comment

Search This Blog

Powered by Blogger.