DHTML & CSS

Correct Answer: (c) Font weight

The `font-weight` property in CSS is specifically used to describe how bold or 'heavy' a font should appear. It accepts values such as `normal`, `bold`, `bolder`, `lighter`, or numeric values like 100, 200, … 900.

Correct Answer: (b) '%' and 'em'

The units `%` (percentage) and `em` are relative units in CSS. They allow the user to adjust the font size relative to the parent element or the browser's default font size, making the layout flexible and user-adjustable.

Correct Answer: (d) None of the above

The property that adds different decorations or effects to text (such as underline, overline, line-through, blink) is the `text-decoration` property, which is not listed among options (a), (b), or (c). Hence the correct answer is (d) None of the above.

Correct Answer: (d) None of the above

DHTML (Dynamic HTML) is actually a combination of HTML, CSS, JavaScript, and the Document Object Model (DOM). Since no single option completely and correctly describes all components of DHTML, the best answer is (d) None of the above. (Note: Some textbooks accept option (a) DOM and CSS as part of the answer, but the full combination includes all four technologies.)

Correct Answer: (c) Cascading Style Sheets (CSS)

CSS (Cascading Style Sheets) is a style sheet language specifically designed to describe the presentation (look and formatting) of a document written in a markup language such as HTML or XML.

Correct Answer: (b) Letter Spacing

The `letter-spacing` property in CSS is used to specify the amount of space between individual characters in a text. For example: `letter-spacing: 5px;` adds 5 pixels of space between each character.

Correct Answer: (d) 'pt'

The units `px` (pixels) and `pt` (points) are absolute units in CSS. They set a fixed font size that does not change relative to any other element. `px` is used for screen display and `pt` is traditionally used for print media.

Correct Answer: (d) Background Repeat property

The `background-repeat` property controls how a background image is repeated. The default value `repeat` tiles the image both horizontally and vertically to cover the entire screen. Other values include `repeat-x`, `repeat-y`, and `no-repeat`.

Font-family style differentiates between serif, sans-serif and monospace font faces.

Explanation: CSS font families are broadly categorized into:
- Serif fonts (e.g., Times New Roman) — have small decorative strokes at the ends of characters.
- Sans-serif fonts (e.g., Arial) — do not have those strokes.
- Monospace fonts (e.g., Courier New) — every character occupies the same width.

The font-variant property refers to the small-caps variant of the font face.

Explanation: The `font-variant` property allows text to be displayed in small capital letters (small-caps), where lowercase letters are rendered as smaller versions of uppercase letters.

CSS uses a numeric scale of multiples of 100 to 900.

Explanation: The `font-weight` property uses a numeric scale ranging from 100 (thin/lightest) to 900 (black/heaviest), in multiples of 100. For example: 400 = normal, 700 = bold.

The CSS specification also allows browser to render any negative value as normal.

Explanation: In CSS, certain properties like `letter-spacing` or `word-spacing` may receive negative values; however, the CSS specification allows browsers to treat unsupported or invalid negative values as the default `normal` value.

The text decoration has to be rendered with the same color as the text.

Explanation: By default, the `text-decoration` (underline, overline, line-through) is rendered using the same foreground color (`color` property) as the text to which it is applied.

The text-indent property allows you to add effects to text paragraphs by applying an indent to the first line of the paragraph.

Example:
$$\texttt{p \{ text-indent: 30px; \}}$$
This indents the first line of every paragraph by 30 pixels.

Font variant property is used to select normal or small-caps variants of a font.

Explanation: The `font-variant` property accepts two values:
- `normal` — displays text in the standard font.
- `small-caps` — displays lowercase letters as smaller uppercase letters.

The color property describes the foreground color of a text to be displayed in browser.

Example:
$$\texttt{p \{ color: blue; \}}$$
This sets the text color of all paragraphs to blue.

The property font-style defines the chosen font either in normal, italic or oblique.

Explanation:
- `normal` — standard upright text.
- `italic` — a cursive version of the font.
- `oblique` — a slanted version of the normal font (mechanically slanted, not a true italic).

The property font-family is used to apply a prioritized list of fonts in a web page.

Example:
$$\texttt{p \{ font-family: Arial, Helvetica, sans-serif; \}}$$
The browser tries each font in order and uses the first one available on the user's system.

The text-transform property controls the capitalization of a text.

