STUDY REVIEWER
HTML & CSS Basics
Lesson 01 · A Little Throwback | Name: ______________________ Section: __________ Date: __________
1. What Is HTML?
HTML documents are plain text (ASCII) files with embedded HTML tags that a browser interprets to control formatting and
layout.
HTML tags use angular brackets and normally come in pairs — an opening tag and a closing tag. Whatever you want
formatted goes between the two tags.
<i>This text will be italicized</i>
Rendered in a browser, this becomes:
This text will be italicized (shown in italics — tags are not visible)
A browser never shows the tags themselves — it follows their instructions. Always remember to close every tag you open, or
the formatting will not display correctly.
NOTE
Editors used for HTML/CSS include professional tools like Adobe Dreamweaver and Adobe Muse, or a simple
text editor like Sublime Text — a common choice for beginners learning HTML.
2. The Basic HTML Page Structure
Every HTML page begins with <html> and ends with </html>. In between are two sections: the head and the body.
• <head> ... </head> — contains information ABOUT the page (like the title) that does not appear on the page itself.
• <body> ... </body> — contains everything that DOES appear on the web page.
Example of a simple HTML document:
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
3. Common HTML Tags
HTML Tag / Attribute Use Example
<b> Bold text <b> School </b>
<i> Italicize text <i> School </i>
HTML Tag / Attribute Use Example
<h1> to <h6> Change the heading size; h1 is the <h1> HTML Basics </h1>
largest
<h1 style="color:"> Change font color of heading <h1
style="color:green">
Acacia Trees </h1>
<hr/> Include a horizontal line (no end tag) Section 2 <hr/>
<br/> Line break (no end tag) This is line one.
<br/> This is line
two.
<p> Paragraph break <p>Once upon a time in
a faraway land</p>
<ol> <ul> <li> Numbered list <ol>; bulleted list <ul>; <ol><li>First
list items <li> Quarter</li><li>Second
Quarter</li></ol>
<a href="URL"> Link to another web page <a
href=[Link].c
om> Click here </a>
<img src="File Path"> Insert an image <img src="[Link]">
<table> <tr> <td> Create tables, table rows, and cells <table><tr><td>First
Name</td></tr></table>
NOTE
HTML 5 is NOT case-sensitive. <H1> and <h1>, <P> or <p>, <STYLE> or <style> all produce the same
output.
4. Basic HTML Attributes
HTML Tag / Attribute Use Example
disabled Disables any input element in your —
website.
href This is where the URL of your web —
address turns into a link.
id Gives a unique ID name for your —
HTML element.
title Displays the title of your website in the —
tab where you open it.
lang Sets a specific language attribute. —
width and height Sets the size of your image (img —
attribute) and columns (tables).
5. Three Types of HTML Markup
Structural Markup
Presents the purpose of the text and can be styled with CSS. It makes a site more accessible by giving importance to the
headline of the page. Example: <h1>, <h2>, <h3>
Presentational Markup
Represents the presence of text — such tags emphasize the text you want displayed. Example: <b>, <i>, <u>, <strong>,
<em>
Hypertext Markup
Connects your website to another website or file by placing a URL in the script of the page. Example: <a href>, <img src>
Common HTML attributes include "src" (defines an image source), "alt" (alternative text shown if an image cannot display),
and "style" (used to style an element), among many others.
6. Cascading Style Sheets (CSS)
CSS controls the look of a website. It works with HTML elements (content) but keeps style (CSS properties and values)
separate — this makes a site easier to maintain and lets style sheets be shared across pages.
CSS is a set of detailed style specifications, called style rules or CSS rules, that define settings for font colors and sizes,
background colors, borders, text alignment, link formats, and margins.
The CSS syntax has three parts — a selector, a property, and a value:
h2 {color: orange; font-size: 19;}
HTML Tag / Attribute Use Example
Selector The HTML element/tag you wish to h2
define (e.g. h2).
Property The attribute you wish to change (e.g. color
color).
Value The setting applied to the property orange
(e.g. orange).
DID YOU KNOW?
Tim Berners-Lee is the father of HTML — he published a document called "HTML Tags" in 1991. CSS was
invented later, on October 10, 1994, by Håkon Wium Lie, who also worked with Berners-Lee.
7. The Cascade: Why "Cascading" Style Sheets?
More than one style sheet can be attached to a document, and all of them can influence the final presentation. A web designer
might use a global stylesheet for an entire site plus a local one for a specific page, while a user can even apply their own
stylesheet — for example, to make text easier to see.
8. Three Types of CSS
Inline CSS
Styles are written directly on a single HTML element using the style attribute. Useful when you only want to apply a style to
one specific piece of text.
<span style="color: red;"> World Wide Web </span>
Internal CSS
Placed inside the <style> tag within the <head> of an HTML document. Best used when a single document needs its own
unique style.
<head>
<style type="text/css">
hr {color: brown;}
p {font-family: arial, verdana, "sans-serif";}
body {background-color: #ffffff;}
</style>
</head>
External CSS
A separate text file with a .css extension containing style rules. The HTML document links to it using a <link> tag inside
<head>. This is ideal for applying the same style to many pages — change one file, and the whole site's look updates.
<head>
<link rel="stylesheet" type="text/css" href="[Link]" />
</head>
A simple external .css file looks like this:
body {
font-family: verdana, arial, "sans serif";
color: #000000;
background: white;
}
p {
text-align: center;
color: black;
font-family: arial;
}
NOTE
External style sheets must be plain text files with no HTML tags in them. They can be named anything (though
most end in .css by convention) and stored anywhere in your site — commonly the root directory or a dedicated
stylesheets folder.
Review Questions
Part A. Identification
1. What does HTML stand for, and what is its main purpose?
2. Name the two main sections found between the <html> and </html> tags.
3. Which tag is used to create a line break with no closing tag?
4. What does CSS stand for?
5. Name the three parts that make up CSS syntax.
6. List the three ways styles can be associated with an HTML document (the three types of CSS).
7. Who is considered the father of HTML, and who invented CSS?
Part B. True or False
1. HTML 5 is a case-sensitive language. ______
2. The <head> section contains content that IS displayed on the web page. ______
3. Internal CSS is written inside a <style> tag in the <head> section. ______
4. An external stylesheet file must contain HTML tags. ______
5. The <img src="..."> tag is an example of hypertext markup. ______
Part C. Matching Type
Match each tag in Column A with its correct use in Column B. Write the number on the blank.
Column A Column B
_____ A. <b> 1. Insert an image
_____ B. <hr/> 2. Bold text
_____ C. <a href> 3. Horizontal line
_____ D. <img src> 4. Link to another page
_____ E. <ol> / <ul> 5. Numbered or bulleted list
Part D. Short Coding Practice
Write the HTML code that would produce the following webpage title in the browser tab: "My First Webpage", with the bold
text "Welcome!" shown on the page.
Write an internal CSS rule that makes all <p> paragraph text blue and centered.