School Notes on HTML and CSS
1. Introduction
When creating websites, two of the most important languages are HTML and CSS. They
work together to build, structure, and design web pages.
• HTML gives the content and structure (like a skeleton).
• CSS gives the design, style, and layout (like the clothes and decorations).
Without HTML, there would be no content on the page. Without CSS, the page would look
plain and boring.
2. What is HTML?
HTML stands for HyperText Markup Language.
• It is a markup language (not a programming language).
• It describes the structure of web pages using a system of tags and elements.
• HTML tells the browser what to display: text, images, links, videos, forms, and
more.
2.1 How HTML Works
• HTML is written inside angle brackets < >.
• Most HTML elements have an opening tag and a closing tag.
Example:
• <p>This is a paragraph.</p>
• Some elements are self-closing (like <img> for images).
2.2 Basic HTML Structure
Every webpage usually starts with this structure:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
• <!DOCTYPE html> → Tells the browser the type of document.
• <html> → Root element.
• <head> → Contains information about the page (title, metadata, links to CSS).
• <body> → Contains the actual content that appears on the page.
2.3 Common HTML Tags
• <h1> to <h6> → Headings (titles and subtitles).
• <p> → Paragraph.
• <a> → Link (anchor).
• <img> → Image.
• <ul> and <ol> → Lists (unordered/bulleted and ordered/numbered).
• <table> → Table.
• <form> → Input fields, buttons, etc.
3. What is CSS?
CSS stands for Cascading Style Sheets.
• CSS controls the presentation and style of a webpage.
• It allows us to change colors, fonts, spacing, sizes, borders, animations, and layouts.
• Without CSS, web pages would look plain, just black text on a white background.
3.1 How CSS Works
CSS selects an HTML element and then applies styles to it.
Example:
p {
color: red;
font-size: 16px;
}
This makes all paragraphs <p> appear in red with font size 16px.
3.2 Ways to Use CSS
1. Inline CSS (inside the HTML element):
2. <p style="color: blue;">This is a blue paragraph.</p>
3. Internal CSS (inside <style> in the <head>):
4. <style>
5. h1 {
6. color: green;
7. }
8. </style>
9. External CSS (separate .css file linked to HTML):
10. <link rel="stylesheet" href="styles.css">
11. h1 {
12. color: purple;
13. }
3.3 Common CSS Properties
• Colors → color, background-color
• Text styles → font-size, font-family, font-weight, text-align
• Box model → margin, padding, border
• Layout → display, position, flexbox, grid
• Effects → hover, transition, animation
4. How HTML and CSS Work Together
HTML provides the content, and CSS makes that content look better.
Example:
HTML file (index.html):
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple webpage using HTML and CSS.</p>
</body>
</html>
CSS file (styles.css):
h1 {
color: darkblue;
font-size: 40px;
text-align: center;
}
p {
color: gray;
font-family: Arial, sans-serif;
line-height: 1.5;
}
When you open this in a browser, the HTML creates the text, and the CSS makes it styled
and attractive.
5. Summary
• HTML = structure, skeleton, content.
• CSS = style, design, appearance.
• Together, they are the foundation of every website.
