📘 CHAPTER 3 — CSS (Cascading Style

Sheets)
(Complete Notes – Exam Medium Detail – No Skipping)

1. What is CSS?
CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation and
layout of HTML documents.

Purpose of CSS:

 Control size, spacing, colors, fonts, alignment, etc.

 Define visual styling separate from HTML content.
 Improve design consistency across web pages.

2. Why CSS is Needed

Originally, HTML alone could not fully separate content from presentation.

Problems before CSS:

 HTML used tags like <font> and attributes for appearance

 Styling was repeated on every page
 Large websites became hard to maintain

Solution:
W3C introduced CSS to separate styling from structure.

3. Role of CSS in Web Design

CSS allows:
✔ better layout control
✔ control over typography
✔ consistent design across multiple pages
✔ faster editing and updating of styles

CSS = visual design layer

HTML = content layer

4. CSS Benefits
1. Less Work
Change one CSS file → affects whole site
2. Smaller Documents
Avoids repeated <font> tags and inline styles
3. Faster Downloads
Shared CSS file gets cached by browser
4. Accessibility
Content becomes readable across devices (mobile, screen readers, etc.)
5. Browser Support
Most modern browsers support CSS1 & CSS2; CSS3 partially

5. CSS Levels / Versions

CSS has 3 main levels:

A. CSS1 (1996)

Features:

 Fonts
 Text color
 Background colors/images
 Margins, padding, borders
 Basic positioning

B. CSS2 (1998)

Adds:

 Absolute, relative, fixed positioning

 z-index
  Media types
 Aural style sheets
 Bidirectional text
 Font shadows

CSS 2.1
Fixes errors and removes unsupported features from CSS2.

C. CSS3

Modular approach:

 New modules expand CSS2.1

 Adds animations, transitions, flex, grid, shadows, rounded borders, etc.

6. CSS Syntax
A CSS rule has:

 Selector → what element to style

 Declaration block → styling properties

Example:

h1 {
color: blue;
font-size: 20px;
}

7. Components of a CSS Rule

Selector:
Targets element(s) (e.g., p, h1, div)

Declaration:
Property + value pair

Example:

color: red;

Property: attribute to change (e.g., color, font-size, margin)

Value: describes property (e.g., red, 16px, center)

8. CSS Comments
Syntax:

/* comment text */

Purpose:

 Explain code
 Help editing later
 Ignored by browsers

9. CSS Selectors
Selectors define which elements receive styling.

Types:

1. Tag/Type Selector
Targets HTML tag
Example: p { color:red; }
2. ID Selector
Targets single unique element
Uses #
Example: #menu { padding:10px; }
3. Class Selector
Targets group of elements
Uses .
Example: .center { text-align:center; }
4. Grouped Selectors
Apply rule to multiple selectors
Example:

h1, .link, #top { font-weight:bold; }

10. Pseudo Classes
Pseudo classes describe element states

Common link-related pseudo classes:

Pseudo Meaning

a:link unvisited link

a:visited visited link

a:hover when mouse over link

11. CSS Metrics / Units

CSS supports multiple measurement units:

Length Units

 px = pixel (screen unit)

 in = inch
 cm = centimeter
 mm = millimeter
 pt = point (1/72 inch)
 pc = pica (12 points)
 em = relative to font size
 % = percentage

Color Units

 Names: red, blue, green

 Hex: #a0a6aa
 RGB: rgb(160,166,170)

Exam Tip: em scales relative to parent font

12. Default Browser Styles

Browsers apply default style if none provided.

Example issues:

 headings have built-in margins

 lists have bullets by default

Developers often reset styles:

body,h1,p,ul,li { margin:0; padding:0; }

13. Font/Text Properties

Important font properties:

A. color

Sets text color

B. font-size

Controls text size

Default: 16px

C. font-weight

Sets boldness
Values: normal, bold, lighter, 100-900

D. font-family

Defines typeface stack

Example:

font-family: "Trebuchet MS", Verdana, sans-serif;

Generic Font Families

 Serif
 Sans-serif
 Monospace
 Cursive
 Fantasy

Exam Point: Always include fallback fonts

14. Font Style & Text Formatting
Properties:

font-style

 normal
 italic
 oblique

font-variant

 small-caps

text-decoration

 underline
 overline
 line-through
 none

Mostly used to remove underlines from links

text-align

Values:

 left
 right
 center
 justify

text-transform

Changes casing:

 uppercase
 lowercase
 capitalize
