Master HTML & CSS
Master HTML & CSS
Learn HTML & CSS the right way, from basics to advanced
About the Book
This book will teach you two languages that the browsers are using to render a Web Page. HyperText Markup Language (HTML), which is used to structure the Web Page with visual elements, and CSS (Cascading StyleSheets), which is used to tell things about the look and feel of the content, like the font size and the color. It starts from the basics and takes you to an advanced level.
Table of Contents
- Credits To Photo on Cover Page
- About and Copyright Notice
-
HTML & CSS
-
Chapter 1 - Introduction
- Summary
- Learning Goals
- What is HTML
- What is CSS
- Tasks and Quizzes
-
Chapter 2 - Setup Development Environment
- Summary
- Learning Goals
- Setup your development environment
- We are using Linux
- Linux Users - Ideal Environment
- Windows Users - Let’s get a Linux
- HTML & CSS Editor
- Tasks
-
Chapter 3 - Hello World!
- Summary
- Learning Goals
- Hello World Page
- Write the HTML code
- View your HTML page on your browser
- Tasks
-
Chapter 4 - Minimum HTML Document
- Summary
- Learning Goals
- Minimum HTML Document
-
One
html
tag -
One
head
and onebody
like humans -
Let’s fill in the
<head>
- The title of our page
-
Let’s fill in the
<body>
- Tasks and Quizzes
-
Chapter 5 - Heading Tags
- Summary
- Learning Goals
- Heading Tags
- Tasks
-
Chapter 6 - About White Space
- Summary
- Learning Goals
- About White Space
-
Line break HTML tag
<br>
- White spaces between words
- Tasks
-
Chapter 7 - HTML Entities
- Summary
- Learning Goals
- HTML Entities
- Some Common Ones
- HTML reserved characters
- Currencies
- Special Alphabet Characters
- Other Symbols
- Full References
- Tasks & Quizzes
-
Chapter 8 - Paragraphs, Horizontal Lines And Comments
- Summary
- Learning Goals
- Paragraphs, Horizontal Lines and Comments
- Paragraphs
- Horizontal Lines
- Comments
- Tasks
-
Chapter 9 - HTML Lists
- Summary
- Learning Goals
- Lists
- Unordered Lists
- Ordered Lists
- Nested Lists
- Tasks
-
Chapter 10 - HTML Tables
- Summary
- Learning Goals
- Tables
- Starting and closing tags
- Rows of the table
- Columns of the table
- Table Head and Table Body
- Head Cells
- Cell spacing
- Cell padding
- Column Span
- Aligning
- Row span
- Styling tables
- Tables and Emails
- Tasks & Quizzes
- Quiz:
-
Chapter 11 - First Simple CSS Rules
- Summary
- Learning Goals
- First Simple CSS Rules
- Style Rules and CSS Language
- Default style values
-
Set the color of the text -
color
-
Set the text size -
font-size
-
Set border -
border
-
Set background / fill color -
background-color
-
The
<style>
tag - The reference to the CSS file
- Tasks
-
Chapter 12 - First Encounter With CSS Selectors
- Summary
- Learning Goals
- First Encounter with CSS Selectors
- Selecting by the HTML tag name
- Specificity - Containing-Contained Relationships
- Multiple selectors
- Tasks
-
Chapter 13 - More Advanced CSS Selectors
- Summary
- Learning Goals
- More Advanced CSS Selectors
-
id
attribute - CSS Selecting elements by id
-
The
class
attribute - Combining class selection with tag name selection
- Multiple classes on same element
- Tasks
-
Chapter 14 - Talk About Color
- Summary
- Learning Goals
- Let’s Talk about Color
- Text Color and Background Color
- Specifying the color value
- RGB Color With Transparency
- Tasks
-
Chapter 15 - Formatting Parts Of Text
- Summary
- Learning Goals
- Formatting parts of text
-
span
tag - HTML formatting tags
- Closing note
- Tasks
-
Chapter 16 - CSS Box Model
- Summary
- Learning Goals
- CSS Box Model
- Boundaries of Body
- Visible Border Box
- Padding Area
- Margin Area
- CSS Box Model again
- Use Chrome Developer Tools
- Width and Box Sizing
- Line Height
- Inherited and Non-Inherited values
- Applying Rule To All Elements
-
Why
body
background-color covers the whole canvas? - Tasks
-
Chapter 17 - Block And Inline Elements
- Summary
- Learning Goals
- Block and Inline HTML Elements
- Block HTML Elements
- Inline HTML Elements
- Default Block Elements
- Default Inline Elements
- Setting width and height for inline elements
- Closing Note
- Tasks
-
Chapter 18 - Dividing Page To Sections Using Divs
- Summary
- Learning Goals
-
Dividing Page to Sections Using
<div>
- Step 1: Empty Page
- Step 2: Let’s set the basic rules
- Step 3: Dividing our page
- Step 4 - Left Column
- Step 5 - Middle Column
- Step 6 - Right Column
-
Step 7 - Use
float
to position the elements. - Step 8 - Footer
-
Step 9 - Fixing footer problem with
clear
- Final Styling Touches
- Tasks
-
Chapter 19 - HTML Links
- Summary
- Learning Goals
- HTML Links
-
<a>
tag -
http://
orhttps://
- Anything a link
- Styling the Anchor Links
- Style links as buttons
- Side Note - CSS comments
- Links within the same page - Bookmarks
- Links to Other Pages within Same Site
- Styling the links on navigation bar
- Tasks
-
Chapter 20 - Deploying Our Work
- Summary
- Learning Goals
- Deploying Our Work
- Static Sites
- Sites are hosted on Servers
- Companies Offering Hosting
- Netlify - Create an Account
- Deploy our first Site
- Deploying a Site with Stylesheets/CSS
- Deploying to Netlify using the command line
- Netlify Optimizes our CSS
- Disable Optimization of your CSS content
- Tasks
-
Chapter 21 - Images
- Summary
- Learning Goals
- Images
- Image Files
-
<img>
tag -
The
src
attribute -
The
alt
and thetitle
attributes - Image size
- Images as Links
- Text Around Images
- Images and line height
- Using images stored on our site
- Tasks
-
Chapter 22 - Image Backgrounds
- Summary
- Learning Goals
- Image Backgrounds
-
Image as a
body
background - Let’s Be More Accurate
- How To Stop Propagation
- Body Without Content is Not Displayed
- Adding Content to Body
-
Make
body
High Enough - Remove Margin
- Where is The Happy Dogs Text?
- One Image to Cover Whole Page
- Center Image
- Cover The Whole Body
- Adding Text On the Page
- Make the Image Fixed
- Use A Big Image
- Background Images on Parts of Page
- Bottom Margin Will Not Work
- A Blank Div Will Do
- Why Bottom Margin Didn’t Work?
- Move Background to HTML instead
- DRYing our Code
- Background Size
- Background Color
-
background
shorthand property - Tasks
-
Chapter 23 - Element Positioning
- Summary
- Learning Goals
- Element Positioning
- Inline Elements
- Block Elements
- Float Property
- Clear Property
- Positioning Relative to Browser Window
- Positioning Element Relative To Their Normal Position
- Positioning Elements Relative To Other Element
- Positioned Elements
-
z-index
- Tasks
-
Chapter 24 - CSS Units
- Summary
- Learning Goals
- CSS Units
- Everything is pixels
- Absolute Units
- Default Font Size
- Default Font Size and Absolute Units
- Relative Units
- Tasks
-
Chapter 25 - Collapsing Margins
- Summary
- Learning Goals
- Collapsing Margins
- What is collapsing margins?
- Parents and Children
- How can we preserve both parent and children margins?
- How can we eliminate the collapsing vertical margins phenomenon?
- Why do the vertical margins collapse?
- Closing Suggestion
- Tasks
-
Chapter 26 - Fonts and Typeface
- Summary
- Learning Goals
- Fonts and Typeface
- Font Families
- General Families
- Specifying Font Family with CSS
- Default Font Families
- Safe CSS Font Stacks
- Make Sure Browser Is Using the Font We Want
- Other Properties of the Fonts
- Tasks
-
Chapter 27 - HTML Forms
- Summary
- Learning Goals
- HTML Forms
-
input
oftype="text"
-
label
-
select
-
input
oftype=submit
-
form
- Input elements’ ID
-
autofocus
-
label
for
attribute -
required
- Sign Up Form
-
input
withtype
email
-
input
withtype
password
-
input
withtype
checkbox
- Multiple Checkboxes
- Multiple Select Box
-
input
oftype
radio
-
checked
attribute -
textarea
-
placeholder
attribute -
title
-
autocomplete
attribute -
input
withtype
number
-
min
andmax
attributes -
step
attribute -
input
withtype
range
-
value
attribute - Grouping Selection Options
-
input
oftype
color
-
input
oftype
date
-
input
oftype
file
- Grouping Form Fields
- Tasks
-
Chapter 28 - Advanced CSS Selectors
- Summary
- Learning Goals
- Pseudo-classes
- Pseudo-elements
- Other CSS Selectors
- Tasks
-
Chapter 29 - HTML5
- Summary
- Learning Goals
- HTML5
- Semantic Elements
- HTML5 Graphics
- HTML5 Multimedia
- Tasks
-
Chapter 30 - Some Other HTML Elements
- Summary
- Learning Goals
-
iframe
-
blockquote
-
code
andpre
- Tasks
-
Chapter 31 - Mobile Friendly Web Pages
- Summary
- Learning Goals
- Introduction
- The Viewport
- Media Queries
- A more complex example page with responsive design
- Loading CSS files with media query
- Responsive Images
- Responsive Videos
- Responsive Frameworks
- Tasks
-
Chapter 1 - Introduction
Causes Supported

