Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 3: Working with CSS properties CHAPTER 4 179 atomorum mea. Ad vis illum porro disputando, ei eligendi mandamus liberaviss ...

180 CHAPTER 4 Getting started with CSS3 #div3 { background-color: lightpink; } #div4 { background-color: orange; } #div5 { backg ...

Lesson 3: Working with CSS properties CHAPTER 4 181 The first thing you might want to do is set the <div> elements to a fi ...

182 CHAPTER 4 Getting started with CSS3 In this example, div2 and its contents maintained the original size and were cut off on ...

Lesson 3: Working with CSS properties CHAPTER 4 183 Now that div2 is non-static, what would happen if the position of one of its ...

184 CHAPTER 4 Getting started with CSS3 left: 5px; } With the position set to fixed, div5 is positioned relative to the browser ...

Lesson 3: Working with CSS properties CHAPTER 4 185 left: 30px; width: 450px; height:400px; } #div3 { background-color: lightpin ...

186 CHAPTER 4 Getting started with CSS3 FIGURE 4-17 he use of absolute positioning to create columnsT Using the float property A ...

Lesson 3: Working with CSS properties CHAPTER 4 187 } #div2 { background-color: cyan; } #div3 { background-color: lightpink; flo ...

188 CHAPTER 4 Getting started with CSS3 net effect is that div4 wraps around div3. This technique is commonly used to insert pic ...

Lesson 3: Working with CSS properties CHAPTER 4 189 FIGURE 4-19 Using the float property to create columns With all three column ...

190 CHAPTER 4 Getting started with CSS3 FIGURE 4-20 he clear property set to bothT Using the box-sizing property The previous ex ...

Lesson 3: Working with CSS properties CHAPTER 4 191 } #div1 { background-color: yellow; } #div2 { background-color: cyan; clear: ...

192 CHAPTER 4 Getting started with CSS3 FIGURE 4-21 Using the box-sizing property to control width calculations NOTE ALTERNATE B ...

Lesson 3: Working with CSS properties CHAPTER 4 193 Centering content in the browser window Creating a page layout that looks gr ...

194 CHAPTER 4 Getting started with CSS3 ■■Use the clear property to indicate when an element is to be positioned clear after the ...

Practice exercises CHAPTER 4 195 Exercise 1: Add a style sheet to the calculator project In this exercise, you apply your CSS3 k ...

196 CHAPTER 4 Getting started with CSS3 Add a style rule that formats the buttons. This style sets the background color, width, ...

Practice exercises CHAPTER 4 197 FIGURE 4-22 he web calculator user interfaceT Try entering data and clicking the plus and minu ...

198 CHAPTER 4 Getting started with CSS3 Open the project from Exercise 1. If you didn’t perform Exercise 1, you can use the pro ...