WEB DESIGNING
Complete Study Guide
BCA Semester 5 | B23-VOC-106 | Kurukshetra University
HTML | CSS | Tables | Forms | Box Model | Positioning
⭐ You already know this subject — this is your FREE MARKS guide ⭐
Prepared for: Gurbachan | Roll No: 2430043
UNIT I — Web Programming Introduction & HTML
Basics
This unit covers the architecture of websites, introduction to HTML, basic formatting tags,
lists, images and hyperlinks. Since you already know HTML well, use this unit to make sure
you know the technical names and definitions for exam answers.
1.1 Architecture of a Website
A website follows a client-server architecture where the browser (client) requests web pages
and the server responds with HTML, CSS, and JavaScript files.
Component Description Example
Client Browser that requests and displays Chrome, Firefox, Safari
web pages
Web Server Stores and serves web files Apache, Nginx, IIS
HTTP/HTTPS Protocol for transferring web pages [Link]
HTML Structure of web page Headings, paragraphs, images
CSS Styling of web page Colors, fonts, layout
JavaScript Interactivity of web page Button clicks, animations
1.2 Static vs Dynamic Websites
Aspect Static Website Dynamic Website
Content Fixed — same for all users Changes based on user/database
Technologies HTML + CSS only HTML + CSS + JS + Backend +
Database
Speed Faster — no server processing Slower — server processes each
request
Example Portfolio, college brochure site Facebook, Amazon, Gmail
Maintenance Manual update of HTML files Database updates content
automatically
💡 Exam Tip: Static vs Dynamic is a guaranteed Unit I question. Know both definition AND
examples.
1.3 HTML Basics
HTML (HyperText Markup Language) is the standard language for creating web pages.
Created by Tim Berners-Lee in 1991. Current version: HTML5.
Basic Structure of HTML Document:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML Tag vs Element vs Attribute:
Term Definition Example
Tag Opening or closing marker <p> or </p>
Element Opening tag + content + closing tag <p>Hello</p>
Attribute Extra information inside opening tag <p class='intro'>Hello</p>
Void Element Self-closing tag, no closing needed <br>, <img>, <hr>, <input>
1.4 Basic Formatting Tags
Tag Purpose Example
<h1> to <h6> Headings — h1 largest, h6 <h1>Main Heading</h1>
smallest
<p> Paragraph <p>This is text.</p>
<b> or <strong> Bold text <b>Bold</b>
<i> or <em> Italic text <i>Italic</i>
<u> Underline <u>Underlined</u>
<br> Line break (void element) Line 1<br>Line 2
<hr> Horizontal rule/line (void) <hr>
<sup> Superscript x<sup>2</sup>
<sub> Subscript H<sub>2</sub>O
<pre> Preformatted text <pre> spaced text </pre>
<blockquote> Indented quotation <blockquote>Quote here</blockquote>
<div> Block-level container <div class='section'>...</div>
(grouping)
<span> Inline container (grouping) <span style='color:red'>text</span>
📝 div = block level (takes full width, starts new line). span = inline (only as wide as content, stays
in line).
1.5 HTML Lists
List Type Tag Description Example
Unordered List <ul> Bullet points <ul><li>Item</li></ul>
Ordered List <ol> Numbered list <ol><li>First</li></ol>
Definition List <dl> Term and definition pairs <dl><dt>Term</
dt><dd>Definition</dd></dl>
<ul type='disc'> <!-- disc, circle, square -->
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol type='1'> <!-- 1, A, a, I, i -->
<li>First</li>
<li>Second</li>
</ol>
1.6 Images
<img src='[Link]' alt='My Photo' width='300' height='200'>
Attribute Purpose
src Source — path to image file
alt Alternative text — shown if image fails to load, important for accessibility
width Width of image in pixels or percentage
height Height of image in pixels or percentage
title Tooltip text shown on hover
Image Mapping — clickable regions on an image:
<img src='[Link]' usemap='#mymap'>
<map name='mymap'>
<area shape='rect' coords='0,0,100,100' href='[Link]' alt='Region 1'>
<area shape='circle' coords='200,200,50' href='[Link]' alt='Region 2'>
</map>
1.7 Hyperlinks
<a href='[Link] Google</a>
<a href='[Link]'>Internal Link</a>
<a href='[Link] Email</a>
<a href='#section1'>Jump to Section</a> <!-- anchor link -->
<a href='[Link]' download>Download PDF</a>
Attribute Purpose
href URL or path the link points to
target='_blank' Open link in new tab
target='_self' Open in same tab (default)
title Tooltip on hover
download Download the linked file instead of opening
Unit I — Quick Revision Box
Topic One-Line Summary
HTML HyperText Markup Language — structure of web pages —
created 1991
Static site Fixed HTML+CSS only — same for all users
Dynamic site Backend + database — content changes per user
Tag vs Element Tag = <p>. Element = <p>content</p>. Attribute = extra info in
tag
div vs span div = block (full width). span = inline (fits content)
Ordered list <ol> — numbered. <ul> — bullets. <dl> — definition pairs
img tag src (path), alt (text if fails), width, height
Hyperlink <a href='url'>text</a> — target='_blank' opens new tab
Image map Clickable areas on image using <map> and <area> tags
UNIT II — HTML Tables, Iframes & Forms
2.1 HTML Tables
Tables organize data in rows and columns. Used for displaying structured data — NOT for
page layout (use CSS for layout).
Tag Purpose
<table> Defines the table
<tr> Table Row — contains cells
<th> Table Header cell — bold and centered by default
<td> Table Data cell — regular cell
<caption> Title/caption above the table
<thead> Groups header rows — semantic grouping
<tbody> Groups body rows
<tfoot> Groups footer rows
<colgroup> Groups columns for styling
<col> Individual column within colgroup
Basic Table Example:
<table border='1'>
<caption>Student Marks</caption>
<thead>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gurbachan</td>
<td>85</td>
</tr>
</tbody>
</table>
Colspan & Rowspan:
<td colspan='2'>Spans 2 columns</td> <!-- merges horizontally -->
<td rowspan='3'>Spans 3 rows</td> <!-- merges vertically -->
💡 Exam Tip: Colspan = merge columns (horizontal). Rowspan = merge rows (vertical).
Drawing the table structure first helps in exam.
🎯 Niche Q: What is the difference between <th> and <td>?
→ <th> is a table header cell — bold, centered, and has semantic meaning (screen readers
announce it as a header). <td> is a regular data cell — no special formatting by default. Use <th> for
column/row headings, <td> for data.
2.2 HTML Iframe
An iframe (Inline Frame) embeds another HTML page inside the current page.
<iframe src='[Link] width='600' height='400'></iframe>
Attribute Purpose
src URL of the page to embed
width / height Dimensions of the iframe
name Name for targeting — used with hyperlinks
frameborder 0 = no border, 1 = border
scrolling yes / no / auto
sandbox Restricts content — security feature
Using Iframe as Target:
<!-- Link opens in iframe instead of new page -->
<iframe name='myframe' width='600' height='400'></iframe>
<a href='[Link]' target='myframe'>Open in Frame</a>
2.3 HTML Forms
Forms collect user input and send it to a server for processing.
<form action='[Link]' method='POST'>
<!-- form elements go here -->
</form>
Attribute Values Purpose
action URL Where to send form data
method GET or POST GET = data in URL. POST = data in body (more
secure)
enctype multipart/form-data Required for file uploads
Form Elements:
Element Type/Usage Example
<input type='text'> Single-line text field Name, username
<input type='password'> Password field (masked) Password entry
<input type='email'> Email with validation Email address
<input type='number'> Numeric input Age, quantity
<input type='checkbox'> Multiple selection boxes Interests, agree to terms
<input type='radio'> Single selection from Gender, yes/no
group
<input type='file'> File upload Upload photo/document
<input type='submit'> Submit button Submit form
<input type='reset'> Reset all fields Clear form
<input type='date'> Date picker Date of birth
<textarea> Multi-line text area Comments, messages
<select> Dropdown menu Select country/city
<button> Clickable button Custom styled button
<label> Label for an input Connects label to input via for= attribute
<fieldset> Groups related form Groups personal info fields
elements
<legend> Title for fieldset Personal Information
Complete Form Example:
<form action='[Link]' method='POST'>
<fieldset>
<legend>Student Registration</legend>
<label for='name'>Name:</label>
<input type='text' id='name' name='name' required>
<br><br>
<label for='email'>Email:</label>
<input type='email' id='email' name='email'>
<br><br>
<label>Gender:</label>
<input type='radio' name='gender' value='female'> Female
<input type='radio' name='gender' value='male'> Male
<br><br>
<label for='course'>Course:</label>
<select id='course' name='course'>
<option value='bca'>BCA</option>
<option value='bsc'>[Link] CS</option>
</select>
<br><br>
<label for='msg'>Message:</label>
<textarea id='msg' name='msg' rows='4' cols='30'></textarea>
<br><br>
<input type='submit' value='Register'>
<input type='reset' value='Clear'>
</fieldset>
</form>
💡 Exam Tip: GET vs POST is always asked. GET = data visible in URL (use for search).
POST = data hidden in body (use for passwords, forms).
🎯 Niche Q: What is the difference between <button> and <input type='submit'>?
→ <input type='submit'> is a void element that can only contain text. <button> can contain HTML —
you can put images, icons, styled text inside it. Both submit the form by default but <button> is more
flexible for styling.
Unit II — Quick Revision Box
Topic One-Line Summary
Table tags table > thead/tbody/tfoot > tr > th/td
colspan Merge columns horizontally
rowspan Merge rows vertically
caption Title for table — placed right after <table>
iframe Embed another page — src, width, height, name
iframe as target Set name on iframe, use target=name on link
form action Where data is sent (URL)
GET vs POST GET = data in URL. POST = data in body (secure)
label for= Connects label to input via matching id
fieldset + legend Group form elements with a title box
textarea Multi-line text — rows and cols attributes
select + option Dropdown menu
UNIT III — CSS Introduction & Text Styling
3.1 Introduction to CSS
CSS (Cascading Style Sheets) controls the visual presentation of HTML elements — colors,
fonts, layout, spacing. Without CSS, web pages are plain black text on white background.
Benefits of CSS:
• Separation of content (HTML) and presentation (CSS)
• One CSS file can style hundreds of HTML pages
• Easy to update — change one file, update entire site
• More control over layout than HTML attributes
• Responsive design — different styles for different screen sizes
3.2 CSS Syntax
selector {
property: value;
property: value;
}
/* Example */
h1 {
color: blue;
font-size: 24px;
text-align: center;
}
3.3 Types of CSS
Type Where Written Syntax Priority
Inline CSS Inside HTML tag style <p style='color:red'> Highest —
attribute overrides all
Internal CSS Inside <style> tag in <style> p { color:red; } </style> Medium
<head>
External CSS Separate .css file, linked <link rel='stylesheet' Lowest — but
with <link> href='[Link]'> best practice
💡 Exam Tip: Inline > Internal > External in priority (specificity). But External CSS is best
practice for real projects because it separates concerns and is reusable.
3.4 CSS Selectors
Selector Syntax Selects Example
Element tagname All elements of that tag p { color: blue; }
ID #idname ONE specific element #header { background:
(unique) navy; }
Class .classname All elements with that class .highlight { color: red; }
Universal * Every element on page * { margin: 0; padding: 0; }
Grouping a, b, c Multiple selectors same style h1, h2, p { font-family:
Arial; }
Descendant ab b inside a (any depth) div p { color: green; }
Child a>b b directly inside a only ul > li { color: red; }
Pseudo-class a:hover Element in a specific state a:hover { color: orange; }
Pseudo-element a::before Part of an element p::first-line { font-weight:
bold; }
Common Pseudo-classes:
a:link { color: blue; } /* unvisited link */
a:visited { color: purple; } /* visited link */
a:hover { color: orange; } /* mouse over */
a:active { color: red; } /* being clicked */
input:focus { border: 2px solid blue; } /* focused input */
li:first-child { font-weight: bold; }
li:last-child { color: gray; }
li:nth-child(2) { background: yellow; }
Common Pseudo-elements:
p::first-line { font-size: 20px; } /* first line of paragraph */
p::first-letter { font-size: 40px; } /* drop cap effect */
h1::before { content: '>> '; } /* insert before element */
h1::after { content: ' <<'; } /* insert after element */
🎯 Niche Q: What is the difference between a pseudo-class and a pseudo-element?
→ Pseudo-class (:hover, :focus, :nth-child) targets an element in a specific STATE or POSITION.
Pseudo-element (::before, ::first-line) targets a specific PART of an element that doesn't exist as a
separate HTML element. Pseudo-class uses single colon in old CSS, double colon for pseudo-
elements in CSS3 (though both work with single colon for backward compatibility).
3.5 Text & Font Properties
Property Values Description
color red, #FF0000, rgb(255,0,0) Text color
background-color blue, #0000FF, transparent Background color of element
text-decoration none, underline, overline, line- Decorations on text
through
text-align left, right, center, justify Horizontal alignment
vertical-align top, middle, bottom, baseline Vertical alignment in line
text-indent 20px, 2em Indent first line of text
text-transform uppercase, lowercase, Change case of text
capitalize, none
white-space normal, nowrap, pre How white space is handled
letter-spacing 2px, -1px, normal Space between characters
word-spacing 5px, normal Space between words
line-height 1.5, 24px, normal Space between lines
Font Properties:
Property Values Description
font-family Arial, 'Times New Roman', serif Font face — always have
fallback
font-size 16px, 1em, 100%, large Size of text
font-style normal, italic, oblique Italic or not
font-variant normal, small-caps Small caps text
font-weight normal, bold, 100-900 Thickness of text
/* Font shorthand — size/line-height family */
p {
font: italic bold 16px/1.5 Arial, sans-serif;
}
Unit III — Quick Revision Box
Topic One-Line Summary
CSS Controls visual presentation — color, font, layout
Inline CSS style='' in tag — highest priority
Internal CSS <style> in <head> — medium priority
External CSS Separate .css file — best practice
ID selector #id — unique, one element only
Class selector .class — multiple elements
Universal selector * — selects everything
Pseudo-class :hover :focus :nth-child — element STATE
Pseudo-element ::before ::after ::first-line — part of element
text-transform uppercase / lowercase / capitalize
font-family Always include fallback: Arial, sans-serif
line-height Space between lines — 1.5 is comfortable for reading
UNIT IV — CSS Lists, Tables, Box Model &
Positioning
4.1 CSS Lists
Property Values Description
list-style-type disc, circle, square, none (ul) / Shape or style of list marker
decimal, upper-roman, lower-alpha
(ol)
list-style-position inside, outside outside = marker outside text
block (default). inside = marker
inside
list-style-image url('[Link]') Custom image as list marker
list-style shorthand list-style: square inside
url('[Link]')
ul {
list-style-type: square;
list-style-position: inside;
}
ol {
list-style-type: upper-roman; /* I, II, III, IV */
}
4.2 CSS Tables
Property Description
border Table and cell borders — border: 1px solid black
border-collapse collapse = single border between cells. separate = double border
width / height Table or cell dimensions
text-align Horizontal alignment of cell content
vertical-align Vertical alignment — top, middle, bottom
padding Space inside each cell
background-color Color of table or specific cells
border-spacing Space between cells (when border-collapse: separate)
table {
width: 100%;
border-collapse: collapse; /* single borders */
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: left;
}
th {
background-color: #1a3a5c;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2; /* zebra striping */
}
4.3 CSS Box Model
Every HTML element is a rectangular box. The CSS Box Model defines the layers around
content.
┌─────────────────────────────────┐
│ MARGIN │ ← space outside border
│ ┌───────────────────────────┐ │
│ │ BORDER │ │ ← visible border line
│ │ ┌─────────────────────┐ │ │
│ │ │ PADDING │ │ │ ← space inside border
│ │ │ ┌───────────────┐ │ │ │
│ │ │ │ CONTENT │ │ │ │ ← actual text/image
│ │ │ └───────────────┘ │ │ │
│ │ └─────────────────────┘ │ │
│ └───────────────────────────┘ │
└─────────────────────────────────┘
Box Part Property Description
Content width, height Actual content area — text, images
Padding padding, Space INSIDE border — pushes content
padding-top/right/bottom/left inward
Border border, border-width, border- Visible line around padding
style, border-color
Margin margin, Space OUTSIDE border — separates
margin-top/right/bottom/left from other elements
div {
width: 300px;
padding: 20px; /* all 4 sides */
border: 2px solid navy;
margin: 10px 20px; /* top/bottom: 10px, left/right: 20px */
}
/* Shorthand: top right bottom left (clockwise) */
padding: 10px 20px 15px 5px;
margin: 0 auto; /* center element horizontally */
box-sizing property:
/* Default: width = content only */
box-sizing: content-box; /* total = width + padding + border */
/* Better: width includes padding and border */
box-sizing: border-box; /* total = width (padding+border inside) */
💡 Exam Tip: Box Model is one of the most important CSS concepts. Total element width =
content width + padding left + padding right + border left + border right + margin left +
margin right.
🎯 Niche Q: What is the difference between margin and padding?
→ Padding is space INSIDE the border — between the content and the border. It has the element's
background color. Margin is space OUTSIDE the border — between the element and neighboring
elements. Margin is always transparent. Collapsing margins: top and bottom margins of adjacent
elements collapse into one (takes the larger value). Padding never collapses.
4.4 CSS Positioning
Position Value Description Key Behavior
static Default — normal document Not affected by top/left/right/bottom
flow properties
relative Positioned relative to its Stays in document flow, offset with
normal position top/left/right/bottom
absolute Positioned relative to nearest Removed from document flow — other
positioned ancestor elements ignore it
fixed Positioned relative to browser Stays in place when scrolling — great for
viewport headers/nav
sticky Hybrid of relative and fixed Relative until scroll threshold, then fixed
/* Static — default, no positioning needed */
.normal { position: static; }
/* Relative — move 20px down, 10px right from normal position */
.relative-box {
position: relative;
top: 20px;
left: 10px;
}
/* Absolute — positioned from nearest positioned parent */
.parent { position: relative; } /* must set parent as positioned */
.absolute-box {
position: absolute;
top: 0;
right: 0; /* top-right corner of parent */
}
/* Fixed — stays at top of viewport even when scrolling */
.navbar {
position: fixed;
top: 0;
width: 100%;
background: navy;
}
💡 Exam Tip: Static = default (top/left don't work). Relative = from own position. Absolute =
from parent (parent must be positioned). Fixed = from viewport (stays on scroll).
🎯 Niche Q: What is the difference between absolute and fixed positioning?
→ Both are removed from normal document flow. The difference is the reference point: absolute
positioning is relative to the nearest ancestor that has position set (relative/absolute/fixed) — it scrolls
with the page. Fixed positioning is always relative to the browser viewport — it stays in the same
place even when you scroll. Use fixed for sticky navigation bars, back-to-top buttons, chat widgets.
Unit IV — Quick Revision Box
Topic One-Line Summary
list-style-type disc/circle/square for ul. decimal/roman/alpha for ol
list-style-position outside (default) or inside (marker inside text block)
border-collapse collapse = single border between cells
Box Model order Content → Padding → Border → Margin (inside out)
Padding vs Margin Padding = inside border. Margin = outside border
box-sizing: border-box Width includes padding and border — more intuitive
margin: 0 auto Centers block element horizontally
static Default — no positioning
relative From own normal position — stays in flow
absolute From positioned parent — removed from flow
fixed From viewport — stays on scroll
sticky Relative until scroll, then fixed
Master Niche Questions — All Units
Unit I
🎯 Niche Q: What does 'Cascading' mean in CSS?
→ Cascading refers to the priority order when multiple CSS rules apply to the same element. It
cascades down: Inline style (highest) → Internal style → External style → Browser default (lowest).
Within the same level, the LAST rule wins. Specificity also matters: ID (#id) > Class (.class) > Element
(p).
🎯 Niche Q: What is the difference between HTML and HTML5?
→ HTML5 introduced semantic elements (<header>, <footer>, <nav>, <article>, <section>), native
audio/video support (<audio>, <video>), canvas for drawing, local storage, geolocation API, and form
enhancements (date picker, email validation). HTML5 also removed deprecated tags like <font>,
<center>, <frame>. DOCTYPE declaration became simpler: just <!DOCTYPE html>.
Unit II
🎯 Niche Q: What is the difference between GET and POST methods in forms?
→ GET appends form data to the URL as query parameters — visible in browser address bar,
bookmarkable, cacheable, limited to ~2000 characters, insecure for sensitive data. POST sends data
in the HTTP request body — not visible in URL, not cached, no size limit, more secure. Use GET for
search forms (bookmarkable results). Use POST for login, registration, file upload, any sensitive or
large data.
🎯 Niche Q: Why should you not use tables for page layout?
→ Tables were misused for layout before CSS. Problems: semantic incorrectness (tables are for
data not layout), poor accessibility (screen readers announce table structure which confuses users),
slow rendering (browser waits for entire table before displaying), inflexible (hard to make responsive),
bad for SEO. Always use CSS Flexbox or Grid for layout.
Unit III & IV
🎯 Niche Q: What is specificity in CSS and how is it calculated?
→ Specificity determines which CSS rule wins when multiple rules target the same element.
Calculate as (a, b, c): a = number of ID selectors, b = number of class/attribute/pseudo-class
selectors, c = number of element/pseudo-element selectors. Higher specificity wins. Example:
#nav .item p = (1,1,1). .item p = (0,1,1). p = (0,0,1). Inline styles beat all (1,0,0,0). !important overrides
everything (avoid using it).
🎯 Niche Q: What is the difference between display:none and visibility:hidden?
→ display:none removes the element from the document flow completely — it takes up no space
and is not rendered at all. visibility:hidden hides the element visually but it still occupies space in the
layout — the gap remains. Use display:none when you want to completely remove an element. Use
visibility:hidden when you want to hide it but keep its space.
Practicals — HTML & CSS Programs
These are the exact practical programs from your syllabus. Know all of these — they appear
in practical exam.
1. Hello World in Bold and Italic
<!DOCTYPE html>
<html>
<head><title>Hello World</title></head>
<body>
<b>Hello World</b><br>
<i>Hello World</i><br>
<b><i>Hello World in Bold and Italic</i></b>
</body>
</html>
2. Page with Background and Text Color
<!DOCTYPE html>
<html>
<head><title>My First Web Page</title></head>
<body bgcolor='lightblue' text='darkblue'>
<font face='Arial' size='5' color='navy'>
<h1>My First Web Page</h1>
<p>This page has a light blue background with dark blue text.</p>
</font>
</body>
</html>
3. Text with Heading Styles
<body>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<p>This is a regular paragraph with some text content.</p>
</body>
4. Three Images — Left, Right, Center
<body>
<img src='[Link]' alt='Left' align='left' width='200'>
<img src='[Link]' alt='Right' align='right' width='200'>
<p align='center'>
<img src='[Link]' alt='Center' width='200'>
</p>
</body>
5. Hyperlinks
<body>
<a href='[Link] Link</a><br>
<a href='[Link]'>Internal Link</a><br>
<a href='[Link] target='_blank'>Open in New Tab</a><br>
<a href='[Link] Link</a><br>
<a href='#section2'>Jump to Section 2</a>
<h2 id='section2'>Section 2</h2>
</body>
6. HTML Table with Colspan and Rowspan
<table border='1' cellpadding='10'>
<caption>Student Report Card</caption>
<tr>
<th colspan='3'>BCA Semester 5 Results</th>
</tr>
<tr>
<th rowspan='2'>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Networks</td>
<td>85</td>
</tr>
<tr>
<td>Gurbachan</td>
<td>Backend Dev</td>
<td>90</td>
</tr>
</table>
7. HTML Form
<form action='[Link]' method='POST'>
<label for='name'>Name:</label>
<input type='text' id='name' name='name'><br><br>
<label for='email'>Email:</label>
<input type='email' id='email' name='email'><br><br>
<label>Gender:</label>
<input type='radio' name='gender' value='f'> Female
<input type='radio' name='gender' value='m'> Male<br><br>
<label for='course'>Course:</label>
<select id='course' name='course'>
<option>BCA</option>
<option>[Link] CS</option>
</select><br><br>
<label for='msg'>Message:</label><br>
<textarea id='msg' rows='4' cols='30'></textarea><br><br>
<input type='submit' value='Submit'>
<input type='reset' value='Clear'>
</form>
8. CSS Practical
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial; background-color: #f0f0f0; }
h1 { color: navy; text-align: center; text-transform: uppercase; }
p { color: #333; line-height: 1.6; letter-spacing: 1px; }
.highlight { background-color: yellow; font-weight: bold; }
#main { width: 600px; margin: 0 auto; padding: 20px; border: 2px solid
navy; }
a:hover { color: orange; text-decoration: none; }
</style>
</head>
<body>
<div id='main'>
<h1>CSS Demo Page</h1>
<p>This is a <span class='highlight'>highlighted</span> paragraph.</p>
<a href='#'>Hover over me</a>
</div>
</body>
</html>
Exam Strategy for Web Designing
⭐ YOU ALREADY KNOW THIS SUBJECT ⭐
Paper Pattern
• 9 questions total — Q1 compulsory (short answers all units)
• Attempt 5 total — 1 from each unit + Q1
• Both theory (50 marks end term) and practical (20 marks end term)
High Priority Topics
Topic Why Important
All HTML tags with attributes Direct questions — write tag + example
CSS Box Model diagram Always asked — draw the diagram
CSS Positioning all 4 types Comparison question every semester
GET vs POST Classic form question
CSS Selectors — ID vs Class vs Specificity question
Element
colspan vs rowspan Table practical question
Pseudo-class vs Pseudo-element Niche but often asked
Static vs Dynamic websites Unit I theory question
CSS Types — Inline, Internal, Priority + when to use each
External
Exam Writing Tips
• For every HTML tag question — write the tag, its attributes, and a code example
• For CSS questions — write property name, possible values, and example
• For Box Model — DRAW the diagram, then explain each layer
• For positioning — compare all 4 in a table
• For practical — write clean, indented code with comments
• Q1 short answers — one definition + one example each
— End of Web Designing Study Guide —
Prepared for Gurbachan | BCA Sem 5 | Roll No: 2430043 | KUK