Learn HTML & CSS from beginner to expert

Mohammed MASTAFI

Copyright © 2025 Mohammed MASTAFI. All rights reserved.

Published by Mohammed MASTAFI

ISBN: 978-1-326-66474-9

Imprint: Lulu.com

No reproduction, storage in a retrieval system or transmission in any form whatsoever may be made without the prior written permission of the publisher, except for brief quotations incorporated in critical articles or reviews.

Every effort has been made to ensure the accuracy of the information presented in this book. However, the examples contained in this book are provided functional at the time of writing in the context of specific browser versions and versions of HTML and CSS. Neither the author, nor the publisher, nor their distributors and resellers can be held responsible for any direct or indirect damage resulting from this book.

About the author

Mr. Mastafi is a prominent figure in the academic realms of computer science, mathematics, and data science. As an experienced university lecturer and researcher specializing in digital technologies, he stands out for his expertise in IT development, extensive experience in both online and face-to-face teaching, and his commitment to crafting high-quality training programs.

With an impressive academic trajectory, Mastafi earned a PhD and a Master's degree in computer science, shaping his professional journey towards teaching and research. He has significantly contributed to advancing knowledge in digital technologies, publishing numerous scientific articles and books.

As an accomplished educator, Mastafi has led various international workshops and seminars at prestigious institutions worldwide. His outstanding pedagogical skills and ability to simplify intricate concepts have made him a beloved teacher among his students. Renowned for his enthusiasm in imparting skills in computer science, mathematics, and data science, he has inspired multiple generations of learners. Additionally, he provides training to professionals, aiding them in refining their skills.

Beyond his teaching endeavors, Mastafi conducts innovative research in the realm of digital technologies. His work, featured in top-tier academic journals, has left a substantial impact on both industry and the academic community.

In essence, Monsieur Mastafi epitomizes excellence in university teaching and research in digital technologies. His dedication to education and innovation has positioned him as a leading figure in academic and professional circles, leaving an enduring mark on the fields of computer science, mathematics, and data science.

Thanks

Thanks to all those who contributed to this book. A special thanks to the participants, who have been real testers and debuggers of the code examples along the way.

A special thank you to all open-source developers and tutorial providers, offering training to every Internet user wishing to learn more about programming.

Table des matières

About the author

Thanks

Foreword

PART 1:

LEARNING AND MASTERING HTML

Chapter 1

The fundamentals of HTML

What is HTML?

How HTML works

How do browsers recognize HTML files?

How do you structure a web page?

Header

Page body

Navigation bar (Nav) :

Footer :

DOCTYPE Declaration ()

The tag

Section

Section

The

What do you need to code in HTML?

A Text Editor

Visual Studio Code

Sublime Text

A Web browser

Creating an HTML File

How do I display HTML source code?

Conclusion

Chapter 2

HTML tags : Building blocks

Title tags (

,

,

, etc.)

Paragraphs (

)

Hypertext links ()

Back to the line

Horizontal line in HTML

The pre-formatting tag

HTML elements: what are they?

HTML Attributes

What is an HTML Attribute?

Style attributes

Conclusion

Chapter 3

Styling Your Page with Formatting Tags

Bold text

The tag

The tag

Text in italics

The tag

The tag:

The

tag

The tag

The title attribute :

The tag

The tag

The _tag

The ^tag

The

The

HTML comments

Conclusion

Chapter 4

HTML lists - Structuring information

Ordered HTML lists

List in lowercase letters (type=a)

List in uppercase letters (type=A)

List in lower-case Roman numerals (type=i)

List in uppercase Roman numerals (type=I)

Unordered lists (

)

Definition lists: term and definition

Nested HTML lists: In-depth structuring

Nested ordered list

Nested unordered list

Best Practices for Nested Lists

Avoiding excessive nesting

Using the right markers

Managing presentation with CSS

Testing on different devices

Conclusion

Chapter 5

Hypertext links in HTML

Creating Hypertext Links

Absolute links

Related links

Link between pages in the same folder :

Link between site pages in different folders

Link from home.html to page1.html :

Link from page1.html to page2.html :

Link from page2.html to page1.html :

Summary:

Links to files

Internal links (Anchors on the same page) :

Link to an e-mail address

How to create a link to an e-mail address

Advanced options

Conclusion

The Tag: Gateway to Links

Internal and external links

Anchor Links: Navigate Inside a Page

Hypertext links and user experience

Chapter 6

HTML images

Tag : Insert Images

