;)

body {
background-color: purple;
}

“Not Brain Numbing!”

Building the Web:

HTML5 AND CSS3
<p
id
!”
=“a ed
ut
ud

ho
r-
cl

na
In

me
”>
s
ke

Ro
sh
Jo

an
e

Ch
bl

un
ri

du
or

ri
“H

</
This book is dedicated to You! Thanks for changing the world ;) !
Table of Contents
Section 1: HTML 0
Unit 1: The World Wide Web and How it works and started 1
Unit 2: Getting Started with HTML 5
Unit 3: Basic HTML Tags 11
Unit 4: HTML Text Tags 14
Unit 5: Links and Images 22
Unit 6: Tables and Links 33
Unit 7: Div and Span Tags 40

Section 2: CSS 43
Unit 8: Getting Started with CSS 44
Unit 9: The Four Aspects of Every Element 57
Unit 10: Styling Links 62
Unit 11: Styling Tables and Lists 67
Unit 12: Classes and ID Selectors 72
Unit 13: Other CSS Selectors 75
Unit 14: CSS Positioning 78
Unit 15: Displaying and Floating Elements with CSS 82
Unit 16: Media and Resizing 84

Section 3: HTML/CSS Conventions + Debugging 89

Section 4: A Computer Science History Gallery 94
 <h1>Section 1:<h1>
<h1>HTML5</h1>

Section 1:
HTML5
Section 1 ~ HTML • Unit 1: The World Wide Web and How it works and started

Understanding the World Wide Web

Tim Berners-Lee created the World Wide Web (W3, WWW) in 1989. The World Wide Web
was created with the intention to be a form of communication between universities and
colleges. The original World Wide Web was not commercial and included only 42
computers across 36 different computer router nodes. The World Wide Web was eventually
made public and released to the public domain on April 30, 1993.

The original internet only connected universities and governmental agencies. It was
established by Advanced Research Projects Agency (ARPA) and was referred to as the
ARPANET.

IP Addresses and the Domain Name System

How do web pages know how to load a website on your device rather than your friend’s
device who sits right next to you? It’s because you and your friend’s devices have different
IP addresses.

<p id=“page-number”>1</p>
 Section 1 ~ HTML • Unit 1: The World Wide Web and How it works and started

The internet is filled with different protocols design to help the internet run smoothly; some
protocols include the Hypertext Transfer Protocol (HTTP) and the Internet Protocol (IP).
Every person using the internet has a unique IP address, like a key to a house. There are
two different types of IP addresses: IPv4 and IPv6. IPv4 uses a string of four numbers
(0-255) separated by a period. The problem is that IPv4 has a limited number of IP
addresses that can be created, 28! That may seem like a large number, but the internet is
rapidly growing. The IPv6 was created as an alternative to IPv4 and uses the hexadecimal
system to generate many IP addresses (2128!).

IPv4 IPv6
Example: Example:
17.244.88.210 9389:d4b6:b23d:07c1:c606:0eec:4f88:9a7b
An IP address is used for communication between servers and routing. When you click a
link, your IP address sends a message that it wants to view a website and sends its IP
address to a server, and the server responds by sending bits of the web page to the IP
address.

Everyone’s heard of https://www.google.com, but nobody knows about

74.125.20.113 (also www.google.com). If web pages were categorized based on their
IP addresses, they would be super difficult to memorize! The Domain Name System (DNS)
was created to solve the problem; it offers a website the ability to create a meaningful
domain name that humans can memorize. The DNS allows people to memorize multiple
domain names quickly. A typical domain name can be broken down into several smaller
pieces:

A HTTP Protocol:
http-protocol://

Followed by the domain name:

third-level-domain.second-level-domain.top-level-domain

Some websites have additional pages that use slashes to indicate different topics:
/path

<p id=“page-number”>2</p>
Section 1 ~ HTML • Unit 1: The World Wide Web and How it works and started

For example, a typical domain may look like:

http(s)://en.wikipedia.org/wiki/Domain_Name_System

The HTTP Protocol is a system that allows people to transfer HTML web pages by sending
messages to the website server and the end-user. The HTTP protocol is used to connect
you to the internet’s web pages! While the HTTP protocol is great for connecting us to the
internet, hackers have found ways to manipulate the protocol to reveal sensitive
information like passwords! Hypertext Transfer Protocol Secure (HTTPS) was designed to
be a more secure version of the HTTP protocol for securely transferring data through the
internet. HTTPS encrypts its data using either a Secure Sockets Layer (SSL) or Transport
Layer Security (TLS).

HTTPS: HTTP or Unsecure:

The third level domain is sometimes referred to as the subdomain. Websites with different
regional or language settings may use a subdomain to map users to a translated version of
their website. For example, the English version of Wikipedia uses the subdomain (or third
level domain, fourth level domain, etc.) en. to denote the English language
(en.wikipedia.org). The most popular subdomain is the www. subdomain, denoting
the world wide web. However, the www. subdomain has been an optional subdomain to
enter, as most web browsers will redirect you to the correct website even if you don’t enter
the world wide web subdomain.

The Second Level Domain (SLD) is what most of us associate with the traditional
convention of a domain name. The second-level domain differentiates every single website
from its top-level domain. For example, the second-level domain differentiates
www.google.com and www.amazon.com from the top-level domain of .com. Having
nonexclusive second-level domains would allow anyone to register the same name! At that
point, there may be over 100 registered www.google.com websites, but no way to get to
the google.com website I have in mind.

The Top Level Domain (TLD) is the last part of the DNS that is required to take you to a
website. The most popular top-level domain is .com, with over 137 million .com websites
registered! There are over 1,000 different TDLs; however, not every TLD is available for you
to register. For example, the .gov TLD is restricted to government agencies only, and the
.edu TLD is reserved for educational institutions like colleges and universities.

<p id=“page-number”>3</p>
 Section 1 ~ HTML • Unit 1: The World Wide Web and How it works and started

However, there are so many other different TLDs available for you to grab, from the popular
tech .io TLD to .cafe. A good thing to note is that a website with a second-level domain is
exclusive to a specific TLD but doesn’t carry over multiple TLDs. For example,
www.example.com may lead to one website, but www.example.io may lead to a
different website. This can lead to phishing attempts, so be careful what websites you
enter your passwords on!

Unit 1 Quiz:
1. You visit a website with the domain name:
http://www.spicypasta.ca/super-spicy

a) Is this website a secure website?

b) What is the top level domain of this website?
c) What is the path name of this website?
1. T
2. You have the IP Address: 155.18.208.78
a) Is this a IPv4 or IPv6 address?
b) Why are domain names used instead of a website’s IP address?
c) Why might it be important to keep your IP address hidden?

3. What were the applications of the internet when it was established in 1989?

Answers:

communicate with one another.

3.The internet was established in 1989 as a way for colleges and universities to
address.
to keep your IP hidden, because hackers can find your approximate location using your IP
addresses, because they allow for easy memorization of website names. c) It is important
shorter than an IPv6 address. b) The domain name system is used instead of IP
2. a) This is an IPv4 address, because it doesn’t contain any hexadecimal values and is
super-spicy
domain is .ca, representing the country of canada. c) the path name of this webpage is
1. a) This domain is not a secure website, because it doesn’t use HTTPS. b) the top level

<p id=“page-number”>4</p>
Section 1 ~ HTML • Unit 2: Getting Started with HTML

Understanding HTML and CSS

What is HTML and CSS? HTML stands for HyperText Markup Language and is a
rudimentary markup language that embeds color, font, images, videos, and other media
input on world wide web pages. Every web page from www.google.com to
www.amazon.com is coded in HTML. HTML files end in the file name .html, and the
homepage is conventionally called index.html. CSS stands for Cascading Style Sheets
and is responsible for styling and controlling how HTML elements look. CSS files are
externally linked into HTML files through a special link tag, and CSS files are fixed with a
.css suffix to indicate that it is a styling sheet. We will be using versions HTML5 and CSS3
throughout this book.

Comparing HTML and CSS to Different Programming Languages

There are hundreds of programming languages; however, HTML and CSS are not
technically considered programming languages. Programming languages allow the
execution of procedural functions. HTML and CSS cannot execute functions alone or
program variables to act in a certain way. HTML is a markup language and really only tells a
website about what elements belong on a website and their default properties or values.
CSS is a styling language that dictates how HTML elements are styled or how they look.
CSS is responsible for making a website look pretty. HTML can, however, be used in
conjunction with other programming languages to increase the functionality of a website,
like keeping track of the number of views, likes, and dislikes a video has received!

HTML and CSS Preprocessors

Many languages have different syntax rules (different ways to write the code) that compile
(build) to HTML or CSS syntax. They are called preprocessors because they are written
differently but eventually processed to HTML or CSS. Among the most popular languages
that compile to HTML include Pug, Extensible HTML (XHTML). The most popular
languages that compile to CSS include Syntactically Awesome Style Sheets (SASS), Leaner
Style Sheets (Less), and Tailwind CSS. There are also several styling libraries available to
use in React and other languages that use prebuilt templates to

<p id=“page-number”>5</p>
 Section 1 ~ HTML • Unit 2: Getting Started with HTML

increase the speed at which HTML components can be built. Such styling libraries include
Material UI, Material Kit React, ANT Design, Chakra, and so many more. We will not be
focusing on preprocessors in this book.

Finding a Text Editor or Integrated Development Environment

A Text Editor (TE) is a program that allows you to edit the text in a file, which differs from
an Integrated Development Environment (IDE). An IDE offers the same capability as TEs
but also contains debugging software and automation tools like autocomplete. Generally,
an IDE is more streamlined towards programming and provides great debugging resources
for new programmers, allowing them to find and learn from their mistakes quicker than a
text editor. However, you may choose whichever is more comfortable or available to you
while following along. There are hundreds of text editors and IDEs to use, but the one you
want to use is personally up to your preference. There are two main types of TE/IDEs that
you can use: a desktop TE/IDE or an online TE/IDE. IDEs help make code much more
readable!

Code from IDE Code from TE

A desktop text editor/IDE can be handy for offline edits. Windows comes built-in with the
TE “Notepad,” which can write and execute HTML code in your default browser. Notepad
does not come with debugging, syntax highlighting, or color-coding. Desktop IDEs provide
more functionality and customizability in terms of debugging or syntax highlighting. The
most popular IDEs used for HTML include Visual Studio Code, Visual Studio
Community, Notepad++, Atom, Vim, and Komodo. Choosing an IDE depends on
preference, but Visual Studio Code is widely used in the computer science industry for its
in-depth debugging tools and community extensions that ease and improve the coding
experience. To download the IDEs, search the name of the IDE and follow their

<p id=“page-number”>6</p>
Section 1 ~ HTML • Unit 2: Getting Started with HTML

download link. If you cannot download a desktop text editor or IDE, several online options
allow you to edit HTML code on-demand. Note that online IDEs and text editors don’t
usually save your work unless you have an account, so be sure to create an account or
copy and paste your code in a local file where you can access it! Some popular online IDEs
include codepen.io, jsfiddle.net, and codesandbox.io; however, many more IDEs
are available online. For online IDEs and coding with HTML and CSS, using codepen.io is
very beginner-friendly and saves your work upon creating an account. You also have
access to thousands of community HTML/CSS/JavaScript (JS) projects you can browse
and learn from. If you are interested in learning or using different preprocessors of HTML
and CSS (even JS), codepen.io allows you to code various HTML variants, including
HAML, Markdown, Pug, and Slim. Codepen also includes CSS variants like LESS, SCSS,
SASS, Stylus, and PostCSS.

The IDE or text editor you use won’t affect how the code will be processed. It all comes
down to your personal preference and what environment you are most comfortable coding
in.

Creating a New File or Project to Save Your Work

If you are using a desktop IDE/text editor, the top row should have a section with multiple
options. Choose the file option, and click the “New File” or “New” option, depending on
which IDE you use.

Clicking the new file option allows you to create a new file to write and edit code! Then go
to the file, and click on the “Save as” option. You should be prompted with two fields, a
filename and Save as type. Generally, if the page you are working on is your homepage, it is
conventionally named index. However, you can name the file name whatever you want (say:
icecreamrocks). The Save as type: option determines what type of file the new file will
be. Depending on what you click, it will add different suffixes so other text editors and IDEs
can understand the type of language the code is written in. In this case, you should look for
the HyperText Markup Language or HTML option. The file will now be identifiable as an
HTML file and will have the suffix .html. Depending on what you named the file, it may
look something like icecreamrocks.html! Mmm, what a nice file name; I’m starting to
get a sweet tooth!

<p id=“page-number”>7</p>
 Section 1 ~ HTML • Unit 2: Getting Started with HTML

If you are using a desktop IDE/TE, I recommend creating a folder to contain all of your
HTML and CSS files. Not only does this help with organization, but for the HTML and CSS
files to be connected, they need to be in the same folder. Furthermore, adding images
requires the image to be in the same file as the HTML file. If you are using an online IDE/TE,
HTML and CSS are automatically connected.

If you find this file in your files, double click it, and you can see your HTML code! Every time
you make a change and want to see what it looks like, save the file and restart your page so
you can see your changes! If you don’t save your file, the change won’t apply.

Some online IDEs’ default page automatically loads to HTML and CSS editors like
jsfiddle.net, where others (codepen.io) require you to press a button at the top to
load a text editor. Most online IDEs auto-compile when you change your HTML code. Be
careful about saving your work; some IDEs require you to log in to save your code.

What are HTML Tags?

HTML is a tag-based markup language. If you go on a website like www.amazon.com,
every part of the website is made up of elements wrapped in tags. What does that mean?
Well an HTML tag looks like this <element></element>. Let's break that down. Say I
wanted to put a sentence saying, "I love ice cream." The first thing you may notice is that
there are two "tags." The first tag contains a less-than symbol (<), followed by an HTML
element (element), followed by a greater than symbol (>); this first tag is known as the
opening tag and is required for every single element. The next set is called the closing tag
and is the same as the opening tag, except the forward-slash (/) after the less than a
symbol; this forward slash tells HTML when to end the element. Now you might ask, why is
it important to know where to end an element? One of the best features of HTML is that
elements can fit inside one another. So I can place a bold tag inside a paragraph tag (text
element). However, one problem arises. How does the computer know what portions of the
paragraph text to bold? An opening and closing tag tell the computer what portions of

<p id=“page-number”>8</p>
Section 1 ~ HTML • Unit 2: Getting Started with HTML

the elements you want to have a specific property while leaving other elements to have
another property. The bold example may look something like:

<p>I think ice cream is the <b>best</b> food!</p>

Or:

<text element>I think ice cream is the <bold element>best</bold

element> food!</text element>

The underlined tags are the closing tags and end the element’s properties. This should print
something like:

I think ice cream is the best food!

Don't worry about memorizing the tags now. In this case, the elements were p and b,
indicating the text and bold elements. The opening and closing tags tell HTML where to
start and end a property.

An easier way to think about tags in HTML is to think html code as a burger. The different
tags pairs represent different ingredients. While making a hamburger, you wouldn’t place
both buns first, then place the burger under the buns! Instead, you place the hamburger
between the buns. This way, you know when the hamburger ends! It’s easier to think of
opening and closing tags as buns, and the content in them is the hamburger.

There are also special tags that are called self-closing tags,
which only require one set of tags. For example, the line
<Element> break tag is <br> or (<br />). There is only one set of
tags. The forward slash is optional in HTML and generally
unused as an HTML convention, but it may be easier to
<Content> visualize self-closing tags with the forward-slash next to the
</Element> greater than symbol. This is called a self-closing tag
because there is no need to send it anywhere. It serves only one function: insert a line
break where it is specified. Because it only performs a line break, there is no reason to have
another tag. You can search the internet about self-closing tags, but not all of them are
useful in HTML. We will go over the more useful ones. Going forward, all tags mentioned
will be assumed to require opening and closing tags unless specifically mentioned. Both
HTML and CSS are white space insensitive (See Appendix A).

<p id=“page-number”>9</p>
 Section 1 ~ HTML • Unit 2: Getting Started with HTML

Browser Compatibility with Tags

