🎨 G.C.E. A/L ICT (தமிழ் ஊடகம்)

Unit 10.5: CSS (Style Sheets) & Unit 10.6: Web Authoring Tools

📌 இந்தப் பாடத்தின் நோக்கம்: Unit 10.5-ல் CSS அடிப்படைகள், Selectors, Insertion Methods, Formatting மற்றும் Unit 10.6-ல் Web Authoring Tools பற்றி Theory, Examples, Code Blocks, மற்றும் Question & Answer வடிவில் எளிமையாகக் கற்றுக்கொள்ளலாம்.

10.5.1

Style Sheet / CSS என்றால் என்ன?

CSS = Cascading Style Sheets

HTML elements-ன் தோற்றம் (Appearance) மற்றும் வடிவமைப்பு (Formatting) ஆகியவற்றை கட்டுப்படுத்த பயன்படுத்தப்படும் விதிகளின் தொகுப்பு.

HTML → Web page-ன் structure/content உருவாக்குகிறது
CSS → Web page-ன் appearance/design மாற்றுகிறது

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

CSS Benefits

CSS இன் முக்கிய நன்மைகள்

Web page-ன் design-ஐ எளிதாக மாற்ற முடியும்
ஒரே Style-ஐ பல elements-க்கு பயன்படுத்த முடியும்
Code duplication குறைகிறது
Website maintenance எளிதாகிறது

10.5.2

CSS Syntax

selector {
    property: value;
}

பகுதி	பொருள்	உதாரணம்
Selector	எந்த element-க்கு style	`p`, `h1`
Property	எதை மாற்ற வேண்டும்	`color`, `font-size`
Value	எவ்வாறு மாற்ற வேண்டும்	`red`, `20px`

p {
    color: red;
    font-size: 20px;
}

10.5.3

CSS Comments

CSS code-ஐ browser-ல் display செய்யாமல் developer-க்கு explanation எழுத பயன்படுகிறது.

/* This is a comment */

/* Heading style */
h1 {
    color: green;
    font-size: 30px;
}

⚠️ Exam Point: CSS comment → /* comment */ | HTML comment → 

4 Types

நான்கு முக்கிய CSS Selectors

Selector	Symbol	பயன்பாடு	உதாரணம்
Element	None	Tag name மூலம்	`p { }`
ID	`#`	ஒரு specific element	`#special { }`
Class	`.`	பல elements-க்கு	`.important { }`
Group	Comma	பல selectors-க்கு	`h1, h2, p { }`

1. Element Selector

Element Selector

HTML element பெயரை நேரடியாக பயன்படுத்துவது.

p {
    color: blue;
}

h1 {
    color: red;
}

2. ID Selector

ID Selector (#)

HTML: <p id="special">Important Message</p>

#special {
    color: red;
    font-size: 25px;
}

🎯 நினைவில் வைக்க: ID → # (ஒரே ஒரு element-க்கு மட்டும்)

3. Class Selector

Class Selector (.)

HTML: <p class="important">Hello</p>

.important {
    color: green;
    font-weight: bold;
}

🎯 நினைவில் வைக்க: Class → . (பல elements-க்கு)

4. Group Selector

Group Selector (,)

பல selectors-க்கு ஒரே style பயன்படுத்த comma பயன்படுத்துவது.

h1, h2, p {
    color: blue;
}

ID vs Class

ID vs Class - வேறுபாடு

ID	Class
`#` பயன்படுத்தப்படும்	`.` பயன்படுத்தப்படும்
ஒரு element-க்கு மட்டும் (Unique)	பல elements-க்கு
Example: `#header`	Example: `.box`

3 Ways

Inline, Internal, External CSS

Type	CSS இருக்கும் இடம்	பயன்பாடு
Inline	HTML tag-க்குள்	Single element
Internal	`<style>` tag	Single webpage
External	`.css` file	Multiple webpages

1. Inline CSS

Inline CSS (Style Attribute)

HTML tag-ன் உள்ளே style attribute பயன்படுத்துவது.

<p style="color:red;">Hello World</p>

Advantage: ஒரு element-க்கு உடனடியாக style கொடுக்க முடியும்
Disadvantage: Code duplication, Maintenance கடினம்

2. Internal CSS

Internal CSS (<style> Tag)

HTML document-ன் <head> பகுதியில் <style> tag பயன்படுத்துவது.

