Syllabus topics (RTMNU)
- Introduction to HTML: Tags and Attributes
- Basic HTML Syntax
- CSS - Overview
- Introduction
- Advantages
- Versions
- Creation and maintenance of CSS
- CSS Syntax
- Type Selectors
- Universal Selectors
- Descendant Selectors
- Class Selectors
- ID Selectors
- Child Selectors
- Attribute Selectors
- Multiple Style Rules
- Grouping Selectors
- CSS Inclusion - Embedded CSS - The <style> Element, Attributes
- Inline CSS - The Style Attribute
- External CSS - The <link> Element, Attributes
- Imported CSS - @import Rule
- CSS Rules Overriding
- CSS Comments
Introduction to HTML: Tags and Attributes, Basic HTML Syntax
HTML (HyperText Markup Language) is the standard markup language used to create web pages. It tells the browser the structure of a page – headings, paragraphs, images, links, tables. It was created by Tim Berners-Lee (1991); the current version is HTML5.
- Tag: a keyword inside angle brackets that marks an element, e.g. <p>. Most tags are in pairs – opening <b> and closing </b>. Some are empty (single) tags like <br>, <hr>, <img>.
- Attribute: extra information about an element, written inside the opening tag as name="value", e.g. <img src="logo.png" width="100">. Common attributes: id, class, style, title, href, src, alt.
- Element: opening tag + content + closing tag.
<!DOCTYPE html>
<html>
<head>
<title>My Shop</title>
</head>
<body>
<h1>Welcome</h1>
<p>Best prices in Nagpur.</p>
</body>
</html>
<html> is the root, <head> holds the title and styles (not shown on page), <body> holds visible content.
CSS – Overview, Introduction and Advantages
CSS (Cascading Style Sheets) is a style sheet language used to describe the look of HTML elements – colours, fonts, spacing, borders and layout. HTML gives structure; CSS gives presentation. "Cascading" means that when many rules apply, they are combined in a fixed order of priority.
Advantages of CSS:
- Saves time – write a style once and use it on many pages.
- Easy maintenance – change one CSS file and the whole website changes.
- Pages load faster – less repeated code in HTML.
- Better styling – more options than plain HTML attributes.
- Multiple device support – different styles for mobile, desktop and print.
- Separation of content and design – HTML stays clean.
CSS Versions
| Version | Year | Key points |
|---|---|---|
| CSS1 | 1996 | First W3C recommendation: fonts, colours, text, margins |
| CSS2 | 1998 | Positioning, z-index, media types, more selectors |
| CSS2.1 | 2011 (final) | Corrected and cleaned version of CSS2 |
| CSS3 | From 1999 onwards (in modules) | Divided into modules: rounded corners, shadows, gradients, animations, media queries |
Creation and Maintenance of CSS
Steps: (1) plan the styles needed for the site; (2) write the rules in a text editor (Notepad, VS Code) and save with .css extension; (3) link the file to every HTML page; (4) to maintain, edit only the CSS file – all linked pages update. Group common styles and add comments so others can understand.
CSS Syntax
A CSS rule has a selector and a declaration block. Each declaration is a property: value; pair.
h1 { color: blue; font-size: 24px; }
Here h1 is the selector, color and font-size are properties, blue and 24px are values.
CSS Selectors
A selector chooses which HTML elements a rule applies to.
| Selector | Syntax example | Selects |
|---|---|---|
| Type selector | p { color: red; } | All <p> elements |
| Universal selector | * { margin: 0; } | Every element on the page |
| Descendant selector | div p { ... } | <p> anywhere inside a <div> |
| Class selector | .price { ... } | Elements with class="price" (can be used many times) |
| ID selector | #header { ... } | The one element with id="header" (unique) |
| Child selector | ul > li { ... } | <li> that are direct children of <ul> |
| Attribute selector | input[type="text"] { ... } | Elements having that attribute/value |
| Class selector | ID selector |
|---|---|
| Written with a dot (.) | Written with a hash (#) |
| Can be used on many elements | Must be unique on a page |
| Lower priority | Higher priority |
Multiple Style Rules and Grouping Selectors
Multiple style rules: many properties can be given to one selector in one block: h1 { color: green; text-align: center; letter-spacing: 2px; }. Grouping selectors: when several selectors share the same style, separate them with commas: h1, h2, p { font-family: Arial; }. This reduces repeated code.
CSS Inclusion – Embedded CSS: the <style> Element and its Attributes
Embedded (internal) CSS is written inside the <style> element in the <head> section. It applies to that one page only. Attributes: type (text/css), media (screen, print, all).
<style type="text/css" media="all">
body { background-color: #f0f0f0; }
</style>
</head>
Inline CSS – the style Attribute
Inline CSS is written directly in an element using the style attribute: <p style="color:red; font-size:18px;">Offer!</p>. It affects only that element and has the highest priority, but it mixes design with content and is hard to maintain.
External CSS – the <link> Element and its Attributes
External CSS is kept in a separate .css file and linked in the <head>: <link rel="stylesheet" type="text/css" href="style.css" media="all">. Attributes: rel (relation – stylesheet), href (path of the file), type (text/css), media (device). Best method for websites with many pages.
Imported CSS – @import Rule
The @import rule loads one style sheet into another. It must be written at the top of a style sheet or <style> block: @import url("colors.css"); It is useful to split big styles into smaller files, but it can slow loading slightly.
CSS Rules Overriding
When different rules apply to the same element, the browser decides by these rules:
- Inline style overrides internal and external styles.
- Internal and external styles: the rule written later wins.
- Specificity: ID selector > class/attribute selector > type selector.
- !important after a value overrides normal rules: color: red !important;
CSS Comments
Comments explain code and are ignored by the browser. In CSS they are written between /* and */, can be single or multi-line: /* Main heading style */. (HTML comments use <!-- -->.)
Likely exam questions
- (Long, 8/16 marks) What is CSS? Explain its advantages and versions. Describe the syntax of a CSS rule with an example.
- (Long, 8/16 marks) Explain the different ways of including CSS in an HTML document: embedded, inline, external and imported CSS, with syntax. How are CSS rules overridden?
- (Short, 4 marks) Differentiate between class selector and ID selector.
- (Short, 4 marks) Explain universal, descendant and child selectors with examples.
- (Short, 4 marks) What are tags and attributes in HTML? Give examples.