Scribd
Upload
13 views

CSW1 Assignment CSS

Uploaded by

xijijef316
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

CSW1 Assignment CSS

Uploaded by

xijijef316
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Assignment-2 for CSS

Subject: CSW1 (CSE 2141)


Session: Sep 2024 to Jan 2025
Branch: CSE
Section: All
Course Outcomes: CO2

Learning Levels: Remembering (L1), Understanding (L2), Application (L3), and Analysis (L4).

Q no. Questions Learning


Levels
Q1. Create an HTML page with headings and paragraphs. Apply inline styles to the h1 and L1
h2 headings, such as changing the font color and size. Use internal styles for the h3 and
h4 headings by applying styles using the id attribute, such as setting text alignment and
font-weight. Additionally, link an external stylesheet to define the body background
color, style the h5 heading, and set the paragraph's text color and font size using the
class attribute. Ensure the external stylesheet is properly linked to the HTML page.

Q2. Imagine you are designing a webpage for a product display. You want to style the L2, L3
product container using the CSS box model. The product container should have a
content width of 400px, padding of 20px on all sides, a border of 10px, and a margin of
15px around it. Inside this container, place an image of the product along with a brief
description. Arrange three products in a row and ensure that the images and
descriptions are properly aligned within each container.

Q3. Add a <div> element and an image element. Write "My Special Div" as inline text L3, L4
inside the <div> like <div>My Special Div</div>. Change the text color of the <div>
when the user moves the mouse over the image, and change it back when the user
moves the mouse out of the image.

Q4. Add an image as the background of a <div> element and change the image source L2, L3
when the user hovers the mouse over the image. In other words, when the user moves
the mouse pointer over the image, the background image should change.

Q5. Create an unordered list using the SOA Logo image as the list marker by applying the L3, L4
list-style-image property. Ensure proper padding, background size, and positioning for
correct alignment, and set the image to no-repeat. The font of the unordered list text
should be set from the sans-serif font family.
Q6. Create a webpage that displays an HTML table. Apply CSS styles (such as border, L2, L4
border-collapse, width, height, padding, etc.) to enhance its appearance. Additionally,
set a background color for the 1st, 4th, 7th, 10th, and every third row thereafter.

Q7. Create a vertical menu bar that sticks to either the left or right side of the page. L2, L3
Additionally, make the menu bar fixed so that it remains in the same position even
when the user scrolls down the page. (To add a scrollbar to the page, you can simulate
longer content by adding padding at the bottom of the page using the div element.)

Q8. Create a page having image with horizontal repetition, a horizontal navigation bar with L2, L3
hover effect and sticky position, and some style text. Image encircled with border and
outline of different style, width, and color. Increase the page height for the scroll effect.

Q9. Add a dropdown element with multiple values. Style each dropdown entry differently, L2, L3
such as using different fonts, colors, sizes, etc. When the user hovers over an element, a
dropdown box should appear in that area of the webpage.

Q10. Create a registration page that features the SOA logo centered on the page, along with L2, L3
form elements including text input fields, a password field, an email field, a radio
button, a dropdown list, and a submit button. Additionally, apply CSS to style each
form element for a better appearance.

-END-

You might also like