book

HTML and CSS

Name: HTML and CSS
ISBN: 9781806111831

by Rheinwerk Publishing, Inc, Jürgen Wolf

June 2025

Beginner

817 pages

31h 30m

English

Packt Publishing

Read now

Unlock full access

Dear Reader
Notes on Usage
Table of Contents
Preface
Book Resources HTML5 and the “Living Standard” Target Group How Should I Read through the Book? Written for You, the Reader Acknowledgments
1 Introduction to the HTML Universe
1.1 Is This Book Even Intended for Me?
1.2 Different Types of Websites
1.2.1 Web Presence1.2.2 Blog/Online Magazine/Portfolio1.2.3 E-Commerce Websites: Stores without Opening Hours1.2.4 Landing Page/Microsite1.2.5 Web Platform: Building Your Own Social Network1.2.6 Web Apps
1.3 Dynamic and Static Websites
1.3.1 Static Websites1.3.2 Dynamic Websites
1.4 Languages for Designing and Developing on the Web
1.4.1 HTML: Text-Based Hypertext Markup Language1.4.2 CSS: Design Language1.4.3 JavaScript: Client-Side Scripting Language of the Web Browser1.4.4 Server-Side Scripting Languages and Databases
1.5 What Do I Need to Get Started?
1.5.1 HTML Editor for Writing HTML Documents1.5.2 Web Browser for Displaying the Website1.5.3 Step by Step: Creating a Web Page and Viewing It in the Web Browser1.5.4 Checking Written HTML1.5.5 Good Reasons for Validating the HTML Code Anyway
1.6 Conventions Used in This Book

