Search icon Close icon
Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Checkout

Change country

Modal Close icon
Country selected Country selected
country flag United States
Country selected
country flag Great Britain
Country selected
country flag India
Country selected
country flag Germany
Country selected
country flag France
Country selected
country flag Canada
Country selected
country flag Russia
Country selected
country flag Spain
Country selected
country flag Brazil
Country selected
country flag Australia
Country selected
country flag Singapore
Country selected
country flag Hungary
Country selected
country flag Ukraine
Country selected
country flag Luxembourg
Country selected
country flag Estonia
Country selected
country flag Lithuania
Country selected
country flag South Korea
Country selected
country flag Turkey
Country selected
country flag Switzerland
Country selected
country flag Colombia
Country selected
country flag Taiwan
Country selected
country flag Chile
Country selected
country flag Norway
Country selected
country flag Ecuador
Country selected
country flag Indonesia
Country selected
country flag New Zealand
Country selected
country flag Cyprus
Country selected
country flag Denmark
Country selected
country flag Finland
Country selected
country flag Poland
Country selected
country flag Malta
Country selected
country flag Czechia
Country selected
country flag Austria
Country selected
country flag Sweden
Country selected
country flag Italy
Country selected
country flag Egypt
Country selected
country flag Belgium
Country selected
country flag Portugal
Country selected
country flag Slovenia
Country selected
country flag Ireland
Country selected
country flag Romania
Country selected
country flag Greece
Country selected
country flag Argentina
Country selected
country flag Netherlands
Country selected
country flag Bulgaria
Country selected
country flag Latvia
Country selected
country flag South Africa
Country selected
country flag Malaysia
Country selected
country flag Japan
Country selected
country flag Slovakia
Country selected
country flag Philippines
Country selected
country flag Mexico
Country selected
country flag Thailand
Country selected
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Home > Web Development > Web Programming > Practical HTML and CSS
Practical HTML and CSS
Practical HTML and CSS

Practical HTML and CSS: Elevate your internet presence by creating modern and high-performance websites for the web , Second Edition

Arrow left icon
Profile Icon Brett Jephson Profile Icon Lewis Coulson Profile Icon Ana Carolina Silveira
Arrow right icon
$22.99 $33.99
eBook Nov 2024 492 pages 2nd Edition
eBook
$22.99 $33.99
Paperback
$41.99
Subscription
Free Trial
Renews at $19.99p/m
Arrow left icon
Profile Icon Brett Jephson Profile Icon Lewis Coulson Profile Icon Ana Carolina Silveira
Arrow right icon
$22.99 $33.99
eBook Nov 2024 492 pages 2nd Edition
eBook
$22.99 $33.99
Paperback
$41.99
Subscription
Free Trial
Renews at $19.99p/m
eBook
$22.99 $33.99
Paperback
$41.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Product feature icon AI Assistant (beta) to help accelerate your learning
OR

Contact Details

Modal Close icon
Payment Processing...
tick Completed

Billing Address

Table of content icon View table of contents Preview book icon Preview Book

Practical HTML and CSS

Introduction to HTML and CSS

Whether you want to build a web page to advertise your business, blog about a hobby, or maintain an online community, HyperText Markup Language (HTML) and Cascading Style Sheets (CSS) are the foundations upon which you will build.

HTML and CSS work together but each has a different role in making a web page. A web page is made up of lots of different types of content (text, images, links, video, and audio). HTML structures that content and CSS styles it. Together, they tell the browser how and what to render.

These two technologies are simple to get started with and provide enough power and expressivity that they let you get your ideas out there to the vast audience on the web.

Navigate to a website and what you see is the rendered output of content marked up with HTML and styled with CSS. As a browser user, you have access to the source code of a web page. In Chrome, for example, you can view a page’s source code by pressing the keys Ctrl...

Technical requirements

The code files for this chapter can be found at https://packt.link/808iP.

How a web page renders

When we navigate to a web page in our favorite browser, what happens? How do HTML and CSS translate to the page we see in front of us? In other words, how does a web page render?

The following figure shows a flowchart of the process, which is then further explained:

Figure 1.3: Flow chart of the web page render process

Figure 1.3: Flow chart of the web page render process

To summarize the process:

  1. The user starts by navigating to a URL, possibly via a hyperlink or by typing the URL into the address bar of their browser.
  2. The browser will make a GET request to the disk or a network. It will read the raw bytes from that location and convert them to characters (based on character encoding, such as UTF-8).
  3. The browser then parses these characters according to the HTML standard to find the tokens that are familiar as HTML elements, such as <html> and <body>.
  4. Another parse is then made to take these tokens and construct objects with their properties based...