A web browser is an application designed to be an interface where you can navigate the
web. There are tons of different browsers, but the most common ones are Mozilla Firefox,
Internet Explorer, Microsoft Edge, Opera, Safari, and Chrome. HTML is a weird language. It
communicates with the browser to show elements the way we want them to be seen.
However, sometimes web browsers don’t always understand newer HTML tags or
notations until the web browsers are updated. There may be someone on the internet still
using version 1.1 of internet explorer. Their website experience may be different because
that version of internet explorer can’t comprehend newer HTML tags. That being said, you’ll
come across tags that are less used. Be sure to look into some of the tags to see what web
browser versions support the used tags. The earlier support web browsers have for tags,
the better. It is less likely that people will have even older versions. As a web developer, it’s
not your responsibility to be compatible with every browser, but it is your responsibility to
target your audience and use the site accordingly. For example, if you target users with
Chromebooks, reference Chrome’s version support and don’t worry about older versions of
internet explorer, as it’s unlikely a user will visit a website that is so far out of their niche.

Elements and
their attributes

Browsers

Supported
Version

This chart is used under the CC-BY-SA licence from mozilla.org. Arrows were added to
image as a legend.
(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee)

<p id=“page-number”>10</p>
Section 1 ~ HTML • Unit 3: Basic HTML Tags

The !DOCTYPE Tag

The DOCTYPE tag is the first segment in every HTML document. DOCTYPE is not an actual
tag, rather a declaration. The DOCTYPE declaration is required for running your code
correctly as it indicates to the browser which version of HTML you are using. Depending on
which version of HTML you are choosing to use, the DOCTYPE will look very different.

If you are using HTML5, it should look something like:

<!DOCTYPE html>

If you are using HTML 4.01 it should look something like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Ok, my brain is starting to hurt. What on earth is HTML5 and HTML 4.01? Depending on the
time you are reading this, there may be a newer version of HTML, but sometimes, websites
are developed using older versions of HTML, and people’s code no longer works in newer
versions of HTML. So, they specify the browser to use older versions of HTML to ensure
the code is working. For example, if you are reading this in 2055 and HTML15 has come up
with a different DOCTYPE tag, you can follow this tutorial using the HTML5 DOCTYPE tag!

The HTML Tag

The HTML tag is a special tag that encloses all of your HTML code. As stated before,
HTML is a language in which tags are perfectly wrapped inside of other tags. So, the entire
code for the website you are creating goes inside of the HTML tags. The opening HTML tag
tells your browser that you want everything following this tag to be included in your
website, and the closing HTML tag tells your browser that anything beyond this tag will not
be included in your HTML code. While elements still may work when placed outside HTML
tags, placing all HTML code within the HTML tags is convention. An HTML tag looks like
this:

<html>
//Every element you want in your website
</html>

<p id=“page-number”>11</p>
 Section 1 ~ HTML • Unit 3: Basic HTML Tags

The Head and Body Tags

Both the head and body tags are found inside the HTML tags. Trophically, the head and
body sit on the same level, with the HTML tags wrapping around them. The DOCTYPE tag
sits on the same trophic level as the HTML tags. Just like a human, the head goes first,
followed by the body. This allows the head to specify information about the body so that it
can be shown correctly. Structurally, it should look like:

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

What is this notation? (See: Appendix A)

HTML contains special tags called head tags to communicate information about the
website to the browser and search engines. When you think of HTML elements, most of
them do not belong here, and there is no guarantee that the properties of the elements may
come out right if placed in the head. Only use head-specific HTML elements (base,
isindex, link, meta, nextid, range, style, title. Do not worry about
memorizing those. We will go over some of them!). The best way to remember the head
tag is by thinking of the head tag as a human head! Picture a head talking to browsers and
search engines. While communication is important for the head tag, it is also the most
common place to import a stylesheet like CSS, scripts in other programming languages like
JavaScript. Meta tags are used to increase scalability across platforms and communicate
information to search engines; we’ll get to that later. The head tag is also responsible for
the HTML title. A title tag can be used to specify the title of your webpage and is placed
within the head, and displays the website's title to a user.

It should look something like this:

<html>
<head>
<title>Hello World!</title>
</head>
</html>

<p id=“page-number”>12</p>
Section 1 ~ HTML • Unit 3: Basic HTML Tags

The content within the title tag should print the content in the “tab” of the website in the
browser window. According to the example, the website should have a title of “Hello
World!”

If you are using a desktop TE/IDE, you will see the words “Hello World” on the tab of your
website. If you are using an online TE/IDE, your changes may not be seen depending on
which online editor you use.

Really, you could think of body tags as “website” tags. Everything you see on a website,
every text, image, link, table, or element is placed in the body. The body is where the user
interface and visual aspects and most of the HTML elements of a website belong. We’ll go
into much more depth about the body later on. For now, just know that this is where the
content of the website belongs.

Unit 3 Quiz:
1. You are given the following segment of HTML code:

<html>
<head>
<title>Hello World!<title>
</head>
<body>
</html>
</body>

a) There are several problems with this HTML code. Can you find them?
b) What is the purpose of the head and body tags?

Answers:
information to web browsers. The body displays the actual elements of HTML.
needs to fit inside each other! b) The purpose of the head is to community important
problem is the body tag is placed outside of the closing html tag. Remember everything
<!DOCTYPE html>. The second is forgetting to close the title tag </title>. The third
1. a) There are several missing components. The first is a missing doctype declaration

<p id=“page-number”>13</p>
 Section 1 ~ HTML • Unit 4: HTML Text Tags

Paragraph, Break, Horizontal Rule Tags and Attributes

The paragraph (p) tags were created for the ability to write separate bodies or paragraphs
of text. Because HTML is white space insensitive, text cannot be directly inputted into the
body tag as it won’t show as intended on the website.

For example:

<body>
What do you call a fake noodle?
IMPASTA!
</body>

Does not print:

What do you call a fake noodle?
IMPASTA!

But rather prints:

What do you call a fake noodle? IMPASTA!

Hmm. That’s not exactly what we typed out. This is because HTML is whitespace
insensitive and will generally ignore any returns, tabs, or spaces you make, even if they are
inside paragraph (p) tags! But at least the paragraph tag allows us to separate the two
lines into two different paragraphs.

For example:

<body>
<p>I need to come up with new puns because...</p>
<p>these ones are tearable.</p>
</body>

Displays as:

I need to come up with new puns because...

these ones are tearable.

The paragraph tag has a couple of default properties. You may have noticed the spacing

<p id=“page-number”>14</p>
Section 1 ~ HTML • Unit 4: HTML Text Tags

spacing between the two paragraph tags. HTML defaults styling on certain properties,
like adding margins (space) onto paragraph tags, so they look more like spread-out
paragraphs. We’ll learn later how to remove default HTML stylings. With default stylings
removed, paragraph tags can act more like regular text tags!

Okay, the solution shown above is good, but notice that we needed two separate p tags.
Compiling (running) the code won’t produce any errors, but the code is longer than it needs
to be. Usually, keeping code as short as possible decreases the website loading time and
increases readability. In our case, we don’t want two different paragraphs. We only want the
punch line to go on a separate line from the start of the joke. This is exactly the reason the
break tag was created. The break tag (<br>) is a self-closing tag (no closing tag)
designed to move elements to the next line rather than add extra space.

This can be shortened to:

<body>
<p>What kind of tea is hard to swallow?<br>Reality.</p>
</body>

Which produces:

What kind of tea is hard to swallow?

Reality.

Compared to the original:

I need to come up with new puns because...

these ones are tearable.

Notice how the code is more concise? It’s up to you to decide when to use p tags and br
tags, but visualize which option is more concise while matching your visual needs.

The horizontal rule (<hr>) is perhaps the element you will use the least. However, it can be
useful if you create a website like Amazon.com or YouTube and you want to separate
items from each other. A horizontal rule is a self-closing tag (like the break tag) that
produces a horizontal line across the website’s width, separating different sections or
items of a website. Let’s take the last example we were working on with the lame joke
about making tea and add a horizontal rule.

<p id=“page-number”>15</p>
 Section 1 ~ HTML • Unit 4: HTML Text Tags

<body>
<p>What kind of tea is hard to swallow?<br><hr>Reality.</p>
</body>

When entered into an IDE or TE, the website should look like:

Note: the horizontal rule, by default, is set to span the width of the website, however,
because HTML comes default with special settings, the horizontal rule wont span edge to
edge unless those default settings are removed. We will cover how to remove those default
settings while covering CSS.

The horizontal rule has a few attributes you can add. Attributes are extra styles you can add
to the tag to make elements look different or add additional functionality. In HTML,
attributes are set up like attribute=“value” while some are just attribute.
Attributes are placed after the element in the opening tag. For example, the horizontal rule
has a property of width. Let’s say I want the divider to be 100 pixels wide. We can add the
property like <hr width=“100px”>. A single element can have multiple attributes in the
opening tag. The horizontal rule also comes with a shader, it looks cool, but I don’t want it.
To add another property, just place it in the hr opening tag after the first property: <hr
width= “100px” noshade>. Now we have a horizontal rule that is 100 pixels wide and
no shaders!

The horizontal rule is now centered in the middle of the webpage and has a width of
100px.

You can see that I have segmented the punchline from the joke setup. A horizontal rule is
fun to play around with, but it won’t be used much in everyday web design. That said, it’s
not useless. It can be a powerful tool if used for the right websites.

<p id=“page-number”>16</p>
Section 1 ~ HTML • Unit 4: HTML Text Tags

The Header Tag

Ever wonder how newspapers have huge, bold text that highlights their breaking stories?
HTML has a built-in tag that generates large, bold text, much like the header of a
newspaper. The header tag is unique in that it has six different settings. Okay, what in the
world!? Why are there six of them? Each header number determines how big or small the
header can be. Don’t worry! They are not hard to memorize. The tag starts with h, followed
by numbers 1-6; all the variations of the header tag include <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>. Header tag h1 is the largest, and they progressively get smaller up to h6.
Pretty easy, right!?

Representation of different Source code:

Header tags:
<!DOCTYPE html>
<html>
<body>
<h1>This is a h1 tag</h1>
<h2>This is a h2 tag</h2>
<h3>This is a h3 tag</h3>
<h4>This is a h4 tag</h4>
<h5>This is a h5 tag</h5>
<h6>This is a h6 tag</h6>
<p>this is a p tag</p>
<body>
</html>

REMINDER!
The header tag has a similar name to the head tag, but the two are completely
unrelated. The header tag is an element that generates styled text within a website.
Because it is part of the website itself, it belong in the body. The header is abbreviated
with the acronym “h” + “#size” and has nothing to do with the <head> tag, because it
doesn’t communicate any information about the website to browsers.

<p id=“page-number”>17</p>
 Section 1 ~ HTML • Unit 4: HTML Text Tags

Quick Review of What We Learned so Far!

Try to figure this one out on your own by looking at this website and building the website in
HTML based on the elements you identify. This is a valuable skill to have. If you can make
websites from pictures or memory, you're on your way to becoming a great web developer!

Have ya got it?

First thing’s first. We need a declaration that tells the browser what type of file it is looking
at and which version of HTML the code is written in. We call this the DOCTYPE declaration.
The notation is weird, but for HTML5, it’s a simple self-closing element <!DOCTYPE html>
and is always the FIRST element in any HTML file. Ok, so the computer knows that this file
is an HTML file written in HTML5. Great, next, we need the actual tags that tell the
document where the HTML code is written. For this, html tags are used to tell the
computer where the HTML code starts and ends.

So far, we have:

<!DOCTYPE html> <- required so computers know its a HTML5 file

<html>
</html> <- so computers know where HTML code starts and ends

Cool. But the website is looking bland. The HTML contains two separate sets of tags. One
acts much like a part of the human body that’s responsible for communication, and the
other displays the actual website to the user! These tags are called the head and body tags;
hierarchically, they are on the same level but within the HTML tags. Inside the body tag, we
have a H1 tag, and a paragraph tag. The text within the H1 tag is “This is my amazing h1
header!” and the text within the paragraph tag is “This is a paragraph tag. Wow! This
website is looking great!”

<p id=“page-number”>18</p>
Section 1 ~ HTML • Unit 4: HTML Text Tags

Before we get into the website, the title of the website is missing! Where and how do we
get the title of the website to change? Ah, in the head tags! title tags should be placed
within the head tags. Below is the answer if you get stuck.

Answer:
<!DOCTYPE html>
<html>
<head>
<title>Awesome Website!</title>
</head>
<body>
<h1>This is my amazing h1 header!</h1>
<p>This is a paragraph tag. Wow! This website is looking
great!</p>
<body>
</html>

Bold and Italic Text

In general, CSS is a much more efficient and powerful tool when it comes to styling text and
aspects of your website. However, the bold and italic tags are handy when you want to
quickly make a website without bothering with CSS. The bold and italic properties in HTML
each have two different tags that perform the same function. Why? Just because.
To bold text, you can use either the strong or b tags. <strong> and <b> both bold text
and have the same properties. I would recommend using <b>, as it saves energy.
<body>
<p>Why was six afraid of seven?<b>Because 7 ate 9.</b></p>
<body>
Looks like:
Why was six afraid of seven? Because 7 ate 9.
Ok that joke was super bad. To italicize text, you can use the em or i tags. Em may seem
like a weird name to represent the italics tag, but stands for emphasis. <em> and <i> both
italicize text. I would recommend using <i>, because I’m too lazy to type out <em>.

<p id=“page-number”>19</p>
 Section 1 ~ HTML • Unit 4: HTML Text Tags

<body>
<p>What do you call a pig that does karate? A <i>pork
chop!</i></p>
<body>

Looks Like:

What do you call a pig that does karate? A pork chop!

Adding Comments in HTML

Comments serve an important function in any coding language. Comments don’t actually
affect the code or change the way the program behaves. In fact, a text editor or IDE will skip
over comments when executing code. Comments are more for human eyes rather than a
computer’s eyes. You can use comments to remind yourself and others about the function
of a particular segment of code. The syntax for comments changes based on the coding
language, and the system for comments is even different in HTML and CSS. Comment tags
in HTML have a slightly different syntax from other tags. The opening segment of the
comment tags is similar to the !DOCTYPE tag. To open a comment tag, the syntax <!-- is
used. This tells your browser that the following segment is a comment. Anything after the
opening tag is considered a comment. This allows for multiline comments, meaning your
comments can be longer than one line. Be sure to close off your comment tag, or the rest
of your HTML code will be a comment! To close a comment tag, use similar syntax to the
opening tag -->; it kinda looks like an arrow!

<body>
<p>Why was six afraid of seven?<br><b>because 7 ate 9.</b></p>
<!--These jokes keep getting worse! Someone stop this man.-->
<body>

When this compiles, you won’t see the comment on the website! Again, comments are
more optional, the computer will ignore them, but they can be powerful tools to remember
which code segments serve a certain function.

<p id=“page-number”>20</p>
Section 1 ~ HTML • Unit 4: HTML Text Tags

Unit 4 Quiz:
1. You are given the following segment of HTML code:
<p>I just can’t help it, my puns are so <em>punny!</em></p>

How will it render?

a) I just can’t help it, my puns are so punny!

b) I just can’t help it, my puns are so punny!
c) I just can’t help it, my puns are so
punny
d) I just can’t help it, my puns are so
punny

2. What is a self-closing tag?

a) A tag at the grocery store that closes itself after purchasing an item
b) An tag in HTML that requires an opening and closing tag
c) An element in HTML that doesn’t require a closing tag
d) An element in HTML that closes an element

3. There are __ many header tags:

a) 4
b) 7
c) 13
d) 6

Answers:
3. d
2. c
1. b

<p id=“page-number”>21</p>
 Section 1 ~ HTML • Unit 5: Links and Images

The Anchor Tag and Linking to External Websites

Ever get an ad and click the “close” button, but all of a sudden, you’re transported to the
app store like you’re some kinda alien creature? That’s a link in action. Links can be text,
images, or sections of a website and are the basis of the internet. The internet’s links
connect websites like a large spider web! Think of Google, a single search term gives you
millions of links.

There are two “link” tags. One is literally <link>. However, this doesn’t act the way we
want it to. The link tag is used to link stylesheets, like HTML or other external files. We’ll get
into that one later; you can forget it for now. The anchor tag is what we associate with links
that take us to other websites. Anchor tags can contain text or images. It looks like <a>.
Why did they name it anchor tags? Maybe the developers were running out of brain juice.

