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