Code Club
https://www.codeclub.org.ukA nationwide network of volunteer-led after school coding clubs for children aged 9-11.
Authors have earned$9,894,850writing, publishing and selling on Leanpub, earning 80% royalties while saving up to 25 million pounds of CO2 and up to 46,000 trees.
Learn more about writing on Leanpub
The Leanpub 45-day 100% Happiness Guarantee
Within 45 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.
See full terms
Free Updates. DRM Free.
If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).
Most Leanpub books are available in PDF (for computers), EPUB (for phones and tablets) and MOBI (for Kindle). The formats that a book includes are shown at the top right corner of this page.
Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.
Learn more about Leanpub's ebook formats and where to read them
Top Books
C++ Best Practices
Jason TurnerLevel up your C++, get the tools working for you, eliminate common problems, and move on to more exciting things!
OpenIntro Statistics
David Diez, Christopher Barr, Mine Cetinkaya-Rundel, and OpenIntroA complete foundation for Statistics, also serving as a foundation for Data Science.
Leanpub revenue supports OpenIntro (US-based nonprofit) so we can provide free desk copies to teachers interested in using OpenIntro Statistics in the classroom and expand the project to support free textbooks in other subjects.
More resources: openintro.org.
Functional Design and Architecture
Alexander GraninSoftware Design in Functional Programming, Design Patterns and Practices, Methodologies and Application Architectures. How to build real software in Haskell with less efforts and low risks. The first complete source of knowledge.
C++20
Rainer GrimmC++20 is the next big C++ standard after C++11. As C++11 did it, C++20 changes the way we program modern C++. This change is, in particular, due to the big four of C++20: ranges, coroutines, concepts, and modules.
The book is almost daily updated. These incremental updates ease my interaction with the proofreaders.
Atomic Kotlin
Bruce Eckel and Svetlana IsakovaFor both beginning and experienced programmers! From the author of the multi-award-winning Thinking in C++ and Thinking in Java together with a member of the Kotlin language team comes a book that breaks the concepts into small, easy-to-digest "atoms," along with exercises supported by hints and solutions directly inside IntelliJ IDEA!
Introductory Statistics with Randomization and Simulation
Mine Cetinkaya-Rundel, Christopher Barr, OpenIntro, and David DiezA complete foundation for Statistics, also serving as a foundation for Data Science, that introduces inference using randomization and simulation while covering traditional methods.
Leanpub revenue supports OpenIntro, so we can provide free desk copies to teachers interested in using our books in the classroom.
More resources: openintro.org.
Java OOP Done Right
Alan MellorObject Oriented Programming is still a great way to create clean, maintainable code. But only if you use it right.
This book gives you 25 years of OO best practice, ready to use.
You'll learn to design objects behaviour-first, use TDD to help, then confidently apply Design Patterns, SOLID principles and Refactoring to make clean, crafted code.
R Programming for Data Science
Roger D. PengThis book brings the fundamentals of R programming to you, using the same material developed as part of the industry-leading Johns Hopkins Data Science Specialization. The skills taught in this book will lay the foundation for you to begin your journey learning data science. Printed copies of this book are available through Lulu.
Ansible for DevOps
Jeff GeerlingAnsible is a simple, but powerful, server and configuration management tool. Learn to use Ansible effectively, whether you manage one server—or thousands.
Composing Software
Eric ElliottAll software design is composition: the act of breaking complex problems down into smaller problems and composing those solutions. Most developers have a limited understanding of compositional techniques. It's time for that to change.
Top Bundles
- #1
Software Architecture for Developers: Volumes 1 & 2 - Technical leadership and communication
2 Books
"Software Architecture for Developers" is a practical and pragmatic guide to modern, lightweight software architecture, specifically aimed at developers. You'll learn:The essence of software architecture.Why the software architecture role should include coding, coaching and collaboration.The things that you really need to think about before... - #2
CCIE Service Provider Ultimate Study Bundle
2 Books
Piotr Jablonski, Lukasz Bromirski, and Nick Russo have joined forces to deliver the only CCIE Service Provider training resource you'll ever need. This bundle contains a detailed and challenging collection of workbook labs, plus an extensively detailed technical reference guide. All of us have earned the CCIE Service Provider certification... - #3
Cisco CCNA 200-301 Complet
4 Books
Ce lot comprend les quatre volumes du guide préparation à l'examen de certification Cisco CCNA 200-301. - #4
CCDE Practical Studies (All labs)
3 Books
CCDE lab - #5
Modern Management Made Easy
3 Books
Read all three Modern Management Made Easy books. Learn to manage yourself, lead and serve others, and lead the organization. - #6
The Future of Digital Health
6 Books
We put together the most popular books from The Medical Futurist to provide a clear picture about the major trends shaping the future of medicine and healthcare. Digital health technologies, artificial intelligence, the future of 20 medical specialties, big pharma, data privacy and how technology giants such as Amazon or Google want to conquer... - #7
Django for Beginners/APIs/Professionals
3 Books
- #8
Linux Administration Complet
4 Books
Ce lot comprend les quatre volumes du Guide Linux Administration :Linux Administration, Volume 1, Administration fondamentale : Guide pratique de préparation aux examens de certification LPIC 1, Linux Essentials, RHCSA et LFCS. Administration fondamentale. Introduction à Linux. Le Shell. Traitement du texte. Arborescence de fichiers. Sécurité... - #9
Advanced Product Management
3 Books
Get The Art of Strategy, Product Discovery and Lean Product Management with a 20% discount. - #10
C++17 in Detail and Lambda Story
2 Books
Get all of my books much cheaper! With this package, you'll learn the exciting things available in C++17 and also understand lambda expressions.