text-indent

Indent first line

15. Linking HTML & CSS (Three Types)

1. Inline CSS

Inside HTML tags via style attribute.

Example:

<h1 style="color:red;">Hello</h1>

Disadvantage: mixes content with design → bad practice

2. Embedded/Internal CSS

Inside <style> inside <head>

Example:

<style>
p { color:red; }
</style>

Used for single page style

3. External CSS

Stored in .css file

Linked via <link>

Example:

<link rel="stylesheet" href="[Link]">

Advantages:
✔ maintainable
✔ site-wide consistency
✔ caching increases speed

16. @import Rule

Another way to import external CSS:

@import "[Link]";

Not recommended for old browsers.

17. Multiple Stylesheets

When multiple styles apply:

 more specific wins

 later declarations override earlier

Example:
External sets:

h3 { color:red; text-align:left; font-size:8pt; }

Internal sets:

h3 { text-align:right; font-size:20pt; }

Final result:

 color → red (from external)

 align → right (internal overrides)
 size → 20pt (internal overrides)

18. Inheritance
Inheritance Definition:
Descendant elements inherit certain text-related styles from ancestors.
Inherited properties:
✔ font-size
✔ color
✔ text styles

Not inherited:
✘ margin
✘ padding
✘ borders

19. Cascading Order (Precedence)

When conflicts occur:

Priority (highest → lowest):

1. Inline
2. Internal
3. External
4. Browser default

Also:
✔ id > class
✔ explicit > inherited
✔ last wins

20. Background Properties

CSS background properties:

background-color

Sets background color

background-image

Sets background picture

background-image:url("[Link]");
background-repeat

 repeat
 repeat-x
 repeat-y
 no-repeat

background-position

Defines image placement:

 top
 bottom
 center
 left
 right

background-attachment

Controls scrolling:

 fixed
 scroll

21. Background Shorthand

One line example:

background: #FFF url("[Link]") no-repeat fixed top;

22. CSS Box Model

CSS treats each element as a box with:

 Content
 Padding
 Border
 Margin

Definition:
Box model controls element spacing & layout
23. Borders
Border properties:

 border-width
 border-style
 border-color

Styles include:

 solid
 dotted
 dashed
 double
 groove
 ridge
 inset
 outset

24. Margin and Padding

Margin

Space outside border

Padding

Space between border and content

Both accept shorthand:

margin: 10px 20px 5px 3px;

(order: top, right, bottom, left)

25. Display Property

Controls how element behaves:

Types:

 block (break before and after)

 inline (no breaks)

Example block elements: div, p, h1

Example inline: span, a

(File Ends Here)

The last slide indicated reading on:

 position
 float
 visibility

(Not covered in given slides → not skipped but noted)

📘 CHAPTER 4 — JavaScript (Exam Notes,

Medium Detail)

1. Introduction to JavaScript
Definition:
JavaScript (JS) is a client-side scripting language used to make web pages dynamic and
interactive.

Key Points:

 Runs in the browser

 Can modify HTML content dynamically
 Can respond to user actions/events
 Can validate forms and data
Purpose / Uses:

 Form validation
 Interactive buttons & menus
 Dynamic HTML content
 Pop-ups & alerts
 Animations and timers
 Browser-based calculations

2. Server vs Client Side

 Client-side (JS): Executes in the browser; fast user interaction.
 Server-side (PHP): Executes on server; handles data, security, database operations.

3. Embedding JavaScript in HTML

Tags:

<script> ... </script>

Example:

<html>
<body>
<script>
[Link]("Hello World!");
</script>
</body>
</html>

Other Forms:

 Inline events: onclick="function()"

 External .js file using <script src="[Link]"></script>

4. JavaScript Syntax Basics

 Statements end with ; (optional but recommended)
 Variables start with var, let, or const
 Case-sensitive
  Comments:
o Single line: // comment
o Multi-line: /* comment */

5. Variables
Definition:
Containers for storing data in memory.

Syntax:

var x = 10;
let name = "John";
const PI = 3.14;

Rules:

 Start with a letter, _, or $

 Cannot start with a number
 Case-sensitive
 var → function scope
 let → block scope
 const → constant (cannot change)

6. Data Types
Primitive Types:

1. Number – integers and floats (10, 3.14)

2. String – text ("Hello")
3. Boolean – logical true/false
4. null – intentional empty
5. undefined – variable without value

Non-Primitive Types:

 Object – collection of key/value pairs

 Array – ordered list of values
