HTML and CSS – Complete Theoretical Notes
HTML Forms
HTML forms are used to collect user input. A form contains input elements such as text fields,
checkboxes, radio buttons, submit buttons, etc. Form tags: <form> — Defines the form container.
<input> — Used for different types of data entry (text, email, password, etc.). <textarea> — For
multi-line text input. <select> — Dropdown list. <option> — Defines options within <select>.
<button> — For clickable buttons. Form Attributes: • action — URL where form data is sent. •
method — Defines the HTTP method (GET or POST). • name — Identifies the form. • target —
Determines where to display response. • enctype — Encoding type for file uploads. Example: <form
action="[Link]" method="post"> Name: <input type="text" name="username"> <input
type="submit" value="Submit"> </form>
IFrames
An IFrame (Inline Frame) allows embedding another webpage within a page. Syntax: <iframe
src="[Link] width="600" height="400"></iframe> Attributes: • src — URL of the page
to embed. • width, height — Dimensions of the frame. • name — Assigns a name for targeting links.
• frameborder — 0 (no border) or 1 (border).
Building Responsive Webpages
Responsive design ensures a webpage looks good on all devices. Techniques: • Use relative units
(%, em, rem) instead of fixed units. • Use CSS media queries: @media screen and (max-width:
768px) { body { background-color: lightblue; } } • Use flexible images and layouts. • Use frameworks
like Bootstrap.
CSS Introduction
CSS (Cascading Style Sheets) is used to style HTML elements — controlling colors, fonts, layout,
and spacing. Syntax: selector { property: value; } Example: h1 { color: blue; text-align: center; }
CSS Comments
Comments help describe the code. Syntax: /* This is a comment */
Applying Styles to HTML Elements
There are three ways to apply CSS: 1. Inline: <h1 style='color:red;'>Text</h1> 2. Internal: <style>
h1 { color:blue; } </style> 3. External: <link href='[Link]' rel='stylesheet'>
Selector Forms
Types of Selectors: • Universal (*) – All elements. • Element (p) – Specific tags. • Class
(.className) – Elements with a class. • ID (#id) – Unique element. • Descendant (div p) – Elements
inside another element.
CSS Margins and Padding
Margin – Space outside an element’s border. Padding – Space inside an element’s border.
Example: div { margin: 10px; padding: 5px; }
CSS Height and Width
Controls element dimensions. Example: div { width: 200px; height: 100px; }
CSS Text
Properties include: • text-align: left/right/center/justify • text-decoration: underline/none/overline •
text-transform: uppercase/lowercase/capitalize • letter-spacing: space between letters •
text-shadow: adds shadow to text
CSS Font Properties
• font-family: Specifies font type. • font-size: Sets size (px, em, %). • font-style: normal/italic/oblique.
• font-weight: normal/bold. Example: p { font-family: Arial; font-size: 16px; }
CSS List Properties
Used to style lists. Example: ul { list-style-type: square; } ol { list-style-type: upper-roman; }
The Box Model
All HTML elements can be seen as boxes with: • Content → Padding → Border → Margin.
Example: div { margin:10px; border:2px solid black; padding:5px; }
CSS Links
Link states: a:link — Normal link. a:visited — After visit. a:hover — On mouse hover. a:active —
While clicking. Example: a:hover { color: red; }
CSS Position and Z-Index
Position defines how an element is placed. Types: • static – Default position. • relative – Positioned
relative to normal spot. • absolute – Positioned relative to parent. • fixed – Stays in one place on
screen. • sticky – Toggles between relative and fixed. Z-index defines stacking order. Example: div {
position: absolute; z-index: 2; }
