Introduction to HTML & CSS | Computer Science Project
──────────────────────────
COMPUTER SCIENCE PROJECT
Introduction to
HTML & CSS
The Building Blocks of the Web
──────────────────────────
Submitted By:
[Your Name]
Class: [Your Class] | Roll No: [Your Roll No]
Submitted To:
[Teacher's Name]
[School / College Name]
Academic Year: 2025–2026
Page 1 of 19
Introduction to HTML & CSS | Computer Science Project
Acknowledgement
I would like to express my sincere gratitude to all those who helped me in completing this project
successfully.
First and foremost, I am deeply thankful to my Computer Science teacher, [Teacher's Name], for
their constant guidance, encouragement, and valuable suggestions throughout the course of this
project. Their expertise and patient explanation of web technologies made this work possible.
I also extend my heartfelt thanks to my parents for providing me with a conducive environment and
the necessary resources to work on this project. Their moral support has been a constant source of
motivation for me.
I am grateful to my friends and classmates who shared their ideas, helped me test the examples,
and gave constructive feedback during the preparation of this project.
I would also like to acknowledge the World Wide Web Consortium (W3C) and the open-source
community whose documentation, tutorials, and resources provided a strong foundation for
understanding HTML and CSS concepts.
This project has been a great learning experience, helping me understand how web pages are
structured and styled — from basic tags to complete webpage design.
[Your Name]
[Class & Section]
[School Name]
Page 2 of 19
Introduction to HTML & CSS | Computer Science Project
Table of Contents
1. Acknowledgement.......................................................................... 2
2. Introduction to HTML.......................................................................... 4
3. History of HTML.......................................................................... 5
4. HTML Structure.......................................................................... 6–7
5. HTML Tags & Attributes.......................................................................... 8–9
6. Introduction to CSS.......................................................................... 10
7. Types of CSS.......................................................................... 11–12
8. CSS Syntax.......................................................................... 13
9. Basic Webpage Design.......................................................................... 14–15
10. Conclusion.......................................................................... 16
Page 3 of 19
Introduction to HTML & CSS | Computer Science Project
Introduction to HTML
HTML is the standard language used to create and design web pages. It is the backbone of every
website you see on the internet. HTML was created by Sir Tim Berners-Lee in 1991 and has since
become the most fundamental technology of the World Wide Web.
HTML uses a system of elements represented by tags. These tags tell the web browser how to
display the content on the page. HTML is not a programming language — it is a markup language,
meaning it annotates text so that the browser knows how to structure and present it.
Key Features of HTML:
➤ Platform Independent — works on all operating systems and browsers
➤ Easy to Learn — simple syntax using tags and attributes
➤ Supports Multimedia — can embed images, audio, video
➤ Hyperlink Support — connects pages using anchor tags
➤ Works with CSS & JavaScript — for styling and interactivity
➤ SEO Friendly — helps search engines read web content
What Can HTML Do?
HTML can be used to:
➤ Create the structure of a web page
➤ Add text, headings, paragraphs, and lists
➤ Embed images and videos
➤ Create forms for user input
➤ Link multiple pages together
➤ Display tables of data
Page 4 of 19
Introduction to HTML & CSS | Computer Science Project
History of HTML
HTML has evolved significantly since its creation. Each version brought new features and improved
web capabilities.
Version Year Key Features
HTML 1.0 1991 Basic text and hyperlinks, first version by Tim
Berners-Lee
HTML 2.0 1995 Standardized forms, tables, and images
HTML 3.2 1997 Added scripts, applets, and more table support
HTML 4.01 1999 CSS support, frames, scripting integration
XHTML 1.0 2000 Stricter XML-based version of HTML
HTML5 2014 Semantic tags, audio/video, canvas, local storage
Today, HTML5 is the current standard and is maintained by the World Wide Web Consortium
(W3C). It introduced many powerful features that allow developers to build modern, interactive, and
responsive websites without relying on third-party plugins.
Page 5 of 19
Introduction to HTML & CSS | Computer Science Project
HTML Structure
Every HTML document follows a basic structure. This structure tells the browser how to interpret
and display the content. Below is the standard structure of an HTML document:
Explanation of Each Part:
➤ DOCTYPE Declaration: <!DOCTYPE html>
Tells the browser that this is an HTML5 document. It must be the very first line.
➤ HTML Element: <html>
The root element that wraps all content on the page. Every HTML page starts with <html>
and ends with </html>.
Page 6 of 19
Introduction to HTML & CSS | Computer Science Project
➤ Head Element: <head>
Contains meta-information about the document — title, character set, links to CSS files, etc.
This content is NOT visible on the page.
➤ Title Element: <title>
Defines the title shown in the browser's tab or window. It is placed inside <head>.
➤ Body Element: <body>
Contains all the visible content of the web page — headings, paragraphs, images, links,
tables, forms, etc.
Nesting Rules in HTML:
HTML elements can be nested inside each other. This creates a parent-child relationship between
elements. The structure looks like a tree, which is why it is called the DOM (Document Object
Model).
Rules for proper nesting:
➤ Always close inner tags before outer tags
➤ Indentation makes code readable
➤ Every opening tag must have a closing tag (except self-closing tags like <br>, <img>)
➤ Overlapping tags are not allowed
Page 7 of 19
Introduction to HTML & CSS | Computer Science Project
HTML Tags & Attributes
What are HTML Tags?
Tags are the building blocks of HTML. They are enclosed in angle brackets < > and usually come in
pairs — an opening tag and a closing tag. The content goes between these tags.
Commonly Used HTML Tags:
Tag Name Purpose
<h1> – <h6> Heading Tags Define headings from largest (h1) to
smallest (h6)
<p> Paragraph Defines a paragraph of text
<a> Anchor Creates hyperlinks to other pages or
resources
<img> Image Embeds images in the page
<ul> / <ol> Lists Unordered (bullets) and ordered
(numbers) lists
<li> List Item Each item inside ul or ol
<table> Table Creates data tables
<form> Form Creates input forms for user data
<div> Division Block-level container for grouping
elements
<span> Span Inline container for styling text
portions
<br> Line Break Inserts a line break (self-closing)
<hr> Horizontal Rule Draws a horizontal line
Page 8 of 19
Introduction to HTML & CSS | Computer Science Project
What are HTML Attributes?
Attributes provide additional information about HTML elements. They are always written in the
opening tag as name-value pairs.
Common Attributes:
➤ href — specifies the URL for anchor <a> tags
➤ src — specifies the source file for images or scripts
➤ alt — provides alternative text for images (accessibility)
➤ class — used to apply CSS styles to multiple elements
➤ id — gives a unique identity to an element
➤ style — applies inline CSS directly to an element
➤ type — specifies type of input field in forms
➤ width / height — sets dimensions of elements
Page 9 of 19
Introduction to HTML & CSS | Computer Science Project
Introduction to CSS
CSS is the language used to style and visually enhance HTML documents. While HTML creates the
structure and content of a webpage, CSS controls how that content looks — its colors, fonts, layout,
spacing, and overall design.
CSS was first introduced by Håkon Wium Lie in 1994 and was officially recommended by W3C in
1996. Since then, it has grown into a powerful tool with CSS3 being the latest standard, offering
animations, transitions, gradients, and flexible layouts.
Why is CSS Important?
➤ Separates design from content — makes code cleaner and easier to manage
➤ Consistent styling — apply one style sheet to hundreds of pages
➤ Responsive design — make websites work on mobile, tablet, and desktop
➤ Rich visual design — colors, fonts, shadows, animations
➤ Accessibility — proper use of CSS improves screen-reader compatibility
➤ Faster loading — external CSS files are cached by the browser
How CSS Works with HTML:
CSS works by selecting HTML elements and applying style rules to them. A style rule consists of a
selector (which element to style) and a declaration block (what styles to apply).
Page 10 of 19
Introduction to HTML & CSS | Computer Science Project
Types of CSS
There are three ways to apply CSS to an HTML document. Each method has its own use case,
advantages, and limitations.
1. Inline CSS
Inline CSS is applied directly to a single HTML element using the style attribute. It affects only that
specific element and overrides other styles.
Advantages:
➤ Quick and easy for one-time styling
➤ Highest priority — overrides other CSS
Disadvantages:
➤ Hard to maintain — styles are scattered throughout the HTML
➤ Cannot be reused across multiple elements
➤ Violates the principle of separation of concerns
2. Internal CSS (Embedded CSS)
Internal CSS is written inside the <style> tag in the <head> section of the HTML document. It
applies to the entire page.
Page 11 of 19
Introduction to HTML & CSS | Computer Science Project
Advantages:
➤ Styles apply to the entire page
➤ No need for a separate file
Disadvantages:
➤ Cannot be reused across multiple web pages
➤ Increases the size of the HTML file
3. External CSS
External CSS is written in a separate .css file and linked to the HTML document using the <link>
tag. This is the most recommended and professional method.
Advantages:
➤ One CSS file can style multiple HTML pages
➤ Clean separation of HTML and CSS
➤ Easy to update and maintain
➤ CSS file is cached — faster page loading
Disadvantages:
➤ Requires an additional HTTP request to load the file
➤ Page may appear unstyled briefly (FOUC) if CSS loads slowly
Page 12 of 19
Introduction to HTML & CSS | Computer Science Project
CSS Syntax
CSS has a very specific and simple syntax. Understanding this syntax is essential for writing correct
style rules.
Parts of a CSS Rule:
➤ Selector — targets the HTML element(s) to be styled (e.g., p, h1, .class, #id)
➤ Property — the aspect you want to change (e.g., color, font-size, margin)
➤ Value — the specific setting for the property (e.g., red, 16px, 20px)
➤ Declaration — a property-value pair separated by a colon
➤ Declaration Block — all declarations inside curly braces { }
Types of Selectors:
CSS Box Model:
Every HTML element is treated as a box. The CSS Box Model describes how the space around an
element is calculated: Content → Padding → Border → Margin.
Page 13 of 19
Introduction to HTML & CSS | Computer Science Project
Page 14 of 19
Introduction to HTML & CSS | Computer Science Project
Basic Webpage Design
Now we will combine HTML and CSS to create a simple but complete webpage. This demonstrates
how HTML provides the structure and CSS provides the styling.
HTML File — [Link]:
Page 15 of 19
Introduction to HTML & CSS | Computer Science Project
CSS File — [Link]:
Page 16 of 19
Introduction to HTML & CSS | Computer Science Project
Conclusion
This project provided a comprehensive introduction to HTML and CSS — the two foundational
technologies behind every website on the internet. Through this study, we explored the complete
journey of web development, starting from the basic definition of HTML to creating a fully styled and
functional web page.
We learned that HTML (HyperText Markup Language) is the structural backbone of web pages. It
uses a system of tags and attributes to organize content into headings, paragraphs, images, tables,
links, and forms. We studied the evolution of HTML from its first version in 1991 to the modern
HTML5 standard, which brings powerful features like semantic elements, audio/video embedding,
and local storage.
We also explored CSS (Cascading Style Sheets), which transforms plain HTML into visually
appealing designs. CSS gives developers full control over colors, fonts, spacing, layout, and
responsiveness. We studied the three types of CSS — Inline, Internal, and External — and
understood why External CSS is the preferred approach in professional web development.
CSS selectors, properties, values, and the box model were covered in depth, giving us a solid
understanding of how styles are applied and how elements are rendered on screen.
Finally, we built a practical basic webpage that combined HTML and CSS to demonstrate real-world
usage of these concepts. This hands-on example showed how structure and styling work together
to produce a complete, professional-looking web page.
Learning HTML and CSS is just the beginning. The next steps in the web development journey
include JavaScript for interactivity, React or other frameworks for modern web apps, and
responsive design with CSS Grid and Flexbox. The skills built in this project form the essential base
for all of these advanced topics.
Page 17 of 19
Introduction to HTML & CSS | Computer Science Project
References
The following resources were referred to during the preparation of this project:
➤ W3Schools — [Link] (HTML & CSS tutorials and references)
➤ MDN Web Docs — [Link] (Official Mozilla HTML/CSS documentation)
➤ W3C Official Website — [Link] (Web standards and specifications)
➤ HTML: The Definitive Guide — Book by Chuck Musciano & Bill Kennedy
➤ CSS: The Definitive Guide — Book by Eric A. Meyer
➤ FreeCodeCamp — [Link] (Free web development learning platform)
➤ Khan Academy — [Link] (HTML/CSS beginner courses)
Additional Online Resources:
➤ CSS-Tricks — [Link] (Advanced CSS techniques and tips)
➤ Can I Use — [Link] (Browser compatibility checker for HTML/CSS features)
➤ Codecademy — [Link] (Interactive HTML and CSS courses)
Page 18 of 19
Introduction to HTML & CSS | Computer Science Project
Student Declaration
I hereby declare that this project titled "Introduction to HTML and CSS" is my own original work,
prepared for the partial fulfillment of the Computer Science curriculum. This project has not been
submitted elsewhere for any other examination or award.
All the information, examples, code snippets, and explanations presented in this project have been
prepared by me with guidance from my teacher and reference from the resources mentioned in the
bibliography section.
I take full responsibility for the accuracy and integrity of the content presented in this project.
Student's Signature: _____________________
Name: _____________________
Class: _____________________
Date: _____________________
Teacher's Remarks & Signature:
_________________________________________________________________
_________________________________________________________________
Marks Awarded: __________ / __________
Teacher's Signature: _____________________ Date: _____________
Page 19 of 19