Assignment 1

Date of Submission:04/03/2024
1.Explain the use of selectors in CSS. What is the difference between Universal Selector and
Element Selector? Explain with an example. Write a CSS program for the following output
using class selector.
Output
Manipal University Jaipur (font size is equivalent to top heading)
Manipal University Jaipur (with normal paragraph font)
2.Write the HTML and CSS to display the college photo album of Manipal University Jaipur as
depicted in the below figure.
MUJ Photo Album
Classrooms
Laboratory Image Image
Hostels
Library Image Image

Food Court
MUJ Contact Details
The page should consist of a navigation pane with five sections of the college like Food Court,
Classroom, Library, Hostel etc. When the user will click on the sections, display the images and
caption information in a new window as shown in the figure. The contact footer has a blue
background, white text. The navigation pane further highlights the current page by changing the
text color/background.
3.Write the HTML5 to create the below form. Use HTML5 inbuild validations as mentioned
below. Add placeholder to each filed. The form layout must be generated with the use of an
external CSS file. Proper Grouping and input elements and caption must need to add.
1) Student Name (field should be not numeric)
2) Registration Number (should collect only numeric)
3) Email field (should take only proper email id)
4) Course Name (A dropdown filed with existing list)
5) Semester (A dropdown filed with existing list)
6) Address field (maybe multi-lined).
7) State Filed (A dropdown filed with existing list)
8) Pin code field (should collect Indian Pin code)
4.Write the CSS code to show the following features:
(a) Text on the Image with Transparent Hover Effect
(b) Show a Single image in three parts
(c) Submit button with given display
(d) Background image scrolls with the rest of the page
(e) Image shrinks on mouse Hover
5.Design a student registration form using HTML5 & external CSS where along with the submit
button there should also be a Clear button. Add a placeholder to each created field. Consider the
following HTML5 inbuilt validations & conditions:
a. The name of the student field should be alphabetic
b. Registration Number field should collect only numeric values
c. Email field should only be accepted with a valid email identifier
d. The name of the Program field should be selected with a dropdown list
e. The branch field should be selected with a dropdown list (if applicable, otherwise
there should be an option for selecting “NA”
f. The semester field must use roman numbers with a dropdown list
g. The address field should be multi-lined
h. State Filed should be selected with a dropdown list
i. Pin code field should collect Indian Pin codes only
You must use a marquee tag with the background color for the notification and events section
that you are going to create for the student registration form.