Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS

Objectives Understand CSS layouts Add background images Set a background color using the Eyedropper Set a background color using a swatch Add a border Expression Web 3 - Illustrated 2

Objectives (continued) Add a font family Style headings Style the footer Set padding and margins Expression Web 3 - Illustrated 3

CSS box model – every element on a page is a rectangular box.  Core component – content area  Optional components – borders, padding, margins Understanding CSS Layouts Expression Web 3 - Illustrated 4

Understanding CSS Layouts (continued) Content area – innermost box, contains text, images, or other content. Padding area – creates space between content and border. Border – encloses the padding and content areas. Margin area – creates space surrounding the other three components Expression Web 3 - Illustrated 5

Understanding CSS Layouts (continued) div – html container element often used for layout and positioning. id attribute – unique and specific name, can only be used once on a page. class-base rules are indicated with a “.” id-based rules are indicated with a “#” Expression Web 3 - Illustrated 6

Adding Background Images CSS background images are used to create a consistent look across all pages of a site. Background images are applied through a style rule instead of being directly inserted in an HTML page. Expression Web 3 - Illustrated 7

Adding Background Images (continued) background-repeat – controls whether and how the image repeats across the element. background-attachment – controls whether the image scrolls with the element’s content or stays fixed as the content scrolls over it. (x) background-position – controls where the image is placed relative to the left edge. (y) background position – controls where the image is placed relative to the top edge. Expression Web 3 - Illustrated 8

Adding Background Images (continued) Limitation of background images:  Cannot include a link. Images that include links must be inserted on each page individually. Expression Web 3 - Illustrated 9

Adding Background Images (continued) Expression Web 3 - Illustrated 10

Setting a Background Color Using the Eyedropper Background color can add color to a page without images. Background color displays across entire element, including margins. Ways to choose a color:  Enter hex value  Using Select tool  Using Eyedropper tool Expression Web 3 - Illustrated 11

Setting a Background Color Using the Eyedropper (continued) To sample a color, use the eyedropper tool and click the color anywhere on your screen to select that exact shade for your use. Web-safe colors – colors that display reliably on all computer monitors. Expression Web 3 - Illustrated 12

Setting a Background Color Using the Eyedropper (continued) Expression Web 3 - Illustrated 13

Setting a Background Color Using a Swatch Color swatches provide access to basic colors such as red, yellow, and gray. Background color should contrast with the foreground colors. Expression Web 3 - Illustrated 14

Setting a Background Color Using a Swatch (continued) Expression Web 3 - Illustrated 15

Adding a Border Borders can:  Enhance visual design  Draw attention to particular areas or content  Act as visual separators CSS border properties  Border-style  Border-width  Border-color Expression Web 3 - Illustrated 16

Adding a Border (continued) Expression Web 3 - Illustrated 17

Adding a Font Family Font family – prioritized list of fonts used in case the visitor’s computer doesn’t have a particular font installed. Guidelines for creating a font family  Start with the font you prefer.  Then list Web-safe fonts for Windows and Mac systems.  End with a generic font family. Expression Web 3 - Illustrated 18

Adding a Font Family (continued) Web-safe fonts are likely to be available on Windows, Mac, and Linux-based computer systems. Generic font families are displayed if no other fonts in list are available.  Three generic font families are consistently understood Serif Sans-serif Monospace Expression Web 3 - Illustrated 19

Adding a Font Family (continued) Serif – has visible strokes at the ends of the character, such as Times New Roman. Sans-serif – has no strokes a the end of the character, such as Arial. Monospace – has equal space between characters, such as Courier. Limit font usage to two fonts per design. Expression Web 3 - Illustrated 20

Adding a Font Family (continued) Expression Web 3 - Illustrated 21

Styling Headings Creating interesting heading styles is a great way to make your site more readable and more visually pleasing. By default, browsers display HTML headings bolder than paragraph text. Expression Web 3 - Illustrated 22

Styling the Footer General footer content  Text-only navigation  Copyright notice  Links to reference areas such as privacy policy or contact information De-emphasize the footer by making text smaller and less noticeable so it doesn’t distract from more important content on page. Expression Web 3 - Illustrated 23

Setting Padding and Margins Adding white space in margins and padding can improve appearance and readability of your site. Expression Web 3 - Illustrated 24

Summary Design details make the difference between a site that is merely acceptable and one that captures attention of the audience. Adding background colors, background images, borders, and appropriate white space can create a pleasing and cohesive visual identity to your site. Font families provide a prioritized list of fonts in case a visitor’s computer doesn’t have the font used in your site. Expression Web 3 - Illustrated 25

Summary (continued) Headings can make your site more readable and visually pleasing. Footers contain content such as text-only navigation, copyright notice, privacy policies, and contact information. Margins and padding add white space to your pages. Expression Web 3 - Illustrated 26