Control Image Size

Image captions

Images as links

The Image Wrapping Element

Using Button Images

The title attribute in the tag

Conclusion

Chapter 7

The media

Integrating videos with the

Integrating audio elements with the

Chapter 8

HTML forms

Creating forms

Text fields and validation buttons

Simple text field

HTML form validation buttons

Default value for a form text field

The placeholder attribute

The required attribute

E-mail address" type field

Password" type field

Text area in an HTML form

Selections and checkboxes

Drop-down list in an HTML form

Checkboxes in HTML forms

Radio buttons

The action attribute of a form

Advanced use of forms

The tag

Add the ability to send files via a form

Form submission

Conclusion

Chapter 9

IFrames (Integrated frames)

Creating an iframe

Adjusting iframe size

Example of an iframe with a YouTube video:

Google Maps integration

IFrame attributes

Basic attributes

Control attributes

Conclusion

Chapter 10

HTML tables

Creating simple tables

Painting border

Table headers

Caption or table title

Merging Table Cells in HTML

Merging Cells Horizontally

Merging cells vertically

Tips and best practices

Conclusion

PART 2

MASTERING CSS STYLE SHEETS

Chapter 11

Introduction to CSS style sheets

What is CSS?

The importance of separating structure from presentation

History of CSS

The role of CSS in web development

Presentation management

Separation of Structure and Presentation

Layout creation

Responsive Web Design (RWD)

User Experience (UX)

Inter-browser compatibility

Save time and resources

Customization and flexibility

Animation and Interactivity

Scalability

Purpose of this section

Who is this section for?

Learning objectives

Structure of this section

Chapter 12

CSS Fundamentals

Issues

Structure of a CSS rule

How do I use CSS?

CSS online: Using the style attribute

Internal CSS: Using the

External CSS: Using External CSS Files

Creating a CSS File

Link the CSS file to your HTML page

Using CSS with Frameworks

Conclusion

Chapter 13

CSS selectors

Type of selectors

Class selector

Key features of class selectors :

ID selector

Key features of Identifier Selectors :

Universal Selector

Using the Universal Selector in CSS

Key features of the Universal Selector :

Grouping selector

Using Grouping Selectors

Key features of Grouping Selectors :

Descent selectors

Attribute selectors

Key features of Attribute Selectors :

Pseudo-class selectors

Key features of Pseudo-class Selectors :

Conclusion

Chapter 14

Text and fonts

The basics of text formatting

The font-family Property

The font-size Property

The font-weight Property

The font-style Property

The text-align Property

Custom fonts

Using Web Fonts

Import Custom Fonts

Using generic fonts

Text size

Text size in pixels (px)

Text size in percent (%)

Letter-spacing

Letter-spacing syntax

Text in upper and lower case

Text-transform syntax

Conclusion

Chapter 15

Colors and backgrounds

Text color

The color Property

Color Values

Colors with Transparency

Background colors

Plain background color

Background color with transparency

Gradient backgrounds

Background images

Using background-image

Background image properties

Conclusion

Chapter 16

Page layout with CSS

The Box Model

The Structure of the Box Model

Margins, Edging and Padding

Margins (Margin)

Border

Padding

Width and height of HTML elements

Definition of width and height in pixels

Defining width and height in percentages

Relative units and constraints

Width and maximum width

The overflow property

Positioning

Static positioning

Relative positioning

Absolute positioning

Fixed positioning

Sticky positioning

Advanced positioning

The z-index: Overlay control

The float property: Managing horizontal positioning

The clear property

Display and Visibility

Display property

visibility" property

Result before hovering over the first paragraph:

Result when hovering over the first paragraph

Conclusion

Chapter 17

CSS tables and borders - Let's go further

Advanced Border Properties

Single solid border

Border styles

Table border

CSS properties for table borders

Examples of customizing table borders

Table size

CSS properties for Table Size

Width and height definition

Table alignment

Horizontal alignment

Vertical alignment

Board centering

Scratched boards

Responsive table

Conclusion

Chapter 18

Flexbox - Flexible page layout in CSS

Flexbox benefits

Key concepts

Flex Container

Introducing the Flex Container

Flex container properties

Conclusion

Chapter 19

Grid Layout - CSS grid layout

Creating a Grid Container

Grid Container Declaration

Creating Rows and Columns

Grid Element Spacing

Remarks

Using units of measurement: summary

Placing elements in the grid

Using the grid-row and grid-column properties