<head>
<style>
p {
    color: blue;
    font-size: 20px;
}
</style>
</head>

3. External CSS

External CSS (.css File)

CSS code-ஐ தனியான .css file-ல் சேமித்து HTML document-க்கு link செய்வது.

HTML-ல்:

<link rel="stylesheet" href="style.css">

style.css-ல்:

body {
    background-color: lightblue;
}

h1 {
    color: red;
}

⭐ மிக முக்கியமான நன்மை: ஒரே CSS file-ஐ பல HTML pages பயன்படுத்த முடியும். Website maintenance மிகவும் எளிதாகிறது.

Background

A. Background Color & Image

/* Background Color */
body {
    background-color: lightblue;
}

/* Background Image */
body {
    background-image: url("background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

Text

B. Text Formatting

p {
    color: red;
    text-align: center;
}

text-align values: left, right, center, justify

Fonts

C. Font Properties

p {
    font-family: Arial;
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
    color: blue;
}

Links

D. Link States

a:link {
    color: blue;
}

a:visited {
    color: purple;
}

a:hover {
    color: red;  /* Mouse pointer link-ன் மேல் செல்லும்போது */
}

a:active {
    color: green;
}

⭐ மிக முக்கியமானது: hover = mouse pointer link-ன் மேல் செல்லும்போது நிறம் மாறும்

Lists

E. List Formatting

ul {
    list-style-type: square;
    /* values: disc, circle, square, none */
}

ol {
    list-style-type: upper-roman;
}

Tables

F. Table Formatting

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    background-color: navy;
    color: white;
}

td {
    padding: 8px;
}

th, td {
    border: 1px solid black;
}

Full Example

முழுமையான Practical Example

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
body {
    background-color: lightblue;
    font-family: Arial;
}
h1 {
    color: darkblue;
    text-align: center;
}
p {
    color: black;
    font-size: 18px;
}
.important {
    color: red;
    font-weight: bold;
}
#special {
    background-color: yellow;
}
a:hover {
    color: red;
}
table {
    border-collapse: collapse;
}
th, td {
    border: 1px solid black;
    padding: 10px;
}
</style>
</head>
<body>
<h1>My School</h1>
<p>Welcome to my website.</p>
<p class="important">Important Notice</p>
<p id="special">Special Message</p>
<a href="#">Visit Us</a>
<table>
<tr><th>Name</th><th>Marks</th></tr>
<tr><td>Kamal</td><td>85</td></tr>
</table>
</body>
</html>

📝 முக்கிய Exam Q&A

What is CSS?

Answer: CSS stands for Cascading Style Sheets. It is used to control the appearance and formatting of HTML elements in web pages.

Write the basic syntax of CSS.

selector {
    property: value;
}

How do you write a comment in CSS?

/* This is a CSS comment */

Name four CSS selectors.

Element selector
ID selector
Class selector
Group selector

Q5-Q6

ID vs Class Selector Representation

ID: # symbol - #header { color: blue; }

Class: . symbol - .menu { color: red; }

Name three ways of inserting CSS.

Inline CSS
Internal CSS
External CSS

Q8-Q9

Practical CSS Questions

Make all h1 red & centered:

h1 {
    color: red;
    text-align: center;
}

Change background to yellow:

body {
    background-color: yellow;
}

Q10

Advantage of external CSS?

Answer: External CSS allows the same style rules to be applied to multiple HTML pages. It also makes website maintenance and design changes easier.

10.6.1

Web Authoring Tool என்றால் என்ன?

Web pages-ஐ உருவாக்க, edit செய்ய மற்றும் manage செய்ய உதவும் software/application-கள் Web Authoring Tools எனப்படும்.

Examples:

Adobe Dreamweaver
Microsoft Expression Web
Visual Studio Code
KompoZer
BlueGriffon

Uses

Web Authoring Tool-ன் பயன்பாடுகள்

Web page உருவாக்கலாம்
HTML code எழுதலாம்
CSS சேர்க்கலாம்
Images & Hyperlinks சேர்க்கலாம்
Tables உருவாக்கலாம்
Text formatting செய்யலாம்
Web page preview பார்க்கலாம்
Files save/manage செய்யலாம்

Steps

Webpage உருவாக்கும் Steps