The anchor tag can turn elements like header, image, paragraph, span, div
tags, and other elements into clickable links that whip you across the internet. The
anchor tag requires a couple of attributes to function. Attributes are additional properties
that can add style or additional function to an element. If you just type <a>, it will not take
you to the link you want. By far, the most important attribute to the anchor tag is the href
(hypertext reference) attribute. The hypertext reference requires a value, which is a URL.
Let’s say I want to link one of my quoted texts to the Wikipedia site I found it from.

“Flamingos filter-feed on brine shrimp and blue-green algae as well as insect larvae, small
insects, mollusks and crustaceans making them omnivores.”
<a href=“https://en.wikipedia.org/wiki/Flamingo”>Flamingos filter-feed on
brine shrimp and blue-green algae as well as insect larvae, small insects, mollusks and
crustaceans making them omnivores.</a>
(Under CC 3.0 licence by Wikipedia)

Notice that the anchor tag requires an opening and closing tag. This allows multiple words
or images to link to the same webpage.

If anyone clicks on that text, they will go to the wikipedia site about flamingos (even though
I don’t recommend it, it will bore you out of your mind). The next attribute is the title
attribute for the anchor tag. This is very useful if you want a small, customizable, and
descriptive box-like popup of text next to the cursor when you hover over the link. Let’s say I
want to warn people about the link they are about to click on.

<p id=“page-number”>22</p>
Section 1 ~ HTML • Unit 5: Links and Images

say I want to warn people about the link they are about to click on.

<a href=“https://en.wikipedia.org/wiki/Flamingo” title=“Click here

if you can’t sleep at night. It’ll Put you to sleep”>Flamingos
filter-feed on brine shrimp and blue-green algae as well as insect larvae, small insects,
mollusks and crustaceans making them omnivores.</a>

If you are using link tags, but don’t link anywhere it’s common convention to leave the href
present in empty quotes, like <a href=“”>some content</a>.

Linking to Other Internal HTML Files

Linking a tag to other HTML files is perhaps one of the most important uses for an anchor
tag. Make sure to keep both files in the same folder so they can access one another. If you
are using a desktop IDE or text editor, you can follow along. However, online IDES/TEs can’t
link separate HTML files. Let’s create two HTML files named index.html and
hello.html. It’s a convention to include both files in the same folder so they can properly
communicate. Because the file is named hello.html, let’s have the index.html link to
the hello.html. In this case, we’re still using the href tag. Just type the name of the file
you want to redirect to as the href, in this case: hello.html.

index.html could look like:

hello.html page could look like:
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<html>
<head>
<head>
<title>This is the index
<title>This is the index
page!</title>
page!</title>
</head>
</head>
<body>
<body>
<a href=“hello.html”>Click
<p>hello.</p>
here for a special message
<a href=“index.html”>Back.
</a>
</a>
</body>
</body>
</html>
</html>

<p id=“page-number”>23</p>
 Section 1 ~ HTML • Unit 5: Links and Images

While it's a crude example, you should always allow web pages to link back to one another,
so someone doesn’t get stuck on a static site with no way back.

Creating Paragraph Links Using the ID Attribute

Have you ever seen a super-long terms of service that has a million different sections that
would take decades to finish reading? Have you been scrolling through an article for the
last sixteen hours to get to a certain section? Have you ever had a dirty dishwasher
wondering how long it would take-- oops, I got side-tracked. Then using paragraph links is
great for you. We’re not working with the href tag just yet, but we’re going to use something
called IDs. IDs are a way to name or reference a particular instance of an element. For
example, let’s say I have ten different buttons, but I only want to style one. I give it an ID
(something meaningful) or say submit-button. In this case, we can create anchor tags
with an id attribute. Now we can create sections at the top linking to different sections of
the paragraphs. Now we use link tags with href and point it to the link tags with IDs. In this
case, because we are looking for IDs, we need to add a pound sign (#) before whatever we
named the link. At the top, we can have a bunch of links that point to the empty link.

Before we get started, note that we need to use a lot of “data” here in the form of random
words. Web designers use dummy text as “lorem ipsum”; it’s dummy text that doesn’t really
have any meaning, but it’s again a placeholder. You can find a copy and paste lorem ipsum
text to fill up the pages. For the demonstrated example, we won’t use lorem ipsum because
it may be difficult to discern paragraphs, but you may do so with your example.

For example let’s demonstrate:

<!DOCTYPE html>
<html>
<head>
<title>World’s most boring Terms of Service</title>
</head>
<body>
<a href=“#terms”>terms</a>
<a href=“#apples”>apples</a>
<a href=“#ice-cream”>Ice Cream</a>
<!--Continued on next page-->

<p id=“page-number”>24</p>
Section 1 ~ HTML • Unit 5: Links and Images

<a id=“first”>These are very boring terms. It has a lot ofs

spelling mistakes bu taht is fine because no owne reds it
anyways... <!-- short for simplicity add more in this tag until a
scrollbar shows up --></a>
<a id=“apples”>Why are apples in the terms of service? Who knows,
maybe this is a website that is dedicated to worshipping apples...
<!-- short for simplicity -- add more in this tag as scrollbar gets
smaller --></a>
<p><a id=“ice-cream”></a>Ok nevermind, this terms of service just
got so much better, we all need some ice cream in our lives. Unless
you’re allergic... <!-- short for simplicity -- add more in this
tag as scrollbar gets smaller --></p>
<!-- add more link tags until you fill up the page and have a super
small scrollbar-->
</body>
</html>

Note #1: #id-name is the way to reference a particular ID.

If we were to click the link, that says apples, it would instantly shoot down to the section
about apples, assuming you shoved enough junk in the terms of service (they always do) to
scroll down far off page.

Downloading an Image
Images on the web are probably one of the most stimulating aspects of the web. Images
are versatile. You can use them as visuals and even place links inside them. Embedding
images on your website is a great way to provide visual aid and extra information alongside
your text. Using a desktop IDE/TE, you can add custom images to the folder containing
your HTML file. I like ice cream; I feel like an ice cream website would probably be the best
website in the world. Google “ice cream” and go to images. Choose any image you want
(except images of fruity ice cream, ew) and right-click the image. If you are using a desktop
IDE/TE, you have two options: either download the image or use the image link. If you are
using an online IDE/TE, you only have the option of using the image link.

<p id=“page-number”>25</p>
 Section 1 ~ HTML • Unit 5: Links and Images

First, we gotta save an image. Find an image on google, and right-click the image. Select
the option “save image as” and create a short name like “ice cream”; take note of the
file type, usually following the .file-type or in windows, the section below the naming
section. Once you’ve downloaded the image, move the image into the folder you’ve made
containing your HTML code. If you miss this information, you can right-click the image, go
to properties, where you can see and change the name and see the type of file it is stored
as. Once the image is in the same file as the HTML file, you can connect the image with the
HTML code.

You can also get the same results by copying the image URL. This can be done by finding
an image on google, right-clicking it, and selecting the option “copy image address.”

The Image Tag

The image tag is a self-closing tag that embeds an image into a website. The image has a
required attribute of source (src), which accepts a value of the image file or URL of the
image, required to help know which image the image tag should load. While not required, a
text alternative attribute labeled alt is strongly encouraged and is a convention in the
industrial workspace. The alt attribute accepts the value for a text description that
replaces the image if the image fails to load.

We should start with how to embed downloaded images. This method really only works
with desktop IDE/TEs however, some advanced online text editors like codesandbox.io may
have the capability to upload local files, which can then be used like desktop IDE/TEs. Time
to implement the ice cream example. Yummy!:

<body>
<img src=“icecream.jpg” alt=“Some yummy ice cream!”>
<!--Remember, your src value (whatever goes in the quotes) is the
name of the image you wish to use, and the type of image it's
stored as! It has to be in the same file as the HTML script! Also,
while the alt attribute isn’t required, it’s a common convention to
have something, even an just an empty pair of strings.-->
</body>

Conversely, we can also do this with an image URL. Once you’ve copied the image address
(right click and select “copy image address”), you can enter it as the value of the image
source attribute.

<p id=“page-number”>26</p>
Section 1 ~ HTML • Unit 5: Links and Images

image source attribute. These addresses can get long, but I’ll shorten mine for
demonstration purposes.

<body>
<img src=“data:image/jpeg;base64,/9j/4AAQSkZJ...” alt=“a fat
stack of ice cream!”>
</body>

Because almost anything on the web can be a link, images can be embedded into an
anchor tag, and when clicked will redirect the person to that link!

<body>
<!-- lets whip out those anchor tags and place an image tag in
them!-->
<a href=“icecream.com”>
<img src=“data:image/jpeg;base64,/9j/4AAQSkZJ...” alt=“a fat
stack of ice cream!”>
</a>
</body>

In this case, if anyone clicks on the image of the ice cream, they will be redirected to
icecream.com.

Let’s Make a Little Image Link Prank!

I don’t really know about y’all, but I’ve gotten tricked quite a few times, clicking an image
thinking it would take me to a blog post about cats, but suddenly I get transported to a
website where they want me to “buy a military-grade laser.” Cool, I never knew that existed,
but why would I ever need a military-grade laser… it was the day that got me scared of the
internet. I love pranks; let’s set up a quick little website that imitates this prank. Try
imitating this feature and come back for the answers!

<p id=“page-number”>27</p>
 Section 1 ~ HTML • Unit 5: Links and Images

First off, we need two files. Name the first one something like yummypizza.html. Create
another veggies.html or whatever you want, and make sure that both files are in the same
folder. We have to set up the template for the HTML. You get the drill; in both files, we need
a DOCTYPE tag, followed by HTML tags that indicate when HTML code starts and ends.
Both files need head tags to store the title, we can give the yummypizza.html a title of
“The best pizza in town!” and we can give the veggies.html file a title of “Eat your
veggies!” So far, each file should look like:

So far, yummypizza.html looks like: veggies.html should look like:

<!DOCTYPE html> <html>
<html> <head>
<head> <title>Eat your veggies!
<title>The best pizza in </title>
town!</title> </head>
</head> <body>
<body> </body>
</body> </html>
</html>

Looks good so far. Now it’s time to actually add the trick! In the yummypizza.html file, we
have to add an anchor tag so that when people click the element inside the anchor tag, they
will follow the link. The anchor tag has some attributes we need to add. The href attribute;
where will we want our users to be directed to? The veggie website, so our href value
should just be “veggies.html,” and let’s add a title so that when people hover over the
link, they can see what it’s about: “Chocolate Pizza!” Inside the anchor tags, we can finally
add the image element. Go to google and find the best image of a pizza you can find. Oh
boy, I’m getting hungry: cheese, pepperoni, and CHOCOLATE PIZZA! I’ll choose the image of
the chocolate pizza. Remember, there are two options for implementing images in HTML.
You can either download the image, place it in the same folder as the rest of your HTML
code, and link it through the image’s name and file type. Or you can right-click the image,
select “copy image address,” and paste it into the value for the src attribute. Let’s also
add the alt attribute “Some yummy chocolate pizza! The best in town!” Now
we should have a nice link to veggies.html, but I want to spice things up.

<p id=“page-number”>28</p>
Section 1 ~ HTML • Unit 5: Links and Images

Let’s add some text to tell people to click on the pizza image: “Click on the image to order
the best pizza in town!” yummypizza.html should now look something like:

<!DOCTYPE html>
<html>
<head>
<title>The best pizza in town!</title>
</head>
<body>
<a href=“veggies.html” title=“Chocolate Pizza”><img
src=“chocolate-pizza.png” alt=“Some yummy chocolate pizza! The best
in town!”>
</a>
<p>Click on the image to order the best pizza in town!</p>
</body>
</html>

Now we just need to whiz up veggies.html, and we’ll be done! I want people to
remember to stay healthy, so I’m just going to add an image of a huge piece of broccoli.
Again we can do this by either downloading the image or using the image URL. I’m also
going to add an alt attribute with the value of “a piece of broccoli. Yum!” with a p tag that
says, “Don’t forget to eat your vegetables!” It should look like:

yummypizza.html looks like:

<!DOCTYPE html>
<html>
<head>
<title>The best pizza in town!</title>
</head>
<body>
<a href=“veggies.html” title=“Chocolate Pizza”>
<img src=“chocolate-pizza.png”
alt=“Some yummy chocolate pizza! The best in town!”>
</a>
<p>Click on the image to order the best pizza in town!</p>
</body>
</html>

<p id=“page-number”>29</p>
 Section 1 ~ HTML • Unit 5: Links and Images

veggies.html should look like:

<!DOCTYPE html>
<html>
<head>
<title>Eat your veggies!</title>
</head>
<body>
<img src=“come-broccoli.png” alt=“a piece of broccoli. Yum!”>
<p>Don’t forget to eat your vegetables!</p>
</body>
</html>

Usually, it’s good practice to link back to the original site so that people can navigate
between the two, but A. I’m too lazy to do that, and B, I want people to remember to stay
healthy! Congratulations, we have just made one of the worst pranks on the internet!

Resizing an Image
Do you ever wander on a website and get assaulted with an image so large you start
wondering who designed the website and if they need to get an eye appointment ASAP?
Yea, me too. I’ve also seen my fair share of websites that decided that they wanted to size
images to be visible exclusively by ants. Well, these next two attributes were made
specifically for people running websites who have no idea how to change the size of an
image. The next two attributes are crucial to sizing an image and are the height and
width attributes. The value of the attributes is set in pixels but can be a percent of the
screen or a measurable unit. I would always recommend adding units to your values.
However, if you don’t add any values, it defaults to pixels. If you want to specify an image
height to, say, 40% of the webpage, make sure that the value of the height attribute is set to
40% (<img src=“...” alt=“...” height=“40%”). In general, if you are modifying
the size attribute of an image, even if you are modifying only, say, the height, it is a
convention to place both height and width attributes in the image tag. If you wish to
keep the image ratio the same but only want to change one attribute, set the attribute to
your preferred size, and set the other attribute the value auto. For example, we want an
image with a height of 215px, but we don’t want to mess with the width; it should look
something like:

<p id=“page-number”>30</p>
Section 1 ~ HTML • Unit 5: Links and Images

<body>
<img src=“some.url” alt=“alt text” height=“215px” width=“auto”>
</body>

Now HTML knows not to mess with the width and keeps the aspect ratio similar.
Conversely, if we don’t like the aspect ratio of the image, we can also mess with both
attributes to even it out:

<body>
<img src=“some.url” alt=“alt text” height=“215px” width=“415px”>
</body>

The following can also be done with different measurement units (See appendix A), though
it tends to create unstable image ratios across different screen sizes:

<body>
<img src=“some.url” alt=“alt text” height=“485px” width=“40%”>
</body>

It should be noted that if you have a large image linked to HTML, users download the large
image before it is resized. Because your code links back to the image, initially, the huge
image is loaded, but because your image tag has smaller attributes, HTML shrinks the
image. You aren’t downloading a smaller image in this case. You’re just shrinking the large
image. To decrease loading time, if the image is too large, consider using a photoshop
editor to make the image smaller, so users don’t have to download a large image.

Eager Versus Lazy Loading

Another super helpful attribute is loading. The loading attribute accepts two different
values: eager and lazy. Now, I don’t know about you, but I’m more of the lazy type. But what
do these mean? Eager loading forces HTML to download an image regardless of whether it
is visible by the user or not. Think of a very long article with multiple images; eager loading
would force images further down the article to load even if the user hasn’t reached them
yet. Eager loading increases loading time but guarantees that a user will view the image
instantly on load. Lazy loading loads an image only when a user can see it. This decreases
loading time but may lead to users who refresh the page, unable to see images

<p id=“page-number”>31</p>
 Section 1 ~ HTML • Unit 5: Links and Images

images load for up to a second. Generally, images that are viewable on the screen without
the need for scrolling should be loaded eagerly, with images that require further scrolling to
view should be set to lazy. Social media platforms like Facebook, Instagram, and TikTok
use similar types of loading to increase loading speed.

<body>
<p>image that can be seen by the user on loading the website</p>
<img src=“some.url” alt=“alt text” loading=“eager”>
<p>image that can be seen by the user upon scrolling</p>
<img src=“some.url” alt=“alt text” loading=“lazy”>
</body>

Unit 5 Quiz:
1. The following code segment is provided:

<a href=“first-link”>Some boring text.</a>

Which element is the code going to link to?

a) <p id=“double-trouble”>We got some double trouble.</p>

