Informationen zum Autor Ian Lunn (@IanLunn) is a freelance front end developer, passionate about building the future of the web using technologies such as CSS3 and HTML5. With a Higher National Diploma in Internet Technology, Ian combines his education with expertise in CSS, HTML, JavaScript, and WordPress to build creative and effective websites and applications. Treehouse is a consortium of web and software designers and developers whose mission is to bring affordable technology education to people everywhere, in order to help them achieve their dreams and change the world. In keeping with that mission, the Treehouse Series of books are authorized by experts and loaded with innovative design ideas and practical skill -building instruction. If you're a web developer, web designer, hobbyist, or career -changer, every book in the series belongs on your bookshelf. Klappentext Master innovative and eye-catching website design with the exciting new Treehouse Series of booksTurn plain words and images into stunning websites with CSS3 and this beautiful, full-color guide. Taking web designers beyond the constraints of prebuilt themes and simple site-building tools, this new Treehouse book combines practicality with inspiration to show you how to create fully customized, modern websites that make viewers stop and stay.The exciting new Treehouse Series of books is authored by Treehouse experts and packed with innovative design ideas and practical skill-building. If you're a web developer, web designer, hobbyist, or career-changer, every book in this practical new series should be on your bookshelf.* Part of the new Treehouse Series of books, teaching you effective and compelling website development and design, helping you build practical skills* Provides career-worthy information from Treehouse industry pros and trainers* Explains the basics of cascading style sheets (CSS), such as how to structure with CSS, use CSS syntax, how to manipulate text, and visual formatting* Also covers the box model, how to animate page elements, cross-browser compatibility, and moreLeverage pages of dazzling website design ideas and expert instruction with a new Treehouse Series book. Zusammenfassung Master innovative and eye-catching website design with the exciting new Treehouse Series of books Turn plain words and images into stunning websites with CSS3 and this beautiful, full-color guide. Inhaltsverzeichnis Introduction 3 Who Should Read This Book? 1 What You Will Learn 1 How to Use This Book 2 Using This Book with Treehouse 2 Part 1: Introduction Chapter one Understanding CSS and the Modern Web 5 What Is the Modern Web? 5 What Is CSS? 6 The Role of CSS 6 Modern Browsers 10 Today's Major Browsers 10 Browser Engines (Layout Engines) 11 Browser Usage Statistics 12 Older Browsers on the Modern Web 12 Tools for Building and Styling the Modern Web 15 Web Developer Tools 15 Text Editors 17 Summary 18 Chapter Two Getting Started 19 Getting Started with the Project Files 20 Downloading the Project Files 20 Folder Structure and Good Practices 20 Understanding the HTML Template 22 Getting Started with CSS 30 Adding CSS to a Page 30 Using Media Types 31 Inline Styles 32 User Agent Stylesheets 33 Using a CSS Reset for Better Browser Consistency 34 Summary 38 Part 2: Learning CSS Syntax and Adding Presentational Styles Chapter Three Mastering The Power of CSS Selectors 41 Writing Your First Styles 41 Inheritance and the Relationship Between Elements 44 Selectors 45 Universal Selector 45 Type Selector 45 ID and Class Selectors 46 Grouping Selectors 47 Combinators 48Introduction 3

Who Should Read This Book? 1

What You Will Learn 1

How to Use This Book 2

Using This Book with Treehouse 2

Part 1: Introduction

Chapter one Understanding CSS and the Modern Web 5

What Is the Modern Web? 5

What Is CSS? 6

The Role of CSS 6

Modern Browsers 10

Today's Major Browsers 10

Browser Engines (Layout Engines) 11

Browser Usage Statistics 12

Older Browsers on the Modern Web 12

Tools for Building and Styling the Modern Web 15

Web Developer Tools 15

Text Editors 17

Summary 18

Chapter Two Getting Started 19

Getting Started with the Project Files 20

Downloading the Project Files 20

Folder Structure and Good Practices 20

Understanding the HTML Template 22

Getting Started with CSS 30

Adding CSS to a Page 30

Using Media Types 31

Inline Styles 32

User Agent Stylesheets 33

Using a CSS Reset for Better Browser Consistency 34

Summary 38

Part 2: Learning CSS Syntax and Adding Presentational Styles

Chapter Three Mastering The Power of CSS Selectors 41

Writing Your First Styles 41

Inheritance and the Relationship Between Elements 44

Selectors 45

Universal Selector 45

Type Selector 45

ID and Class Selectors 46

Grouping Selectors 47

Combinators 48

Descendant Combinators 48

Child Combinators 49

Sibling Combinators 49

Attribute Selectors 50

Selecting Elements with an Attribute, Regardless of Its Value 51

Selecting Elements with Multiple Attributes 51

Other Attribute Selectors 51

Pseudo-Classes 52

Dynamic Pseudo-Classes 52

Structural Pseudo-Classes 53

The Target Pseudo-Class 56

The UI Element States Pseudo-Classes 56

The Language Pseudo-Class 57

The Negation Pseudo-Class 57

Pseudo-Elements 58

Selecting the First Line 58

Selecting the First Letter 58

Generating Content Before and After an Element 59

Selector Specificity and the Cascade 60

The !important Rule 61

Summary 62

Chapter Four Creating Styles Using Property Values 63

Color Keywords 63

Color Values 64

RGB (Hexadecimal) 64

RGB (Integer Range) 67

RGBA 67

HSL and HSLA 68

Code Challenge: Add More Colors to the Page 69

Units 69

Percentages 70

Units of Length 70

Absolute Units 70

Relative Units 71

Other Units 75

Summary 76

Chapter Five Adding Presentational Styles 77

Using Experimental Properties Safely 79

Borders 81

border-color 81

border-style 82

border-width 83

border (Shorthand) 83

border-radius 84

Border Images 86

border-image-source 86

border-image-slice 87

border-image-width 88

border-image-repeat 88

border-image-outset 89

border-image (Shorthand) 90

box-shadow 91

Code Challenge: Add More Border and Box Shadow Styles 93

Backgrounds 93

background-color 93

background-image 94

background-repeat 96

background-position 97

background-attachment 98

Applying Multiple Background Images 98

Background Gradients 99

Linear Gradients 100

background-clip 102

background-origin 104

background-size 105

background (Shorthand) 106

CSS Image Replacement 107

Code Challenge: Add More Background Properties 108

opacity 108

visibility 109

cursor 111

outline (Shorthand) 111

content 112

Summary 113

Part 3: Building a Solid and Adaptable Page Structure

Chapter Six Creating A Basic Page Structure 117

Structure Types 117

Fluid 118

Fixed 118

Hybrid Layout for Responsive Design 120

Fluid Images 121

Adaptive Design 123

Mobile First Design 125

Summary 125

Chapter Seven Creating Space and Understanding the Box Model 127

The Box Model 127

Using Web Developer Tools to Better Understand the Box Model 129

margin 130

Code Challenge: Add More Margins to Elements 131

padding 132

Code Challenge: Add More Padding to Elements 133

The Pitfall of the Box Model and Working Around It 134

box-sizing 136

Summary 139

Chapter Eight Creating a Multicolumn Layout 141

float 142

clear 143

Floating Multicolumns 145

Code Challenge: Make the Footer Elements Float Side by Side 152

Summary 152

Chapter Nine Understanding Display, Position, and Document Flow 153

Document Flow 153

display 155

block 155

Code Challenge: Make the Newsletter Labels Block-level 156

inline 157

inline-block 159

list-item 161

Displaying Tables 161

none 161

position, top, right, bottom, and left 162

static 16…