ЁЯОи G.C.E. A/L ICT (родрооிро┤் роКроЯроХроо்)
Unit 10.5: CSS (Style Sheets) & Unit 10.6: Web Authoring Tools
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 роЗрой் рооுроХ்роХிроп роирой்рооைроХро│்
- Web page-рой் design-роР роОро│ிродாроХ рооாро▒்ро▒ рооுроЯிропுроо்
- роТро░ே Style-роР рокро▓ elements-роХ்роХு рокропрой்рокроЯுрод்род рооுроЯிропுроо்
- Code duplication роХுро▒ைроХிро▒родு
- Website maintenance роОро│ிродாроХிро▒родு
CSS Syntax
selector {
property: value;
}
| рокроХுродி | рокொро░ுро│் | роЙродாро░рогроо் |
|---|---|---|
| Selector | роОрои்род element-роХ்роХு style | p, h1 |
| Property | роОродை рооாро▒்ро▒ ро╡ேрог்роЯுроо் | color, font-size |
| Value | роОро╡்ро╡ாро▒ு рооாро▒்ро▒ ро╡ேрог்роЯுроо் | red, 20px |
p {
color: red;
font-size: 20px;
}
CSS Comments
CSS code-роР browser-ро▓் display роЪெроп்ропாрооро▓் developer-роХ்роХு explanation роОро┤ுрод рокропрой்рокроЯுроХிро▒родு.
/* This is a comment */
/* Heading style */
h1 {
color: green;
font-size: 30px;
}
/* comment */ | HTML comment → <!-- comment -->
роиாрой்роХு рооுроХ்роХிроп CSS Selectors
| Selector | Symbol | рокропрой்рокாроЯு | роЙродாро░рогроо் |
|---|---|---|---|
| Element | None | Tag name рооூро▓роо் | p { } |
| ID | # | роТро░ு specific element | #special { } |
| Class | . | рокро▓ elements-роХ்роХு | .important { } |
| Group | Comma | рокро▓ selectors-роХ்роХு | h1, h2, p { } |
Element Selector
HTML element рокெропро░ை роиேро░роЯிропாроХ рокропрой்рокроЯுрод்родுро╡родு.
p {
color: blue;
}
h1 {
color: red;
}
ID Selector (#)
HTML: <p id="special">Important Message</p>
#special {
color: red;
font-size: 25px;
}
Class Selector (.)
HTML: <p class="important">Hello</p>
.important {
color: green;
font-weight: bold;
}
Group Selector (,)
рокро▓ selectors-роХ்роХு роТро░ே style рокропрой்рокроЯுрод்род comma рокропрой்рокроЯுрод்родுро╡родு.
h1, h2, p {
color: blue;
}
ID vs Class - ро╡ேро▒ுрокாроЯு
| ID | Class |
|---|---|
# рокропрой்рокроЯுрод்родрок்рокроЯுроо் | . рокропрой்рокроЯுрод்родрок்рокроЯுроо் |
| роТро░ு element-роХ்роХு роороЯ்роЯுроо் (Unique) | рокро▓ elements-роХ்роХு |
Example: #header | Example: .box |
Inline, Internal, External CSS
| Type | CSS роЗро░ுроХ்роХுроо் роЗроЯроо் | рокропрой்рокாроЯு |
|---|---|---|
| Inline | HTML tag-роХ்роХுро│் | Single element |
| Internal | <style> tag | Single webpage |
| External | .css file | Multiple webpages |
Inline CSS (Style Attribute)
HTML tag-рой் роЙро│்ро│ே style attribute рокропрой்рокроЯுрод்родுро╡родு.
<p style="color:red;">Hello World</p>
- Advantage: роТро░ு element-роХ்роХு роЙроЯройроЯிропாроХ style роХொроЯுроХ்роХ рооுроЯிропுроо்
- Disadvantage: Code duplication, Maintenance роХроЯிройроо்
Internal CSS (<style> Tag)
HTML document-рой் <head> рокроХுродிропிро▓் <style> tag рокропрой்рокроЯுрод்родுро╡родு.
<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>
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;
}
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;
}
B. Text Formatting
p {
color: red;
text-align: center;
}
text-align values: left, right, center, justify
C. Font Properties
p {
font-family: Arial;
font-size: 20px;
font-weight: bold;
font-style: italic;
color: blue;
}
D. Link States
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red; /* Mouse pointer link-рой் рооேро▓் роЪெро▓்ро▓ுроо்рокோродு */
}
a:active {
color: green;
}
E. List Formatting
ul {
list-style-type: square;
/* values: disc, circle, square, none */
}
ol {
list-style-type: upper-roman;
}
F. Table Formatting
table {
width: 100%;
border-collapse: collapse;
}
th {
background-color: navy;
color: white;
}
td {
padding: 8px;
}
th, td {
border: 1px solid black;
}
рооுро┤ுрооைропாрой 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
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
Practical CSS Questions
Make all h1 red & centered:
h1 {
color: red;
text-align: center;
}
Change background to yellow:
body {
background-color: yellow;
}
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.
Web Authoring Tool роОрой்ро▒ாро▓் роОрой்рой?
Web pages-роР роЙро░ுро╡ாроХ்роХ, edit роЪெроп்роп рооро▒்ро▒ுроо் manage роЪெроп்роп роЙродро╡ுроо் software/application-роХро│் Web Authoring Tools роОройрок்рокроЯுроо்.
Examples:
- Adobe Dreamweaver
- Microsoft Expression Web
- Visual Studio Code
- KompoZer
- BlueGriffon
Web Authoring Tool-рой் рокропрой்рокாроЯுроХро│்
- Web page роЙро░ுро╡ாроХ்роХро▓ாроо்
- HTML code роОро┤ுродро▓ாроо்
- CSS роЪேро░்роХ்роХро▓ாроо்
- Images & Hyperlinks роЪேро░்роХ்роХро▓ாроо்
- Tables роЙро░ுро╡ாроХ்роХро▓ாроо்
- Text formatting роЪெроп்ропро▓ாроо்
- Web page preview рокாро░்роХ்роХро▓ாроо்
- Files save/manage роЪெроп்ропро▓ாроо்
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:
.htmlextension-ро▓் save роЪெроп்ропро╡ுроо் - Step 10: Images/CSS files-роР роЪро░ிропாрой folder-ро▓் ро╡ைроХ்роХро╡ுроо்
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.
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 |
CSS Selectors Summary
Element → p, h1 ID → #id Class → .class Group → h1, h2, p (comma)
CSS Insertion Methods
Inline → style attribute Internal → <style> tag External → .css file + <link>
ЁЯФе A/L Memory Trick
Selectors - E I C G:
Element | ID | Class | Group
Insertion - I I E:
Inline | Internal | External
HTML = Structure | CSS = Style | Authoring Tool = Create/Edit Web Pages
роиீроЩ்роХро│் роХроЯ்роЯாропроо் роОро┤ுродрод் родெро░ிрои்родிро░ுроХ்роХ ро╡ேрог்роЯிроп 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-роХ்роХு роиро▓்ро▓ роЕроЯிрок்рокроЯை роХிроЯைроХ்роХுроо்.