7. Constants
Definition:
Value that cannot change during execution.

Syntax:

const PI = 3.14;

8. Operators
Arithmetic: + - * / % ++ --
Assignment: = += -= *= /=
Comparison: < <= > >= == != === !==
Logical: && || !
Ternary: (condition) ? trueValue : falseValue
String Concatenation: + operator

Example:

var a = 5;
var b = 10;
var c = (a < b) ? "Yes" : "No"; // "Yes"

9. Control Statements
Conditional Statements:

 if
 if-else
 switch

Looping Statements:

 for
 while
 do-while
 forEach (arrays)

Example (for loop):

for(let i=1; i<=5; i++){

[Link](i);
}
10. Functions
Definition:
Reusable block of code performing a specific task.

Syntax:

function sum(a,b){
return a+b;
}

Calling Functions:

var result = sum(5,10);

Benefits:

 Code reuse
 Modular structure
 Cleaner programs

11. Arrays
Definition:
Stores multiple values in a single variable.

Types:

 Numeric array: indexed by number

 Associative array: indexed by key
 Multidimensional array: array of arrays

Example:

var fruits = ["Apple","Banana","Cherry"];

[Link](fruits[1]); // Banana

12. Events
Definition:
Actions occurring on web pages (user or browser triggered)
Common Events:

 onClick → click on element

 onLoad → page loads
 onSubmit → form submitted
 onChange → input changes
 onFocus → field gains focus
 onBlur → field loses focus
 onMouseOver → pointer enters element
 onMouseOut → pointer leaves element

Example:

<button onclick="alert('Hello')">Click me</button>

13. Form Validation

Definition:
Checking user input before sending to server.

Common Checks:

 Empty field
 Email format (@ included)
 Numeric range
 String length

Example:

function validate(form){
if([Link]("@") == -1){
alert("Invalid email!");
return false;
}
return true;
}

14. XML Introduction

Definition:
eXtensible Markup Language – stores and transports structured data

Features:
  User-defined tags
 Hierarchical
 Platform-independent
 Self-descriptive

Example:

<player>
<name>Hebron</name>
<score>3.0</score>
</player>

15. Built-in Objects

A. Math

 Constants: [Link], Math.E

 Methods: [Link](), [Link](), [Link](), [Link](), [Link](),
[Link]()

B. Date

 Methods: getDate(), getMonth(), getFullYear(), setFullYear()

C. String

 Methods: length, indexOf(), substring(), toUpperCase(), replace(), split()

D. Document

 Properties: forms[], links[], images[]

 Methods: write(), writeln()

E. History

 Methods: back(), forward(), go(n)

F. Number

 Methods: toFixed(), toPrecision()

G. Window

 Methods: alert(), prompt(), confirm(), open(), close(), setTimeout(),

setInterval()

H. Image

 Used for slideshows / dynamic image changes

 Property: src

16. Form Elements

 Text: single-line input
 Password: masked input
 Radio: single choice
 Checkbox: multiple choice
 Select: dropdown list
 Submit: submit form
 Reset: reset fields

Example Access:

[Link]
[Link]

17. Advantages of JavaScript

✔ Client-side execution → fast
✔ Reduces server load
✔ Interactive UI
✔ Platform independent
✔ Easy to learn
✔ Supports DOM manipulation

18. Limitations of JavaScript

✘ Browser-dependent
✘ Security risks
✘ Disabled by user
✘ Cannot access OS files
✘ Limited server-side capabilities

19. Applications of JavaScript

 Form validation
 Interactive UI elements
 Dynamic HTML content
 Pop-ups and alerts
 Animations and effects
 Real-time clocks
 Games in browser

📘 JavaScript Chapter Notes (Style: A+B

Hybrid)

1. Introduction to JavaScript
JavaScript is a client-side scripting language used to make web pages dynamic and interactive.

Purpose:

 Validate form input

 Respond to user actions (events)
 Change page content without reloading
 Control browser windows
 Perform calculations
 Handle multimedia (images, timers, animations)

Exam Point:
JS runs on client side, meaning code executes inside browser, not on server.

2. JavaScript vs HTML vs CSS

 Feature HTML CSS JavaScript
Function Structure Design Logic/Interaction
Type Markup Styling Scripting
Handles Text, images Colors, layout Events, validation
Static/Dynamic Static Static Dynamic

3. Locations of JavaScript Code

JavaScript can be placed:

A. Inline