Step 1: Authoring tool-ஐ open செய்யவும்
Step 2: New HTML document உருவாக்கவும்
Step 3: Page title சேர்க்கவும்
Step 4: Heading & paragraph சேர்க்கவும்
Step 5: Images சேர்க்கவும்
Step 6: Hyperlinks சேர்க்கவும்
Step 7: CSS மூலம் appearance மாற்றவும்
Step 8: Preview செய்யவும்
Step 9: .html extension-ல் save செய்யவும்
Step 10: Images/CSS files-ஐ சரியான folder-ல் வைக்கவும்

Exam Q&A

10.6 முக்கிய Exam Q&A

Q1. What is a Web Authoring Tool?

A: Software used to create, edit, format and manage web pages.

Q2. Give two examples.

A: Adobe Dreamweaver, Microsoft Expression Web

Q3. What can be created?

A: Web pages containing text, images, hyperlinks, tables and other web elements.

Q4. Purpose of previewing?

A: To see how the web page will appear in a web browser before publishing.

Q5. File extension for HTML?

A: .html (Example: index.html)

Q6. Purpose of HTML?

A: Define the structure and content of a web page.

Q7. Purpose of CSS?

A: Control the appearance and presentation of HTML elements.

Quick Notes

HTML vs CSS - வேறுபாடு

HTML	CSS
Structure	Appearance
Content	Design
Heading tag	Heading colour
Paragraph tag	Font size
Image tag	Image presentation
Link tag	Link appearance

Selectors

CSS Selectors Summary

Element → p, h1
ID      → #id
Class   → .class
Group   → h1, h2, p (comma)

Insertion

CSS Insertion Methods

Inline   → style attribute
Internal → <style> tag
External → .css file + <link>

Memory Trick

🔥 A/L Memory Trick

Must Write CSS

நீங்கள் கட்டாயம் எழுதத் தெரிந்திருக்க வேண்டிய CSS

/* CSS Example */

body {
    background-color: lightblue;
    font-family: Arial;
}

h1 {
    color: red;
    text-align: center;
}

p {
    font-size: 18px;
}

#special {
    color: green;
}

.important {
    font-weight: bold;
}

a:hover {
    color: red;
}

table {
    border-collapse: collapse;
}

th, td {
    border: 1px solid black;
    padding: 10px;
}

இந்த code-ஐ புரிந்துகொண்டு எழுதத் தெரிந்தால் 10.5-ல் வரும் theory + structured/practical CSS questions-க்கு நல்ல அடிப்படை கிடைக்கும்.

❓ அடிக்கடி கேட்கப்படும் கேள்விகள் (FAQ)

Q: CSS என்றால் என்ன? A: CSS என்பது Cascading Style Sheets ஆகும். இது HTML elements-ன் தோற்றம் (Appearance) மற்றும் வடிவமைப்பு (Formatting) ஆகியவற்றை கட்டுப்படுத்த பயன்படுத்தப்படும் விதிகளின் தொகுப்பாகும்.

Q: CSS-ன் அடிப்படை syntax என்ன? A: CSS-ன் அடிப்படை syntax: selector { property: value; } - எடுத்துக்காட்டு: p { color: red; font-size: 20px; }

Q: CSS Selectors-ன் வகைகள் யாவை? A: நான்கு முக்கிய CSS Selectors: 1. Element Selector (p, h1), 2. ID Selector (#header), 3. Class Selector (.menu), 4. Group Selector (h1, h2, p).

Q: HTML-ல் CSS சேர்க்கும் மூன்று வழிகள் யாவை? A: மூன்று வழிகள்: 1. Inline CSS (style attribute மூலம்), 2. Internal CSS (<style> tag மூலம் head-ல்), 3. External CSS (.css file-ஐ <link> மூலம் இணைத்தல்).

Q: Web Authoring Tool என்றால் என்ன? A: Web Authoring Tool என்பது web pages-ஐ உருவாக்க, edit செய்ய மற்றும் manage செய்ய உதவும் software ஆகும். எடுத்துக்காட்டுகள்: Adobe Dreamweaver, Microsoft Expression Web, Visual Studio Code, KompoZer.

Main Menu

Tuesday, August 25, 2026

Complete G.C.E. A/L ICT Unit 10.5 (CSS - Style Sheets, Selectors, Formatting) and 10.6 (Web Authoring Tools) notes in Tamil with code examples and exam Q&A