Explanation: The `text-transform` property can apply the following effects:
- `capitalize` — capitalizes the first letter of each word.
- `uppercase` — converts all letters to uppercase.
- `lowercase` — converts all letters to lowercase.
- `none` — no transformation.

The background-color property describes the background color of the browser window.

Example:
$$\texttt{body \{ background-color: lightblue; \}}$$
This sets the background color of the entire webpage to light blue.

The background-image property is used to insert a background image in a web page.

Example:
$$\texttt{body \{ background-image: url('bg.jpg'); \}}$$
This sets `bg.jpg` as the background image of the webpage.

CSS with reference to DHTML:

Given/Concept: DHTML (Dynamic HTML) is a combination of HTML, CSS, JavaScript, and DOM that enables interactive and dynamic web pages.

CSS (Cascading Style Sheets) is one of the core components of DHTML. It is a style sheet language used to describe the presentation (look and formatting) of a document written in HTML.

Role of CSS in DHTML:
1. CSS provides the visual styling of HTML elements — fonts, colors, spacing, layout, borders, backgrounds, etc.
2. In DHTML, JavaScript can dynamically access and modify CSS properties at runtime, allowing elements to change appearance without reloading the page.
3. CSS enables positioning and layering of content using properties like `position`, `z-index`, `top`, `left`, etc., which are essential for DHTML effects.
4. CSS separates content (HTML) from presentation (CSS), making web pages easier to maintain.

Example:
```html
<style>
p { color: red; font-size: 18px; }
</style>
<p>This is styled using CSS in DHTML.</p>
```

Conclusion: CSS is the formatting backbone of DHTML, providing static styles that JavaScript can then manipulate dynamically.

Advantages and Disadvantages of CSS:

Advantages of CSS:
1. Separation of Content and Presentation: HTML handles structure; CSS handles appearance, making code cleaner and easier to maintain.
2. Consistency: A single CSS file can control the style of an entire website, ensuring uniform appearance across all pages.
3. Faster Page Loading: CSS reduces the amount of repetitive HTML code, resulting in smaller file sizes and faster loading.
4. Easy Maintenance: Changes made to one CSS file are automatically reflected across all linked HTML pages.
5. Better Accessibility: CSS allows content to be presented differently for different devices (screen, print, mobile) using media queries.
6. Reusability: The same CSS class or ID can be applied to multiple HTML elements.

Disadvantages of CSS:
1. Browser Compatibility Issues: Different browsers may interpret CSS properties differently, leading to inconsistent display.
2. Complexity: Advanced CSS (e.g., flexbox, grid, animations) can be complex and difficult to learn for beginners.
3. Security Concerns: CSS can be used for certain types of attacks (e.g., CSS-based phishing).
4. Fragmentation: There are multiple versions of CSS (CSS1, CSS2, CSS3), and not all browsers support all features of CSS3.
5. No Logic: CSS cannot perform calculations or conditional logic on its own (unlike JavaScript).

Extension of a CSS File:

A CSS (Cascading Style Sheets) file has the extension `.css`.

Example: `styles.css`, `main.css`, `layout.css`

How it is linked to an HTML file:
```html
<link rel="stylesheet" type="text/css" href="styles.css">
```
This `<link>` tag is placed inside the `<head>` section of the HTML document to apply the external CSS file to the webpage.

Embedded Style in HTML:

Concept: Embedded (or Internal) CSS is one of the three ways to apply CSS to an HTML document. In this method, CSS rules are written inside a `<style>` tag, which is placed within the `<head>` section of the HTML document.

Syntax:
```html
<html>
<head>
<style type="text/css">
selector {
property: value;
}
</style>
</head>
<body>
...
</body>
</html>
```

Example:
```html
<html>
<head>
<style type="text/css">
body {
background-color: lightyellow;
}
h1 {
color: blue;
font-size: 24px;
}
p {
font-family: Arial;
color: green;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This paragraph is styled using embedded CSS.</p>
</body>
</html>
```

Key Points:
- The `<style>` tag must be placed inside `<head>`.
- Embedded CSS applies only to the current HTML page.
- It is useful when a single page requires unique styling different from the rest of the website.

Font-Family Property in CSS:

Concept: The `font-family` property specifies a prioritized list of font family names for the selected element. The browser uses the first font in the list that is available on the user's system.

CSS defines five generic font families:

| Font Family | Description | Example Fonts |
|---|---|---|
| Serif | Fonts with small strokes at the ends of characters | Times New Roman, Georgia |
| Sans-serif | Fonts without decorative strokes | Arial, Helvetica, Verdana |
| Monospace | Every character has the same fixed width | Courier New, Lucida Console |
| Cursive | Fonts that mimic handwriting | Comic Sans MS, Brush Script |
| Fantasy | Decorative/display fonts | Impact, Papyrus |

Examples:

1. Serif:
```css
p { font-family: "Times New Roman", Times, serif; }
```

2. Sans-serif:
```css
h1 { font-family: Arial, Helvetica, sans-serif; }
```

3. Monospace:
```css
code { font-family: "Courier New", Courier, monospace; }
```

4. Cursive:
```css
blockquote { font-family: "Comic Sans MS", cursive; }
```

5. Fantasy:
```css
h2 { font-family: Impact, fantasy; }
```

Note: It is good practice to always end the font-family list with a generic family name as a fallback.

Font-Variant in CSS:

Definition: The `font-variant` property in CSS is used to select between the `normal` and `small-caps` variants of a font. When `small-caps` is applied, lowercase letters are displayed as smaller versions of uppercase letters.

Syntax:
```css
selector { font-variant: value; }
```

Values:

1. normal — Displays text in the standard (default) font style.

Example:
```html
<style>
p.normal { font-variant: normal; }
</style>
<p class="normal">This is normal text.</p>
```
Output: This is normal text. (standard lowercase and uppercase)

2. small-caps — Displays lowercase letters as smaller uppercase letters.

Example:
```html
<style>
p.small { font-variant: small-caps; }
</style>
<p class="small">This is small-caps text.</p>
```
Output: THIS IS SMALL-CAPS TEXT. (lowercase letters appear as smaller capitals)

Key Point: `small-caps` is commonly used for headings, titles, or decorative text to give a formal or elegant appearance.

Font-Weight in CSS:

Definition: The `font-weight` property in CSS describes how bold or 'heavy' a font should be presented. It controls the thickness of the characters in a font.

Syntax:
```css
selector { font-weight: value; }
```

Values of font-weight:

| Value | Description |
|---|---|
| `normal` | Default weight (equivalent to 400) |
| `bold` | Bold text (equivalent to 700) |
| `bolder` | Bolder than the inherited weight |
| `lighter` | Lighter than the inherited weight |
| `100` | Thin (lightest) |
| `200` | Extra Light |
| `300` | Light |
| `400` | Normal |
| `500` | Medium |
| `600` | Semi Bold |
| `700` | Bold |
| `800` | Extra Bold |
| `900` | Black (heaviest) |

Examples:
```html
<style>
p.normal { font-weight: normal; }
p.bold { font-weight: bold; }
p.bolder { font-weight: bolder; }
p.w300 { font-weight: 300; }
p.w700 { font-weight: 700; }
</style>
<p class="normal">Normal weight text.</p>
<p class="bold">Bold weight text.</p>
<p class="w300">Light weight (300) text.</p>
<p class="w700">Bold weight (700) text.</p>
```

Note: Not all fonts support all numeric weight values. If a specific weight is not available, the browser will use the closest available weight.

CSS Property for Letter Spacing:

Property: `letter-spacing`

Definition: The `letter-spacing` property in CSS is used to specify the amount of additional space between the characters (letters) in a text.

Syntax:
```css
selector { letter-spacing: value; }
```

Values:
- `normal` — No extra space between characters (default).
- A length value (positive or negative) in units such as `px`, `em`, `pt`, etc.
- Positive value → increases spacing between characters.
- Negative value → decreases spacing between characters.

Examples:
```html
<style>
p.normal { letter-spacing: normal; }
p.wide { letter-spacing: 5px; }
p.wider { letter-spacing: 10px; }
p.narrow { letter-spacing: -2px; }
</style>
<p class="normal">Normal letter spacing.</p>
<p class="wide">Wide letter spacing (5px).</p>
<p class="wider">Wider letter spacing (10px).</p>
<p class="narrow">Narrow letter spacing (-2px).</p>
```

Output:
- `normal` → Standard spacing.
- `5px` → Characters are spread further apart.
- `-2px` → Characters are closer together.

Use: Letter spacing is commonly used for headings, logos, or decorative text to improve readability or aesthetics.

Types of Text Alignment in CSS:

Property: `text-align`

Definition: The `text-align` property in CSS is used to set the horizontal alignment of text within an element.

There are 4 types of text alignment in CSS:

| Value | Description |
|---|---|
| `left` | Aligns text to the left margin (default for LTR languages) |
| `right` | Aligns text to the right margin |
| `center` | Centers the text horizontally |
| `justify` | Stretches text so that each line has equal width (like in newspapers) |

Syntax:
```css
selector { text-align: value; }
```

Examples:
```html
<style>
p.left { text-align: left; }
p.right { text-align: right; }
p.center { text-align: center; }
p.justify { text-align: justify; }
</style>
<p class="left">This text is left aligned.</p>
<p class="right">This text is right aligned.</p>
<p class="center">This text is center aligned.</p>
<p class="justify">This text is justified. It stretches to fill the full width of the container.</p>
```

Conclusion: CSS supports 4 types of text alignment: left, right, center, and justify.

Capitalizing Text Using CSS:

Property: `text-transform`

Definition: The `text-transform` property in CSS controls the capitalization of text. It can be used to make text appear in uppercase, lowercase, or with the first letter of each word capitalized, regardless of how the text is written in the HTML source.

Syntax:
```css
selector { text-transform: value; }
```

Values:

| Value | Description | Example |
|---|---|---|
| `capitalize` | Capitalizes the first letter of each word | `hello world` → `Hello World` |
| `uppercase` | Converts all letters to uppercase | `hello world` → `HELLO WORLD` |
| `lowercase` | Converts all letters to lowercase | `HELLO WORLD` → `hello world` |
| `none` | No transformation (default) | Text appears as written |

Examples:
```html
<style>
p.cap { text-transform: capitalize; }
p.upper { text-transform: uppercase; }
p.lower { text-transform: lowercase; }
p.none { text-transform: none; }
</style>
<p class="cap">hello world</p> <!-- Hello World -->
<p class="upper">hello world</p> <!-- HELLO WORLD -->
<p class="lower">HELLO WORLD</p> <!-- hello world -->
<p class="none">Hello World</p> <!-- Hello World -->
```

Conclusion: The `text-transform` property with the value `capitalize` or `uppercase` is used to capitalize text in a webpage using CSS.

CSS Properties for Foreground and Background Color:

---

1. Foreground Color — `color` property:

Definition: The `color` property sets the foreground color of the text content of an element.

Syntax:
```css
selector { color: value; }
```

Values: Color can be specified as:
- Color name: `red`, `blue`, `green`
- Hexadecimal: `#FF0000`, `#0000FF`
- RGB: `rgb(255, 0, 0)`

Example:
```html
<style>
h1 { color: blue; }
p { color: #008000; } /* green */
</style>
<h1>This heading is blue.</h1>
<p>This paragraph is green.</p>
```

---

2. Background Color — `background-color` property:

Definition: The `background-color` property sets the background color of an element or the entire webpage.

Syntax:
```css
selector { background-color: value; }
```

Example:
```html
<style>
body { background-color: lightyellow; }
h1 { background-color: #000080; color: white; }
p { background-color: rgb(200, 230, 200); }
</style>
<body>
<h1>Dark Blue Background Heading</h1>
<p>Light green background paragraph.</p>
</body>
```

---

Summary Table:

| Property | Purpose | Example |
|---|---|---|
| `color` | Sets text (foreground) color | `color: red;` |
| `background-color` | Sets background color | `background-color: yellow;` |

CSS Property Controlling Background Image Repetition:

Property: `background-repeat`

Definition: The `background-repeat` property in CSS controls whether and how a background image is repeated (tiled) to fill the element's background area.

Syntax:
```css
selector { background-repeat: value; }
```

Values:

| Value | Description |
|---|---|
| `repeat` | Repeats the image both horizontally and vertically (default) |
| `repeat-x` | Repeats the image only horizontally |
| `repeat-y` | Repeats the image only vertically |
| `no-repeat` | The image is displayed only once, without repetition |

Examples:
```html
<style>
/* Repeat in both directions (default) */
body { background-image: url('bg.jpg'); background-repeat: repeat; }

/* Repeat only horizontally */
div.h { background-image: url('bg.jpg'); background-repeat: repeat-x; }

/* Repeat only vertically */
div.v { background-image: url('bg.jpg'); background-repeat: repeat-y; }

/* No repetition */
div.n { background-image: url('bg.jpg'); background-repeat: no-repeat; }
</style>
```

Conclusion: The `background-repeat` property is used to control the repetition of a background image in CSS. Using `no-repeat` prevents the image from tiling, while `repeat` (default) tiles it across the entire page.