Attached to event.

<input type="button" onclick="alert('Hi')">

B. Internal

Inside HTML using <script>

<script>
[Link]("Welcome");
</script>

C. External (.js file)

<script src="[Link]"></script>

Advantages of external: reusable + cleaner + maintainable

4. Variables
Definition:
Variable = container for storing data in memory.

Declared using:

var x;

Properties:
  dynamic typing (type changes at runtime)
 case-sensitive
 can be reassigned

Naming Rules:
✔ must start with letter or _
✔ can contain digits after
✔ no spaces or symbols
✔ case-sensitive

Example:

age, Name, _count, total1 ✔ valid

2age, name#, user-name ✘ invalid

5. Data Types
JavaScript supports:

1. Number

Numeric values (integer or floating point)

Examples: 10, 3.14, -9

2. String

Text inside quotes

Examples: "Hello", 'A'

3. Boolean

Logical values: true, false

4. null

Intentional empty value

5. undefined

Declared variable without value

6. Object
Collection of properties (arrays, dates, etc.)

Exam Tip: JS is loosely typed

6. Operators
Arithmetic Operators
+ - * / % ++ --

Assignment Operators
= += -= *= /=

Relational Operators
< <= > >= == !=

Logical Operators
&& || !

Ternary Operator
(cond ? trueValue : falseValue)

Concatenation
"Hello" + name

Operator Precedence:
multiplication before addition; parentheses override

7. Expressions
Definition: expression returns a value.
Examples:

2+3
x>5
sum(a,b)
x++

8. Statements
Two major categories:

✔ Conditional (decision making)

✔ Looping (repetition)

9. Control Structures
if
if(condition){ }

if–else
if(){ } else{ }

for loop
for(i=0;i<n;i++){}

Purpose: automate repetition without writing code multiple times.

10. Functions
Definition:
Block of code performing task.

Syntax:

function name(param){ ... }

return value;

Benefits:
✔ code reuse
✔ modularity
✔ clearer logic

11. Arrays
Definition:
Indexed list storing multiple values.

Index starts at 0.

Example:

arr[0] = "Ali";

Use Case: storing list of students, products, etc.

12. Events
Definition:
Action that occurs on webpage.

Examples:
✔ clicking
✔ mouse move
✔ key press
✔ page load

Handlers:

 onClick → when user clicks

 onLoad → when page finishes loading
 onSubmit → form submission
 onChange → input change
 onFocus → input active
 onBlur → input inactive

Exam Keywords:
Events happen asynchronously (not in fixed order)
13. Form Validation
Definition:
Checking input before sending to server.

Types of validation:
✔ empty check
✔ email check
✔ range check

Tools:

 alert()
 parseInt()
 return false stops submission

Purpose:
Prevents invalid data + reduces server load

14. XML
Definition:
Extensible Markup Language for storing/transporting data.

Features:
✔ user-defined tags
✔ hierarchical
✔ platform independent
✔ Unicode support
✔ self-descriptive

Example:

<player><name>Abel</name></player>

15. Built-in Objects

JavaScript provides objects with methods + properties.

A. Math Object

Used for mathematical operations.

Common:

 [Link] → pi
 [Link](a,b) → exponent
 [Link]() → lower round
 [Link]() → upper round
 [Link]() → nearest round

B. Date Object

Used for date/time.

Methods:

 getDate() → day
 getMonth() → month (0-11)
 getFullYear() → year

C. String Object

Used for text manipulation.

Methods:

 length
 indexOf()
 replace()
 substring()
 toUpperCase()

D. Document Object
Represents webpage.

Properties:

 forms[], images[], links[]

Methods:

 write(), writeln()

E. History Object

Stores visited pages.

Methods:

 back()
 forward()
 go(n)

F. Number Object

Formats numbers.

Methods:

 toFixed()
 toPrecision()

G. Window Object

Top-level browser object.

Methods:

 alert()
 prompt()
 open()
 setTimeout()
 setInterval()

H. Image Object

Used for slideshows and image swaps.

Property:
  src

16. Form Elements

✔ text → user input
✔ password → masked input
✔ radio → single choice
✔ checkbox → multiple choice
✔ select → dropdown
✔ submit → send form
✔ reset → clear form

17. Advantages of JS
✔ fast
✔ improves interaction
✔ reduces server load
✔ platform independent
✔ easy to learn

18. Limitations
✘ browser dependent
✘ privacy/security risks
✘ can be disabled
✘ no direct OS access

