Class X · Chapter 59 min read
Share:WhatsAppLinkedIn

Chapter 5: DHTML & CSS

Class: X | Subject: Information and Computer Technology

Key Concepts

DHTML (Dynamic HTML), DHTML is the combination of HTML and JavaScript., It combines several built-in browser features to make web pages dynamic (able to change look and style after the document has loaded)., DHTML is not a scripting language, it is a browser feature/enhancement.

Components of DHTML:

  1. HTML, for creating text, image links, and page elements.
  2. CSS, for formatting text, positioning, and layering content.
  3. JavaScript, for dynamically controlling HTML and CSS properties.

What you can create with DHTML:

  • Animations, Pop-up menus, Inclusion of content from external data sources, Draggable and droppable elements

Features of DHTML:

  • Makes documents dynamic; controls how HTML displays content., Web page reacts and changes with visitor actions., Allows exact positioning of any element, changeable after loading., Can hide and show content as needed., Changes occur entirely on the client-side (user's browser).

DHTML Components in Detail:

  • Conventional HTML: Standard markup.
  • Scripts: Small programs to manipulate web pages.
  • DOM (Document Object Model): The roadmap to locate and manipulate any element in an HTML document using scripting.
  • Absolute Positioning: Elements placed at fixed locations (vs. relative positioning).
  • Multimedia Filters: Create visual effects without long download times.

CSS (Cascading Style Sheets), A style sheet language for describing the look and formatting of an HTML document., HTML provides the content; CSS provides the presentation., CSS adds style (fonts, colours, spacing) to web documents.

Advantages of CSS:

  • Controls layout of many documents from one single style sheet., More precise control of layout., Different layouts for different media types., Numerous advanced techniques for web pages.

Limitations of CSS:

  • Limited browser compatibility, the same page may render differently in different browsers (e.g., Mozilla vs Internet Explorer).

Three Methods of Applying CSS

Method 1: Inline (the style attribute), CSS is applied directly to an HTML element using the style attribute.

<body style="background-color: #FF0000;">
  <p>The background is red.</p>
</body>

Method 2: Internal (the <style> tag), CSS is placed within a <style> tag in the <head> section.

<head>
  <style type="text/css">
    body { background-color: #0000FF; }
  </style>
</head>

Method 3: External (linked style sheet), most important, CSS is stored in a separate .css file and linked to the HTML document., One CSS file can control the layout of many HTML documents.

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

Font Properties

1. font-family, Applies a prioritized list of fonts. If the first is not installed, the next is used., Two categories:

  • Family-name: e.g., "Arial", "Times New Roman", "Tahoma"
  • Generic family: e.g., serif, sans-serif, monospace
  • serif fonts have "feet" (e.g., Times New Roman, Garamond, Georgia).
  • sans-serif fonts lack "feet" (e.g., Trebuchet, Arial, Verdana).
  • monospace fonts have fixed-width characters (e.g., Courier, Courier New).
h1 { font-family: arial, comic sans-serif, "Times New Roman"; }
h2 { font-family: "Times New Roman", verdana, serif; }

2. font-style, Values: normal, italic, oblique

h1 { font-style: oblique; }
h2 { font-style: italic; }

3. font-variant, Values: normal, small-caps

  • Small-caps displays smaller-sized uppercase letters in place of lowercase.
h1 { font-variant: small-caps; }
h2 { font-variant: normal; }

4. font-weight, Controls boldness. Values: normal, bold, or numbers 100-900 (in hundreds).

p { font-weight: normal; }
td { font-weight: bold; }

5. font-size, Units: px (pixels), pt (points), % (percentage), em

  • px and pt are absolute units.
  • % and em are adjustable units (recommended for accessibility).
h1 { font-size: 30px; }
h2 { font-size: 12pt; }
h3 { font-size: 120%; }
p  { font-size: 1em; }

6. Combining Font Properties

All font properties can be combined in one declaration.

Order: font-style | font-variant | font-weight | font-size | font-family

p {
  font-style: italic;
  font-weight: bold;
  font-size: 30px;
  font-family: arial, sans-serif;
}

Text/Color Properties

1. text-indent, Adds an indent to the first line of a paragraph.

p { text-indent: 60px; }

2. text-align, Aligns text: left, right, center, justify

  • justify stretches each line so both margins are straight (not available in plain HTML).
th { text-align: right; }
td { text-align: center; }
p  { text-align: justify; }

3. text-decoration, Adds decorative effects to text., Values: underline, overline, line-through, none

h1 { text-decoration: underline; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }

4. letter-spacing, Sets spacing between characters.

h1 { letter-spacing: 6px; }
p  { letter-spacing: 3px; }

5. text-transform, Controls capitalization., Values:

  • capitalize, capitalizes the first letter of each word
  • uppercase, converts all letters to uppercase
  • lowercase, converts all letters to lowercase
  • none, no transformation
h1 { text-transform: capitalize; }
li { text-transform: uppercase; }

Background Properties

1. color (Foreground Color), Sets the text colour., Accepts colour names, hex values, or rgb values.

h1 { color: #ff0000; }
/* equivalent to: color: red; or color: rgb(255,0,0); */

2. background-color, Sets the background colour of an element., Apply to <body> for the entire page, or to specific elements.

body { background-color: #FFCC60; }
h1   { color: #990011; background-color: #FC9004; }

3. background-image, Inserts a background image., Specify the image location as a URL.

body {
  background-color: #FFCC66;
  background-image: url("earth.gif");
}
  • Image in the same folder: url("earth.gif")
  • Image in another folder: url("../images/earth.gif")
  • Image on the internet: url("http://www.example.net/earth.gif")

4. background-repeat, Controls whether a background image repeats.

Value Description
repeat-x Repeats horizontally only
repeat-y Repeats vertically only
repeat Repeats both horizontally and vertically (default)
no-repeat Does not repeat 
body {
  background-image: url("earth.gif");
  background-repeat: no-repeat;
}

Important Definitions

Term Definition
DHTML Combination of HTML, CSS, and JavaScript that enables dynamic web pages
CSS Cascading Style Sheets; a language for describing the presentation of HTML documents
DOM Document Object Model; the roadmap for locating and manipulating HTML elements
Inline CSS CSS applied directly to an element using the style attribute
Internal CSS CSS placed within a <style> tag in the HTML <head>
External CSS CSS stored in a separate .css file and linked to HTML via <link>
font-family CSS property to set a prioritized list of fonts
serif Font family with decorative "feet" on characters
sans-serif Font family without "feet" on characters
monospace Font family where all characters have equal width
text-indent CSS property to indent the first line of a paragraph
text-transform CSS property to control text capitalization
background-repeat CSS property to control repetition of a background image

Code/Syntax Examples

External CSS Setup

HTML file (default.htm):

<html>
<head>
  <title>My document</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  <h1>My stylesheet Page</h1>
</body>
</html>

CSS file (style.css):

body {
  background-color: #FF0000;
}

Complete Font Styling Example

HTML (font.html):

<html>
<head>
  <title>Example</title>
  <link rel="stylesheet" href="ex1.css" type="text/css" media="all" />
</head>
<body>
  <p>This is an example of combining all the Font properties.</p>
</body>
</html>

CSS (ex1.css):

p {
  font-style: italic;
  font-weight: bold;
  font-size: 30px;
  font-family: arial, sans-serif;
}

Text Alignment with Tables

th { text-align: right; }
td { text-align: center; }
p  { text-align: justify; }

Background with No-Repeat Image

body {
  background-color: #FFCC66;
  background-image: url("earth.gif");
  background-repeat: no-repeat;
}
h1 {
  color: #990000;
  background-color: #FC9804;
}

Key Points

  1. DHTML is not a scripting language; it is a combination of HTML, CSS, and JavaScript.
  2. DHTML changes occur on the client-side (browser), not the server.
  3. CSS provides three methods: inline, internal, and external. External is the most powerful and maintainable.
  4. One external CSS file can control the layout of many HTML documents.
  5. Font-family uses a prioritized list; falls back to the next font if one is not installed.
  6. Use % or em for font sizes to ensure accessibility.
  7. The order for combined font properties is: style, variant, weight, size, family.
  8. text-align: justify is available in CSS but not in plain HTML.
  9. text-transform values: capitalize, uppercase, lowercase, none.
  10. background-repeat defaults to repeating in both directions; use no-repeat to show the image only once.
  11. Multiple CSS properties are separated by semicolons.
  12. Colours can be specified as names (red), hex (#ff0000), or rgb (rgb(255,0,0)).

Practice Questions

Multiple Choice (selected):

  1. Property for bold/heavy font?, (c) Font weight
  2. Adjustable font size units?, (b) % and em
  3. DHTML is a combination of?, (c) HTML and JavaScript
  4. CSS stands for?, (c) Cascading Style Sheets
  5. Letter spacing property?, (b) Letter Spacing
  6. Absolute font size units?, px and pt
  7. Repeats image both horizontally and vertically?, (d) Background Repeat property

Fill in the Blanks (selected):

  1. Font-family differentiates between serif, sans-serif, and monospace.
  2. Font-variant refers to the small-caps variant.
  3. CSS uses a numeric scale of multiples of 100 to 900 (for font-weight).
  4. text-indent applies an indent to the first line of a paragraph.
  5. The color property describes the foreground color.
  6. The background-color property describes the background color.
  7. text-transform controls the capitalization of text.

Short Answer:

  1. Explain CSS with reference to DHTML.
  2. List advantages and disadvantages of CSS.
  3. What is the extension of a CSS file? (.css)
  4. Explain the three ways to embed CSS in HTML.
  5. List and explain font-family property categories with examples.
  6. Explain font-variant with examples.
  7. Explain font-weight.
  8. Properties for letter spacing in a line.
  9. How many types of text alignment in CSS? (left, right, center, justify)
  10. How to capitalize text using CSS properties?
  11. Explain foreground and background color properties.
  12. Which property controls background image repetition?

Lab Tasks:

  1. Create a web page for a company using background colour and other CSS attributes.
  2. Create a webpage for a departmental store using listing tags with CSS margin attributes.
  3. Design a webpage with headings positioned using CSS relative positioning.
  4. Create a webpage with paragraphs using different font size units.

Test Your Knowledge

Take a quick quiz on this chapter

Start Quiz →

Prefer watching over reading?

Subscribe for free.

Subscribe on YouTube