Web Page for Company: web@Creation

Concept Used: HTML structure with CSS properties — background-color, color, font-family, font-size, text-align, font-weight, text-decoration.

Complete Code:
```html
<!DOCTYPE html>
<html>
<head>
<title>web@Creation</title>
<style type="text/css">
body {
background-color: #1a1a2e;
font-family: Arial, sans-serif;
color: #ffffff;
margin: 0;
padding: 0;
}
.header {
background-color: #e94560;
text-align: center;
padding: 20px;
}
.header h1 {
font-size: 40px;
color: #ffffff;
letter-spacing: 3px;
text-transform: uppercase;
}
.header p {
font-size: 16px;
color: #f0f0f0;
font-style: italic;
}
.navbar {
background-color: #16213e;
text-align: center;
padding: 10px;
}
.navbar a {
color: #e94560;
text-decoration: none;
margin: 0 15px;
font-size: 18px;
font-weight: bold;
}
.navbar a:hover {
text-decoration: underline;
}
.content {
padding: 30px;
text-align: justify;
}
.content h2 {
color: #e94560;
font-size: 26px;
text-decoration: underline;
}
.content p {
font-size: 16px;
line-height: 1.8;
letter-spacing: 1px;
}
.services {
background-color: #16213e;
padding: 20px 30px;
}
.services h2 {
color: #e94560;
text-align: center;
}
.services ul {
list-style-type: square;
color: #ffffff;
font-size: 16px;
line-height: 2;
}
.footer {
background-color: #e94560;
text-align: center;
padding: 15px;
color: #ffffff;
font-size: 14px;
}
</style>
</head>
<body>

<!-- Header Section -->
<div class="header">
<h1>web@Creation</h1>
<p>Designing the Digital Future — One Pixel at a Time</p>
</div>

<!-- Navigation Bar -->
<div class="navbar">
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Services</a>
<a href="#">Portfolio</a>
<a href="#">Contact</a>
</div>

<!-- Main Content -->
<div class="content">
<h2>Welcome to web@Creation</h2>
<p>
web@Creation is a leading web design and development company
dedicated to building beautiful, responsive, and user-friendly
websites. We combine creativity with technology to deliver
outstanding digital experiences for businesses of all sizes.
</p>
<p>
Our team of expert designers and developers work closely with
clients to understand their vision and transform it into a
stunning online presence.
</p>
</div>

<!-- Services Section -->
<div class="services">
<h2>Our Services</h2>
<ul>
<li>Website Design and Development</li>
<li>E-Commerce Solutions</li>
<li>Search Engine Optimization (SEO)</li>
<li>Mobile App Development</li>
<li>Digital Marketing</li>
<li>Domain and Hosting Services</li>
</ul>
</div>

<!-- Footer -->
<div class="footer">
<p>&copy; 2024 web@Creation. All Rights Reserved.</p>
<p>Email: info@webcreation.com | Phone: +91-9876543210</p>
</div>

</body>
</html>
```

CSS Properties Used:
- `background-color` — sets background of body, header, navbar, footer.
- `color` — sets text foreground color.
- `font-family` — sets font type.
- `font-size` — sets text size.
- `text-align` — aligns text.
- `letter-spacing` — spaces between characters.
- `text-transform` — uppercase heading.
- `text-decoration` — underline and link decoration.
- `font-weight` — bold navigation links.
- `font-style` — italic tagline.

Web Page for Departmental Store using Listing Tags with CSS Margin

Concept Used: HTML ordered list `<ol>`, unordered list `<ul>`, definition list `<dl>`, and CSS margin properties.