Grid-row-start, grid-row-end, grid-column-start, and grid-column-end

Grid template Area

The grid-area property

Defining zones in the grid

Element positioning by zone

Browser Compatibility and Development Tips

Browser compatibility and workarounds

Development tools for Grid Layout

Conclusion

Summary of Key Concepts

Why use Grid Layout?

Chapter 20

CSS transitions, animations and transformations

Transitions in CSS

CSS Transitions properties

The CSS transition-property

The CSS property transition-timing-function

Multiple transitions

Transformations

Types of CSS Transformations

Transition with Transformations

Conclusion

Chapter 21

Responsive Web Design

Media Queries

Media Queries: different ways of use

Syntax, features and uses of Media Queries

Practical example

Reactive Images

and tags and the srcset attribute

Media Queries for Responsive Images

Tips for Reactive Images

Conclusion

Encouragement and Congratulations

About the author

Foreword

Web development is a dynamic field that plays a pivotal role in shaping the digital era we inhabit. Understanding the foundational web languages, HTML and CSS, is essential for anyone venturing into web design. This book has been crafted with this in mind, aiming to guide you from your initial steps as a beginner to becoming an expert by mastering the intricacies of these languages.

Learn HTML and CSS: from beginner to expert is designed to be your companion throughout this journey, catering to both the inquisitive novice and the seasoned professional looking to refine their skills. Starting with the basics, the book introduces HTML, the markup language organizing web page content, and CSS, the style language enhancing its visual appeal.

As you progress through the chapters, you'll delve into the functionalities of HTML and CSS, acquainting yourself with tags, selectors, and style properties. The book covers creating responsive layouts, designing interactive forms, manipulating media, and incorporating animations into your web pages. Practical examples and pertinent tips are provided to ensure a comprehensive understanding of key concepts.

Advanced topics like Flexbox, Grid Layout, and Responsive Web Design are also explored, empowering you to develop professional websites adaptable to various devices and screen resolutions.

Our goal is to provide you with a solid foundation in HTML and CSS, allowing you to explore advanced techniques for sophisticated web design. Whether you're a student, professional, or self-taught, this book will be your companion on the path to becoming a web development expert.

We hope you discover valuable information and inspiring ideas for your web projects within these pages. May this book serve as a source of fulfillment in the realm of web development, helping you bring your ideas and dreams to life on the web. Enjoy your reading and embark on a captivating journey into the world of HTML and CSS!

Who is this book for?

This book caters to a diverse audience, ranging from novices to seasoned experts in web development. It is especially well-suited for individuals without prior web development experience, offering a step-by-step guide to learning HTML and CSS for the creation and styling of basic web pages. Additionally, it serves as a comprehensive learning resource for computer science students, covering the fundamental principles of web development.

Professionals already engaged in the field will find value in enhancing their HTML and CSS skills, enabling them to construct more advanced and responsive websites. Web designers, in particular, will benefit from detailed explanations of CSS elements, facilitating the implementation of intricate web designs. For those who prefer self-directed learning, this book provides a structured guide for mastering HTML and CSS at their own pace.

In summary, whether you are a beginner or seeking to refine your skills, this book is designed to empower you to become a proficient web developer, capable of creating polished and professional websites.

PART 1: LEARNING AND MASTERING HTML

The initial segment of our exploration into mastering HTML encompasses ten chapters. Within these first ten chapters, you'll establish a robust foundation in HTML, the fundamental markup language that underlies the entire web. Commencing with the basics of HTML, we elucidate its role in web page creation, progressing to an exploration of HTML tags—the fundamental building blocks of a web page.

As you navigate these chapters, you'll grasp how to style content using formatting tags, structure information through lists, and construct hypertext links for navigation. Given the contemporary significance of images and media, we provide guidance on seamlessly integrating them into your pages. Subsequently, we delve into the creation of interactive forms and acquaint you with IFrames, facilitating the integration of external content.

Ultimately, we explore the intricate realm of HTML tables, endowing you with mastery over this potent tool for organizing data. Armed with this foundational knowledge, you'll be well-equipped to craft structured, content-rich web pages—an essential stride toward web mastery.

Chapter 1: The fundamentals of HTML

This inaugural chapter marks your initiation into the realm of web design. Delving into the basics of HTML, an integral facet of web design, you'll comprehend the structure of HTML documents, utilize tags to define content, and grasp the fundamental syntax of HTML. This chapter lays the groundwork for creating well-structured, informative web pages—a pivotal precursor to advanced web design mastery.

