Computer ScienceUnit 99 min read

HTML & CSS: Structure, Styling, and Web Page Basics

Unit 9 of Computer Science teaches how to create web pages using HTML (structure) and CSS (styling), including tags, attributes, selectors, and box model—essential for building modern websites.

Padhai · Based on the official syllabus and past papers
Updated 26 Sept 2026

TAKEAWAYS:

HTML defines the structure of a webpage using tags like <html>, <head>, and <body>.
CSS controls appearance (colors, fonts, layouts) using selectors like p {color: red;}.
The box model (content + padding + border + margin) governs how elements are sized and spaced.
Common HTML tags include <div>, <span>, <img>, <a>, and <table> for organizing content.
CSS properties like display, position, and flexbox enable responsive and dynamic layouts.
Always validate code using tools like W3Schools or VS Code to avoid errors.


---

## **1. Introduction to Web Technology**
Web technology is the set of tools and languages used to create and display web pages. The two most important languages are:
- **HTML (HyperText Markup Language)**: Defines the **structure** of a webpage (e.g., headings, paragraphs, images).
- **CSS (Cascading Style Sheets)**: Controls the **appearance** (e.g., colors, fonts, spacing).

```figure
{"type":"layers","layers":["HTML","CSS","JavaScript"],"right":["Structure","Styling","Behavior"],"highlight":["HTML","CSS"],"caption":"The three core technologies of web development: HTML for structure, CSS for styling, and JavaScript for interactivity."}

Why are they important?

HTML is like the skeleton of a webpage.
CSS is like the skin and makeup that makes it look good.

HTML and CSS work together to build web pages.

2. HTML Basics

HTML uses tags to define elements. Each tag has an opening (<tag>) and closing (</tag>) part.

Basic structure of an HTML5 document with proper nesting.

Key HTML Tags

Tag	Purpose	Example
`<html>`	Root element of the webpage	`<html>`...</html>
`<head>`	Contains meta-information (title, links)	`<head>`...</head>
`<title>`	Sets the browser tab title	`<title>My Page</title>`
`<body>`	Contains visible content	`<body>`...</body>
`<h1>` to `<h6>`	Headings (h1 is largest)	`<h1>Hello World</h1>`
`<p>`	Paragraph	`<p>This is a paragraph.</p>`
`<img>`	Inserts an image	`<img src="image.jpg">`
`<a>`	Hyperlink (clickable link)	`<a href="https://example.com">Click me</a>`
`<ul>`/`<ol>`	Unordered/ordered lists	`<ul><li>Item 1</li></ul>`
`<table>`	Creates a table	`<table><tr><td>Data</td></tr></table>`

Example: A Simple HTML Page

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a <strong>bold</strong> paragraph.</p>
    <img src="logo.png" alt="Company Logo">
</body>
</html>

graph LR
    A["<!DOCTYPE html>"] --> B["<html>"]
    B --> C["<head>"]
    C --> D["<title>My First Page</title>"]
    B --> E["<body>"]
    E --> F["<h1>Welcome to My Website</h1>"]
    E --> G["<p>This is a <strong>bold</strong> paragraph.</p>"]
    E --> H["<img src='logo.png' alt='Company Logo'>"]

Hierarchical structure of a simple HTML page with key tags.

Key Notes:

Always start with <!DOCTYPE html> to declare HTML5.
<head> contains metadata (e.g., title, CSS links).
<body> contains everything visible on the page.

3. HTML Attributes

Attributes provide extra information about HTML elements. Common attributes:

href (for links): <a href="https://example.com">
src (for images): <img src="image.jpg">
alt (alternative text for images): <img alt="Description">
id and class (for CSS styling): <div id="header">

HTML Tag with Attributes: `<a href="https://example.com" class="link">Click Here</a>`

4. CSS Basics

CSS controls how HTML elements look. It uses selectors to target elements.

CSS Syntax

selector {
    property: value;
}

Example:

p {
    color: blue;
    font-size: 16px;
}

Common CSS Selectors

Selector	Example	Description
Element	`p`	Targets all `<p>` tags
Class	`.myclass`	Targets elements with `class="myclass"`
ID	`#myid`	Targets the element with `id="myid"`
Universal	`*`	Targets all elements