Complete Code:
```html
<!DOCTYPE html>
<html>
<head>
<title>SuperMart Departmental Store</title>
<style type="text/css">
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
color: #333333;
margin: 20px;
padding: 0;
}
h1 {
text-align: center;
color: #cc0000;
font-size: 32px;
margin-top: 20px;
margin-bottom: 10px;
}
h2 {
color: #0055aa;
font-size: 22px;
margin-top: 25px;
margin-bottom: 8px;
text-decoration: underline;
}
h3 {
color: #006600;
font-size: 18px;
margin-top: 15px;
margin-bottom: 5px;
}
/* Unordered List Styling */
ul {
list-style-type: disc;
margin-left: 40px;
margin-top: 10px;
margin-bottom: 10px;
}
ul li {
font-size: 16px;
margin-bottom: 6px;
margin-left: 20px;
}
/* Ordered List Styling */
ol {
list-style-type: decimal;
margin-left: 40px;
margin-top: 10px;
margin-bottom: 10px;
}
ol li {
font-size: 16px;
margin-bottom: 6px;
margin-left: 20px;
}
/* Definition List Styling */
dl {
margin-left: 40px;
margin-top: 10px;
margin-bottom: 10px;
}
dt {
font-weight: bold;
font-size: 16px;
color: #cc0000;
margin-top: 8px;
}
dd {
font-size: 15px;
margin-left: 30px;
margin-bottom: 5px;
color: #555555;
}
.section {
background-color: #ffffff;
border: 1px solid #dddddd;
padding: 15px 20px;
margin-bottom: 20px;
border-radius: 5px;
}
.footer {
text-align: center;
background-color: #cc0000;
color: #ffffff;
padding: 12px;
margin-top: 20px;
font-size: 14px;
}
</style>
</head>
<body>

<h1>&#127978; SuperMart Departmental Store</h1>
<p style="text-align:center; font-size:16px; color:#555;">
Your One-Stop Shopping Destination!
</p>

<!-- Section 1: Furniture using Unordered List -->
<div class="section">
<h2>(a) Furniture Department</h2>
<h3>Available Items (Unordered List):</h3>
<ul>
<li>Wooden Dining Table</li>
<li>Sofa Set (3+1+1)</li>
<li>King Size Bed with Storage</li>
<li>Wardrobe (3-Door)</li>
<li>Study Table and Chair</li>
<li>Bookshelf</li>
</ul>
</div>

<!-- Section 2: Electronic Items using Ordered List -->
<div class="section">
<h2>(b) Electronic Items Department</h2>
<h3>Top Selling Electronics (Ordered List):</h3>
<ol>
<li>LED Smart Television (55 inch)</li>
<li>Bluetooth Speaker</li>
<li>Wireless Headphones</li>
<li>Digital Camera</li>
<li>Portable Power Bank</li>
<li>Smart Watch</li>
</ol>
</div>

<!-- Section 3: Home Appliances using Nested List -->
<div class="section">
<h2>(c) Home Appliances Department</h2>
<h3>Categories and Items (Nested Unordered List):</h3>
<ul>
<li>Kitchen Appliances
<ul>
<li>Microwave Oven</li>
<li>Mixer Grinder</li>
<li>Electric Kettle</li>
</ul>
</li>
<li>Cooling Appliances
<ul>
<li>Refrigerator (Double Door)</li>
<li>Air Conditioner (1.5 Ton)</li>
<li>Ceiling Fan</li>
</ul>
</li>
<li>Cleaning Appliances
<ul>
<li>Washing Machine</li>
<li>Vacuum Cleaner</li>
</ul>
</li>
</ul>
</div>

<!-- Section 4: Computer Books using Ordered List -->
<div class="section">
<h2>(d) Computer Books Department</h2>
<h3>Popular Books (Ordered List):</h3>
<ol type="A">
<li>Information and Computer Technology — Class 10</li>
<li>Computer Science with Python — Class 11</li>
<li>Let Us C — Yashavant Kanetkar</li>
<li>HTML and CSS: Design and Build Websites</li>
<li>Introduction to Algorithms</li>
<li>Database Management Systems</li>
</ol>
</div>

<!-- Section 5: Cosmetics using Definition List -->
<div class="section">
<h2>(e) Cosmetics Department</h2>
<h3>Products and Descriptions (Definition List):</h3>
<dl>
<dt>Face Wash</dt>
<dd>Gentle cleansing face wash for all skin types. Available in 50ml and 100ml.</dd>

<dt>Moisturizer</dt>
<dd>SPF 30 daily moisturizer for soft and glowing skin.</dd>

<dt>Lipstick</dt>
<dd>Long-lasting matte lipstick available in 20 shades.</dd>

<dt>Shampoo</dt>
<dd>Anti-dandruff and nourishing shampoo for healthy hair.</dd>

<dt>Perfume</dt>
<dd>Premium eau de parfum with long-lasting fragrance.</dd>
</dl>
</div>

<!-- Footer -->
<div class="footer">
<p>&copy; 2024 SuperMart Departmental Store. All Rights Reserved.</p>
<p>Visit us at: 123, Market Road, New Delhi | Tel: 011-12345678</p>
</div>

</body>
</html>
```