b) <p id=“peanut-butter”>Ya like peanut butter?</p>
c) <p id=“first-link”>I like pineapple on pizza.</p>
d) <p id=“second-link”>This is a paragraph about stuff.</p>

2. Assuming the image fails to load properly, what will be shown?

<img src=“some.url” alt=“An image of a dog”>

a) some.url
b) “An image of a dog”
c) The image that failed to load
d) Nothing

Answers:
2. b
1. c

<p id=“page-number”>32</p>
Section 1 ~ HTML • Unit 6: Tables and Links

An Introduction to Tables
Tables aren’t used often in HTML, but they can be a powerful tool if you are making a
website that compares different items. Tables can be used in websites that want to report
scientific findings and list data for each experiment in a table. Amazon.com tends to
compare the specifications of different products using tables. Google Sheets’
spreadsheets are just rows of tables and allow information to be compared. There are two
main components of a table: the row and the column.

The Table Tag

In HTML, the table tag is a double tag with opening and closing tags; the tag itself is super
easy to remember: <table>. This creates an instance of a table, and the ending tag closes
off the table element. The table tag has an important attribute: border. Without a border, a
table would just show floating elements without defining cells. If that is the look you are
looking for, the border attribute isn’t necessary.

Table 1’s Source Code:

Table 2’s Source Code:
<table>
<table border=“1”>
<tr>
<tr>
<td>cell 1</td>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 2</td>
</tr>
</tr>
</table>
</table>

Don’t worry about the <tr> and <td> tags. Just know that the border attribute gives a
table its borders, without the border attribute, the cells will appear to be floating in the air.

<p id=“page-number”>33</p>
 Section 1 ~ HTML • Unit 6: Tables and Links

Table Rows and Table Columns

We created a table element, but how does the table know how many rows or columns to
create? Separate tags control creating table rows and columns. The tag for a table row is
<tr> and the tag for a table column is <td>. Why td instead of tc? The td tag stands for
table data. HTML formatting places columns as sub-elements of rows. Thus, the structure
of tables is <table> → <tr> → <td>. Table data may contain any information, including
text, images, videos, or other elements; this allows tables to contain text and cool images.

We have the basics to create a simple tic tac toe section. The first thing we need to analyze
is how many rows are in the table we want to make. A traditional tic tac toe table has three
rows. From this, we know that we need three <tr> tags, one for each row.

<!-- A border of 1 allows us to see the cells of a table later on.

-->
<table border="1">
<tr></tr>
<tr></tr>
<tr></tr>
</table>

We also know that each row has three columns:

<table border="1"> Compiles to:

<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!-- Two more times -->
</table>

<p id=“page-number”>34</p>
Section 1 ~ HTML • Unit 6: Tables and Links

Now, if you compile this, you’ll find out that it doesn’t quite look like a tic tac toe box, and
you’ll notice some extra padding around the cells. It looks ugly, but HTML comes with some
default stylings because they feel the need to make everything as ugly and difficult for web
programmers as possible.

Table Header Tag and the Colspan Attribute

Table headers are headers that go over each column. The best way to think of the table
header tag is to think of it acting as a column tag with bold and centered text. We can make
a crude yet small example:

Source Code: Compiles to:

<table border="1">
<tr>
<th>Name</th>
<th>Fav. Sport</th>
</tr>
<tr>
<td>Carlos </td>
<td>Soccer</td>
</tr>
</table>

What is a colspan? Colspan is just a nickname for the term “column span.” It is an attribute
that dictates how many columns you want a particular cell to span. The attribute only
applies to table header <th> and table data (column) <td> tags. Let’s say I want to create
a name for the table, but the table has multiple columns. How is it possible to have a cell
that spans across the entire table? The colspan attribute accepts the value of how many
columns you want it to span over. Let’s assume that the entire table is two columns, and we
want to have the title cover all two columns; we can use colspan=“2” to make that table
header span over both columns.

<p id=“page-number”>35</p>
 Section 1 ~ HTML • Unit 6: Tables and Links

Source Code: Rendered Image:

<table border=“1”>
<tr>
<th colspan=“2”>Title
of Table</th>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
</tr>
</table>

Ok, I know I said HTML defaults are ugly, but I think this is as ugly as it gets. Do you see the
double lines on a default HTML table? Every time I progressed through the tutorial, I’ve
cringed, knowing I hadn’t been able to teach you this attribute.

It’s time to talk about the cellspacing attribute. The cellspacing attribute accepts pixel
values. I would set the value to 0px. Very rarely will you come across a situation where cell
spacing is used in modern web design. I would strongly recommend setting it to 0px.
However, if you find a way to make it work, HTML is your canvas.

The final table attribute we will learn about is the cell padding attribute. You may notice that
your text is very close to its cell and doesn’t have much space making it hard to read. The
cellpadding attribute can increase or decrease the space between the cell wall and the
text, images, or other elements you place in a table. Generally, the amount of cell padding a
table requires depends on the text size. It should look something like:

<table border=“1” width=“70%” cellspacing=“0px” cellpadding=“5px”>

<tr>
<th colspan=“2”>Title of Table</th>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
</tr>
</table>

<p id=“page-number”>36</p>
Section 1 ~ HTML • Unit 6: Tables and Links

Compiled, it should look like:

For practice, try recreating this table!

Wow, that is an ugly table, who would want it like that? I don’t know and I am troubled.
There are a couple of things we see off the bat. There are three td tags, because there are
three columns, and only one tr tag, because there is only a single row.

Furthermore, there seems to be a ton of cellspacing, and it looks ugly. The uglier the
better, though. There also doesn’t seem to be any cellpadding. The source code is:
<table border="1" width="100%" cellspacing="10px" cellpadding="0px">
<tr>
<th colspan="3">Title of Table</th>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 2</td>
</tr>
</table>

Nice job, though I wouldn’t ever recommend creating such table.

Lists, Unordered and Ordered Alike

Lists are among some of the most useful and used elements in HTML. You may be asking
yourself: What!? I haven’t seen a list on the internet since the last “10 ANIMALS YOU’RE
GLAD ARE EXTINCT” list came out. CSS allows us to manipulate lists, giving us more
functionality. Lists are often used in the header navigation section as links as they allow all
of the navigation to be sectioned off in a list that can be styled easily.

There are three main tags you should know when you’re dealing with lists. The best way to
start with lists is to discern the two different types of lists. The first and less used list is
known as the ordered list. An ordered list gives its items a numbered value from the first
element of the list

<p id=“page-number”>37</p>
 Section 1 ~ HTML • Unit 6: Tables and Links

element of the list to the last, kind of like rankings, a first, second, third, etc. An unordered
list uses bullet points to list its elements rather than a numbered list. Thus the notation for
an ordered list is <ol> and an unordered list is <ul>. Now both ordered lists and
unordered lists need elements in the list. These elements are called list items, and their
tags are <li>. List items can be anything: images, text, headings, or other HTML
elements. We should create a list similar to ones online: TOP 10 ANIMALS YOU’RE GLAD
ARE EXTINCT. Obviously, we want this to be numbered because it’s supposed to be a
ranked list. We can also create another list called ANIMALS THAT ARE EXTINCT; this list
doesn’t really need to be numbered, were just listing off extinct animals. Before we create
this list, remember, wherever you’re making lists, think about the function of the list, are the
items ranked (or like instructions), or can they be listed in general. Anyways, it’s time to
start off making our awesome lists.

First up, we need that ordered list.

<body>
<!-- note I’m using an h1 tag because I want the title of the list
to pop out!-->
<h1>Top 10 Animals You’re glad are extinct</h1>
<ol>
<li>Arthropleura</li>
<li>Megapiranha</li>
<li>Mammoth</li> Compiled, it looks like:
<li>Velociraptor</li>
<li>Terror Birds</li>
<li>Quetzalcoatlus</li>
<li>Saber tooth tiger</li>
<li>Titanoboa</li>
<li>Spinosaurus</li>
<li>Megalodon</li>
<li>T-rex</li>
</ol>
</body>

<p id=“page-number”>38</p>
Section 1 ~ HTML • Unit 6: Tables and Links

Next is that unordered list of extinct What is looks like when compiled:
animals:

<body>
<h1>Animals that are
extinct</h1>
<ul>
<li>Passenger
Pigeons</li>
<li>The Quagga</li>
<li>DoDo</li>
<li>The Great
Auk</li>
<li>The Golden
Toad</li>
</ul>
</body>

Later on, we can see the more practical applications of lists in websites once we get into
CSS. Often, unordered lists are used for creating headers that lead to different links
throughout a website.

Unit 6 Quiz:
1. In the following examples, determine if an ordered or unordered list should be used.

a) Recipe to make a mud cake

b) Listing the ingredients to make a pie
c) Writing a procedure for a science experiment
d) Listing the requirements for a PC to run a certain game

Answers:
d. Unordered List
c. Ordered List
b. Unordered List
a. Ordered List

<p id=“page-number”>39</p>
 Section 1 ~ HTML • Unit 7: Div and Span Tags

The Div Tag

The div tag is short for division; the div is THE MOST important element you will use in your
web development career. The div tag is useful for segmenting and grouping your HTML
code into components. Let’s say you want to make a sidebar for your website, it’s important
to wrap the entire section in a div so that you can apply CSS styles to all the elements in the
div rather than individually. It’s best to think of the div as a box; in fact, some UI libraries like
Chakra UI relapses the notation for a div tag (<div>) as box (<box>). Divs have
opening and closing tags to signal where the box should end. A div isn’t practical alone, but
it can be powerful when used with other elements to create components.

For example, we can make a simple social media post by incorporating an image and text
as child elements inside a div. It could look something like:

<body>
<div>
<img src=“some.url” >
<p>This is my first post! It’s a cat!</p>
</div>
</body>

Don’t worry too much about how to change the colors, this is just a demonstration of the
source code. You can obviously see the the white paragraph tag, and the img tag. The
div tag is the section where there is an orange background. Notice, by default, the div
doesn’t perfectly fit the content on the x-axis, this can be changed with CSS. The green
background is the body of the webpage.

Using a div allows the image and paragraph tag to move together and act as a single
element while still being able to be customizable inside the div. So rather than moving both
image and paragraph tags, we can move them together with the div tag. The div tag

<p id=“page-number”>40</p>
Section 1 ~ HTML • Unit 7: Div and Span Tags

is super helpful and allows you to group elements together to create components and style
elements in mass! Use them!

Span Tags
The span tag essentially acts like a div but has fundamentally different properties. Span
tags aren’t used in the same manner as the div tag. Span tags are generally used with text,
including header tags, links, and paragraph tags. Span tags aren’t used to create
components but are used to separate or style sections of text. For example, if I wanted to
add multiple styles to a certain part of my sentence, we can generalize the styles with the
span element rather than styling each element. Separating text with span tags looks like:

<body>
<p>This is a <span>great</span> piece of work!</p>
</body>

We now have the word “great” separated from the rest of the text and can apply various
CSS styles to change the appearance of the selected piece(s) of text. We can select
multiple pieces of text by using another span tag:

<body>
<p>This is a <span>great</span> piece of <span>work!</span></p>
</body>

We have now selected both “great” and “work!” Generally, the span tag is used for styling
text rather than creating components.

When to Use Div Versus Span and the Technical Differences

The div element is rendered as a block element; it’s not important to know what a block
element is, as it refers to the display property in CSS, which we will cover later on. A block
element starts on a new line (like using a <br> tag) and takes up the entire width of the
website (width can be modified using CSS). On the other hand, a span tag is an inline
element, meaning the element will be rendered on the same line, and height or width
properties do not impact the element’s size.

<p id=“page-number”>41</p>
 Section 1 ~ HTML • Unit 7: Div and Span Tags

Here is an example of how divs and spans are rendered:

<body>
<div>This is a div element</div>
<div>This is a div element</div>
<div>This is a div element</div>
<span>This is a span element</span>
<span>This is a span element</span>
<span>This is a span element</span>
</body>

Renders to:

Block elements move elements to the next line. Components are often built with divs.
Because inline elements cannot be resized, span elements tend to be used more for text
elements. Having the same element on the same line is beneficial for readability or
aesthetic purposes. Anything that isn’t text should be used in divs or should start on a new
line. However, if you want elements on the same line, the span tag is a powerful alternative
to the div tag. In reality, web developers usually use span for styling purposes.

Unit 7 Quiz:
1. Which one of the following correctly creates an inline selection of the word “hello”?
a. <span>hello</span>world!
b. <div>hello</div>world!
c. hello<span>world!</span>
d. hello<div>world!</div>

Answer:
1. a

<p id=“page-number”>42</p>
 #section2
{background-color:
purple}
.CSS {color: blue}

Section 2:
CSS
Section 2 ~ CSS • Unit 8: Getting Started with CSS

An Introduction to CSS
CSS stands for cascading styling sheets; CSS is a styling sheet that allows developers to
customize elements in an HTML document. CSS allows us to mess with default HTML
stylings to create unique websites. HTML can access CSS code in two different places:
through the <style> tag located in the head component, or in a separate .css file. In
general, CSS is considered white space insensitive, however, some functions are white
space sensitive. For example, the + and - operators in functions must be separated by
spaces.

The Style Tag

You can use CSS in HTML files; you don’t need a separate file to use CSS if you are using a
desktop IDE/TE. If you are using an online text editor, likely, separate HTML and CSS
sections are automatically connected. When we’re talking about the style tag, it isn’t used
as often because people prefer having CSS and HTML as two separate files for easy
readability. Note that when we’re using the style tag, we’re back in the head section of
HTML. Remember, the head is the portion of the HTML that communicates with the
browser and search engines. In this case, the head is communicating specific CSS styles to
the body. Still, most people prefer using an external stylesheet to keep the two languages
separate.

The style tag accepts an attribute with the value “text/css” we haven’t learned any CSS
yet, but inside the style tags are where the CSS code goes. It should look something like:

<head>
<style type=“text/css”>
<!-- CSS code goes here! -->
</style>
</head>

It is worth noting that inside the style tag, no HTML formatting will work. It’s best to think of
the content inside the style tag as a completely different file with different syntax. That
being said, comments and selecting elements are all different inside the style tag; it’s
essentially a different language inside the style tags.

<p id=“page-number”>44</p>
 Section 2 ~ CSS • Unit 8: Getting Started with CSS

Comments in CSS
Because CSS is a different language relative to HTML, the commenting system also has
unique notation. I will note that comments are easier to form in CSS than HTML because
they are shorter. A comment is a segment of text the computer ignores but serves as a
reminder for humans about the function of a code segment. Like HTML, the notation for
comments in CSS is a multi-line comment, meaning that comments can be longer than a
single line. Like HTML, CSS comments have an opening and closing section. The opening
segment for comments in CSS is /*; this is how the computer knows that the next
segment is a comment, and the computer will ignore them. Make sure to close the
comment, else the entire code will be considered a comment and won’t compile correctly.
To close a comment, use the notation */. A comment segment should look something like
/**/ or in code:

<head>
<style type=“text/css”>
/* This is a comment the computer will ignore */
</style>
</head>

Unit 8 Half-Way Quiz:

1. True or False: CSS is white space sensitive?

2. Which part of the HTML code does the <style> tag go?

3. What does a comment look like in CSS? How about HTML?

Answers:
-->
3. A comment in CSS looks like /* Comment */ and a comment in HTML looks like <!-- Comment
2. The <style> tag goes in the <head> tag
sensitive.
1. True and False. Generally CSS is white space insensitive but certain CSS functions are white space

<p id=“page-number”>45</p>
Section 2 ~ CSS • Unit 8: CSS Selectors and Basic Styling

CSS Selectors, the Color Property, and Changing the Font

There are tons of ways to select and style elements in CSS. Let's start with possibly one of
the most basic websites we can make:

<html>
<head>
<style type=“text/css”>
</style>
</head>
<body>
<h1>This is a header</h1>
<p>This is a paragraph</p>
</body>
</html>

Alright. This is a pretty good website, if I do say so myself. But it feels a bit plain. I think
everything can be fixed if we change the paragraph text to some green text. There are
hundreds of different CSS properties, and they aren’t all worth memorizing, you will use
some more than others. Try familiarizing yourself with the main CSS properties. The CSS
property to change a text’s color is color. The general format of CSS styling is:

CSS SELECTOR {
/* indent after every CSS Property with two spaces */
1st-CSS-Property: value;
2nd-CSS-Property: value;
/* Notice each CSS property is separated from the value with a
colon. Each CSS value is seperated with a semicolon */
}
/* The selector encapsulates CSS styles within opening and closing
brackets (CSS-Selector {}) */

In this case, if we wanted to make the color of the paragraph green, we select the element
that we want to make green and add a property to it. I also want to change the font
because who likes the default font? It’s 2021. Who uses Times new roman, ew. I think we’re
going for a much more mature font: Arial. We can change the font using the font-family
property and enter the font you want. You can also change the font size by

<p id=“page-number”>46</p>
 Section 2 ~ CSS • Unit 8: CSS Selectors and Basic Styling

using the font-size property and entering any measurement unit as a value.

<html>
<head>
<style type=“text/css”>
/* notice how we “select” all paragraph tags by writing the
element name, we can style all paragraph text this way */
p {
color: green;
font-family: arial;
Font-size: 16px;
/* CSS-Property (color): Value (green); */
}
</style>
</head>
<body>
<h1>This is a header</h1>
<p>This is a paragraph</p>
</body>
</html>

If you use the font-family property, only basic mac or windows specific fonts
pre-downloaded can be used unless you import them. If you find a font with the name “ice
cream” and want to use it in HTML without importing a font, it’s not going to work. That’s
because the browser looks for the specific font in the default Microsoft or Mac
downloaded fonts, and if it doesn’t find the font, it will use the basic font.

BEAUTIFUL. I think this may be a better website than google now. I mean, it’s ok, but I’m
actually thinking that having a segment of text as black and another as green is distracting,
so let’s change them both to dark violet. In CSS, we’re not limited to static colors like red,
green, blue. We can use color hex codes to represent every possible image or even use RGB
values. In this case, the color I want is #832496. Instead of writing “purple,” I can
accurately represent my color using the specific hex or RGB symbol. You can use RGB or
hex color code generators on google if you want to find a specific color. Now purple may be
hard to see on white, so let’s introduce a new property: background color. The CSS property
is named background-color, and accepts the same color values as the CSS property
color.

<p id=“page-number”>47</p>
Section 2 ~ CSS • Unit 8: CSS Selectors and Basic Styling

values as the CSS property color. Background color selects an element and changes the
background color for that element. If you want the entire website to be a color, change the
background color of the body. However, do not change the background color of a <p> tag
and expect the background color to change (although changing the background color of a
<p> tag is a great way to imitate a highlight effect).

<!DOCTYPE html>
<html>
<head>
<style type=“text/css”>
/* notice how we “select” all paragraph tags and h1 tags by
writing the element names separated by a comma */
p, h1 {
color: #832496;
/* Note, stylistically this is the same as rgb(131, 36, 150) */
Background-color: yellow;
/* This adds a highlight effect and makes text easier to read */
}
Body {
background-color: green; /* This changes the website to a green
color */
}
</style>
</head>
<body>
<h1>This is a header</h1>
<p>This is a paragraph</p>
</body>
</html>

Here is a compiled representation:

<p id=“page-number”>48</p>
 Section 2 ~ CSS • Unit 8: CSS Selectors and Basic Styling

These are only some selectors. As the tutorial progresses, we’ll get into more CSS
selectors. You can find the CSS selectors you need on W3Schools or Google!

Line Height and Text Readability

The line-height property in CSS is responsible for how spaced apart two lines of text are in
HTML. The CSS property is line-height and has a default value of 100%. If you are
familiar with Google Doc’s line spacing, it’s similar. Most academic papers require you to
double space. In this case, the line-height value of “double spaced” is just 2. If you
aren’t comfortable with using line-height multipliers, you can adjust the line height
using pixels and percentages. Below are three different examples of what each adjustment
would look like. Generally, paragraph text is most readable around the 1.5 multiplier value.
When you’re dealing with specific units, be sure to append them to the end of the value. If
you do not append a value for line height, it will multiply the value by the default line-height,
creating an unwanted styling. For example, if you mean 10px, enter 10px rather than 10.

Source Code:
line-height: 2;

line-height : 150%;

CSS Bold and Italics line-height: 1;/* default */

Although the HTML tags for bold (<b>) and italics (<i>) were short, using tags isn't
particularly efficient if you want to customize multiple elements. Bold and italics in CSS
each have their own unique CSS property names called font-weight and font-style.
Select the element you want to bold and use the font-weight property to bold a section
of the text. Different downloaded fonts may have different font weights, so the value for
font-weight may vary depending on the font you are using (e.g., the value could be 100,
200, 800, etc.). However, the fastest way to bold text is to use the bold value: font-weight:
bold; it mimics the <b> tag. If you want to customize how bold your text is, you should use
a numeric value instead.

<p id=“page-number”>49</p>
Section 2 ~ CSS • Unit 8: CSS Selectors and Basic Styling

<head>
<style type=“text/css”>
p {
font-weight: bold;
/* bolds the text of every
paragraph element */
}
</style>
</head>

Using a specific font weight allows more customization relative to using font-weight:
bold;.

The font-style property works a little differently from the font-weight property.
Font-style: italic; italicizes the property that you’ve selected. There are no numeric
values in this case because most fonts don’t have a progressively italic font renders like
font weight does.

<head>
<style type=“text/css”>
p {
font-weight: italics;
/* bolds the text of every paragraph element */
}
</style>
</head>

Align Text with The Text-Align Property

Have you ever been working on google docs and see the align text options? There are four
main align options: align left, center, right, and justify.

Image Credits to Google Docs

<p id=“page-number”>50</p>
 Section 2 ~ CSS • Unit 8: CSS Selectors and Basic Styling

A lot of people get confused between center and justified text alignment. The center algin
is meant to align text from the center. Justified text alignment makes all of the lines
equivalent length by adding extra spaces; it’s most often seen in books like this! Notice how
all the lines are the same length?

The CSS property for aligning text is text-align. As you may have guessed, there are four
main ways to align text. The four possible values are center, right, left, and justify.

p {
text-align: center;
}
p {
text-align: right;
}
p {
text-align: left;
}
p {
text-align: justify;
}

Image of compiled code:

A better way to describe text-align: justified is to think of books: notice how all
the lines in the book are of equal length? You’ve seen a justified text align before but maybe
never recognized it!

There is also a special value for text-align: inherit. Let’s say you have a paragraph
within the div, and the div has the text-align property of right. You can set the text-align
property of the paragraph to inherit, which will, in this case, inherit the

<p id=“page-number”>51</p>
Section 2 ~ CSS • Unit 8: CSS Selectors and Basic Styling

property of the parent (div), giving it the text-align: right property.

div { If:
text-align: right;
} <body>
p { <div>
text-align: inherit; <p>This is a p tag in a
/* -> automatically looks at div!</p>
parent and sets it to right */ </div>
} </body>

Background Images
Have you ever been to one of those websites that uses background images that blend right
into the text and looks like it was built in the 1970s? Background images aren’t necessarily
used in most websites but are very useful for some of the properties they carry. The ability
to be repeatable in the x or y direction and no image dragging may cause some people to
prefer setting background images in elements instead of using images. The background
image CSS property name is very simple; it’s background-image. Be careful when you
add background images to some elements, as they may not be useful or come out well. It’s
great to mess around with this property and attach it to different tags to explore where
background images are useful. The background image property is most often used with the
div and body elements. The value of the background image value accepts the value of a
URL as a function: url(), in the parentheses, place your file name or image URL.
To create a small example, let's set the background image of the body to a vegetable.
Google your favorite veggie and import the image URL or file name without quotes into the
URL attribute.
<head>
<style type=”text/css”>
body {
Background-image: url(some.url)
/* There are no quotes in the URL tag as per convention.
To remember CSS convention for quotes and url, visit Appendix
A*/
}
</style>
</head>

<p id=“page-number”>52</p>
 Section 2 ~ CSS • Unit 8: CSS Selectors and Basic Styling

Ok, what a horrible website, but once the background image loads, you should notice
something: the image is repeating in a tile-like pattern. A convenient CSS property allows
us to prevent repeating or allow repeating in the x or y-direction. The CSS property
background-repeat allows us to deal with this repetition. Three main values are going
to help deal with this repetition. The value of no-repeat only produces one instance of
the background image; repeat-x repeats the image in the x-axis; and repeat-y repeats
the image in the y-axis.
repeat-y:
<head>
no-repeat:
<style type=”text/css”>
body {
background-image: url(some.url)
background-repeat: no-repeat;
/* or */
background-repeat: repeat-x;
/* or */
background-repeat: repeat-y;
} repeat -x:
</style>
</head>

<p id=“page-number”>53</p>
Section 2 ~ CSS • Unit 8: CSS Selectors and Basic Styling

Ok, this is great. We’ve made one of the ugliest websites. But have you noticed that the
background image is in the top left corner? This is because the default
background-position is 0px from the left and 0px from the top. Luckily, the
background-position property allows us to move the image a certain distance from
the left and top of the screen. The background-position property allows us to accept
two parameters, _px, and _px, the first parameter is how many pixels from the left, and the
second is how many pixels from the top of the screen do you want the background image
to be. This value doesn’t have to be in pixels; it can be in any HTML measurement unit. With
this in mind, we can center a background image using the background-position property.
Because the image property allows us to enter our values in any HTML measurement unit,
we can choose percentages! What is the middle of the website (100%)? Well, it’s 50%, on
both the left and the right sides! Of course, this property really only makes sense if you are
using the background-image: no-repeat styling.

<head>
<style type=”text/css”>
body {
background-image: url(some.url)
background-repeat: no-repeat;
background-position: 50% 50%;
}
</style>
</head>

Conversely, you could use background-position: center center, to position the

background image in the center of the webpage.

If you want to increase the background image size, using the background-size property is
very powerful. Setting the value of the background image to 100% will ensure that the
background image will cover the entire browser window (background-size: 100%).

<p id=“page-number”>54</p>
 Section 2 ~ CSS • Unit 8: CSS Selectors and Basic Styling

Unit 8 Mini Review Quiz!

Let’s say I’m weird. I want to have one image that repeats in the y-direction with the
background image in the middle of the screen. Something like:

in the center of the website. To be honest, I’m having trouble coming up with a practical
application for this activity. Still, it’s a best practice to be imaginative with your CSS styles
so you can create with your imagination later on. First thing’s first, what element are we
going to apply to the background image? In this situation, if we’re making a background
image that is going to be in the middle of the website, we’re going to apply CSS styling to
the body element. Next, we need the background image. We can use the
background-image property to set the URL to whatever we want. You can either
download the image and use the file name or copy the image address for the URL. Now, the
background will automatically repeat in both the x and y-direction. We only want it to
repeat in the y-direction. This can be fixed using the background-repeat property. But
which direction do we want it to repeat in? The y-direction, so the value would be
repeat-y, for repeating in the y-direction. So far, we have:

body {
background-image: url(some.url);
background-repeat: repeat-y; /* only allows repeat in the y
direction */
}

Now we want the y-axis repeated image to appear in the middle of the screen. We can use
the background position to move the image to the center. Remember, the
background-position property first accepts the value for the distance from the left side
of the screen then the top. We don’t really need to mess with the top, so we can just apply
50% from the left and 0% from the top (again, this works for pixel values too, but when
people of different screen sizes come, it won’t be in the center anymore, so in this case, it’s
best to use percents). The final outcome for CSS styling should look something like:

<p id=“page-number”>55</p>
Section 2 ~ CSS • Unit 8: CSS Selectors and Basic Styling

body {
background-image: url(some.url);
background-repeat: repeat-y; /* only allows repeat in the y
direction */
background-position: 50% 0%; /* 50% (from left) 0% (from top) */
}

<p id=“page-number”>56</p>
 Section 2 ~ CSS • Unit 9: The Four Aspects of Every Element

The Four Aspects of Every Element

All elements contain four aspects: the content, padding, margin, and border. The content is
the visible aspects of an element; for a paragraph tag, it’s the text. The padding is the space
between the content and the edge of the element. The margin is the space between the
element and another element. A lot of people get confused between padding and margins.
Padding deals with expanding the size of an element, whereas margin deals with
increasing the space between different elements. A border is the outline of an element.
Let’s get into each one more in-depth.

Padding
Padding can be seen in an element if you use the background-color property and set it to a
contrasting color relative to the website.

The space between the text and where the background-color ends is padding. You can
increase or decrease the sizing of padding by using the CSS property padding. Padding
accepts the values of HTML measurement units. If you want to remove padding, you can
change the property padding: 0px;. You can specify the direction of padding in either
the left, right, bottom, or top segment by using the template: padding-direction:
value;.

p {
padding-top: 0px; /* removes top padding */
padding-left: 20%; /* adds 20% of screen width the left padding
*/
padding-top: 20%; /* adds 20% of the screen height to the top
padding */
}

You may notice that some of your elements don’t fit perfectly in the corner but have white
space. It’s worth noting that HTML comes default with ugly padding and margin as default
values. If you want to eliminate all padding, you can use the * selector to select ALL
elements in an HTML document and add the 0px padding property.

<p id=“page-number”>57</p>
Section 2 ~ CSS • Unit 9: The Four Aspects of Every Element

* {
padding: 0px;
/* you can also choose specific sides like any other element */
padding-left: 0px;
}

Note: this will erase all padding from ALL elements. Default padding on paragraph tags,
header tags, images, or any other element will no longer have ANY padding. You may still
notice some white space, the rest is default margins in HTML, we’ll fix that in the next
section. If you only want to remove it on the default website, use the body selector.

Margins
Margins can be seen when multiple elements have background colors in contrast with the
HTML background color.

In the same example, The green spacing on the right side, top, and bottom are results of
default margins. The distance between where one element’s background color ends and
another starts is the margin between those two elements. Margin is used to separate two
elements. The CSS property for margin is margin. The margin property accepts
parameters of any HTML measurement unit. To remove margin, the property required is
0px. Like padding, you can choose the direction of margin in either the left, right, bottom, or
top segment by using the template: margin-direction: value;.

p {
margin-top: 0px; /* removes top margin */
margin-left: 37%; /* adds 37% of screen width the left margin */
margin-top: 37%; /* adds 37% of the screen height to the top
margin */
}

We can finally remove the ugly default HTML margin that prevents elements from fitting
into the top left corner. If you want to remove default margin values for all elements, use
the “*” element selector. For removing margin values in the website only, use the “body”
element selector in conjunction with padding: 0px; margin: 0px;.

<p id=“page-number”>58</p>
 Section 2 ~ CSS • Unit 9: The Four Aspects of Every Element

Use:
* {
padding: 0px;
Margin: 0px;
/* removes default padding and margins on all elements, allows
elements to fit perfectly in corners */
}
Or:
body {
Padding: 0px;
Margin: 0px;
/* removes default padding and margins on the body only. Allows
elements to fit perfectly in corners */
}
When should you use the * selector over the body selector? Well, there isn’t much of a
difference. You can use either one. Both options remove default padding and margins in
HTML.

Margins Versus Padding

The difference between margins and padding is that margins are not part of the element
size. Margin is space built around the element that doesn’t count towards the element’s
size. Padding acts as space within the element and separates the element's content from
the element's border. Essentially, padding is part of the element, and margin is outside of
the element.

Borders
Depending on the type of websites you are making, borders can be an integral part of
learning CSS. A border is the outermost outline of an element situated on the outer portion
of an element’s padding. There are a ton of border properties worth listing:
border-color, bother-width, and border-style. Border color is similar to any CSS
color properties and accepts hex color codes, RGB values, and approved HTML colors.
Border-width specifies the width of the border and accepts measurement units.
Border-style is the style of what the border looks like. For example, you could enter the
parameter solid, which creates a solid border, or dashed, which creates a dashed coupon
code-like border. Rather than using all of these special attributes, you can use the

