TATENDA J MAJIRA
HTML and CSS for newbies
Introduction to web development
First published by Imprint: Lulu.com 2022
Copyright © 2022 by Tatenda J Majira
All rights reserved. No part of this publication may be reproduced,
stored or transmitted in any form or by any means, electronic,
mechanical, photocopying, recording, scanning, or otherwise
without written permission from the publisher. It is illegal to copy
this book, post it to a website, or distribute it by any other means
without permission.
Tatenda J Majira asserts the moral right to be identified as the
author of this work.
Tatenda J Majira has no responsibility for the persistence or
accuracy of URLs for external or third-party Internet Websites
referred to in this publication and does not guarantee that any
content on such Websites is, or will remain, accurate or appropriate.
Designations used by companies to distinguish their products are
often claimed as trademarks. All brand names and product names
used in this book and on its cover are trade names, service marks,
trademarks and registered trademarks of their respective owners.
The publishers and the book are not associated with any product or
vendor mentioned in this book. None of the companies referenced
within the book have endorsed the book.
First edition
Cover art by MUB
This book was professionally typeset on Reedsy.
Find out more at reedsy.com
I want to express my gratitude to my sister for her encouragement
and support throughout the writing process of this book. Her
motivation played a crucial role in helping me complete it.
Additionally, I dedicate this book to her as a token of appreciation
for her encouragement and as an inspiration for her to learn HTML
and CSS.
Contents
Acknowledgments iv
Foreword v
Introduction vii
1 Chapter 1 1
Getting Started 1
Text editor 1
Steps on how to create a new html page file 2
2 Chapter 2 8
Introduction 8
What is HTML and CSS ? 8
HTML 9
CSS 9
Differences between HTML and CSS 11
3 Chapter 3 13
There many HTML tags but we going to
show you the basic and most important
ones so that you might be able to make
your own basic web page after reading this book. 17
4 Chapter 4 20
<meta> 20
5 Chapter 5 22
<head> </head> 22
6 Chapter 6 23
<body> </body> 23
7 Chapter 7 25
<h1></1> to <h6></h6> 25
8 Chapter 8 27
<p></p> 27
9 Chapter 9 29
<img> 29
10 Chapter 10 32
<li> </li> 32
Unordered List <ul></ul> 33
Ordered List <ol></ol> 33
11 Chapter 11 35
<table></table> 35
12 Chapter 12 37
<input> 37
13 Chapter 13 43
<form> </form> 43
14 Chapter 14 46
<a href = “” ></a> 46
15 Chapter 15 51
<style></style> 51
16 Chapter 16 53
Id and class 53
17 Chapter 17 55
18 Chapter 18 61
19 Chapter 19 63
Color 63
20 Chapter 20 65
Font Size 65
21 Chapter 21 67
Background Color 67
22 Chapter 22 69
Height/Width 69
23 Chapter 23 71
Border 71
24 Chapter 24 74
Background Image 74
25 Chapter 25 76
Border-Radius 76
About the Author 81
Also by Tatenda J Majira 83
Acknowledgments
I would like thank everyone who worked on HTML and CSS
for creating something that is worth writing a book for and
also everyone who read the book before it was published and
gave feedback .Not forgetting the MUB organization and team
that helped on publishing the book.
iv
Foreword
Welcome to “HTML and CSS for Newbies”!
In the ever-evolving landscape of technology, the ability to
understand and utilize programming languages has become
increasingly valuable. Among these languages, HTML and CSS
serve as the fundamental building blocks of the web. Whether
you’re a budding developer, a curious beginner, or simply
someone looking to expand their digital skill set, this book
is designed to provide you with a solid foundation in HTML
and CSS.
As the author of this book, Tatenda Josiah Majira, understands
the challenges that newcomers face when diving into the world
of web development. He has crafted this guide with the aim
of demystifying HTML and CSS, making them accessible to
anyone with the desire to learn. Through clear explanations,
practical examples, and hands-on exercises, Tatenda will take
you on a journey from the basics to more advanced concepts,
empowering you to create your own web pages and style them
to perfection.
Whether you dream of building your own website, pursuing a
v
career in web development, or simply want to better understand
the technology shaping our digital world, “HTML and CSS for
Newbies” is your starting point. Embrace the adventure ahead,
and let’s embark on this learning journey together.
Happy coding!
Tatenda Josiah Majira
vi
Introduction
In the vast landscape of web development, HTML and CSS
stand as the cornerstone technologies that shape the digital
world we interact with every day. HTML (Hypertext Markup
Language) provides the structure and content of web pages,
while CSS (Cascading Style Sheets) adds the visual presentation,
defining how those pages look and feel.
HTML serves as the skeleton of the web, providing a markup
language that structures content into elements such as headings,
paragraphs, images, and links. It forms the backbone of every
web page, organizing information in a hierarchical manner and
creating the foundation upon which websites are built.
On the other hand, CSS is the stylistic layer that breathes life
into HTML elements. With CSS, developers can control the
layout, typography, colors, and overall appearance of a web
page. By separating the content from its presentation, CSS
enables flexibility and consistency across a website, making it
easier to maintain and update.
Together, HTML and CSS empower developers to create
stunning and interactive web experiences that engage users
vii
and deliver information effectively. Whether you’re building a
personal blog, an e-commerce platform, or a corporate website,
mastering these technologies is essential for anyone venturing
into the realm of web development.
In this book, we’ll embark on a journey to explore the funda-
mentals of HTML and CSS, from the basics to more advanced
concepts. We’ll learn how to structure web pages, style them
with CSS, and create responsive designs that adapt to different
devices and screen sizes. Along the way, we’ll build practical
projects and gain hands-on experience to solidify our under-
standing of these essential web technologies.
Whether you’re a complete beginner or an experienced devel-
oper looking to brush up on your skills, this book is designed
to be your comprehensive guide to HTML and CSS. Let’s dive
in and unlock the endless possibilities of web development
together.
viii
1
Chapter 1
Getting Started
Text editor
First of all for you to start writing html or css you need to
have a text-editor in your laptop or phone .A text editor is an
application for writing text and saving them as a file eg Notepad
.
Examples of text editors :
1
HTML AND CSS FOR NEWBIES
I recommend you to download Sublime-text because its small
in size and easy to use .To install go to sublime https://www.su
blimetext.com/3
Steps on how to create a new html page file
1. Click File
2. Click New File
3. Press CTRL + S to save
2
CHAPTER 1
The window below will pop up after pressing CTRL + S and
then you type the name you want to give to the page .Inside the
File name box is where you type the name you want to give to
your html file.
3
HTML AND CSS FOR NEWBIES
4
CHAPTER 1
Note that after typing the name of page put .html so that it will
be saved as a webpage for it to open on a browser .The name of
my page is newbies.html.
If you don’t add .html on the file name of your page it won’t
open on browsers.
The same steps are done when you want to create a css file
.The difference is that when it is css you save your file as name
of file .css .
5
HTML AND CSS FOR NEWBIES
Your html file should have an icon of a web browser you use
.Mine has a google chrome icon because my default browser is
google.
6
CHAPTER 1
7
2
Chapter 2
Introduction
What is HTML and CSS ?
8
CHAPTER 2
HTML
HTML stands for Hypertext Markup Language.HTML defines
the structure of web page.
Don’t forget HTML defines the skeleton of a web page eg
paragraphs ,headers ,footers ,sections etc
CSS
HTML stands for Cascading Style Sheets.CSS defines the style
( visual ) of web page.
Don’t forget HTML defines the skin of a web page eg color
,background ,font ,border etc
9
HTML AND CSS FOR NEWBIES
From the above example the skeleton represents HTML and
then the man in suit represents CSS . The clothes and skin is
what we are calling styling or CSS.
10
CHAPTER 2
Differences between HTML and CSS
If HTML is the skeleton of your page, CSS is the skin .Without
CSS, your websites would look rather boring, dull, and, dare we
say, naked. In CSS, there is a property and a value. Property is
the quality you want to change; value is the amount of change.
1. HTML is basically a standard markup language for describ-
ing the structure of web pages, whereas CSS is the style sheet
language for describing the presentation and design of web
pages.
2. HTML is easy to learn and has clear syntax, whereas CSS can
sometimes get messy and can create complications in codes.
3. CSS is independent of HTML, and it can be used with any
XML-based markup language, whereas this is not the same case
11
HTML AND CSS FOR NEWBIES
with HTML.
4. The HTML file can contain CSS codes, but on the other
hand, CSS can never contain HTML codes in it.
5. HTML provides tags which are surrounding the content
of any web page elements, whereas CSS consists of selectors
which are surrounded by a declaration block
6. CSS has fragmentation, but HTML doesn’t produce any such
problems. 7. CSS uses a much lesser code and thus produce
much lesser web page loading time than HTML
12
3
Chapter 3
13
HTML AND CSS FOR NEWBIES
<HTML TAGS>
14
CHAPTER 3
15
HTML AND CSS FOR NEWBIES
16
CHAPTER 3
There many HTML tags but we going to show you
the basic and most important ones so that you
might be able to make your own basic web page
after reading this book.
HTML tags and their descriptions
17
HTML AND CSS FOR NEWBIES
Example of a basic HTML page
18
CHAPTER 3
Note the highlighted text are the tags that are inside the body
tag <p></p> and <h1></h1>
19
4
Chapter 4
<meta>
<meta name=“description” content=”Teaching newbies how to
code using HTML and CSS”>
20
CHAPTER 4
Information or values that are put inside the meta tag are the
one that we see when we search for something as on the picture
below
21
5
Chapter 5
<head> </head>
Inside the head tag is where we find meta tag , style tag (where
we put our CSS ) and links.
22
6
Chapter 6
<body> </body>
The <body> tag defines the document’s body. The <body>
element contains all the contents of an HTML document, such
as headings, paragraphs, images, hyperlinks, tables, lists, etc.
Note: There can only be one <body> element in an HTML
document.
23
HTML AND CSS FOR NEWBIES
24
7
Chapter 7
<h1></1> to <h6></h6>
These tags are used to define HTML headings.
25
HTML AND CSS FOR NEWBIES
If you notice each and every H tag represents a certain size for
a text.
26
8
Chapter 8
<p></p>
This tag defines a paragraph.
27
HTML AND CSS FOR NEWBIES
28
9
Chapter 9
<img>
The <img> tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images
are linked to web pages. The <img> tag creates a holding space
for the referenced image.
The <img> tag has two required attributes:
• src - Specifies the path to the image
• alt - Specifies an alternate text for the image, if the image
for some reason cannot be displayed
29
HTML AND CSS FOR NEWBIES
30
CHAPTER 9
Note that inside the source (src) is where u put the path where
the image is located on and then the image name .In the above
example the name of my image is newbies.jpg. Make sure the
html file is in the same folder with image and CSS files.
31
10
Chapter 10
<li> </li>
These tags are used to group a set of related items in lists
32
CHAPTER 10
Unordered List <ul></ul>
An unordered list starts with the <ul> tag.Each list item starts
with the <li> tag.
Ordered List <ol></ol>
An ordered list starts with the <ol> tag. Each list item starts
with the <li> tag.
The list items will be marked with numbers by default:
The HTML <ol> tag defines an ordered list. An ordered list can
be numerical or alphabetical.
33
HTML AND CSS FOR NEWBIES
34
11
Chapter 11
<table></table>
Theses tags are used to arrange data into rows and columns.
35
HTML AND CSS FOR NEWBIES
36
12
Chapter 12
<input>
These tags are used when we want to get user input from eg
register form , login form .
Types of input elements :
• <input type=“button”>
• <input type=“checkbox”>
• <input type=“color”>
• <input type=“date”>
• <input type=“datetime-local”>
• <input type=“email”>
• <input type=“file”>
• <input type=“hidden”>
• <input type=“image”>
• <input type=“month”>
• <input type=“number”>
37
HTML AND CSS FOR NEWBIES
• <input type=“password”>
• <input type=“radio”>
• <input type=“range”>
• <input type=“reset”>
• <input type=“search”>
• <input type=“submit”>
• <input type=“tel”>
• <input type=“text”>
• <input type=“time”>
• <input type=“url”>
• <input type=“week”>
38
CHAPTER 12
As you can see the output of the inputs tags on the webpage
presented well .To put them in order we use the <br> it breaks
or creates a new empty line
39
HTML AND CSS FOR NEWBIES
40
CHAPTER 12
41
HTML AND CSS FOR NEWBIES
The name of the input element determines type of data allowed
or the output to b displayed on the page .For you to be able to
collect information from the user most of the input elements
are put inside the form tag <form><form> which we will talk
about in next chapter.
42
13
Chapter 13
<form> </form>
This <form> element is used to create an HTML form for user
input:
43
HTML AND CSS FOR NEWBIES
<label> </label>
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because
the screen-reader will read out loud the label when the user
focus on the input element.
The id attribute specifies a unique id for an HTML element.
The value of the id attribute must be unique within the HTML
document.
The id attribute is used to point to a specific style declaration
in a style sheet.
44
CHAPTER 13
45
14
Chapter 14
<a href = “” ></a>
Links are found in nearly all web pages. Links allow users to
click their way from page to page.
Links - Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will
turn into a little hand
<a href =“url”>link text</a>
The most important attribute of the <a> element is the href
attribute, which indicates the link’s destination.
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified
URL address.
<a href=“https://www.google.com/”>Google</a>
46
CHAPTER 14
If you click on the text Google it will direct you to Google page
47
HTML AND CSS FOR NEWBIES
Links or <a></a> can be used to link your html pages .In
the following example we going to create a html file called
newbies2.html so that we can locate it from newbie.html we
have already created. Make sure both your html files are in the
same folder.
Inside the newbies2.html file write
48
CHAPTER 14
Now go to the newbie.html file and put a link like below.
Now click on the link below and it will direct you to newbies2
page.
49
HTML AND CSS FOR NEWBIES
Newbies2 page
So far we have covered the basic and most important html
elements therefore what is left is for you to know how to style
html elements
50
15
Chapter 15
<style></style>
The HTML style attribute is used to add styles to an element,
such as color, font, size, and more.
<tagname style=“property:value;”>
This tag can be used inside the head tag to style elements inside
the body but for the mean time will focus on styling inside the
tag.
51
HTML AND CSS FOR NEWBIES
52
16
Chapter 16
Id and class
53
HTML AND CSS FOR NEWBIES
Below is how you use the IDs and Classes inside the <style>
using css .
54
17
Chapter 17
Like discussed in the the first chapter css is used for styling the
html page or elements .
55
HTML AND CSS FOR NEWBIES
Example:
56
CHAPTER 17
External stylesheet is circled in red
Internal stylesheet is circled in blue
Inline stylesheet is circled in yellow
Tips :
We can link styles.css to newbies.html by adding the following
line to the <head> of our HTML doc:
<head>
// …
<link rel=“stylesheet” href=“css/style.css”></head>
How to create an external stylesheet
Create a new file and name it styles.css .CSS files are saved
with .css so that the styles will load and not be respond as plain
57
HTML AND CSS FOR NEWBIES
text.
58
CHAPTER 17
Inside the styles.css is where we put our css codes .Now we
have to link our external css stylesheet (styles.css) inside the
head of our newbies.html for us to be able to style the elements
while we are not inside the html file.
59
HTML AND CSS FOR NEWBIES
60
18
Chapter 18
Common CSS Properties
Color
Font Size
Background Color
Background
61
HTML AND CSS FOR NEWBIES
Height/Width
Box Model (Margin/Padding)
Border
Border Radius
We are going to use the above css properties in our external
stylesheet that we have created to style newbies.html
Inside our newbies.html file put the following elements
Then inside our styles.css we going to start styling using the
color property:
62
19
Chapter 19
Color
This is most used property in css .It is used for changing the
text color .
There are multiple valid formats for color values, however
the most common are hex values, rgba and named colors
/* Hex Value */
color: #000000;
/* RGBA */
color: rgba(0, 0, 0, 0.3);
/* Named Colors */
color: black;
As newbies using named colors is much easier and simple
63
HTML AND CSS FOR NEWBIES
64
20
Chapter 20
Font Size
This property is used to specify the size of text .
The font-size property allows us to change the size of the font
for any text based content. This includes <h1> to <h6> tags ,
<a> tag,<p> tags etc
65
HTML AND CSS FOR NEWBIES
In real world we use cm or inches when specifying th size of
something but in css and html we use pixels ( px ) .
66
21
Chapter 21
Background Color
The background-color property allows you to set the
background-color of an HTML element. Just like text color,
the value of this property can be a hex value, rgba or named
color.
The background color can be set like so:
67
HTML AND CSS FOR NEWBIES
68
22
Chapter 22
Height/Width
The height and width properties specify the height and width of
a HTML element respectively. There are many different values
you can apply to both of these properties, but for this tutorial
we’ll focus on pixels (px) and percentages (%)
69
HTML AND CSS FOR NEWBIES
Note that the width and height of the <p> text has changed
70
23
Chapter 23
Border
The border property allows you set a border for your HTML
element. We can create a border around our <img> element
with the following syntax:
71
HTML AND CSS FOR NEWBIES
72
CHAPTER 23
As you can see the image is now surrounded by a blue border.
73
24
Chapter 24
Background Image
The background-image property allows us to add a background
image to an HTML element. This is similar to the background
color, however an image is shown instead of a color.
We are going to put a background image on the h1 tag
74
CHAPTER 24
75
25
Chapter 25
Border-Radius
The border-radius property allows you to add rounded corners
of a HTML elements. This can be especially useful for adding
rounded corners to buttons and images.
In action, if we wanted to round the corners of an <img>
element, we could add the following in our stylesheet:
76
CHAPTER 25
Note that the image will change on its corners after styling with
border-radius property
77
HTML AND CSS FOR NEWBIES
78
CHAPTER 25
79
HTML AND CSS FOR NEWBIES
80
About the Author
Tatenda Josiah Majira is a seasoned web developer, educator,
and author passionate about making technology accessible
to everyone. With years of experience in the field of web
development, Tatenda has honed his skills in HTML, CSS, and
various other programming languages.
Throughout his career, Tatenda has worked on numerous
web development projects, ranging from personal blogs to
complex e-commerce websites. His hands-on experience has
equipped him with practical insights into the challenges faced
by beginners in the field, inspiring him to create educational
resources to simplify the learning process.
Driven by a desire to empower others, Tatenda has dedicated
himself to teaching and mentoring aspiring developers. He
believes that everyone should have the opportunity to learn
and thrive in the ever-evolving world of technology. Through
81
his writing, workshops, and online courses, Tatenda strives
to make complex concepts understandable and applicable to
learners of all backgrounds.
“HTML and CSS for Newbies” is the latest addition to Tatenda’s
portfolio of educational materials. Drawing from his wealth of
experience and expertise, Tatenda has crafted a comprehensive
guide that breaks down the core principles of HTML and CSS in
a clear and accessible manner. His goal is to equip readers with
the skills they need to create their own websites and embark
on their journey in web development with confidence.
Beyond his work in web development and education, Tatenda
is known for his dedication to community engagement and
advocacy for diversity and inclusion in the tech industry. He
actively participates in outreach programs and initiatives aimed
at bridging the digital divide and creating opportunities for
underrepresented groups in technology.
As an author, educator, and advocate, Tatenda Josiah Majira
continues to inspire and empower individuals to pursue their
passion for technology and embark on meaningful journeys in
the world of web development.
82
Also by Tatenda J Majira
Summoning a demon AI
Exploring the Dark Side of Artificial
Intelligence” delves into the shadows of
technology to uncover the darker implica-
tions of artificial intelligence. Written by
computer systems engineer Tatenda Majira,
this thought-provoking book examines the
ethical dilemmas, societal impacts, and
potential risks associated with AI, from privacy violations
and algorithmic biases to job displacement and the erosion
of human autonomy. Through insightful analysis and real-
world examples, Tatenda Majira navigates the complexities of
AI’s dark side, challenging readers to confront the ethical and
social implications of unleashing advanced AI technologies. A
must-read for anyone interested in understanding the darker
dimensions of AI and its impact on society.
83