CSS Margin Properties Used:
- `margin-left: 40px` — indents list items from the left.
- `margin-top` and `margin-bottom` — adds vertical spacing between elements.
- `margin-left: 30px` on `<dd>` — indents definition descriptions.

List Tags Used:
- `<ul>` — Unordered list (bullet points) for Furniture and Home Appliances.
- `<ol>` — Ordered list (numbered) for Electronics and Computer Books.
- `<dl>`, `<dt>`, `<dd>` — Definition list for Cosmetics.

Web Page with Headings Positioned Using CSS Relative Positioning

Concept Used: CSS `position: relative` with `left: 40px` to shift headings 40 units from their normal position.

Explanation:
- `position: relative` — positions the element relative to its normal (default) position in the document flow.
- `left: 40px` — moves the element 40 pixels to the right from its normal left position.

Complete Code:
```html
<!DOCTYPE html>
<html>
<head>
<title>Relative Position Headings</title>
<style type="text/css">
body {
background-color: #eef2ff;
font-family: Arial, sans-serif;
margin: 20px;
}
h1.page-title {
text-align: center;
color: #333399;
font-size: 28px;
margin-bottom: 30px;
}
h2.heading-A {
position: relative;
left: 40px;
color: #cc0000;
font-size: 26px;
background-color: #ffe0e0;
width: 300px;
padding: 8px;
border-left: 5px solid #cc0000;
}
h2.heading-B {
position: relative;
left: 40px;
color: #006600;
font-size: 26px;
background-color: #e0ffe0;
width: 300px;
padding: 8px;
border-left: 5px solid #006600;
}
h2.heading-C {
position: relative;
left: 40px;
color: #0000cc;
font-size: 26px;
background-color: #e0e0ff;
width: 300px;
padding: 8px;
border-left: 5px solid #0000cc;
}
h2.heading-D {
position: relative;
left: 40px;
color: #cc6600;
font-size: 26px;
background-color: #fff3e0;
width: 300px;
padding: 8px;
border-left: 5px solid #cc6600;
}
p.desc {
position: relative;
left: 40px;
font-size: 15px;
color: #555555;
margin-bottom: 20px;
width: 400px;
}
</style>
</head>
<body>

<h1 class="page-title">CSS Relative Positioning — Headings A, B, C, D</h1>

<!-- Heading A -->
<h2 class="heading-A">A — Introduction</h2>
<p class="desc">
This section covers the introduction to the topic.
The heading is placed 40px from the left using relative positioning.
</p>

<!-- Heading B -->
<h2 class="heading-B">B — Concepts</h2>
<p class="desc">
This section explains the core concepts.
CSS relative positioning shifts elements from their normal position.
</p>

<!-- Heading C -->
<h2 class="heading-C">C — Examples</h2>
<p class="desc">
This section provides practical examples.
The left property moves the element 40 units to the right.
</p>

<!-- Heading D -->
<h2 class="heading-D">D — Conclusion</h2>
<p class="desc">
This section concludes the topic.
Relative positioning is useful for fine-tuning element placement.
</p>

</body>
</html>
```

Key CSS Used:
```css
h2 {
position: relative;
left: 40px;
}
```
- `position: relative` — the element is positioned relative to where it would normally appear.
- `left: 40px` — the element is shifted 40 pixels to the right from its normal left edge.
- The surrounding content is not affected by the shift (unlike `absolute` positioning).

Web Page with Paragraphs Using Different CSS Font Size Units

Concept Used: CSS `font-size` property with various units:
- Absolute units: `px` (pixels), `pt` (points), `cm` (centimeters)
- Relative units: `em`, `%` (percentage), `rem` (root em)
- Keyword values: `small`, `medium`, `large`, `x-large`