1.7 Summary
2 Basic Structure of HTML and HTML Documents
2.1 Syntax and Structure of HTML and HTML Documents2.1.1 How to Structure a Document in HTML2.1.2 Viewing the Tree Structure Using the Document Object Model Inspector2.1.3 HTML Tags and HTML Elements2.1.4 Nesting HTML Elements and the Hierarchical Structure2.1.5 Avoiding Incorrect Nesting of HTML Elements2.1.6 Omitting the End Tag of an HTML Element2.1.7 Standalone HTML Tags without End Tags2.1.8 Additional HTML Attributes for HTML Elements2.1.9 Using Comments in HTML Documents
2.2 A Simple HTML Document Framework
2.2.1 HTML Document Type: <!doctype>2.2.2 Beginning and Ending an HTML Document: <html>2.2.3 Head of an HTML Document: <head>2.2.4 Visible Part of an HTML Document: <body>
2.3 Summary
3 Head Data of an HTML Document
3.1 Overview of HTML Elements for the Head
3.2 <title>: Heading of the HTML Page
3.3 Related Topic: Naming Convention and Referencing
3.3.1 Valid and Good File Names for an HTML Document3.3.2 Valid Directory Names and Meaningful Directory Structures3.3.3 Writing a Reference to a Data Source
3.4 Defining the Base URL of a Web Page Using <base>
3.5 Referencing an External Document via <link>
3.6 Writing Document-Wide CSS Styles Using <style>
3.7 Including Scripts in Web Pages Using <script>
3.8 Metadata for the Document Using <meta>
3.8.1 The Most Commonly Used Metadata3.8.2 Setting the Viewport3.8.3 Specifying Useful Metadata for a Web Crawler3.8.4 Useful Metadata for Search Engines3.8.5 Useful Metadata for the Web Browser3.8.6 Using General Metadata3.8.7 My Recommendation: This Metadata Belongs in the Basic HTML Framework3.8.8 HTML Attributes for the <meta> Element
3.9 Summary
4 The Visible Part of an HTML Document
4.1 HTML Elements for Structuring Pages4.1.1 Using <body>: The Displayable Content Section of an HTML Document4.1.2 Introducing the Section Elements of HTML4.1.3 Using Headings with the HTML Elements from <h1> to <h6>4.1.4 Creating a Header Using <header> and a Footer Using <footer>4.1.5 Marking Contact Information Using <address>
4.2 HTML Elements for Structuring Text
4.2.1 Adding Text Paragraphs Using <p>4.2.2 Forcing Line Breaks Using <br>4.2.3 Adding Optional Line Breaks Using <wbr>4.2.4 Forcing Spaces and Preventing Wrapping Using " "4.2.5 Adding a Topic-Based Separation Using <hr>4.2.6 Adding Paragraphs or Citations Using <blockquote>4.2.7 Defining a General Section Using <div>4.2.8 Using <main>: An HTML Element for the Main Content4.2.9 Labeling Content Separately Using <figure> and <figcaption>4.2.10 Creating Unordered Lists Using <ul> and <li>4.2.11 Creating Ordered Lists Using <ol> and <li>4.2.12 Reversing the Numbering of an Ordered List4.2.13 Changing the Numbering of an Ordered List4.2.14 Nesting Lists within Each Other4.2.15 Creating a Description List Using <dl>, <dt>, and <dd>
4.3 Using Semantic HTML
4.3.1 HTML without a Precise Structure4.3.2 Generic Structuring Using <div>4.3.3 Semantic Structuring Using the Elements Provided in HTML4.3.4 What’s the Use of Those Semantic HTML Elements?
4.4 HTML Elements for Text Markups
4.4.1 Marking Up Abbreviations or Acronyms Using <abbr>4.4.2 Marking Up Text as the Source of a Working Title Using <cite>4.4.3 Marking Up Computer Code Representation Using <code> and <pre>4.4.4 Keyboard Input Using <kbd> and Program Output Using <samp>4.4.5 Marking Up Text as a Definition Using <dfn>4.4.6 Marking Up Text as a Variable Using <var>4.4.7 Changing the Text Direction Using <bdo> and <bdi>4.4.8 Emphasizing Text Using <em>, <strong>, <i>, and <b>4.4.9 Highlighting Text Using <mark>4.4.10 Placing Text between Quotes Using <q>4.4.11 Underlining or Crossing Out Text Using <u> and <s>4.4.12 Marking Changes of Text Using <ins> and <del>4.4.13 Displaying Text as Superscript or Subscript Using <sup> and <sub>4.4.14 Marking Dates and Times Using <time>4.4.15 Marking the Small Print Using <small>4.4.16 Using <ruby>, <rp>, and <rt> for Annotations about Pronunciation4.4.17 Grouping Ranges of Individual Text Passages Using <span>
4.5 Related Topic: Character Encoding
4.5.1 From Bytes to Character Encoding4.5.2 From ASCII to ISO-88594.5.3 Beyond the Byte Boundary with Unicode
4.6 Character Entities in HTML
4.6.1 Structure of a Character Entity in HTML
4.7 Summary
5 Tables and Hyperlinks
5.1 Structuring Data in a Table5.1.1 A Simple Table Structure Using <table>, <tr>, <td>, and <th>5.1.2 Combining Columns or Rows Using “colspan” or “rowspan”5.1.3 HTML Attributes for the Table Elements5.1.4 Structuring Tables Using <thead>, <tbody>, and <tfoot>5.1.5 Grouping Columns of a Table Using <colgroup> and <col>5.1.6 Labeling Tables Using <caption> or <figcaption>
5.2 Electronic References (Hyperlinks) Using <a>
5.2.1 Inserting Links to Other HTML Documents on Your Own Website5.2.2 Inserting Links to Other Websites5.2.3 Opening Links with the “target” Attribute in a New Window5.2.4 Email Links with “href=mailto: . . .”5.2.5 Setting Links to Other Types of Content5.2.6 Adding Download Links Using the “download” Attribute5.2.7 Setting Links to Specific Parts of a Web Page5.2.8 Creating Links to Phone Numbers5.2.9 HTML Attributes for the HTML Element <a>
5.3 Summary
6 Graphics and Multimedia
6.1 Embedding Images Using <img>6.1.1 Adding Images to an HTML Document6.1.2 Specifying the Height and Width of a Graphic6.1.3 Labeling Images Using <figure> and <figcaption>6.1.4 HTML Attributes for the HTML Element <img>
6.2 Creating Link-Sensitive Graphics (Image Maps)
6.2.1 Use HTML Attributes for the HTML Element <area>6.2.2 Referencing Defined Areas of the HTML Element <area>6.2.3 HTML Attributes of <area>
6.3 Loading the Appropriate Image Using <picture>
6.3.1 HTML Attributes of <source>6.3.2 Multiple Image Sources with the HTML Attribute “srcset”
6.4 Adding an Icon for the Website (Favicon)
6.5 Using Vector Graphics in HTML Documents
6.5.1 Adding SVG as a Graphic Reference Using <img>6.5.2 Embedding SVG Directly into the Web Page Using <svg>6.5.3 SVG Tags for Vector Graphics6.5.4 Overview of Graphical SVG Elements6.5.5 Further Notes on Using SVG6.5.6 Mathematical Formulas Using MathML
6.6 Drawing Graphics Using <canvas>
6.7 Playing Videos Using the HTML Element <video>
6.7.1 HTML Attributes for the HTML Element <video>6.7.2 Adding Subtitles to a Video Using <track>6.7.3 Playing Videos via YouTube
6.8 Playing Audio Files Using the HTML Element <audio>
6.8.1 HTML Attributes for the HTML Element <audio>
6.9 Including Other Active Content
6.9.1 HTML Element <embed>6.9.2 HTML Element <object>6.9.3 HTML Element <iframe>
6.10 Summary
7 HTML Forms and Interactive Elements
7.1 Defining a Space for Forms
7.2 HTML Input Fields for Forms
7.2.1 A Single-Line Text Input Field Using <input type="text">7.2.2 A Password Input Field Using <input type="password">7.2.3 A Multiline Text Input Field Using <textarea>7.2.4 A Selection List or Dropdown List Using <select>7.2.5 Creating a Group of Radio Buttons Using <input type="radio">7.2.6 Adding a Text Label Using <label>7.2.7 Using Checkboxes via <input type="checkbox">7.2.8 Using Fields for File Uploads via <input type="file">7.2.9 Overview of Various Buttons7.2.10 Using a Hidden Input Field via <input type="hidden">7.2.11 Writing Form Fields outside of <form>...</form>7.2.12 Multiple Submit Buttons for Different URLs
7.3 Special Types of Input Fields
7.3.1 An Input Field for Colors Using <input type="color">7.3.2 An Input Field for a Date Using <input type="date">7.3.3 An Input Field for a Time Using <input type="time">7.3.4 Input Fields for Date and Time7.3.5 Input Fields for the Month and the Week7.3.6 An Input Field for Searches Using <input type="search">7.3.7 An Input Field for Email Addresses Using <input type="email">7.3.8 An Input Field for a URL Using <input type="url">7.3.9 An Input Field for Phone Numbers Using <input type="tel">7.3.10 An Input Field for Numbers Using <input type="number">7.3.11 An Input Field for Numbers of a Certain Range7.3.12 Outputting Values and Calculations Using <output>
7.4 The HTML Attributes for Input Fields
7.4.1 Setting the Input Focus Using the HTML Attribute “autofocus”7.4.2 (De)activating Autocompletion Using the “autocomplete” Attribute7.4.3 A List of Suggestions for Using the HTML Attribute “list” and <datalist>7.4.4 Specifying Minimum and Maximum Values and the Step Size7.4.5 Selecting or Entering Multiple Values Using “multiple”7.4.6 Regular Expressions for Input Fields Using “pattern”7.4.7 A Placeholder for an Input Field Using “placeholder”7.4.8 Defining an Input as Required Using the “required” Attribute7.4.9 Controlling Error Messages for Input Fields
7.5 Other Useful Helpers for Input Fields
7.5.1 Disabling Form Elements Using the HTML Attribute “disabled”7.5.2 Permitting Read-Only for Input Fields Using the “readonly” Attribute7.5.3 Useful Keyboard Shortcuts and Tab Sequence for Input Fields7.5.4 Grouping Form Elements Using <fieldset> and <legend>7.5.5 Progress Display via <progress>7.5.6 Visualizing Values Using <meter>
7.6 Sending Form Data Using PHP
7.6.1 Transferring the Data from the Web Browser for Further Processing7.6.2 The “POST” Method7.6.3 The “GET” Method7.6.4 Processing the Data Using a PHP Script
7.7 Interactive HTML Elements
7.7.1 Expanding/Collapsing Content Using <details> and <summary>7.7.2 A Dialog Box via <dialog>
7.8 Summary
8 Introduction to Cascading Style Sheets
8.1 The Story of CSS
8.2 The Basic Principle of Using CSS
8.2.1 Structure of a CSS Rule8.2.2 Declaring a Selector8.2.3 Using Comments for CSS Code8.2.4 A Few Notes on Formatting CSS Code
8.3 Integrating CSS into HTML
8.3.1 Style Statements Directly in the HTML Tag Using the HTML Attribute “style”8.3.2 Style Statements in the Document Head Using the HTML Element <style>8.3.3 Integrating Style Statements from an External CSS File Using <link>8.3.4 Combining CSS Rules in the Head Section and in External CSS Files8.3.5 Recommendation: You Should Separate HTML and CSS8.3.6 Testing Alternate Stylesheets during Development8.3.7 Integrating Style Statements from an External CSS File Using “@import”8.3.8 Media-Specific Stylesheets for Specific Output Devices8.3.9 Media-Specific Stylesheets with CSS
8.4 Analyzing CSS in the Web Browser
8.5 Summary
9 The Selectors of CSS
9.1 The Simple Selectors of CSS9.1.1 Addressing HTML Elements Using the Type Selector9.1.2 Addressing HTML Elements Using a Specific Class or ID9.1.3 Universal Selector: Addressing All Elements in a Document9.1.4 Addressing Elements Based on Attributes Using the Attribute Selector9.1.5 An Attribute Selector for Attributes with a Specific Value9.1.6 Attribute Selector for Attributes with a Specific Partial Value9.1.7 CSS Pseudo-Classes: The Selectors for Specific Features9.1.8 The Convenient Structural Pseudo-Classes in CSS9.1.9 Other Useful Pseudo-Classes9.1.10 Pseudo-Elements: The Selectors for Nonexistent Elements
9.2 Combinators: Concatenating the Selectors
9.2.1 The Descendant Combinator (E1 E2)9.2.2 The Child Combinator (E1 > E2)9.2.3 The Adjacent Sibling Combinator (E1 + E2)9.2.4 The General Sibling Combinator (E1 ~ E2)
9.3 Recommendation: How to Use Efficient and Simple CSS
9.3.1 How to Write Well Performing CSS9.3.2 Recommendation: Keep the CSS Code as Simple as Possible
9.4 Summary
10 Inheritance and Cascading
10.1 The Principle of Inheritance in CSS10.1.1 Be Cautious When Using Relative Properties10.1.2 Not Everything Gets Inherited10.1.3 Enforcing Inheritance Using “inherit”10.1.4 Restoring the Default Value of a CSS Feature (“initial”)10.1.5 Forcing Inheritance or Restoring a Value ("unset")10.1.6 Forcing Inheritance or Restoring Values for All Properties
10.2 Understanding the Control System for Cascading
10.2.1 The Origin of a Stylesheet10.2.2 Increasing the Priority of a CSS Feature Using “!important”10.2.3 Sorting by Importance and Origin10.2.4 Sorting by Weighting the Selectors (Specificity)10.2.5 Summary of the Cascading Rules System10.2.6 Analyzing the Cascading in the Browser
10.3 Related Topic: Passing Values to CSS Features
10.3.1 Different Units of Measurement in CSS10.3.2 Character Strings and Keywords as Values for CSS Features10.3.3 Many Ways of Using a Color in CSS10.3.4 Angular Dimensions in CSS10.3.5 Passing Values via Short Notation to a CSS Feature
10.4 Summary
11 The Box Model of CSS
11.1 Classic Box Model of CSS11.1.1 Specifying the Content Area Using “width” and “height”11.1.2 Specifying the Inner Spacing Using “padding”11.1.3 Creating the Border Using “border”11.1.4 Setting Up the Outer Margin Using “margin”11.1.5 Collapsing Margins11.1.6 Determining the Total Width and Total Height of a Box
11.2 Newer Alternate Box Model of CSS
11.2.1 Using the “box-sizing” Box Model11.2.2 Using the Alternate Box Model
11.3 Analyzing the Box Model in the Browser
11.4 Box Model for Inline Elements
11.5 Designing Boxes
11.5.1 Adding and Designing a Border Using the “border” Property11.5.2 Setting a Background Color Using “background-color”11.5.3 Using Background Images11.5.4 Making Boxes Transparent11.5.5 Adding a Gradient11.5.6 Adding a Shadow Using the “box-shadow” Feature11.5.7 Adding Round Corners Using the CSS Feature “border-radius”
11.6 Related Topic: Web Browser Prefixes (CSS Vendor Prefixes)
11.7 Summary
12 CSS Positioning
12.1 Positioning via CSS Feature “position”12.1.1 Normal Positioning (“position: static”)12.1.2 Positioning Elements Using “top”, “right”, “bottom”, and “left”12.1.3 Relative Positioning (“position: relative”)12.1.4 Absolute Positioning (“position: absolute”)12.1.5 Fixed Positioning (“position: fixed”)12.1.6 Sticky Positioning (“position: sticky”)
12.2 Controlling Stacking Using “z-index”
12.3 Floating Boxes for Positioning via “float”
12.3.1 Terminating the Float12.3.2 Combining Floats into One Entity
12.4 Flexible Boxes of CSS
12.4.1 Aligning the Flexbox12.4.2 Setting the Flexibility of the Flexbox12.4.3 Determining the Order of the Boxes
12.5 Summary
13 Creating Responsive Layouts with CSS
13.1 Basic Theoretical Knowledge of Responsive Web Design13.1.1 Using Specific Media Types13.1.2 Media Queries for Media Features13.1.3 Integrating and Applying Media Queries for Media Features13.1.4 Basic Structure of a Media Feature Query13.1.5 Which Media Features Can Be Queried?13.1.6 Crucially Important: The Viewport for Mobile Devices13.1.7 Use “em” Instead of Pixels for a Layout Break in Media Queries13.1.8 Layout Breaks (Breakpoints)13.1.9 No More Math Games Thanks to "box-sizing: border-box;"13.1.10 What Happens to Web Browsers That Don’t Understand Media Queries?
13.2 Let’s Create a Simple Responsive Layout
13.2.1 Let’s Create the Basic Framework Using HTML13.2.2 Setting General CSS Features13.2.3 What Should I Use as a Basic Version without Media Queries: Mobile First?13.2.4 Setting the Layout Break (Breakpoint)13.2.5 Adding More Layout Breaks13.2.6 Customizing the Main Content
13.3 Even More Flexible Elements
13.3.1 Use Relative Font Sizes instead of Pixels13.3.2 Making Images Responsive13.3.3 Flexible Images in Maximum Possible Width13.3.4 Hiding Images Entirely13.3.5 Loading the Right Image for the Screen Width: <picture>13.3.6 Using Area-Covering Images
13.4 CSS Grid Layout
13.4.1 Creating a Grid for the Content13.4.2 Placing Elements in the Grid13.4.3 Layout Changes Made Easy13.4.4 Spacing between Grid Lines13.4.5 Checking the Grid in the Web Browser
13.5 Changing the Behavior of HTML Elements Using “display”
13.5.1 “display: block”, “display: inline”, and “display: inline-block”13.5.2 Hiding Elements Using “display:none”13.5.3 Further Values for “display”
13.6 Calculations Using CSS and the “calc()” Function
13.7 Summary
14 Styling with CSS
14.1 Designing Texts with CSS14.1.1 Selecting Fonts via “font-family”14.1.2 Providing Fonts via Web Fonts: “@font-face”14.1.3 Using Icons via Icon Fonts14.1.4 Setting the Font Size Using “font-size”14.1.5 Italic and Bold Fonts via “font-style” and “font-weight”14.1.6 Creating Small Caps Using “font-variant”14.1.7 Defining Line Spacing via “line-height”14.1.8 A Short Notation for Font Formatting Using “font”14.1.9 Specifying Letter and Word Spacing via “letter-spacing” and “word-spacing”14.1.10 Setting the Text Alignment Using “text-align”14.1.11 Setting the Vertical Alignment via “vertical-align”14.1.12 Indenting Text Using “text-indent”14.1.13 Underlining Text and Striking Text Through Using “text-decoration”14.1.14 Uppercase and Lowercase Text via “text-transform”14.1.15 Adding Shadow to Text via “text-shadow”14.1.16 Splitting Text into Multiple Columns Using “column-count”
14.2 Designing Lists with CSS
14.2.1 Customizing Bullet Points Using “list-style-type”14.2.2 Using Images as Bullets via “list-style-image”14.2.3 Positioning Bulleted Lists via “list-style-position”14.2.4 Short Notation “list-style” for Designing Lists14.2.5 Creating Navigation and Menus via Lists
14.3 Designing Appealing Tables with CSS
14.3.1 Creating Fixed-Width Tables14.3.2 General Recommendation: Designing Appealing Tables with CSS14.3.3 Collapsing Borders for Table Cells Using “border-collapse”14.3.4 Setting the Spacing between Cells via “border-spacing”14.3.5 Displaying Empty Table Cells Using “empty-cells”14.3.6 Positioning Table Captions via “caption-side”
14.4 Adjusting Images and Graphics Using “width” and “height”
14.5 Transforming Elements with CSS
14.5.1 Scaling HTML Elements via “transform: scale()”14.5.2 Rotating HTML Elements Using “transform: rotate()”14.5.3 Skewing HTML Elements Using “transform: skew()”14.5.4 Moving HTML Elements Using “transform: translate()”14.5.5 Combining Different Transformations14.5.6 Other HTML Elements
14.6 Creating Transitions with CSS
14.7 Styling HTML Forms with CSS
14.7.1 Neatly Structuring an HTML Form14.7.2 Aligning Form Elements with CSS14.7.3 Designing Form Elements with CSS
14.8 Summary
15 Testing and Organizing
15.1 Web Browser Tests: What’s Possible?15.1.1 Validating HTML and CSS15.1.2 Which Browsers Are Visitors Currently Using?15.1.3 CSS Web Browser Test15.1.4 HTML5 Web Browser Test15.1.5 Can I Use That?15.1.6 Feature Query Using the “@supports” Rule
15.2 Viewing Websites in Different Sizes
15.3 Setting Up a Central Stylesheet
15.3.1 Combining Everything Back into One File to Shorten the Load Time
15.4 CSS Reset or Normalization?
15.4.1 Built-In Style Presets of the Web Browser and CSS Reset15.4.2 Normalization: The Alternative to CSS Reset
15.5 Summary
16 The CSS Preprocessor Sass and SCSS
16.1 Sass or SCSS Syntax
16.2 From Sass/SCSS to CSS
16.3 Installing and Setting Up Sass
16.3.1 Online CSS Preprocessor without Installation16.3.2 Setting Up Sass Using Visual Studio Code16.3.3 Installing Sass for the Command Line
16.4 Using Variables with Sass
16.5 Nesting with Sass
16.6 Mixins (“@mixin”, “@include”)
16.7 Extend (“@extend”)
16.8 Media Queries and “@content”
16.9 Operators
16.10 Adjusting Colors and Brightness
16.11 Sass Control Structures
16.12 Functions “@function”
16.13 “@import”
16.14 Comments
16.15 Summary
17 A Brief Introduction to JavaScript
17.1 JavaScript in Web Development
17.2 Writing and Executing JavaScript Programs
17.2.1 Integrating a JavaScript File in an HTML File17.2.2 Writing JavaScript within HTML17.2.3 Position of JavaScript and Its Execution in the HTML Document17.2.4 Attributes for Manipulating the Load Behavior of JavaScript (“async”, “defer”)17.2.5 The <noscript> Element for No JavaScript
17.3 JavaScript Output
17.3.1 Standard Dialogs (and Input Dialog)17.3.2 Outputting to the Console17.3.3 Outputting to the Website17.3.4 Running JavaScript without a Web Browser17.3.5 Annotating JavaScript Code with Comments
17.4 Using Variables in JavaScript
17.4.1 Defining Constants17.4.2 Strict Mode Using “"use strict"”
17.5 Overview of JavaScript Data Types
17.5.1 Number Data Type (Numbers)17.5.2 String Data Types (Strings)17.5.3 Template Strings17.5.4 Boolean Data Type17.5.5 Undefined and Null Data Types17.5.6 Objects17.5.7 Converting Data Types
17.6 Arithmetic Operators for Calculation Tasks in JavaScript
17.7 Conditional Statements in JavaScript
17.7.1 “true” or “false”: Boolean Truth Value17.7.2 Using the Various Comparison Operators in JavaScript17.7.3 Using the “if” Branch17.7.4 Using the Selection Operator17.7.5 Logical Operators17.7.6 Multiple Branching via “switch”
17.8 Multiple Repetitions of Program Statements via Loops
17.8.1 Increment and Decrement Operators17.8.2 The Header-Controlled “for” Loop17.8.3 The Header-Controlled “while” Loop17.8.4 The Footer-Controlled “do-while” Loop17.8.5 Ending the Statement Block Using “break”17.8.6 Jumping to the Start of the Loop via “continue”
17.9 Summary
18 Arrays, Functions, and Objects in JavaScript
18.1 Functions in JavaScript18.1.1 Different Ways to Define a Function in JavaScript18.1.2 Calling Functions and Function Parameters18.1.3 Return Value of a Function18.1.4 The Scope of Variables in a Function18.1.5 Defining Functions in Short Notation (Arrow Functions)18.1.6 Using a Function in a Web Page
18.2 Arrays
18.2.1 Accessing the Individual Elements in the Array18.2.2 Multidimensional Arrays18.2.3 Adding or Removing New Elements in an Array18.2.4 Sorting Arrays18.2.5 Searching within Arrays18.2.6 Additional Methods for Arrays
18.3 Strings and Regular Expressions
18.3.1 Useful Functions for Strings18.3.2 Applying Regular Expressions to Strings
18.4 Object-Oriented Programming in JavaScript
18.4.1 What Exactly Are Objects?18.4.2 Creating Objects via Constructor Functions18.4.3 Creating Objects via the Class Syntax18.4.4 Accessing the Object Properties and Methods: Setters and Getters18.4.5 The Keyword “this”
18.5 Other Global Objects
18.5.1 The Top Object “Object”18.5.2 Objects for the Primitive Data Types: Number, String, and Boolean18.5.3 “Function” Object18.5.4 “Date” Object18.5.5 “Math” Object18.5.6 “Map” Object18.5.7 “Set” Object
18.6 Summary
19 Changing Web Pages Dynamically
19.1 Introduction to the DOM of an HTML Document
19.2 The “document” Object
19.3 DOM Programming Interface
19.4 Accessing Elements in the DOM
19.4.1 Finding an HTML Element with a Specific “id” Attribute19.4.2 Finding HTML Elements with a Specific Tag Name19.4.3 Finding HTML Elements with a Specific “class” Attribute19.4.4 Finding HTML Elements with a Specific “name” Attribute19.4.5 Using “querySelector()” and “querySelectorAll()”19.4.6 Other Object and Property Collections
19.5 Changing an HTML Element, an Attribute, or the Style
19.5.1 Changing the Content of HTML Elements Using “innerHTML”19.5.2 Changing the Value of an HTML Attribute19.5.3 Changing the Style (CSS) of an HTML Element
19.6 Responding to JavaScript Events
19.7 Handling the Events Using the Event Handler
19.7.1 Setting Up an Event Handler as an HTML Attribute in the HTML Element19.7.2 Setting Up Event Handlers as a Property of an Object19.7.3 Setting Up an Event Handler via “addEventListener()”
19.8 Overview of Common JavaScript Events
19.8.1 The JavaScript Events of the UI (Window Events)19.8.2 JavaScript Events That Can Occur in Connection with the Mouse19.8.3 JavaScript Events for Devices with a Touchscreen19.8.4 JavaScript Events That Occur in Connection with the Keyboard19.8.5 JavaScript Events for HTML Forms19.8.6 JavaScript Events for the Web APIs
19.9 More Information about Events with the “event” Object
19.10 Suppressing the Default Action of Events
19.11 The Event Flow (Event Propagation)
19.11.1 More about the Bubbling Phase19.11.2 Canceling Bubbling via the “stopPropagation()” Method19.11.3 Intervening in the Event Flow during the Capturing Phase19.11.4 Additional Information on the Capturing and Bubbling Phases
19.12 Adding, Changing, and Removing HTML Elements
19.12.1 Creating and Adding a New HTML Element and Content19.12.2 Targeting HTML Elements Even More Exactly in the DOM Tree19.12.3 Adding a New HTML Element Even More Targeted to the DOM Tree19.12.4 Deleting an Existing HTML Element from the DOM Tree19.12.5 Replacing an HTML Element in the DOM Tree with Another One19.12.6 Cloning a Node or Entire Fragments of the DOM Tree19.12.7 Different Methods to Manipulate the HTML Attributes19.12.8 The <template> HTML Tag
19.13 HTML Forms and JavaScript
19.13.1 Reading Text Input Fields with JavaScript19.13.2 Reading Selection Lists with JavaScript19.13.3 Reading Radio Buttons and Checkboxes with JavaScript19.13.4 Intercepting Buttons with JavaScript19.13.5 Controlling the Progress Indicator <progress> with JavaScript
19.14 Summary
20 An Introduction to Ajax
20.1 An Introduction to Ajax Programming20.1.1 A Simple Ajax Example in Execution20.1.2 Creating the “XMLHttpRequest” Object20.1.3 Making a Request to the Server20.1.4 Sending Data20.1.5 Determining the Status of the “XMLHttpRequest” Object20.1.6 Processing the Response from the Server20.1.7 The Ajax Example during Execution20.1.8 A More Complex Ajax Example with XML and DOM20.1.9 The JSON Data Format with Ajax
20.2 Summary
The Author
Index
Service Pages
Legal Notes

Content preview from HTML and CSS

12 CSS Positioning

You’re now familiar with the box model of CSS. However, before you can start creating layouts with CSS, you’re still missing one small important building block. The question is how you can position HTML elements or the boxes with CSS.

Until now, you’ve been used to HTML elements being positioned and displayed in the flow of the HTML document. The elements are displayed one after the other in the order in which they were noted in the HTML code. However, you aren’t limited to such static positioning and can manipulate this using CSS.

There are several ways to perform positioning tasks with CSS. Here’s what you’ll learn in this chapter:

Positioning modelPositioning HTML elements using the CSS feature position.
Stacking model ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781806111831

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

HTML and CSS

by Rheinwerk Publishing, Inc, Jürgen Wolf

12 CSS Positioning

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

More than 5,000 organizations count on O’Reilly

Julian F.

Addison B.

Amir M.

Mark W.

You might also like

Practical HTML and CSS - Second Edition

HTML, CSS, & JavaScript All-in-One For Dummies

HTML & CSS: Design and Build Websites

Sams Teach Yourself HTML, CSS, and JavaScript All in One, Third Edition

Publisher Resources