HTML and CSS Question Paper (SET – 9)
Total Marks: 50
1. Challenging Table Creation (20 marks)
a. Create an HTML table with the following specifications: (5 marks)
• Header Row: "Product", "Price", "Quantity", "Total"
• 3 Data Rows with sample product information.
• Use CSS to style the table with:
o Borders around each cell.
o Alternating row colors.
o Centered text in header and data cells.
o A background color for the header row.
o Hover effect to highlight rows.
• Include a caption for the table and ensure it is styled to stand out.
b. Implement a table with a nested table inside one of the data cells , make
smooth styles with CSS(15 marks)
• Example of nested table -
2. Challenging Form Design (20 marks)
a. Create a complex form with the following fields:
• Text Input: Name (with placeholder text)
• Email Input: Email Address
• Password Field: Password
• Date Picker: Date of Birth
• Number Input: Age (with a minimum value of 1 and a maximum value
of 100)
• Dropdown Menu: Country (with at least 5 options)
• Radio Buttons: Gender (Male, Female, Non-binary)
• Checkboxes: Interests (Music, Sports, Reading, Traveling)
• Textarea: Additional Comments
• File Upload: Attach a File
b. Style the form with CSS to ensure:
• Proper spacing and alignment for all fields.
• Consistent font size and colors.
• Distinct styles for different input types.
• A visually appealing submit button and reset button with different colors..
c. Validate that all required fields are filled before submission with HTML (5
marks)
d. After submitting a new page should open and show ‘Your form has been
submitted, Thank You.’ (5 marks)
3. Background and Font Customization (5 marks)
a. Change the background color of the page to light gray. (1 mark)
b. Set the font color to dark blue and change the font size to 16px. (2 marks)
c. Align a paragraph of text to the center. (2 marks)
4. Marquee and Hyperlink (5 marks)
a. Add a marquee effect that scrolls the text “Welcome to the HTML and CSS
Test” horizontally across the screen. (2 marks)
b. Create a hyperlink with the text “Visit [Link]” that points to an
external website (e.g., [Link] (3 marks)
5. Image and Fieldset (5 marks)
a. Insert an image with a width of 200px and height of 150px. Use a sample
image URL or placeholder image. (2 marks)
b. Create a fieldset with a legend that describes a section of the form (e.g.,
“Personal Information”). (3 marks)