Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
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 Ana Carolina Silveira Profile Icon Lewis Coulson
Arrow right icon
Coming Soon Coming Soon Publishing in Nov 2024
Free Trial
eBook Nov 2024 492 pages 2nd Edition
Subscription
Free Trial
Arrow left icon
Profile Icon Brett Jephson Profile Icon Ana Carolina Silveira Profile Icon Lewis Coulson
Arrow right icon
Coming Soon Coming Soon Publishing in Nov 2024
Free Trial
eBook Nov 2024 492 pages 2nd Edition
Subscription
Free Trial
Subscription
Free Trial

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Info icon
You can access this book only when it is published in Nov 2024
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
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 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
Languages :

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Info icon
You can access this book only when it is published in Nov 2024
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

Product Details

Publication date : Nov 22, 2024
Length: 492 pages
Edition : 2nd
Language : English
ISBN-13 : 9781835084854
Languages :

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
$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 Mex$85 each
Feature tick icon Exclusive print discounts
$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 Mex$85 each
Feature tick icon Exclusive print discounts
Banner background image

Table of Contents

19 Chapters
Part 1: Introducing HTML and CSS Chevron down icon Chevron up icon
Chapter 1: Introduction to HTML and CSS Chevron down icon Chevron up icon
Chapter 2: Structure and Layout Chevron down icon Chevron up icon
Chapter 3: Text and Typography Styling Chevron down icon Chevron up icon
Part 2: Understanding Website Fundamentals Chevron down icon Chevron up icon
Chapter 4: Creating and Styling Forms Chevron down icon Chevron up icon
Chapter 5: Adding Animation to Web Pages Chevron down icon Chevron up icon
Chapter 6: Themes, Color, and Polishing Techniques Chevron down icon Chevron up icon
Part 3: Building for All Chevron down icon Chevron up icon
Chapter 7: Using CSS and HTML to Boost Performance Chevron down icon Chevron up icon
Chapter 8: Responsive Web Design and Media Queries Chevron down icon Chevron up icon
Chapter 9: Ensuring Accessibility in HTML and CSS Chevron down icon Chevron up icon
Part 4: Advanced Concepts Chevron down icon Chevron up icon
Chapter 10: SEO Essentials for Web Developers Chevron down icon Chevron up icon
Chapter 11: Preprocessors and Tooling for Efficient Development Chevron down icon Chevron up icon
Chapter 12: Strategies for Maintaining CSS Code Chevron down icon Chevron up icon
Chapter 13: The Future of HTML and CSS – Advancements and Trends Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon
Other Books You May Enjoy Chevron down icon Chevron up icon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.