📘 CHAPTER-5: PHP — Exam Notes

(Medium Detailed, No-Skip)

1. Introduction to PHP
PHP (Hypertext Preprocessor) is a server-side scripting language used to develop dynamic
web pages and web applications.
Key Characteristic:
Unlike JavaScript (client-side), PHP runs on the server, processes data, and sends output
(HTML) to the user’s browser.

Purpose of PHP:

 Data processing
 Database communication
 Form handling
 Session management
 Authentication
 Dynamic page generation

2. Server-Side Scripting Concept

Definition:
Server-side scripts execute on the web server before sending output to the client.

Flow:
Client Request → Server Executes PHP → Sends HTML Result

Exam Point:
Client never sees original PHP code (only result).

3. Embedding PHP in HTML

PHP is embedded inside:

<?php ... ?>

Example:

<html>
<body>
<?php echo "Hello PHP"; ?>
</body>
</html>

4. Basic PHP Syntax

PHP Tags:
  <?php ... ?> (most common)
 <? ... ?> (short tag)
 <% ... %> (ASP style)
 <script language="php"> ... </script>

Exam Note:
Short tags may require configuration (short_open_tag).

5. PHP as a Language
PHP supports:

 variables
 data types
 operators
 control statements
 loops
 arrays
 functions

(Same structure to other programming languages but simpler syntax)

6. Variables in PHP
Definition:
Variable = container for storing values during execution.

Rules:
✔ starts with $
✔ name starts with letter or _
✔ case-sensitive
✔ no spaces

Example:

$a = 10;
$name = "Sam";

7. Data Types in PHP

PHP supports:

1. Integer → whole numbers

2. Float → decimals
3. String → text
4. Boolean → true / false
5. Array → multiple values
6. Object → instances of classes
7. NULL → empty variable

Exam Tip:
PHP is loosely typed (type auto-detected)

8. Constants
Definition:
Fixed value that cannot change during program execution.

Syntax:

define("PI",3.14);

9. Operators in PHP
Types (with meaning):

 Arithmetic → math
 Assignment → assign values
 Comparison → compare values
 Logical → boolean logic
 String → concatenate
 Increment/Decrement → ++ / --

String concatenation uses:

Example:

$name = "Sam";
echo "Hello ".$name;
10. Control Statements
Used for decisions:

 if
 if/else
 switch

Example:

if($x>10){ echo "Big"; }

11. Loops
Used for repetition:

 for
 while
 do-while
 foreach (array loop)

Example:

for($i=1;$i<=5;$i++) echo $i;

12. Arrays
Definition:
Stores multiple values under one name.

Types (with definitions):

✔ Numeric Array → index numbers
✔ Associative Array → key/value
✔ Multidimensional → array of arrays

Example associative:

$age["Tom"]=18;

13. Functions
Definition:
Reusable block of code.

Syntax:

function name(){ ... }

Example:

function sum($a,$b){ return $a+$b; }

14. PHP and HTML Forms

PHP handles form input from HTML using:

 $_GET[]
 $_POST[]

Example:

$name=$_POST["name"];

Exam Point:
POST is more secure for sensitive data.

15. File Uploads

PHP supports file input through forms using:

 $_FILES[]
 move_uploaded_file()

Used for uploading images, PDF, docs, etc.

16. Cookies
Definition:
Small data stored on client machine (browser).

Syntax:
setcookie();

Use:
Store username, login info, preferences.

Lifetime:
Expires by time or on browser close.

17. Sessions
Definition:
Temporary data stored on server for each user.

Start session:

session_start();

Use:
Authentication, shopping carts, user tracking.

Difference from Cookies:

✔ session stored on server
✔ cookie stored on client

18. Database Connectivity (MySQL)

PHP communicates with database for:

✔ storing data
✔ retrieving data
✔ updating
✔ deleting

Common functions:

 mysqli_connect()
 mysqli_query()
 mysqli_close()
19. PHP Output
Outputs to browser using:

 echo
 print

echo allows multiple parameters; print returns value.

20. Advantages of PHP

✔ Open source
✔ Server-side processing
✔ Database support
✔ Easy to learn
✔ Good for web apps
✔ Large community

21. Applications of PHP

Used for:
✔ login systems
✔ e-commerce sites
✔ content management (CMS)
✔ forums
✔ blogs
✔ dynamic pages

Examples of famous PHP systems:

 WordPress
 Facebook (early versions)
 Joomla
 Magento