FRONT-END DEVELOPMENT
ASSIGNMENT 2
STUDENT
[Link]
NAME: YEAR:
II year
COLLEGE CODE: UNM101
COLLEGE RAJESWARI VEDHACHALAM GOVT ARTS COLLEGE
NAME: COMPUTER SCIENCE
DEPARTMENT: IV th SEMESTER
SEMESTER: 22400093
ROLL NO:
asunm101222400093
NMID:
DATE: 06/03/2026
PROJECT TITLE: SIMPLE EVENT REGISTRATION PAGE -STYLING WITH CSS
1. Problem Statement:
In many colleges and organizations, small events such as workshops, seminars,
and training programs require a simple way to collect participant details. In Assignment-
1, a basic event registration page was created using HTML which provided the structure
of the webpage. However, the page lacked visual appeal and proper layout.
To improve the appearance and usability of the webpage, CSS styling is required.
CSS helps in enhancing the layout, readability, spacing, colors, and overall user
experience of the page. Therefore, this assignment focuses on applying CSS to transform
the plain HTML page into a clean, professional, and visually attractive event registration
interface.
2. Objective:
The main objective of this assignment is to apply CSS styling techniques to
enhance the basic HTML event registration page. The goal is to improve the design,
structure, and visual presentation of the webpage.
Through this assignment, students will learn how to apply global styles, design
form layouts, style tables, and create interactive elements such as buttons with hover
effects. The assignment also aims to demonstrate how CSS can control the presentation
of a webpage without modifying the core HTML structure.
3. Requirements:
3.1 Apply Global Styling:
Global styling is applied to maintain a consistent design across the webpage. A
pleasant background color or gradient is used to make the page visually appealing.
A readable font family such as Arial or Verdana is applied to improve readability.
Margin and padding are added to ensure proper spacing between elements.
Text alignment and colors are also maintained consistently throughout the page.
3.2 Style the Event Title and Description:
The event title is styled using a larger font size and a distinct color so that it becomes
the most noticeable element on the page.
Additional spacing is provided below the heading to separate it from other sections.
The event description is formatted with proper line height to improve readability.
A subtle divider line can also be added below the heading to visually separate the
header section.
3.3. Design the Event Information Section
The event information section contains details such as the event date, time, venue,
and organizer name. To improve readability, borders and spacing are added around the content.
Background shading is used to separate this section from the rest of the page. Text alignment is
adjusted to maintain a neat and organized layout. A hover effect may also be applied to enhance
interactivity.
3.4 Enhance the Registration Form Layout:
The registration form is placed inside a centered card-style container to improve
the structure of the page. The form container includes borders, padding, rounded corners, and a
light box shadow to create a modern design. Proper spacing is maintained between labels and
input fields to ensure clarity. Input fields are given a uniform width and padding so that the
form looks well organized.
3.5 Style Field sets and Legends:
Field sets are used to group related form inputs together. CSS styling is applied to
improve their appearance by adding borders and internal spacing. The legend text is highlighted
with bold styling and a slight background color to distinguish it from other text. Padding is also
added to improve readability.
3.6 Improve Input Elements:
All input elements such as textboxes, dropdown lists, radio buttons, checkboxes,
file upload fields, and text areas are styled consistently. Padding and border radius are applied
to textboxes to make them more user-friendly. Radio buttons and checkboxes are spaced
properly to avoid clutter. Text areas are given adequate height to allow comfortable typing. A
focus effect is also added so that the border color changes when the user selects an input field.
3.7 Button Styling:
The submit and reset buttons are designed to look attractive and interactive. CSS is used
to apply background colors, padding, and rounded edges to the buttons. A pointer cursor
appears when the user hovers over the button. A hover effect is also added to change the
color of the button when the mouse pointer is placed on it. A small shadow or transition
effect may also be included to make the buttons visually appealing.
3.4 Style the Participants Table:
The participants table is styled to improve readability and structure. Borders are added
to the table and collapsed neatly. The table header is given a background color to
differentiate it from the data rows. Alternate rows are styled with different background
colors to create a zebra stripe effect. A hover effect is also applied to highlight rows when
the user moves the mouse over them.
3.4 Style the Declaration Section:
The declaration checkbox section is styled to make it clear but not overly distracting.
Spacing is added above the section to separate it from other elements. The checkbox is
properly aligned with the label text. The font size of the declaration text is slightly
reduced to maintain visual balance within the form.
3.5 Footer Design:
The footer section is designed to display important contact details such as email
address, help desk number, and copyright information. A background color different from the
main page is used to distinguish the footer. The text is center aligned and appropriate padding is
added. The font size is slightly smaller than the main content and a top margin is added to
separate it from the form section.
4. CSS Concepts Used:
The following CSS concepts were used while designing the webpage:
CSS Selectors (element, class, and id)
Box Model (margin, border, padding)
Background colors and gradients
Typography (font-size, font-family)
Alignment and spacing
Border radius
Box shadow
Hover effects
Table styling
Form styling
These concepts helped in improving the visual presentation and layout of the webpage.
5. Implementation Steps:
Created an external CSS file named [Link].
Linked the CSS file with the HTML page using the <link> tag.
Applied global styles for fonts, background colors, and spacing.
Styled the header section including the event title and description.
Designed the event information section using borders and background
colors.
Created a card-style layout for the registration form.
Styled input elements, fieldsets, legends, and text areas.
Added hover effects and styling for the submit and reset buttons.
Improved the participants table using borders, header colors, and zebra
striping.
Designed a footer section with contact information and proper alignment.
6. OUTPUT :
7. Learning Outcome:
Through this assignment, I learned how to enhance the appearance of a webpage
using CSS. I understood how styling techniques such as colors, spacing, borders,
shadows, and typography can improve the layout and readability of a webpage. I also
gained experience in designing form layouts and applying hover effects to create
interactive elements.
8. Conclusion:
In this assignment, the basic HTML event registration page was successfully
enhanced using CSS styling. The page now has a structured layout, improved
readability, and an attractive design. CSS helped in controlling the visual presentation
of the webpage without modifying its functionality. This assignment provided a clear
understanding of how CSS plays an important role in front-end web development.