Understanding HTML

HTML is a markup language used to describe the structure of a web page.

Consider a snippet of text with no markup:

HTML HyperText Markup Language (HTML) is a markup language used to describe the structure of a web page. We can use it to differentiate such content as headings lists links images Want to https://www.packtpub.com/web-development Learn more about web development.

The preceding snippet of text makes some sense. It may also raise some questions. Why does the snippet begin with the word HTML? Why is there a URL in the middle of a sentence? Is this one paragraph?

Using HTML, we can differentiate several bits of content to give them greater meaning. We could mark the word HTML as a heading, <h1>HTML</h1>, or we could mark a link to another web page using <a href="https://www.packtpub.com/web-development">Learn more about web development</a>.

There have been several versions of HTML since its first release in...

Understanding CSS

CSS is a style sheet language used to describe the presentation of a web page.

The language is designed to separate concerns. It allows the design, layout, and presentation of a web page to be defined separately from content semantics and structure. This separation keeps source code readable and lets a designer update styles separately from a developer who might create the page structure or a web editor who is changing content on a page.

A set of CSS rules in a style sheet determines how an HTML document is displayed to the user. It can determine whether elements in the document are rendered, how they are laid out on the web page, and their aesthetic appearance.

In the next section, we will look at the syntax of CSS.

Syntax

A CSS declaration is made of two parts: a property and a value. The property is the name for some aspect of style you want to change; the value is what you want to set it to.

Here is an example of a CSS declaration:

color:...

The special case of !important

The !important keyword can be appended to the value of any CSS declaration. It sets the specificity of that rule to have a special value of 1, 0, 0, 0, 0, which will give it precedence over any style including inline styles.

As an example of where it can be useful, we might want to create a style rule that is reusable and lets us hide content on a web page. If we apply this class to an element, we want that element to be hidden and not be rendered on the web page. However, consider the following example:

<style>
div.media {
  display: block;
  width: 100%;
  float: left;
}
.hide {
  display: none;
}
</style>
<div class="media hide">
  ...Some content
</div>

We might expect our div element to be hidden because the .hide class appears second in the style sheet. However, if we apply the specificity calculations we’ve learned about, we can see that div.media...

Summary

In this chapter, we have looked at how we write HTML and CSS and their roles in how a browser understands and renders a web page.

To demonstrate our understanding, we have created a web page that we will use as a template for the pages of a website, and we have added CSS to normalize the style and add some initial styles for the site. Using the skills we have learned, we can now create a simple web page, add metadata to it, and style parts of that web page as we choose.

In the next chapter, we will look at the options for structuring and laying out a web page, the elements within it, and how we can style these for different web page layouts.

Left arrow icon

Page 1 of 7

Right arrow icon
Download code icon Download Code

Key benefits

  • Explore HTML/CSS fundamentals, build websites from scratch, and create intuitive forms for user input
  • Elevate web design with multimedia integration, including videos, animations, themes, and responsive layouts
  • Harness the power of SEO and optimize performance for faster user interactions
  • Purchase of the print or Kindle book includes a free PDF eBook

Description

In the ever-evolving landscape of web development, mastering HTML and CSS is crucial for building modern, responsive websites. This comprehensive guide equips you with the essential knowledge and skills you need to excel in web design and development. Starting with the foundational principles of HTML and CSS, the book swiftly advances to cover more complex topics, providing a thorough understanding of these vital technologies. You’ll learn how to build websites from scratch, create intuitive user input forms, and enhance web design by integrating multimedia elements like videos, animations, and themes. Emphasizing responsive web design principles, this book teaches you how to create layouts that flawlessly adapt to different devices using media queries. You’ll also get to grips with SEO essentials to optimize website visibility and search engine rankings. A dedicated section guides you through performance optimization techniques to ensure your websites deliver a smooth and lightning-fast user experience. By the end of this HTML and CSS book, you’ll have developed confidence in your web development skills, and you'll be well-equipped to build modern, visually appealing, and high-performing websites.

Who is this book for?

This book is for web developers, SEO specialists, and webmasters interested in learning HTML and CSS for creating responsive websites. Anyone who wants to thoroughly understand the fundamental technologies required to build a website, including beginners with little to no coding experience, will benefit from the gentle learning curve. Additionally, web designers looking to enhance their skillset and create more visually appealing, interactive, and user-friendly websites will find invaluable insights in this guide.