Example: Styling a Paragraph

<p class="highlight">This is a styled paragraph.</p>

.highlight {
    color: red;
    background-color: yellow;
}

5. The Box Model

Every HTML element is a box with four parts:

Content (text, images)
Padding (space inside the box)
Border (outline around the box)
Margin (space outside the box)

Example:

div {
    width: 200px;
    padding: 20px;
    border: 2px solid black;
    margin: 10px;
}

6. Common CSS Properties

Property	Example	Description
`color`	`color: red;`	Text color
`background-color`	`background-color: gray;`	Background color
`font-family`	`font-family: Arial;`	Font type
`text-align`	`text-align: center;`	Aligns text (left, center, right)
`margin`	`margin: 10px;`	Space outside the box
`padding`	`padding: 20px;`	Space inside the box
`display`	`display: flex;`	Changes layout (flexbox, grid)

7. HTML Forms

Forms collect user input (e.g., login details, surveys). Key elements:

<form>: Container for form elements.
<input>: Text fields, buttons, checkboxes.
<textarea>: Multi-line text input.
<select>: Dropdown menu.
<button>: Clickable button.

Example:

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>
    <input type="submit" value="Submit">
</form>

8. HTML Tables

Tables organize data in rows and columns.

Example:

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
</table>

9. HTML Lists

Unordered List (`<ul>`)

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Ordered List (`<ol>`)

<ol>
    <li>First</li>
    <li>Second</li>
</ol>

10. Exam Tips

Memorize Basic Tags: Know <html>, <head>, <body>, <h1> to <h6>, <p>, <img>, <a>, <table>.
Understand Attributes: Focus on href, src, alt, id, class.
CSS Selectors: Practice targeting elements using .class and #id.
Box Model: Always remember content → padding → border → margin.
Formatting: Indent HTML/CSS properly for readability.
Common Mistakes:
- Forgetting </tag> (e.g., <p> must close as </p>).
- Missing alt in <img> (accessibility issue).
- Incorrect CSS syntax (e.g., color: blue; vs. color: blue).
Practice: Write small HTML/CSS snippets daily.

NEB Board-Style Questions

Short Answer (1 mark each)

What is the purpose of the <title> tag in HTML?
Differentiate between <div> and <span>.
Write the CSS to make text red and 20px in size.
What is the box model in CSS?
Give an example of an HTML hyperlink.

Long Answer (5 marks)

Explain the structure of an HTML document with a diagram. Write a simple HTML page with a heading, paragraph, and image.
What are CSS selectors? Explain with examples of element, class, and ID selectors.
Write the HTML and CSS code to create a table with two columns ("Name" and "Age") and two rows of data.
Describe the difference between inline, internal, and external CSS. Give an example of each.
Explain the importance of the alt attribute in <img> tags. Write an HTML snippet using it.

Final Note:

HTML = Structure (like a skeleton).
CSS = Styling (like makeup).
Practice coding daily to master these concepts!
Use W3Schools or VS Code to test your code.

Based on the NEB +2 Science syllabus for Computer Science (Comp), unit 9.

Discussion

Loading…

HTML & CSS: Structure, Styling, and Web Page Basics

2. HTML Basics

Key HTML Tags

Example: A Simple HTML Page

3. HTML Attributes

4. CSS Basics

CSS Syntax

Common CSS Selectors

Example: Styling a Paragraph

5. The Box Model

6. Common CSS Properties

7. HTML Forms

8. HTML Tables

9. HTML Lists

Unordered List (<ul>)

Ordered List (<ol>)

10. Exam Tips

NEB Board-Style Questions

Short Answer (1 mark each)

Long Answer (5 marks)

Discussion

Unordered List (`<ul>`)

Ordered List (`<ol>`)