<p id=“page-number”>59</p>
Section 2 ~ CSS • Unit 9: The Four Aspects of Every Element

the border attribute and enter values from any of the previous attributes to save space.
Let’s give an example:

p {
padding: 20px;
background-color: pink;
/* border property changes */
border-color: green;
border-width: 3px;
border-style: dotted;
/* note this is the same as using: */
Border: green 3px dotted;
/* It's much shorter and more efficient. Note: you can also
modify just one property. If you only wanted a green border,
instead of using the border-color: green, you could use border:
green.*/
}

Dang that’s ugly, but my jokes are uglier! You can also modify any of the border properties’
(border-color, border-width, border-style, border) individual sides, like the
top, left, bottom, or right, using the template: border-side-CSSborderproperty. For
example, if I want to modify the border color of the left side, the CSS property would be
border-left-color, and give it the parameter you would like.

If you want to omit a value for a border property, you can use the parameter “none” on a
property to omit the property. For example, border-left-style: none; would omit the
border style to its default value.

Height and Width Properties

These properties are among the most commonly used properties, so it’s a good idea to be
very familiar with them. They are used well in conjunction with div tags but can keep text
elements at a certain width or height. The height and width properties are as they sound;
they change the height and width of the element. The CSS property names are

<p id=“page-number”>60</p>
 Section 2 ~ CSS • Unit 9: The Four Aspects of Every Element

are height and width, respectively, and accept any HTML measurement unit. Let’s
specify the height and width of a p tag. Change the background color so you can see how
the element’s height and width are impacted. You may substitute any element with the one
we’re going to use in this example.

CSS:
p {
Background-color: green; /* can be any color, just for viewing
purposes */
width: 50%;
Height: 200px;
}

HTML:
<body>
<p>This is a yummy paragraph tag</p>
</body>

You can see how the element has increased in size? Ok, what if we shrink down this
element? What if we give the element a height of 1px (set height: 1px;)? The same will
happen if the width is set too small. The text will pop out of its container if it is too small,
so don’t think the text is bound strictly to its element. It may pop out depending on the
element size at different screen widths. Be mindful of this when you are using percents at
small dimensions or hardcoding small pixel dimensions. If you don’t know what to do with
the width or height as it may be variable, the value should be “auto” (height/width:
auto;).

Unit 9 Quiz:
Answer:
1. What is the source code for a }
paragraph with a 2px green, color: blue;
dashed border and padding of padding: 5px;
5px. The text within the paragraph border: 2px dashed green;
tag should be blue. p{ 1.

<p id=“page-number”>61</p>
Section 2 ~ CSS • Unit 10: Styling Links

Styling Links
Links are a little more complicated for CSS styling, but it allows for more tags using the “a”
selector. It is more accurate to use its state selectors. Let’s first talk about the four states
that a link can be in. Remember how we discussed how CSS has at least a million different
CSS selectors? Well, the anchor tag uses specific selectors that allow increased
customization.
The first state is when it is inactive, unvisited, and the user has not interacted with the link
in any way. The best way to describe this state would be a default state. The selector for
this inactive state is a:link. The next state is when the user hovers over the link. This
state is the a:hover state. The third stage is when the link has been clicked. This is the
active state, and the selector is named a:active. The final state is once the user has
visited the link and has returned. This state is the visited state and is has the selector of
a:visited. So for our CSS selector, if we wanted to change the color every time the user
hovered over a link, it would look like:
a:hover {
color: green;
}
a:link has some default colorization and text-decoration. To remove the underline,
you can set the text-decoration property to none (text-decoration: none;). You
can also change the color of the link to black by using the color property. The a:hover
changes the cursor every time you hover over the link; I wouldn’t mess with this property.
However, you can change the cursor using the cursor property. The most common values
for the cursor property are: default, none, pointer, and text.
The a:active selector has a default color value of red. Generally, the properties applied to
a:active are up to you. Some developers prefer to add background color on an active link
while others keep the color the same as the a:link tag. The a:visited selector defaults
to the color of the text to purple. Similar to a:active changing properties of a:visited
depends on personal preference.

Find the Link Game!

Let's create a mini-game composed of all of the knowledge we have learned about links.
The game revolves around finding a hidden link. First, we need some dummy text. Web
developers are notorious for using lorem ipsum as dummy text holders; in this case we can
make a random word a link.

<p id=“page-number”>62</p>
 Section 2 ~ CSS • Unit 10: Styling Links

can make a random word a link. The link will be stylistically the same as all text. We don’t
want the user to know that they hovered over the link. So, no stylistic changes should be
made here either. But, when the user clicks on the link, the link should change to a blue
color text with an underline, and the user should be taken to another website saying they
won, with a default styled link back to the website. Once the user has visited the site, the
text should display green. It’s up to you to decide how long you want the lorem ipsum to be,
but I’d start at 100 words to give a good challenge.

Ok! Wow. This seems like a simple game, but there is so much to it. First thing’s first, we
need to generate that text. In this case, I’m using 100 words, and I’ll add a random link to
any word. It doesn’t matter which word links to another HTML file called winner.html. This
file should be in the same folder as the game HTML file.

So far, it should look like:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit euismod ipsum,
eget semper justo tincidunt sit amet. Aenean tristique enim a risus iaculis, et cursus magna
sollicitudin. Fusce lacinia, odio id laoreet varius, magna eros vestibulum lorem, nec facilisis
leo neque eu lectus. Morbi ullamcorper <a href=“winner.html”>nunc</a> eu felis
fermentum hendrerit ac ut velit. Nunc scelerisque orci ut nisl condimentum, eget aliquam
dui euismod. Morbi vitae urna volutpat, tempor nunc eget, sodales velit. Proin accumsan
gravida magna ut ultricies. Praesent sed convallis massa, sed efficitur sapien. In mattis
quam a ipsum finibus, at maximus sem eleifend. Proin facilisis lacus id.</p>

The default styling reveals the image immediately. First off, the color is blue, we want it to
be back, or whatever color you want the rest of your lorem ipsum text to be. In my case, I’m
too lazy to change the lorem ipsum to another color, so we need to change the color of the
link to back. We need to target the first state, the link state. In this case, the
text-decoration is underlined, but we don’t want that because it gives away the
position of the link. We want no text decoration, so we should set it to none. So, we have
two changes to the default link state. The a:link property should look like:

a:link {
color: black /* or the color of the rest of your text */
text-decoration: none;
}

<p id=“page-number”>63</p>
Section 2 ~ CSS • Unit 10: Styling Links

We don’t want the user to know they have hovered over the text and want to keep the color
the same for the hover state. When we hover over a link, HTML automatically changes the
cursor. We want it to be the same cursor as the rest of the lorem ipsum text. This cursor is
the text cursor and has the value of text. We immediately notice that two CSS style
properties are the same as a:link (both have color and text-decoration), with one
different property. We could just rewrite all three properties under the a:hover selector,
but that wastes space, and I’m too lazy. The fewer lines of code, the better. Because
a:link and a:hover share the same two colors, we can add a comma to add the same
properties to a:hover. We still need the hover cursor tag, and we can add it on a:hover’s
own selector. It should look like:

a:link, a:hover {
color: black /* or the color of the rest of your lorem ipsum text
*/
text-decoration: none;
}
a:hover {
cursor: text;
}

Next, we need the active state for the link. We want the color to be blue and underlined.
This helps people know they clicked the link or the game would take too long. We can
change the color using the color property and setting a blue parameter. We can cause the
text to be underlined if we set the text-decoration property to underline. This part
should be easy:

a:active {
color:blue;
text-decoration: underline;
}

Last up is the final state: visited. In the visited state the color should be green and not
underlined. This means that we have to change the CSS color property to green and the
CSS text-decoration property to none. It should look like:

<p id=“page-number”>64</p>
 Section 2 ~ CSS • Unit 10: Styling Links

a:visited {
color: green;
text-decoration: none;
}

We’re almost done. Now we can just add some text in the winner.html file. We can just
add a h1 saying “Nice job finding one link, try finding the other!” It’s a troll, because there is
no other link but it should make some people quit with rage. Winner.html’s body should
look like:

<h1>Nice job finding one link, try finding the other!</h1>

The default game HTML style should look like:

<style type=”text/css”>
a:link, a:hover {
Color: black /* or the color of the rest of your lorem ipsum text
*/
Text-decoration: none;
}
a:hover {
Cursor: text;
}
a:active {
Color:blue;
Text-decoration: underline;
}
a:visited {
Color: green;
Text-decoration: none;
}
</style>

<p id=“page-number”>65</p>
 <p id=“page-number”>66</p>
1. a) a:link, a:hover, a:active, and a:visited b) The default color of a:visited is purple. c) The
selector for cursor is cursor!
2. a) text-decoration: none; b) color: green; changes the link to green!
3. The Lorem Ipsum text is commonly used as filler text for a website. It starts off as “lorem
ipsum dolor sit amet...” You can find lorem ipsum generators on the internet to use as
placeholders if your website doesn’t have text yet.
4. The href attribute is required in an anchor tag to tell the website where to go after a user
has clicked the link. An example of an anchor tag linking to Google.com could look like: <a
href=“www.google.com”>Click me to go to Google.com!</a>
Answers:
website?
What attribute is required in the anchor tag in order for a link to take you to a 4.
website?
What type of text can you use as filler text or as a placeholder while you style your 3.
b. Change the color of a link to green with what property and attribute?
a. How do you remove underlines from links?
This question concerns the styling of links: 2.
c. What selector changes the types of the cursor?
b. What is the default color of a:visited tag in CSS?
a. Name the four main states anchor tags come in with CSS styling.
This question concerns with the four states of anchor tags: 1.
Unit 10 Quiz:
Section 2 ~ CSS • Unit 10: Styling Links
 Section 2 ~ CSS • Unit 11: Styling Tables and Lists

Styling Tables
Tables don’t have any special CSS properties that are frequently used in web development.
However, when it comes to styling tables, inheritance of styles plays a large role in how
table rows and columns are styled. It is worth noting that if you’ve set the property
border=“(x)px” on the table tag (<table border=“(x)px”>), it is overridden by the
border property in CSS.

While this next property isn't exclusive to tables, it is a crucial CSS property to memorize.
It's called box-sizing. If you specify a height and width for a property and add a border,
the element size will be the specified width PLUS the border width. For example, if your
element is 120px by 120px, and you add a 10px border on all sides, the element will grow
to be 140px by 140px. Maybe this is the look you are going for. However, a lot of people
want to restrict the element's length and height to 120px. By default, the property is set to
content-box. Remember the four properties of every element: content, margin, padding,
border? The parameter content-box means that only the content is restricted to the
height and width property; the padding and border will not be included in the dimension
restrictions. The parameter border-box means that the content, padding, and border are
restricted to the height and width property. Note that margin won't be included in either
content-box or border-box, because margins don't count towards the element's size
but the space around the element.

Let’s try this out with a table. Create two rows and two columns:

<table border=“1”>
<tr>
<td>Column 1, Row 1</td>
<td>Column 2, Row 1</td>
</tr>
<tr>
<td>Column 1, Row 2</td>
<td>Column 2, Row 2</td>
</tr>
</table>

<p id=“page-number”>67</p>
Section 2 ~ CSS • Unit 11: Styling Tables and Lists

CSS styling:

table {
border: 10px dashed green;
width: 120px;
height: 120px;
box-sizing: content-box; /* you don’t really need this as it is
default */
}

This table has a total height of 144px by 150px!

This may not be a big difference now, but if you have elements perfectly lined up to fit a
page but then add a border or padding, all elements shift, making unintended changes.
Using border-box is a great way to avoid this problem, but deciding twitch box-sizing to use
depends on your judgment.

Table elements are just weird. They have child element inheritance. What are child
elements? Child elements are elements that are inside another element. A table may look
like:

<table>
<tr>
<td>...</td>
</tr>
<tr>
<td>...</td>
</tr>
</table>

<p id=“page-number”>68</p>
 Section 2 ~ CSS • Unit 11: Styling Tables and Lists

You can see that <td> is inside <tr>, so td is a child element of tr. <tr> is inside
<table> so <tr> is the child element of <table>. The table hierarchy is table -> tr ->
td. In this case, if you make a stylistic change to any of these elements, not only will the
element themselves be impacted, but their child element will also be impacted. What does
that mean? Let’s say I want the color of the text in the table element to be green.

HTML: Compiles to:

<table border="10px">
<tr>
<td>Column 1, Row 1</td>
</tr>
<tr>
<td>Column 1, Row 2</td>
</tr>
</table>

CSS:
table {
color: green;
}

There’s something wrong. We never specified the text color in the td element. Still, the
color is automatically green… this is because, in the table element, all child elements
inherit their parent element styles. Try adding a red background to the tr element using the
same table and see what happens.

CSS:
table { Compiles to:
color: green;
background-color: red;
}

The table doesn’t have a background color of red. This is because styles made only affect
the child elements and not the parent elements. However, we can see that the td elements
all have a red background. It’s fun to play around with the table hierarchy and styles to see
which styles impact which elements.

<p id=“page-number”>69</p>
Section 2 ~ CSS • Unit 11: Styling Tables and Lists

In general, parent elements do not inherit child element styles, but child element styles
inherit styles from their parents. Think about it like a human family. Children inherit traits
from their parents, but parents don’t inherit traits from their children!

Styling Lists
I’d say learning how to style unordered lists is one of the most valuable tips to create
components in HTML efficiently. Footer, headers, and various other HTML components use
unordered lists as a base when building out the components. Ordered lists are also cool,
but generally, unordered lists are easier to style.

There are a couple of CSS properties we will go over to style ordered and unordered lists.
List-style-type is the property that changes the shape of the bullet points of
unordered lists, or the ordering of ordered lists. If you just want to eliminate any styling of
bullet points or ordered labeling, both ordered and unordered lists should have
list-style-type set to “none” (list-style-type: none;). Starting off with
unordered lists, we have important three parameters: disc (which comes default with
unordered lists), circle (unfilled disc), and square.

HTML:

<ul>
<li>This has a disc bullet
point</li>
<li>This has a circle bullet
point</li>
<li>This has a square bullet
point</li>
</ul>

CSS:

li {

list-style-type: disc; /* default */ /* or */

list-style-type: circle; /* or */
list-style-type: square;
}

<p id=“page-number”>70</p>
 Section 2 ~ CSS • Unit 11: Styling Tables and Lists

It’s worth noting, that for now, we have no way to differentiate different li tags. We’ll get to
that later on, but for now, experiment with different style style types in mass rather than
targeting individual li tags.

Ordered lists have dozens of styles. One of the unique parameters of the list-style-type for
ordered lists is that they can represent letters from another language. Let’s say I’m creating
a website in Persian and want to use their numbering system. I’m able to do this by
entering “Persian” for the parameter. It should look like this:

CSS: Compiled:
ol {
list-style-type: persian;
}

I don’t speak Persian, but if you did, you could incorporate this into your website if you
wanted to. CSS has options for several different languages. You may be able to use a
language of your choice (if included as a list-style-type) in an ordered list! Some
more basic styles to know with ordered lists are: decimal (default),
upper/lower-roman (displays numbers in upper or lower roman case), and
lower-alpha (lowercase English alphabet where 1. -> a. 2. -> b. etc.).

Unordered lists cannot use decimal, upper-roman, or lower-roman styles. However,

ordered lists can use styles used for unordered lists. It should be noted that conventionally
if you are going to set your bullet style to circle, square, or none, an unordered list
should be used. If you are using decimal, upper-roman, or lower-alpha, an ordered
list should be used.

Unit 11 Quiz:
1. What property allows you to change the style of the ordered or unordered list?

2. What attribute allows a table to have a border?

a. What would the source code look like for a table with a border of 8?

Answers:
to have a border. 2. a) the source code looks like <table border=“8px”></table>
1. list-style-type allows you to change the style of lists. 2. The attribute border allows a table

<p id=“page-number”>71</p>
Section 2 ~ CSS • Unit 12: Classes and ID Selectors

Classes
Up till now, we’ve learned how to style all instances of a single element like when we use
the p, h1 {} selector. What if I want to only style a single instance of an element? For
example, let’s say I want to turn a paragraph tag green. We know how to do that, it looks
like:

p {
color: green;
}

This works and turns the paragraph tag green, but what if I had ten other paragraph
tags. You may default to using a span in the paragraph tag and styling the span green, but
what if we have multiple spans? In CSS I want to be able to style particular paragraph
tags rather than ALL of the paragraph tags. HTML and CSS have a naming convention
that allows you to select and style a specific element!

How do classes work in HTML? Classes are extra attributes you can add to an element. To
give a class to an element, add the class attribute. The template for adding a class in HTML
to any element looks like class= “class-name1 class-name2 ...” Off the bat, you
notice several different things. First, you can have multiple class names for every element
separated by a space as long as it is inside the class attribute quotes. These class names
can be unique, or several elements may share the same class name. Second, the class
property accepts the value of the element’s class name in quotes. Generally, elements will
have the same class if they have similar properties; however, as a convention, element
class names should not be descriptive of their stylistic properties but names that reflect
their purpose. An element with a class should look like: <button class=
“submit-button”> and an element with multiple classes should look like: <button
class= “submit-button user-input”>.

In CSS, if we want to target a class name, we can use the template .class-name {/* CSS
CODE */}. Class names are referenced by adding a period before the class name. You can
assume class names to work like CSS selectors. For example, you can select two divs to
have the same property by separating them with a comma .div1, div2 {/* CSS
CODE */}. Ok, let’s try selecting some HTML Classes!

<p id=“page-number”>72</p>
 Section 2 ~ CSS • Unit 12: Classes and ID Selectors

<p class=“para1”>I am paragraph number one</p>

<p class=“para2”>I am paragraph number two</p>
<p class=“para3”>I am paragraph number three</p>

Let’s say that paragraph 1 should be green, paragraph 2 should be blue, and paragraph 3
should be red. The CSS code should look something like:

.para1 {color: green;} /* .para1 selects the element(s) with the

class name of para1 */
.para2 {color: blue;}
.para3 {color: red;}

IDs
We’re not talking about the IDs people use to get into bars, IDs in CSS allow you to select a
specific instance of an element in HTML. IDs in HTML are very similar to classes with a
single restriction: IDs are unique to the attached element. Elements can have both an ID
and a class, but the ID must be unique. Use IDs exclusively for a single element to avoid
confusing JavaScript (a programming language that increases the website’s functionality).
An element is limited to a single ID, and an ID is limited to a single element.

Other than exclusivity, selecting IDs in CSS also differs from selecting classes. The
template for selecting an ID is: #id-name. For example, the following header tag can be
selected as such:

<h1 id=“welcome-h1” class=“header”>Welcome to this ugly

website!</h1>
<!--Again, elements can have both an ID and a class-->
<p class=“p-tag”>we are ugly.</p>

CSS:

#welcome-h1 {
/* whatever css styles you wish to add to the h1 */
}

It is fine for divs and IDs to have the same CSS properties, so they can be combined using
selectors like:

<p id=“page-number”>73</p>
Section 2 ~ CSS • Unit 12: Classes and ID Selectors

#test, .p-tag /* an ID and class selector separated by comma */ {

/* CSS CODE YOU WANT TO APPLY TO ELEMENTS */
}

If you are only learning HTML and CSS, there isn’t a reason to use IDs over classes because
of how restrictive they are. However, if you plan to learn Javascript, IDs can be a great tool
to select and modify a single element.

P.S. You can finally understand what is going on in the bottom with the page number! It is a
paragraph tag with an identifier of page-number. Let's bold the text, just for this page.

#page-number {
font-weight: bold;
}

Classes Versus IDs

In HTML, classes are declared by using the class attribute in an HTML element. Multiple
classes can be assigned to a single element, and a class can also be assigned to multiple
elements. These classes can be selected in CSS by using the template .class-name. If
you don’t have plants to learn JavaScript, you should stick to using classes. If you do want
to learn JavaScript in the future, using IDs is great! IDs are declared by using the ID
attribute in an HTML element. An element can have a single ID, and an ID is limited to a
single element. In CSS, the ID is selected using the template #id-name. IDs are helpful in
JavaScript when you want to target a single element rather than a group of elements.

Unit 12 Quiz:
1. Let’s assume we have an element with a class or ID of “element”
a. What is the selector if this element is a class, and how many times can it be used?
b. What is the selector if this element is an ID, and how many times can it be used?

Answers:

only once on a single element.

different elements. 1. b) If this element was an ID, its selector would be #element, and it can be used
1. a) If this element was a class, its selector would be .element, and it can be used several times on

<p id=“page-number”>74</p>
 Section 2 ~ CSS • Unit 13: Other CSS Selectors

Child Selectors
Learning how to individually style elements is great and offers a large variety of
customizability. However, suppose we wanted to select all elements inside another
element, rather than adding class names to each of those elements, we can select all the
elements using a CSS selector. What does this mean? Well, assume that we have three
links inside a div; the div can be anything, but it’s a navigation section.

<div class=“navigation”>
<a href=“#Section-1”>Section 1</a>
<a href=“#Section-1”>Section 1</a>
<a href=“#Section-1”>Section 1</a>
</div>

What if we want all the anchor tags inside this navigation tab to be orange; or any anchor
tag inside a div to be orange? We could set a class on each element inside the div, but it
isn’t particularly efficient. Instead, we could use a child element selector to select all child
elements inside a child. What is a child element? Remember, a child element is an element
inside of another element. For example, if a paragraph tag is inside a div tag, the paragraph
tag is a child element of the div tag. The notation for selecting child elements is:
parent-element > child-element. In the case of styling all the links in div tags, we
first determine the parent element and the child element. In this case, the anchor tags are
inside the div tags, so the anchor tags are the child element, and the div is the parent
element. Thus, selecting all anchor tags in divs and turning them orange should look like:

div > a {
color: orange;
}

This changes the color of all anchor tags that are child elements of divs. Pretty cool right!?

Pseudo Selectors
Pseudo elements are special CSS selectors that apply styles to a specific part of an
element. They aren’t really used much in web development stylistically, but they are good to
know if you ever want to use them. Have you ever seen how novel books make ter huge but
keep every other letter a smaller size?

<p id=“page-number”>75</p>
Section 2 ~ CSS • Unit 13: Other CSS Selectors

the first letter huge but keep every other letter a smaller size?

eems like a cool trick

to learn if you are
going to make a
magazine website!

This is an example of a pseudo selector. Another pseudo selector is styling the entire first
line of an element or adding text before or after a selected element. We’ll talk about two
commonly used pseudo selectors.

The first pseudo selector is selecting the first letter of an element. This is useful for
creating newspapers and if you want to style the first letter without busting out some span
tags. The first letter selector looks like element::first-letter. You can then apply
styles that impact only the first letter of all instances of the element. For example, if you
have 10 paragraph tags and use the element::first-letter, the first letter of all
paragraph tags will change. If you only want one element or a class of elements to change,
use the ID or class of the element: #id/.class-name::first-letter.

The second pseudo selector is selecting the first line of an element. This can be useful if
you want to emphasize the opening line of an article or book. The first line selector looks
like element::first-line; however, to select a single instance or a class of elements,
use #id/.class-name::first-letter.

In this case, we can see how the both can be used:

HTML selecting the first-letter:

<p class=“opening-para”>Once upon a time…</p>

CSS first-letter:
P::first-letter {
Font-size: 24px;
}
Or: Compiled, It looks like:
.opening-para::first-letter {
Font-size: 24px;
}

<p id=“page-number”>76</p>
 Section 2 ~ CSS • Unit 13: Other CSS Selectors

HTML selecting first-line:

<p class=“br-news”>Breaking news! <br> Florida man cashes in $3,000
worth of rare hundred dollar bills for a crocodile.</p>

CSS: Compiled, it looks like:

p::first-line {
font-weight: bold;
}

Or:
.br-news::first-line {
font-weight: bold;
}

Pseudo selectors are fun to play around with but don’t play a large role in web
development.

Unit 13 Quiz:
1. The following questions relate to CSS selectors:
a. What selector selects all paragraph tags within div tags?
b. What pseudo selector selects the first letter of an element?
c. What pseudo selector selects the first line of an element?

Answers:
1. c) The pseudo selector ::first-line selects the first line of an element.
would be div > p. 1. b) The pseudo selector ::first-letter selects the first letter of an element.
1. a) To select all elements within an element use parent-element > child-element. In this case, it

<p id=“page-number”>77</p>
Section 2 ~ CSS • Unit 14: CSS Positioning

Positioning in CSS
CSS has a system that determines how elements are positioned in HTML; the property is,
surprisingly, named position. The CSS positioning system allows elements to be placed
a distance from the website's right, left, bottom, and top once the positioning property has
been specified. There are five different values for positions: static, absolute, relative, sticky,
and fixed. We will cover four of them in detail (absolute, relative, sticky, and
fixed). The static property is the default CSS style for position. All elements use the static
position unless their position has been changed. It is declared using position:
static;! If one of your properties inherits a different positioning style as a child element,
you can reset the property setting type if you use static positioning.

Absolute Positioning
An element possesses the absolute positioning when its position is absolute with the
notation position: absolute;. Position absolute provides a relative position to its
parent elements if they are positioned. If the element is set to absolute and no parent
elements are positioned, or the element has no parent elements, the position is relative to
the body. It’s worth noting that elements that are absolutely positioned can be overlapped
with one another.

The best way to demonstrate how absolute positioning works is to give the element the
positioning. We can position this, say a set distance from the top, bottom, left, or right of
the screen (if no parent elements contain a position). If we want 0px on the right side, we
use the CSS property right and set a distance from the right side (right: 0px;). You can
use any measurement unit to specify how far an element should be from the side of the
screen (ex: right: 50%; is in the middle and top: 50%; is vertically centered).
Likewise, if I want an element to be on the bottom, I can use the bottom property and set
the distance from the bottom to be 0px (bottom: 0px;). In this case, we can just set the
image 100px from the top of the screen and 150px from the left of the screen.

HTML code:
<img src=“some.url”>

<p id=“page-number”>78</p>
 Section 2 ~ CSS • Unit 14: CSS Positioning

CSS code:
img {
position: absolute;
left: 150px;
top: 100px;
}

Compiled, it looks like:

You should play around with the position absolute property and position parent elements to
see how it impacts the position of an element with absolute positioning.

Relative Positioning
An element with relative positioning is positioned relative to its static position. Relative
position can be declared by using the position property and setting the value to relative like:
position: relative;. Much like absolute positioning, relative positioning can move
the position of the element using the properties left, right, bottom, and top. Because the
positioning is relative to the original position, using 0px with any of the movement
properties will not move the element because it infers that they will be moved 0px from
their original position.

The image has not moved 100px from the left of the screen or 150px from the top of the
screen, but 100px left from its original position and 150px from the top of its original
position.

<p id=“page-number”>79</p>
Section 2 ~ CSS • Unit 14: CSS Positioning

Fixed Position
An element with the fixed position is fixed to its position in the viewport. Position fixed is
very common with headers and footers. If you go to YouTube and start scrolling, you notice
that the top section (header) follows your view no matter how much you scroll. Instagram’s
navigation footer is also similar.

(Youtube.com)

These components could be replicated using the positioned fixed property (position:
fixed;). The fixed position works similar to absolute positioning but follows the user at
that position throughout the length of the website! Let's make a little header, a black, fixed
header that in 100px tall and spans the entire website.

HTML:
Compiled, it looks like:
<div>
</div>
<p>...</p>
/* insert lorem ipsum until
scrollbar appears */

CSS:

div {
height: 100px; Notice how the black bar follows you as
width: 100%; you scroll!
/* spans whole website */
background-color: black;
position: fixed;
}

<p id=“page-number”>80</p>
 Section 2 ~ CSS • Unit 14: CSS Positioning

Position Sticky
Ever start scrolling and notice an ad that displays like a normal element but then follows
you when you scroll past it? These are called sticky elements and use the value sticky for
their position (position: sticky;). When rendered, position sticky is set with the value
of relative positioning; however, when you scroll past the element, it switches from a
relative positioning to a fixed position. This gives the illusion that an original static element
you scroll by will follow you.

It’s worth noting that position sticky has minimal support across browsers and thus
wouldn’t use it. A special property is required for Safari to understand a position sticky:
position: -webkit-sticky;. Using position sticky for Safari may look something like:

div {
position: -webkit-sticky;
position: sticky;
}

This allows Safari to understand and implement position sticky. Again, it is up to you to
determine if you want to leave out support for other browsers, but I would advise being as
consistent across web browsers as possible.

Unit 14 Quiz:
1. The following questions are in regard to elements with different positions:
a. What position is an element that stays fixed to a certain part of the website?
b. What is the best position for an element that needs to be placed 100px from
the top of the website and 150px from the left of the website?
c. Describe static positioning.

Answers:

styling is required for an element to be in static positioning.