Chapter 2: HTML Tags: Building Blocks

In this chapter, a more profound exploration of HTML awaits, as we delve into tags—the quintessential elements for structuring a web page. You'll discover how to use these tags to create headings, paragraphs, lists, and various other elements constituting a web page. Each HTML tag plays a distinct role in defining content structure, and this chapter guides you through their judicious application. Moreover, you'll learn to assign attributes to tags for further content customization. This chapter sets the stage for creating well-structured, informative web pages, laying the groundwork for delving into advanced HTML concepts.

Chapter 3: Styling Your Page with Formatting Tags

Embark on an exciting journey into the realm of formatting HTML content in this chapter. Uncover the art of using formatting tags to enhance the readability, attractiveness, and informativeness of your text. Tags such as , , , , , and others are explored, illustrating how they can highlight keywords, add importance to specific elements, and create annotations. Understanding the mechanics of these formatting tags empowers you to elevate the appearance and readability of your web pages—a crucial step in crafting engaging and informative websites.

Chapter 4: HTML Lists - Structuring Information

This chapter delves into the art of organizing and presenting data in a coherent and logical manner. HTML lists emerge as a potent tool for prioritizing, categorizing, and presenting information in a clear and comprehensible format. The chapter guides you through the application of three types of HTML lists—ordered, unordered, and definition lists. You'll learn to create, customize, and leverage these lists to structure your content effectively. Additionally, advanced techniques for crafting nested lists and styling them using CSS are explored. Mastery of lists is pivotal for organizing information on your web pages, and this chapter equips you with the skills to do so seamlessly.

Chapter 5: Hypertext Links in HTML

Immerse yourself in the essential art of hypertext links in this chapter—the backbone of the World Wide Web. Learn how to create links to other pages, external resources, and internal links within your website. Detailed coverage of anchor tags and attributes that define link destinations is provided. Furthermore, discover how to customize the appearance of your links with CSS, seamlessly integrating them into your design. Proficiency in hypertext links is integral to navigation and interaction on the web, and this chapter positions you to become an expert in crafting functional and aesthetically pleasing links.

Chapter 6: HTML Images

Enter the visual realm of web design in this chapter, where you'll uncover the process of integrating images into your web pages using HTML image tags. Comprehensive exploration of key attributes for specifying image source, dimensions, and alternative text is provided. Learn how to optimize images for the web, align them within your content, and style them with CSS. Images play a pivotal role in enriching your site's content and engaging visitors, and this chapter imparts the skills needed to integrate them professionally into your web pages.

Chapter 7: The Media

Embark on a dynamic exploration of web media in this chapter, where you'll discover how to integrate multimedia elements like audio and video into your HTML pages. Guided through HTML tags dedicated to embedding media, you'll learn to specify source, playback control, and accessibility. Additionally, explore embedding media from streaming platforms and customizing their appearance with CSS. Integration of media greatly enhances the user experience of your website, and this chapter imparts the knowledge to fully leverage these multimedia elements.

Chapter 8: HTML Forms

This chapter delves into an essential element of user interaction on the web—HTML forms. Explore the creation of forms using elements such as text fields, checkboxes, radio buttons, and drop-down menus. Learn how to validate and process user input using JavaScript and PHP. Mastery of HTML forms empowers you to gather valuable information and interact more thoroughly with your online audience.

Chapter 9: IFrames (Integrated Frames)

Explore a powerful HTML element in this chapter that allows the integration of content from external sources into your web page—IFrames. Commonly employed for displaying YouTube videos, Google Maps, and content from other websites, IFrames offer flexibility and versatility. Learn to create and customize IFrames, define their dimensions, specify external sources, and seamlessly integrate them into your layout. This chapter provides an in-depth insight into the flexibility and possibilities offered by IFrames, enhancing the richness and variety of your online content.

Chapter 10: HTML Tables

Dive into one of the most versatile tools for organizing and displaying data on the web—HTML tables. Essential for representing tabular information, tables are crucial for calendars, data lists, and other organized presentations. Learn to create tables, define headers, data cells, merge cells, and customize them using HTML tags and attributes. Best practices for making tables responsive and accessible are explored. This chapter equips you with the skills needed to design effective and elegant tables, enhancing the presentation of your data on the web.

PART 2: MASTERING CSS STYLE SHEETS

Welcome to the second part of our exploration into mastering web languages, dedicated to mastering CSS. Over the next ten chapters, we'll delve into the world of CSS, or Cascading Style Sheets, which give shape and style to your HTML pages.

