CSS Basics and DHTML, CBSE Class 10 ICT Complete Guide

Learn CSS basics and DHTML for CBSE Class 10 ICT. Covers inline, internal, external CSS, selectors, properties, colors, fonts, and DHTML concepts.

CSS (Cascading Style Sheets) is used to style and format web pages. It controls colors, fonts, layout, and spacing. Understanding CSS is essential for CBSE Class 10 ICT. This guide covers all CSS basics and DHTML concepts you need for your exam.

What is CSS?

CSS stands for Cascading Style Sheets. It is a style sheet language used to describe how HTML elements should look on screen.

Key points:

CSS separates content (HTML) from presentation (styling), One CSS file can style multiple HTML pages, CSS makes web pages more attractive and consistent, CSS saves time by avoiding repetitive formatting in HTML

Why "Cascading"?

CSS is called "cascading" because styles cascade down from multiple sources. If multiple styles apply to the same element, the most specific one wins. The priority order is:

Inline style (highest priority)
Internal style sheet
External style sheet
Browser default (lowest priority)

Three Ways to Add CSS

1. Inline CSS

Inline CSS is applied directly to an HTML element using the style attribute:

<h1 style="color: red; text-align: center;">Welcome</h1>
<p style="font-size: 18px; color: blue;">This is a styled paragraph.</p>
<div style="background-color: lightyellow; padding: 20px;">
    This div has a yellow background with padding.
</div>

Advantage: Quick and specific. Disadvantage: Hard to maintain, mixes content with styling.

2. Internal CSS

Internal CSS is written inside the <style> tag in the <head> section:

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS Example</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: darkblue;
            text-align: center;
        }
        p {
            color: #333333;
            font-size: 16px;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1>My Web Page</h1>
    <p>This paragraph is styled using internal CSS.</p>
</body>
</html>

Advantage: Styles apply to the entire page, no separate file needed. Disadvantage: Cannot be reused across multiple pages.

3. External CSS

External CSS is written in a separate .css file and linked to HTML:

style.css:

body {
    background-color: white;
    font-family: Verdana, sans-serif;
    margin: 20px;
}

h1 {
    color: navy;
    text-align: center;
    border-bottom: 2px solid navy;
}

p {
    color: #444444;
    font-size: 14px;
}

a {
    color: blue;
    text-decoration: none;
}

a:hover {
    color: red;
    text-decoration: underline;
}

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>External CSS Example</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>My Styled Page</h1>
    <p>This page uses an external stylesheet.</p>
    <a href="about.html">About Us</a>
</body>
</html>

Advantage: One file styles multiple pages, easy to maintain. Disadvantage: Extra file download needed.

Comparison of CSS Methods

Feature	Inline	Internal	External
Location	`style` attribute in tag	`<style>` in `<head>`	Separate `.css` file
Scope	Single element	Single page	Multiple pages
Priority	Highest	Medium	Lowest
Reusability	Not reusable	Page only	Highly reusable
Maintenance	Difficult	Moderate	Easy

CSS Selectors

A CSS selector specifies which HTML element(s) to style.

Element Selector

Styles all elements of that type:

h1 {
    color: red;
}

p {
    font-size: 14px;
}

Class Selector

Styles elements with a specific class. Uses a dot (.) before the class name:

.highlight {
    background-color: yellow;
    font-weight: bold;
}

.error {
    color: red;
}

<p class="highlight">This paragraph is highlighted.</p>
<p>This is a normal paragraph.</p>
<p class="error">This shows an error message.</p>

ID Selector

Styles a single unique element. Uses a hash (#) before the ID name:

#header {
    background-color: darkblue;
    color: white;
    padding: 20px;
}

#footer {
    text-align: center;
    font-size: 12px;
}

<div id="header">This is the header</div>
<div id="footer">This is the footer</div>

Exam tip: A class can be used on multiple elements, but an ID must be unique on the page. Class uses . (dot) and ID uses # (hash).

Important CSS Properties

Text Properties

h1 {
    color: navy;                    /* Text color */
    text-align: center;             /* left, center, right, justify */
    text-decoration: underline;     /* none, underline, overline, line-through */
    text-transform: uppercase;      /* uppercase, lowercase, capitalize */
    letter-spacing: 2px;            /* Space between letters */
    word-spacing: 5px;              /* Space between words */
    line-height: 1.8;               /* Space between lines */
    text-indent: 30px;              /* First line indentation */
}

