Programming Guide

Programming Fundamentals - HTML and CSS Basics

Learn the core concepts of HTML and CSS for FBISE Class 9 and 10 Computer Science.

Common tags, attributes, styling, and practical code examples to help you ace Chapter 3.

Programming Fundamentals (Chapter 3 in both Class 9 and 10 FBISE Computer Science) is where theory turns into practice. This is the chapter where you actually write code that produces visible output in a browser. Many students find this the most satisfying chapter - and also the one where marks are easiest to drop if you have not practiced enough. Unlike earlier chapters where reading and memorizing can get you through, Chapter 3 requires you to do something: write tags, apply attributes, and style elements. The good news is that HTML and CSS are beginner-friendly. You do not need any prior programming experience to understand them.

This guide walks through everything you need for the FBISE exam: the structure of an HTML document, the most common tags and CSS properties, the types of questions FBISE asks, and how to practice effectively.

Quick tip: HTML gives a web page its structure (headings, paragraphs, images, links). CSS gives it style (colors, fonts, spacing, layout). Think of HTML as the skeleton and CSS as the clothes.

What is HTML?

HTML stands for HyperText Markup Language. It is the standard language used to create web pages. Every website you visit - from Google to YouTube to your school's portal - is built using HTML. It is not a programming language in the traditional sense (there are no loops or conditions in basic HTML), but rather a markup language. You use tags to "mark up" text so that a browser knows how to display it.

For example, wrapping text in <h1> tags tells the browser "this is a main heading," while wrapping text in <p> tags says "this is a paragraph." The browser then automatically applies the default styling for each tag type.

Structure of an HTML Document

Every HTML document follows the same basic structure. You will see this in the FBISE textbook, and you should be able to reproduce it from memory:

<!DOCTYPE html> <html> <head> <title>My First Page</title> </head> <body> <h1>Welcome to My Website</h1> <p>This is a paragraph of text.</p> </body> </html>

Notice the pattern: most tags come in pairs - an opening tag <tagname> and a closing tag </tagname>. The content goes in between. The <head> section contains meta information (like the page title that appears on the browser tab), while the <body> section contains everything that is actually displayed on the page.

Common mistake: Forgetting the closing tag. FBISE examiners often include an MCQ where one option has a missing closing tag. If you practice writing complete tag pairs, you will spot these immediately.

Common HTML Tags You Need to Know

Here are the tags that FBISE most frequently tests, grouped by category:

Headings: <h1> through <h6>. <h1> is the most important (largest), <h6> is the least (smallest). A page should have only one <h1> tag.

Paragraphs: <p> defines a paragraph. Browsers automatically add space before and after each <p> element.

Links: <a href="url"> creates a hyperlink. The href attribute specifies the destination URL. Example: <a href="https://nbfstudyhub.com">Visit NBF StudyHub</a>

Images: <img src="image.jpg" alt="description">. The src attribute specifies the image file location, and alt provides alternative text. Note that <img> is a self-closing tag - it does not need a separate closing tag.

Lists: <ul> (unordered, bullet points) and <ol> (ordered, numbered). Each list item uses the <li> tag. Example:

<ul> <li>First item</li> <li>Second item</li> </ul>

Tables: <table> creates a table, <tr> defines a row, <td> defines a cell, <th> defines a header cell.

For more detailed practice with these tags, visit the Class 9 Chapter 3 solved exercise which includes tag-identification questions and code-writing tasks.

What is CSS?

CSS stands for Cascading Style Sheets. While HTML defines the structure and content of a page, CSS defines how that content looks. You can change colors, fonts, spacing, borders, backgrounds, and even layout using CSS. The "cascading" part means that styles can be applied at different levels (inline, internal, external), and more specific styles override less specific ones.

A CSS rule consists of a selector (which element to style) and one or more declarations (property-value pairs). Example:

h1 { color: blue; font-size: 24px; }

This rule says: "select all <h1> elements and make their text blue with a font size of 24 pixels."

Types of CSS: Inline, Internal, External

