Time for action – styles in action

Let's put the border-radius and box-shadow effects to good use in our task list application. First, we will center the task list on the page. Then we'll put a box around each task with rounded corners and a shadow. Let's open taskAtHand.css and make some changes. You can find the code for this section in chapter2/example2.1.

First, we'll change the style for the <div id="main"> element which contains the task-name text field and task list. Let's give this section a minimum width of 9em and a maximum width of 25em. We don't want the task list to get too wide or too small to make it easier to read. This will give us the beginnings of a reactive layout. We will also set the top and bottom margins to 1em, and the left and right margins to auto to center it on the page.

Note

A reactive layout is one that reacts to its environment by adjusting its layout to fit the device it is displayed on. By using reactive...