Chapter 11: Introduction to CSS Style Sheets

Embark on an exploration of Cascading Style Sheets (CSS) in this chapter—an essential element for styling and laying out your HTML documents. Gain an understanding of CSS fundamentals, including syntax, selectors, and basic properties. Armed with this knowledge, you'll make significant improvements to the appearance of your web pages, customizing fonts, colors, margins, and more. This chapter offers a comprehensive overview of the art of web styling with CSS, laying the foundation needed to create captivating, professional web designs.

Chapter 12: CSS Fundamentals

Delve deep into the fundamentals of Cascading Style Sheets (CSS) in this chapter—an essential technology for web design. Explore CSS syntax, basic rules, and how styles are applied to HTML elements. Whether you're a novice aiming to grasp the basics or an experienced developer looking to expand your knowledge, this chapter provides the foundational understanding necessary to become a CSS expert. It sets the stage for controlling and harmonizing the appearance of your web pages effectively, allowing you to customize your websites with style and creativity.

Chapter 13: CSS Selectors

This chapter introduces you to the art of selecting HTML elements for styling using CSS selectors. Discover how to precisely target elements for styling, whether they are tags, classes, identifiers, or advanced selectors. A deep exploration of the different ways to select elements is undertaken, enabling you to create consistent, personalized styles. Regardless of your experience level, this chapter equips you with essential web design skills, empowering you to master the subtle nuances of CSS styling.

Chapter 14: Text and Fonts

Journey into the realm of web typography in this chapter, where the presentation of text is explored for its crucial role in site aesthetics and readability. Learn to customize font, size, spacing, and other text properties to create attractive, readable web content. Discover how to use custom fonts, manage text layout, and leverage type styles to impart character to your site. Whether you aspire to create a clean, minimalist site or an artistic design, the skills acquired in this chapter will help you express your vision through text.

Chapter 15: Colors and Backgrounds

Delve into the heart of visual aesthetics in web design in this chapter, mastering the art of colors and backgrounds to bring a website to life. Learn how to choose harmonious color palettes, apply background colors, manage background images, and associated CSS properties. Whether you aim to create an elegant, professional interface or experiment with creative designs, this chapter serves as a guide in using colors and backgrounds to achieve your design goals. Understanding the fundamentals of color and advanced techniques equips you with the tools needed to create visually captivating websites.

Chapter 16: Page Layout with CSS

Welcome to Chapter 16, dedicated to an essential aspect of web design—layout with CSS. The arrangement of elements on a web page plays a crucial role in user experience and site aesthetics. Explore various CSS techniques and properties enabling the creation of sophisticated, flexible, and adaptive layouts. From managing the width and height of elements to creating columns and grids, this chapter imparts the knowledge and skills necessary to design modern, professional web layouts. Prepare to master the art of page layout with CSS!

Chapter 17: CSS Tables and Borders - Taking It a Step Further

This chapter invites you to explore advanced aspects of page layout with CSS. Discover how to customize tables using CSS to create visually appealing data presentations. Master border stylization techniques to add detail and visual effects to your HTML elements. This chapter enables you to create sophisticated designs using advanced layout and styling techniques. Learn to apply custom borders, manage spacing, and optimize the presentation of your tables, taking your CSS skills to the next level.

Chapter 18: Flexbox - Flexible Page Layout in CSS

Plunge into the powerful world of Flexbox in this chapter, a layout method simplifying the management of elements in your web designs. Learn to create flexible, dynamic layouts adapted to different screens and resolutions. With Flexbox, easily rearrange and align elements while ensuring consistent rendering on various devices. This chapter provides a solid foundation for creating responsive and elegant user interfaces, reducing the complexity of traditional CSS. Explore Flexbox's features and learn to apply them in your projects for a smoother, more efficient layout.

Chapter 19: Grid Layout - CSS Grid Layout

In this chapter, delve into the captivating world of Grid Layout, a revolutionary CSS technology for creating complex, structured layouts. Discover how to use grids to organize elements precisely, both horizontally and vertically. With Grid Layout, gain complete control over the layout of your content, making it an essential tool for modern web design. This chapter guides you through the fundamental concepts of Grid Layout, teaching you to create custom grids and adapt them to the needs of your project. Explore this technology to design responsive, aesthetically pleasing web interfaces, simplifying layout management.

Chapter 20: CSS Transitions, Animations, and Transformations