absolute;) c) Static positioning is the default positioning of elements throughout a website. No extra
1. a) A fixed element (position: fixed;) b) An absolutely positioned element (position:

<p id=“page-number”>81</p>
Section 2 ~ CSS • Unit 15: Displaying and Floating Elements with CSS

CSS Display Properties

Other than positioning, there are different ways to display an element. They can be
displayed on the same line, a different line, as a grid, a table, or even not displayed at all.
There are over 20 different display options. Some are more useful than others, but we will
cover three: block, inline, and none. If you remember back to HTML, you may have
remembered two elements: the div and the span tags. The div uses block display and
span uses inline display. The template for changing the display, the CSS property display,
allows us to modify the display of an element: display: display-type;.

Display Block
Most elements default to either block or inline. A block element is an element that
assumes the <br> tag both before and after the element. <div> and <p> tags are great
examples of how the block element works. If not already a default block element, block
elements can be created using the display: block; style.

Display Inline
Inline elements are exactly what they sound like; they are displayed on the same line as
other elements. Generally, inline elements are assigned to spans and perhaps links that are
embedded in a paragraph. If not already defaulted to inline, inline elements can be declared
using display: inline;.

Display None
Ever click on an “x” button, and a popup ad closes? How does that happen? Well, one
possible way to accomplish this is to use the display none property. Display none is exactly
what it sounds like. The element with the CSS style “display: none;” will not display on
the website. Display none doesn’t seem particularly useful in a website alone; however,
when introducing Javascript, we can create buttons that can change the display of
elements from block to none when the user clicks on a close button.

Float
One of the more useful properties in CSS is the float property. What is float? Well, it “floats”
an element to the left or the right. Floating floats an object towards the left or right of the
parent element it is within. If the element has no parent element, then then

<p id=“page-number”>82</p>
 Section 2 ~ CSS • Unit 15: Displaying and Floating Elements with CSS

it will float to the left or right of the body. Let’s use this information in action; we want to
stylistically have an image on the right side instead of the left side. By default, images float
to the left. Start off by creating an image tag that displays an image with a width less than
100% of the screen. For example, it may look like:

HTML:
<img src=“some.url” alt=“descriptive text” width=“100px”
height=“100px” >

CSS:
img {
float: right;
/* looks like float: left; by default */
}

Notice how the image is now “floating” on the right side of the website instead of the left
side? What if you want to float two images side by side? Because images are defaulted to
“block,” they won’t be next to each other even if there is enough space. To place two
images side by side, float one image to the right, and one to the left!

Unit 15 Quiz:
1. Describe the difference between a block element and an inline element?
2. Describe the difference between the display attribute and the float attribute?

Answer:
how an element should be displayed, while a float attribute floats the element to the left or right.
attempts to place the element in the same line as another element. 2. The display attribute describes
1. A block element assumes that there is a <br> tag before and after the element. An inline element

<p id=“page-number”>83</p>
Section 2 ~ CSS • Unit 16: Media and Resizing

Media and Resizing Content

Once you start getting the hang of CSS and HTML, you may be thinking about how good
your website looks on your screen. There is a problem. Unfortunately, everyone accessing
your computer is not using your screen. Some people may be using phones, tablets, TVs,
computers with a different size screen, or even a toaster. Your website looks good on your
screen, but it won’t look good on a 375px by 667px display. Maybe some of your pictures
are larger than that (if you didn’t use scalable units). Learning to resize your media or
elements based on the device’s screen width is key to designing a scalable and responsive
website.

Scalability takes a long time to master and is extremely time-consuming. You don’t need to
account for every screen size, but include commonly used screen sizes like iPhones, iPads,
and popular computer sizes. The chance of someone visiting your website with a 9999px
by 9999px or a 51px by 150px device is nil. While working on scalability, inspect element
(control + shift + i) is going to be your friend. You can drag the dashed lines to
increase or decrease the size of the simulated device and see how your website responds.
Ideally, you should be targeting screen sizes that the majority of your users would use.

Meta Tags and the Viewport Meta Tag

The meta tag (<meta>) is a self-closing tag that belongs in the head of the HTML
document. This is because the meta tags directly communicate information about the
website to browsers and search engines. Meta tags accept an attribute of name that
specifies what way the meta tag will work in. The meta tag is an umbrella tag that serves a
lot of functions. The meta tag also has a content attribute that gives a value to the type
attribute. For example, the name description meta tag has a content attribute that allows it
to describe the description of the website: <meta name= “description”
content=“This website is about free books.”>. Some search engines will look
for these meta tags and display them.

The viewport meta tag is a tag that gives browsers a little more information about the
width of the website and instructions on scaling the website. This tag isn’t worth
memorizing and you can find it online:

<p id=“page-number”>84</p>
 Section 2 ~ CSS • Unit 16: Media and Resizing

<meta name="viewport" content=" width=device-width,

initial-scale=1.0">. The viewport meta tag is a tag that gives browsers a little more
information about the width of the website and instructions on scaling the website. This
tag isn’t worth memorizing and you can find it online: <meta name="viewport"
content=" width=device-width, initial-scale=1.0">. This tag is special
because it has an additional property of width with some special values. This tag alone
doesn’t make the website responsive. This tag gives additional information about the
website to the browser so it can render the website correctly across different devices.

The viewport meta tag should look like:

<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
</head>

Don’t worry too much about meta tags for now. Just copy and paste the viewport meta tag
when you are working with responsive websites.

@Media Queries and CSS Responsiveness

This is what makes your website responsive. The @media property is a way of selecting a
screen width or height size that you want to apply different styles to. The media style
template looks like: @media screen and ((min/max)-width/height: value).
Generally, we tend to use min/max width rather than height as height isn’t really as scalable
as the width is, but if you make height work out, well, a cookie for you. Note that generally,
using height for media queries isn’t the convention. Some people start out making the
mobile version of their website with CSS, then build their way up to the desktop version,
while others build the desktop version first then move down to mobile responsiveness.
Depending on your preference, you can start with either the mobile version or desktop
version and work towards the other device.

A media query should look like:

@media screen and (max-width: 400px) {
/* The CSS Code will only work up to a MAX width of 400px */
Body {
background-color: red;
} /* this property will only execute if the screen has up to a max width of
400px */
}
<p id=“page-number”>85</p>
Section 2 ~ CSS • Unit 16: Media and Resizing

Media queries are challenging due to their unique syntax, and understanding
min/max-width isn’t quite what we may expect. Let’s say we’re starting with the desktop
version first, and we want to change the background color to red for mobile. Most phones
have a width of less than 400px, so setting the property max-width: 400px is a great
way to say that the following properties will work up to the max-width of 400px. Any
width beyond 400px will not be applied using this media query. Similarly, min-width targets
devices with widths at a minimum of the set boundary. Say we have 1000px as the
min-width. Any styles inside that media query will show when the minimum width of the
browser size is 1000px.

Other than the initial query, everything inside that query is regular ‘ol CSS. Generally, if
you're working on scaling to mobile, you want everything to be smaller. These styles will
only go into effect when you are using a device within the parameter of the query. Just use
CSS to make your website look how you want for each screen size.

Importing External Styling Sheets

If you’re using an online IDE/TE, you shouldn’t be too worried about this section as it
applies to desktop IDE/TEs, but it is good knowledge if you ever decide to use a desktop
IDE/TE in the future.

A unique tag is required to link an external CSS file to an HTML file; this tag is the link tag
and should be located in the head of the HTML file. The tag is also a self-closing tag and
looks like: <link>. To link a CSS stylesheet, the link tag accepts the relation attribute and
the href attribute. The relation attribute specifies the relationship of the linked file to the
HTML document; the relation attribute in the link tag is noted as rel and accepts the value
of the stylesheet for CSS. The relation attribute should look like <link
rel=“stylesheet”>. The href attribute is the same attribute as seen in anchor tags and
accepts the value of the CSS file name; for example, an href attribute could look something
like <link href=“styles.css”>. In aggregate, linking a CSS file should follow the
template <link rel=“stylesheet” href=“file.name”>. An example of
successfully linking a CSS file could look like: <link rel=“stylesheet”
href=“styles.css”>. If you are working with both external HTML and CSS files, make
sure to save both files and refresh your web page, or your website will not recognize the
new changes. An additional attribute that is very helpful for the scalability of websites
across different platforms is the media input. We’ll cover the media attribute and
something

<p id=“page-number”>86</p>
 Section 2 ~ CSS • Unit 16: Media and Resizing

importing different CSS files depending on screen size when discussing media queries in
CSS.

Importing a Separate Stylesheet for Sizes

The media attribute is similar to the CSS version but follows the template: media="screen
and ((max/min)-width/height: units)". Let’s say I want to import a new stylesheet
that acts exactly as the media query in CSS. We want to change the website’s background
color to red when the user is less than 400px.

First off, we need a new CSS file. This one styles a device width less than 400px, so I’ll
name it mobile. CSS. All it needs is a background-color property for the body.

body {
background-color: red;
}

In my HTML document I’d import it and add the special media tag so it knows when to
import and use that CSS stylesheet:

<link rel="stylesheet" media="screen and (max-width: 400px)" href="mobile.css" />

Note this is nearly IDENTICAL to:

@media screen and (max-width: 400px) {
body {
background-color: red;
}
}

Because both are identical, it is up to you to decide which version you prefer. Keeping all
your documents in a single CSS file may decrease readability and decrease debugging
times. Others may feel uncomfortable having four different CSS files and prefer to keep it in
a single file. The choice is yours, but both methods end up with identical responsive results.

<p id=“page-number”>87</p>
Section 2 ~ CSS • Unit 16: Media and Resizing

Unit 16 Quiz:
1. The following questions regard a screen that is 600px wide:
a. What would the media query be if we wanted CSS to style websites larger
600px?
b. What would the media query be if we wanted CSS to style websites smaller
than 600px?

2. Where does the meta tag “<meta name="viewport"

content="width=device-width, initial-scale=1.0">” belong?

3. Why is having a media queries for CSS important? What does it allow?

Answers:
read all the text.
queries is important for creating responsive designs so people on all devices accessing the website can
(max-width: 600px). 2. This meta tag belongs in the head of the HTML code. 3. Having media
1. a) @media screen and (min-width: 600px). 1. b)@media screen and

<p id=“page-number”>88</p>
Section 3: CSS
and
H T M L + ns
e n ti oD e b
C o n v u ggin
g Ti
ps
 HTML and CSS General Etiquette and Conventions

To ease readability, the coding community has come up with some conventions on how to
write HTML code. All elements should be lowercase. It’s worth mentioning that HTML is
white space insensitive. What is white space? White space is considered as any tabs,
spaces, or returns that a user may enter into a text editor or IDE. Because HTML is
insensitive to white space, it is etiquette to return tags or sentences too long. You can play
around with HTML’s white space to see how it works.

<!DOCTYPE html> <html> <head> </head> </html>

Is equal to:

<!DOCTYPE html><html><head></head></html>

<p>Hello .</p>

Is equal to:

<p>Hello .</p> /* the orange highlight represents a single space */

Extra white space beyond two spaces only registers as one space after white spacing has
been processed out!

White space insensitive does not mean that you can add space in the middle of spelling
elements. It just won’t work. <!DOC TYPE h tm l> will result in a compiling
error and will not work.

It’s also an HTML convention to indent (with two spaces only) and use a new line for every
child element.

For example:
<!DOCTYPE html><html><head></head><body></body></html>

Should be:
<!DOCTYPE html>
<html>
<head>
<title>Some Awesome Website!</title>
</head>
<body>

<p id=“page-number”>90</p>
HTML and CSS General Etiquette and Conventions

<p>This is the best website ever!</p>

</body>
</html>

The list of CSS conventions is just as important as the HTML conventions and helps
increase the readability of the code. There are tons of conventions, but some of the more
important ones are worth memorizing to produce clean code. Declaring styles in CSS
should be done with a two-space indent. After declaring the style, you want to customize,
add a space before adding a value to increase readability.

.img {
border: 1px solid #000;
height: 100px;
width: 100px;
}

To increase readability, replace spaces with dashes while naming IDs and classes (ex:
class=“small-cat”). One of the most important aspects of programming is naming. An
ID or class should have a meaningful name rather than a random name or presentational
name. What do presentational names mean? Labeling a class of a green button as:
.green-button isn’t considered a conventional identifying label for an element because
it is named on its presentation rather than its function. The name .submit-button may be a
more descriptive, conventional name.

It’s also worth noting that leading zeros are omitted; any styles that require leading zeros
can work properly if the zeros are omitted; it helps clean up the code and keep it prompt
(ex: margin: 0.8 px -> .8px).

Finally, a quick little convention for quotations. In HTML, always use double quotations
whenever required (ex: link tags, image sources, etc.), and use single quotes in CSS
whenever required (ex: fonts), and omit quotation marks in URL values.

Those were some of the more important HTML and CSS conventions worth memorizing;
however, if you still have questions are want more detailed examples, a full list of
industry-used HTML and CSS conventions can be found at:
https://google.github.io/styleguide/htmlcssguide.html.

<p id=“page-number”>91</p>
 HTML and CSS Debugging Tips

Debugging
In programming, the process of debugging is the removal of bugs or errors within code that
prevent the code from running the way it was intended to. The process of debugging can
take a while and this generally tends to be where programmers spend most of their time.
Debugging is important to ensuring that your code is rendering the way you want it to. If,
through the progression of this tutorial, the code doesn’t render the same way as the
tutorial shows, it is likely that there are errors in the code and you need to debug your code.
The following are important tips to decide how to start debugging.

1. Look through your code line by line.

If you have, say, an image that is not in the center of the website like your styling intended it
to be, it is important to look through all the code that concerns the image line by line to
ensure that your image is being affected by any unintended styles.

2. If you are using a desktop IDE/TE, esure you saved the file and have reloaded your
webpage.

Sometimes, if you haven’t saved your work, the webpage won’t update your progress. It is
important to ensure that you have refreshed your file (webpage) and saved your files in
order to see any changes. If you are using an online IDE/TE, most already autocompile and
you won’t have to worry about such processes.

3. Use inspect element (ctrl + shift + i).

<p id=“page-number”>92</p>
HTML and CSS Debugging Tips

Inspect element is cool because it allows you to change the text of real websites. If you are
familiar enough with HTML and CSS, you can change how Google looks just by messing
around with the text and styling of elements.

4. Make sure your spelling for elements is correct, and your syntax is correct.

It is important to ensure that your elements are correctly spelt. Going back to the image
example, if you thought you created an image tag, but no image shows up, a reason for that
could be because you misspelled your tag correctly (ing instead of img). Another bug that
may result in the incorrect rendering of your elements is having incorrect syntax. This could
be because you accidentally added an extra space while typing out your element (im g
instead of img).

5. Ensure that you close your tags in HTML.

A reason why your elements may not have correct parent-child relationship is because the
tags may not have been closed properly. Generally, these mistakes are much harder to
catch, because elements will usually still work if there is no closing tag, but you may notice
some stylistic changes. For example, if you forget to close an anchor tag, the rest of the
text may show up as a hyperlink, which is much easier to catch relative to divs with an
unclosed tag.

6. End every attribute with a semicolon in CSS.

A huge mistake in rendering styles is that attributes are not separated with semicolons.
This will cause rendering issues. If your styles are not coming out the way you intended, it
is very likely that you are missing a semicolon. Semicolons are notorious for creating bugs
because they are such small pieces that are required for every programming language yet
sometimes they can be forgettable. Despite how little semicolons are, they are extremely
important to include for the proper functioning of elements in CSS.

<p id=“page-number”>93</p>
Section 4:
A Computer Science
History Gallery

<p id=“page-number”>94</p>
 Gallary: A History of Computer Science

"Bill Gates selling windows" by niallkennedy is licensed under CC

BY-NC 2.0 (no changes https://bit.ly/32oB7YL)

1975 — Bill gates founded Microsoft with the help of Co-founder Paul Allen. Microsoft has
become a multi-billion dollar company that has led the technology industry for decades
with their Windows operating system. They have since gone on to the gaming industry with
their XBOX consoles and video games.

<p id=“page-number”>95</p>
Gallary: A History of Computer Science

Image under CC 2.0 Wikipedia by James the

Photographer (no changes CC 2.0 https://bit.ly/3nDL3pB)

1997 — This is an image of Deep Blue, the first chess artificial intelligence computer that
was able to defeat the World Chess Champion, Garry Kasparov. This victory for Deep Blue
set into motion the revolution of artificial intelligence as a tool that could help advance the
use of computers to solve problems at a rate much faster than humans.

<p id=“page-number”>96</p>
Gallary: A History of Computer Science

ARPANET (Public Domain)

1966 — The ARPANET was created initially as a way to connect universities from all across
the United States, and was partially funded by the US Department of Defence. ARPANET
allowed universities to reliably exchange research and information without the need to mail
physical letters. Eventually ARPANET became the basis for the internet and is considered
to be the most primitive form of the internet.

<p id=“page-number”>97</p>
 Gallary: A History of Computer Science

ProducerMatthew under CC BY-SA 3.0 (no changes https://bit.ly/3DGCMqq)

2004 — Facebook was created in 2004 by Mark Zuckerberg and his roommates at Harvard
University. Facebook has since gone on to be a revolutionary platform for people to
communicate and connect with people from all across the world. Facebook has permitted
Mark Zuckerberg to become the world’s youngest billionaire. Facebook then went public in
2012, and has since expanded to other social media websites like Instagram and has made
a splash in the video game market with their Oculus products. Zuckerberg hopes to one
day create a “Metaverse” with his Oculus products, even changing the parent organization
from Facebook to “Meta.”

<p id=“page-number”>98</p>
Gallary: A History of Computer Science

Rafael Fernandez under CC BY-SA 4.0 (no changes https://bit.ly/3FyKLq3)

2008 — The inception of the first generation iPhone was an important moment in
technology as it set the precedent for the capabilities of a phone. Apple marketed the
iPhone as a powerful device that had the power of a computer and portability. Prior to the
original iPhone, most phones were not touch screen and had limited capabilities. To date,
the iPhone is still the most popular brand of phone and has set the precedent for the
possibilities that are capable within a phone.

<p id=“page-number”>99</p>
 Gallary: A History of Computer Science

Gortu (Public Domain)

1978 — While it doesn’t initially seem impressive, the creation of VisiCalc (Visible
Calculator ) was the precedent for modern spreadsheets. In reality most people didn’t
prefer to use computers back in the day because of their limited capabilities. However, the
creation of spreadsheets on computers (specifically VisiCalc on the Apple II) brought a
valuable addition for bankers, accountants, and finance for people who wished to keep
track of money or supply of goods through the process of spreadsheeting online, which
often saved time and energy.

<p id=“page-number”>100</p>
Gallary: A History of Computer Science

Muhandis (Public Domain)

1957 — Fortran stood stands for Formula Translation, and was initially used as a
programming language that worked with mathematical and scientific formula. It was the
precursor to modern programming languages.

<p id=“page-number”>101</p>
 :o
Forget about learning HTML and CSS in a
conventional way, and join Roshan Chunduri
as he explains basic HTML and CSS in a fun
and interactive way. With several puzzles,
quizzes, and terrible dad jokes, this is
the perfect place to learn web development
without being bored out of your mind! So
come along and learn about the interesting
world of web development!

<html>
<head>
<title>Building the Web: HTML and CSS </title>
</head>
<body>
<h1>By: Roshan Chunduri</h1>
</body>
</html>

:D