Complete Code:
```html
<!DOCTYPE html>
<html>
<head>
<title>Different Font Size Units in CSS</title>
<style type="text/css">
body {
background-color: #f9f9f9;
font-family: Georgia, serif;
margin: 30px;
color: #333333;
}
h1 {
text-align: center;
color: #003366;
font-size: 30px;
text-decoration: underline;
margin-bottom: 25px;
}
/* Absolute Units */
p.px-size {
font-size: 16px;
background-color: #ffe0e0;
padding: 8px;
margin-bottom: 10px;
border-left: 4px solid #cc0000;
}
p.pt-size {
font-size: 14pt;
background-color: #e0ffe0;
padding: 8px;
margin-bottom: 10px;
border-left: 4px solid #006600;
}
p.cm-size {
font-size: 0.5cm;
background-color: #e0e0ff;
padding: 8px;
margin-bottom: 10px;
border-left: 4px solid #0000cc;
}
/* Relative Units */
p.em-size {
font-size: 1.5em;
background-color: #fff3e0;
padding: 8px;
margin-bottom: 10px;
border-left: 4px solid #cc6600;
}
p.percent-size {
font-size: 120%;
background-color: #f3e0ff;
padding: 8px;
margin-bottom: 10px;
border-left: 4px solid #660099;
}
p.rem-size {
font-size: 1.2rem;
background-color: #e0f9ff;
padding: 8px;
margin-bottom: 10px;
border-left: 4px solid #006699;
}
/* Keyword Values */
p.small-size {
font-size: small;
background-color: #f0f0f0;
padding: 8px;
margin-bottom: 10px;
border-left: 4px solid #999999;
}
p.medium-size {
font-size: medium;
background-color: #fffde0;
padding: 8px;
margin-bottom: 10px;
border-left: 4px solid #999900;
}
p.large-size {
font-size: large;
background-color: #ffe0f0;
padding: 8px;
margin-bottom: 10px;
border-left: 4px solid #cc0066;
}
p.xlarge-size {
font-size: x-large;
background-color: #e0fff9;
padding: 8px;
margin-bottom: 10px;
border-left: 4px solid #009966;
}
.unit-label {
font-weight: bold;
color: #003366;
}
</style>
</head>
<body>

<h1>CSS Font Size — Different Units</h1>

<!-- Absolute Units -->
<h2 style="color:#cc0000;">Absolute Units</h2>

<p class="px-size">
<span class="unit-label">font-size: 16px (Pixels)</span><br>
This paragraph uses pixels (px) as the font size unit.
Pixels are absolute units tied to the screen resolution.
1px = 1 dot on the screen.
</p>

<p class="pt-size">
<span class="unit-label">font-size: 14pt (Points)</span><br>
This paragraph uses points (pt) as the font size unit.
Points are traditionally used in print media.
1pt = 1/72 of an inch.
</p>

<p class="cm-size">
<span class="unit-label">font-size: 0.5cm (Centimeters)</span><br>
This paragraph uses centimeters (cm) as the font size unit.
This is a physical measurement unit, mainly used for print.
</p>

<!-- Relative Units -->
<h2 style="color:#006600;">Relative Units</h2>

<p class="em-size">
<span class="unit-label">font-size: 1.5em (Em)</span><br>
This paragraph uses em as the font size unit.
1em = the current font size of the parent element.
1.5em means 1.5 times the parent font size.
</p>

<p class="percent-size">
<span class="unit-label">font-size: 120% (Percentage)</span><br>
This paragraph uses percentage (%) as the font size unit.
120% means 120% of the parent element's font size.
It is flexible and user-adjustable.
</p>

<p class="rem-size">
<span class="unit-label">font-size: 1.2rem (Root Em)</span><br>
This paragraph uses rem as the font size unit.
1rem = the font size of the root (html) element.
It provides consistent sizing across the entire page.
</p>

<!-- Keyword Values -->
<h2 style="color:#0000cc;">Keyword Values</h2>

<p class="small-size">
<span class="unit-label">font-size: small</span><br>
This paragraph uses the keyword 'small' for font size.
</p>

<p class="medium-size">
<span class="unit-label">font-size: medium</span><br>
This paragraph uses the keyword 'medium' for font size.
This is the default browser font size.
</p>

<p class="large-size">
<span class="unit-label">font-size: large</span><br>
This paragraph uses the keyword 'large' for font size.
</p>

<p class="xlarge-size">
<span class="unit-label">font-size: x-large</span><br>
This paragraph uses the keyword 'x-large' for font size.
This is larger than the 'large' keyword value.
</p>

</body>
</html>
```

Summary of Font Size Units Used:

| Unit | Type | Description |
|---|---|---|
| `px` | Absolute | Pixels — screen-based fixed size |
| `pt` | Absolute | Points — print-based fixed size |
| `cm` | Absolute | Centimeters — physical measurement |
| `em` | Relative | Relative to parent element's font size |
| `%` | Relative | Percentage of parent element's font size |
| `rem` | Relative | Relative to root (html) element's font size |
| `small` | Keyword | Predefined small size |
| `medium` | Keyword | Default browser font size |
| `large` | Keyword | Predefined large size |
| `x-large` | Keyword | Predefined extra-large size |