What you will learn

  • Develop a solid foundation in HTML and CSS and understand their role in web development
  • Implement responsive web design principles using media queries
  • Create intuitive, user-friendly forms for effortless data input
  • Use preprocessors to enhance the functionality of CSS through variables, mixins, and other features
  • Explore cutting-edge tools and resources for accessibility testing
  • Discover how to maintain and improve the performance of a website

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Nov 22, 2024
Length: 492 pages
Edition : 2nd
Language : English
ISBN-13 : 9781835084854
Category :
Web Development
Languages :
CSS
Concepts :
Web Programming
Tools :
JavaScriptMVC

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Product feature icon AI Assistant (beta) to help accelerate your learning
OR

Contact Details

Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

Publication date : Nov 22, 2024
Length: 492 pages
Edition : 2nd
Language : English
ISBN-13 : 9781835084854
Category :
Web Development
Languages :
CSS
Concepts :
Web Programming
Tools :
JavaScriptMVC

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
START FREE TRIAL
BUY NOW
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW

Table of Contents

19 Chapters
Part 1: Introducing HTML and CSS Chevron down icon Chevron up icon
Part 1: Introducing HTML and CSS
Chapter 1: Introduction to HTML and CSS Chevron down icon Chevron up icon
Chapter 1: Introduction to HTML and CSS
Technical requirements
How a web page renders
Understanding HTML
Understanding CSS
The special case of !important
Summary
Chapter 2: Structure and Layout Chevron down icon Chevron up icon
Chapter 2: Structure and Layout
Technical requirements
Examining structural elements
Introducing wireframes
Learning CSS page layouts
The box model
Summary
Chapter 3: Text and Typography Styling Chevron down icon Chevron up icon
Chapter 3: Text and Typography Styling
Technical requirements
Creating text-based elements
Working with new text-based elements
Writing semantic markup
Styling text-based elements
Summary
Part 2: Understanding Website Fundamentals Chevron down icon Chevron up icon
Part 2: Understanding Website Fundamentals
Chapter 4: Creating and Styling Forms Chevron down icon Chevron up icon
Chapter 4: Creating and Styling Forms
Technical requirements
Introducing form elements
Styling form elements
Using tables for form layout
Making forms accessible
Summary
Chapter 5: Adding Animation to Web Pages Chevron down icon Chevron up icon
Chapter 5: Adding Animation to Web Pages
Technical requirements
The transition property
Advanced CSS for animations
The keyframes rule and CSS animation properties
Summary
Chapter 6: Themes, Color, and Polishing Techniques Chevron down icon Chevron up icon
Chapter 6: Themes, Color, and Polishing Techniques
Technical requirements
Introduction to web design themes
CSS color variables
Learning color theory with HSL
Understanding the invert() filter
Exploring user’s preferences with color-scheme
Introducing the light-dark() function
Understanding typography and font choices
Accessibility and inclusive design considerations
Summary
Part 3: Building for All Chevron down icon Chevron up icon
Part 3: Building for All
Chapter 7: Using CSS and HTML to Boost Performance Chevron down icon Chevron up icon
Chapter 7: Using CSS and HTML to Boost Performance
Technical requirements
Understanding the performance of a web page
Improving the performance of a web page
Summary
Chapter 8: Responsive Web Design and Media Queries Chevron down icon Chevron up icon
Chapter 8: Responsive Web Design and Media Queries
Technical requirements
What does it mean to design mobile first?
Understanding viewports
Introducing media queries
Responsive values in CSS
Exploring responsive images
CSS Flexbox
Exploring printable design
Summary
Chapter 9: Ensuring Accessibility in HTML and CSS Chevron down icon Chevron up icon
Chapter 9: Ensuring Accessibility in HTML and CSS
Technical requirements
What is accessibility?
Making images accessible
Making forms accessible
Understanding keyboard accessibility
Making motion accessible
Accessibility tools
Summary
Part 4: Advanced Concepts Chevron down icon Chevron up icon
Part 4: Advanced Concepts
Chapter 10: SEO Essentials for Web Developers Chevron down icon Chevron up icon
Chapter 10: SEO Essentials for Web Developers
Technical requirements
Understanding SEO and its importance
Exploring Core Web Vitals
Minimizing render-blocking resources
Optimizing images for SEO
Using alt tags for images
Avoiding excessive DOM size
Summary
Chapter 11: Preprocessors and Tooling for Efficient Development Chevron down icon Chevron up icon
Chapter 11: Preprocessors and Tooling for Efficient Development
Technical requirements
Understanding CSS preprocessors – Sass and Less
Setting up and using Less in a project
Introduction to build tools – Gulp and Webpack
Techniques for improving performance with build tools
Summary
Chapter 12: Strategies for Maintaining CSS Code Chevron down icon Chevron up icon
Chapter 12: Strategies for Maintaining CSS Code
Technical requirements
The importance of maintainable CSS
Understanding semantic modular CSS
What is the BEM standard?
Understanding reusable and scalable CSS
Summary
Chapter 13: The Future of HTML and CSS – Advancements and Trends Chevron down icon Chevron up icon
Chapter 13: The Future of HTML and CSS – Advancements and Trends
Technical requirements
Responsive and dynamic layouts
Customizing the structure
Exploring the latest CSS mathematical functions
Enhancing text presentation
Interactive and immersive elements
Exploring new colors and visual effects
Summary
Index Chevron down icon Chevron up icon
Index
Why subscribe?
Other Books You May Enjoy Chevron down icon Chevron up icon
Other Books You May Enjoy
Packt is searching for authors like you
Share Your Thoughts
Download a free PDF copy of this book