Font Properties

p {
    font-family: Arial, Helvetica, sans-serif;  /* Font name */
    font-size: 16px;                             /* Font size */
    font-weight: bold;                           /* normal, bold, 100-900 */
    font-style: italic;                          /* normal, italic, oblique */
}

Background Properties

body {
    background-color: #f0f0f0;          /* Background color */
    background-image: url("bg.jpg");    /* Background image */
    background-repeat: no-repeat;       /* repeat, no-repeat, repeat-x, repeat-y */
    background-position: center;        /* Position of background image */
}

Border Properties

div {
    border-width: 2px;          /* Border thickness */
    border-style: solid;        /* solid, dashed, dotted, double, none */
    border-color: black;        /* Border color */
}

/* Shorthand */
p {
    border: 1px solid red;      /* width style color in one line */
}

Margin and Padding

div {
    margin: 20px;           /* Space outside the border */
    padding: 15px;          /* Space inside the border */
}

/* Individual sides */
p {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;

    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
}

Width and Height

div {
    width: 500px;
    height: 300px;
}

img {
    width: 100%;        /* Takes full width of parent */
    height: auto;       /* Maintains aspect ratio */
}

CSS Colors

CSS colors can be specified in several ways:

/* Color name */
h1 { color: red; }

/* Hexadecimal */
h2 { color: #FF5733; }

/* RGB */
h3 { color: rgb(255, 87, 51); }

Common Color Codes

Color	Name	Hex Code
Red	red	#FF0000
Green	green	#008000
Blue	blue	#0000FF
White	white	#FFFFFF
Black	black	#000000
Yellow	yellow	#FFFF00
Orange	orange	#FFA500

What is DHTML?

DHTML stands for Dynamic HTML. It is not a separate language but a combination of technologies used to create interactive and dynamic web pages.

DHTML = HTML + CSS + JavaScript + DOM

Component	Role
HTML	Provides the structure and content
CSS	Provides styling and layout
JavaScript	Provides interactivity and behavior
DOM	Allows JavaScript to access and change HTML elements

Features of DHTML

Content can change without reloading the page
Elements can move, appear, disappear
Users can interact with page elements
Styles can change based on user actions
Animations and transitions are possible

DHTML vs HTML

Feature	HTML	DHTML
Content	Static	Dynamic (can change)
User interaction	Limited (links, forms)	Rich (animations, events)
Technologies	HTML only	HTML + CSS + JavaScript + DOM
Page reload	Required for changes	Not required
File extension	.html	.html (same)

Important Questions

Q1. Differentiate between inline, internal, and external CSS.

Inline CSS is written in the style attribute of individual HTML tags and applies to only that element. Internal CSS is written inside <style> tags in the <head> section and applies to the entire page. External CSS is written in a separate .css file linked using <link> tag and can be applied to multiple pages. Inline has the highest priority, followed by internal, then external.

Q2. What is the difference between class selector and ID selector?

A class selector uses a dot (.) and can be applied to multiple elements on a page. An ID selector uses a hash (#) and should be applied to only one unique element on a page. Example: .highlight is a class, #header is an ID.

Q3. What is DHTML? List its components.

DHTML (Dynamic HTML) is a combination of technologies used to create interactive web pages that can change content and appearance without reloading. Its four components are HTML (structure), CSS (styling), JavaScript (interactivity), and DOM (Document Object Model, which allows JavaScript to access HTML elements).

Q4. Explain the CSS box model.

Every HTML element is treated as a rectangular box with four layers: content (the actual text/image), padding (space between content and border), border (the line around padding), and margin (space outside the border). Understanding this helps in controlling spacing and layout of elements.

Quick Revision

CSS stands for Cascading Style Sheets
Three methods: Inline (style attribute), Internal (style tag), External (.css file), Priority: Inline > Internal > External > Browser default
Class selector uses . (dot), ID selector uses # (hash), Class can be reused, ID must be unique
DHTML = HTML + CSS + JavaScript + DOM, Key CSS properties: color, font-size, background-color, margin, padding, border, Colors can be specified as names, hex codes, or RGB values