FBISE tests your understanding of the three ways to apply CSS:

  • Inline CSS: Applied directly to a specific HTML element using the style attribute. Example: <p style="color:red;">This text is red.</p>. This affects only that one element.
  • Internal CSS: Written inside a <style> tag in the <head> section of the HTML page. It affects all matching elements on that single page.
  • External CSS: Written in a separate .css file and linked to the HTML page using <link rel="stylesheet" href="style.css">. This is the most powerful approach because one CSS file can style multiple pages.

A typical exam question asks: "Which type of CSS has the highest priority?" The answer is inline CSS, because inline styles override both internal and external styles for that specific element.

Common CSS Properties

Here are the properties you are most likely to see on the FBISE exam:

  • color - sets the text color (e.g., color: red; or color: #ff0000;)
  • background-color - sets the background color of an element
  • font-size - controls text size (e.g., font-size: 16px;)
  • font-family - specifies which font to use (e.g., font-family: Arial;)
  • text-align - aligns text left, right, center, or justify
  • margin - space outside the element (between the element and other elements)
  • padding - space inside the element (between the element's content and its border)
  • border - adds a border around the element (e.g., border: 1px solid black;)
  • width and height - set the dimensions of an element

For Class 10 students, the Class 10 Chapter 3 solved exercise includes more advanced CSS questions that go beyond the basics covered in Class 9.

Common Exam Question Types

FBISE asks three main types of questions from Programming Fundamentals:

1. Identifying what a code snippet does. You are shown a short HTML or CSS snippet and asked to select the correct description. For example: "What does <a href="page.html">Click</a> do?" The answer: it creates a clickable link that opens page.html.

2. Completing missing tags or attributes. You are given a partial HTML snippet with a blank, and you must choose the correct tag or attribute to fill it. Example: "Which attribute is missing from <img src="photo.jpg" _____="A photo">?" Answer: alt.

3. Spotting errors. A code snippet is shown with a deliberate mistake - like a missing closing tag, a misspelled attribute, or an incorrect CSS property name. You must identify which line has the error.

The best way to prepare for these question types is to write code yourself. Reading about HTML is not the same as writing it. Open a text editor (Notepad works fine), type out the examples from your textbook, and save them as .html files. Open them in a browser to see the result. This hands-on practice is what builds the recognition skills the exam tests.

Pro tip: Create a single HTML file that includes every tag and CSS property from the textbook. Use it as a reference sheet. The act of typing out each tag yourself is the most effective form of memorization for code syntax.

Practice Tips for Programming Fundamentals

  • Write code by hand in your notebook. The FBISE exam is a written exam - you do not use a computer. Practice writing HTML tags and CSS rules with pen and paper so you can reproduce them legibly under exam conditions. Pay attention to proper indentation and tag order.
  • Use online editors for instant feedback. Websites like JSFiddle or CodePen let you write HTML and CSS and see the result immediately. Use these when you are at home to test your understanding. If a tag does not produce the expected output, you know you have a syntax error to fix.
  • Work through the chapter exercises. The Class 9 solved exercise for Chapter 3 includes MCQs and structured questions. The Class 10 version goes deeper into CSS layouts and more complex HTML structures. Do both, even if you are only in Class 9 - the extra practice will only help.
  • Create a flashcard list. Write each HTML tag on one side of a card and its purpose on the other. Do the same for CSS properties. Review these cards weekly until you can recall each tag's purpose without hesitation.

Frequently Asked Questions

Do I need to memorize every HTML tag?

No. FBISE focuses on the commonly used tags: headings, paragraphs, links, images, lists, tables, and the basic document structure tags (<html>, <head>, <body>, <title>). If you know these and their attributes, you have covered what the exam expects. Obscure tags from later chapters of the HTML specification are not tested.

What is the difference between HTML and CSS?

HTML defines the structure and content of a web page - what text to show, what images to display, what links to include. CSS defines the appearance - what color the text is, how big the font is, what background the page has, how much space is around each element. They work together: HTML provides the building blocks, and CSS arranges and decorates them.

What are the most common mistakes students make in Chapter 3 questions?

The top three mistakes are: (1) confusing tags with attributes (e.g., writing <href> instead of href as an attribute of <a>), (2) forgetting that <img> and <br> are self-closing tags, and (3) mixing up CSS property names (writing color when they mean background-color, or using font-color which does not exist). All three are easily avoidable with practice.

Subscribe