Recommendations for you

Left arrow icon
Full-Stack Flask and React
Full-Stack Flask and React
Read more
Oct 2023 408 pages
Full star icon 4.3 (4)
eBook
eBook
  • eBook eBook $21.99
  • Paperback Paperback $39.99
$21.99 $31.99
$39.99
C# 13 and .NET 9 – Modern Cross-Platform Development Fundamentals
C# 13 and .NET 9 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2024 828 pages
Full star icon 4 (3)
eBook
eBook
  • eBook eBook $27.98
  • Paperback Paperback $49.99
$27.98 $39.99
$49.99
Real-World Web Development with .NET 9
Real-World Web Development with .NET 9
Read more
Dec 2024 578 pages
eBook
eBook
  • eBook eBook $27.98
  • Paperback Paperback $49.99
$27.98 $39.99
$49.99
Django 5 By Example
Django 5 By Example
Read more
Apr 2024 820 pages
Full star icon 4.5 (37)
eBook
eBook
  • eBook eBook $27.98
  • Paperback Paperback $49.99
$27.98 $39.99
$49.99
React and React Native
React and React Native
Read more
Apr 2024 508 pages
Full star icon 4.3 (9)
eBook
eBook
  • eBook eBook $24.99
  • Paperback Paperback $43.99
$24.99 $35.99
$43.99
Scalable Application Development with NestJS
Scalable Application Development with NestJS
Read more
Jan 2025 612 pages
eBook
eBook
  • eBook eBook $21.99
  • Paperback Paperback $39.99
$21.99 $31.99
$39.99
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2023 828 pages
Full star icon 4.4 (73)
eBook
eBook
  • eBook eBook $32.99
  • Paperback Paperback $59.99
$32.99 $47.99
$59.99
Responsive Web Design with HTML5 and CSS
Responsive Web Design with HTML5 and CSS
Read more
Sep 2022 498 pages
Full star icon 4.5 (57)
eBook
eBook
  • eBook eBook $24.99
  • Paperback Paperback $44.99
$24.99 $35.99
$44.99
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Jun 2024 506 pages
Full star icon 5 (8)
eBook
eBook
  • eBook eBook $24.99
  • Paperback Paperback $44.99
$24.99 $35.99
$44.99
Learning Angular
Learning Angular
Read more
Jan 2025 486 pages
eBook
eBook
  • eBook eBook $22.99
  • Paperback Paperback $41.99
$22.99 $33.59
$41.99
Right arrow icon

About the 3 authors

Left arrow icon
Profile icon Brett Jephson
Brett Jephson
LinkedIn icon Github icon
Brett Jephson is a product engineer specializing in frontend engineering and design systems. He has worked in media, games, and app companies for many years, putting all the latest and greatest web technologies to use in many interesting ways while championing accessibility and good UI.
Read more
See other products by Brett Jephson
Profile icon Lewis Coulson
Lewis Coulson
Lewis Coulson is a senior frontend developer with over 10 years of commercial experience. He has worked at a range of organizations ranging from creative agencies to government departments.
Read more
See other products by Lewis Coulson
Profile icon Ana Carolina Silveira
Ana Carolina Silveira
LinkedIn icon Github icon
Ana Carolina Silveira is a seasoned frontend web developer, known for her expertise in CSS and her deep understanding of user experience and behavior. As an open source enthusiast, she actively participates in community projects, sharing her knowledge and passion for web development with others.
Read more
See other products by Ana Carolina Silveira
Right arrow icon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.