CSS stylesLearn CSS quickly and easily

Though still quite crude, with the addition of these properties, the design is beginning to take on a more definitive shape. The goal of these additions is to put as few constraints on the design as possible so that the design adapts fluidly to the user’s environment. Although I could have utilized the minimum and maximum properties, I decided to go with a different approach to achieve a liquid design. As you may have noticed in this and previous examples, I have used the em unit to specify all lengths. The use of em units, if you recall from previous lessons, makes each measurement dependent on the value of the font-size property.

For this design, I also specified font sizes using the em unit, which makes the entire design dependent on the user’s font size preferences, while preserving the aesthetic intent of the page. If you increase or decrease Mozilla’s font size setting, the design of the JT’s dinner menu scales fluidly with that design, including the images! For each image, I also use images slightly larger than I need so that the design scales gracefully, leaving little possibility of artifacts appearing in the JPEG images. Here is a brief reiteration of each modification and why it was made. The rule that I included in the base_styles.css style sheet sets a size constraint on the <div> element with a body id name:

div#body {
width: 50em;
}