![Page 1: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/1.jpg)
Microsoft Expression Web 3 – Illustrated
Unit F: Enhancing a Design with CSS
![Page 2: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/2.jpg)
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
![Page 3: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/3.jpg)
Objectives (continued)
Add a font family
Style headings
Style the footer
Set padding and margins
Expression Web 3 - Illustrated 3
![Page 4: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/4.jpg)
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
![Page 5: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/5.jpg)
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
![Page 6: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/6.jpg)
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
![Page 7: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/7.jpg)
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
![Page 8: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/8.jpg)
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
![Page 9: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/9.jpg)
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
![Page 10: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/10.jpg)
Adding Background Images (continued)
Expression Web 3 - Illustrated 10
![Page 11: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/11.jpg)
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
![Page 12: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/12.jpg)
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
![Page 13: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/13.jpg)
Setting a Background Color Using the Eyedropper (continued)
Expression Web 3 - Illustrated 13
![Page 14: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/14.jpg)
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
![Page 15: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/15.jpg)
Setting a Background Color Using a Swatch (continued)
Expression Web 3 - Illustrated 15
![Page 16: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/16.jpg)
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
![Page 17: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/17.jpg)
Adding a Border (continued)
Expression Web 3 - Illustrated 17
![Page 18: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/18.jpg)
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
![Page 19: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/19.jpg)
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
![Page 20: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/20.jpg)
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
![Page 21: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/21.jpg)
Adding a Font Family (continued)
Expression Web 3 - Illustrated 21
![Page 22: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/22.jpg)
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
![Page 23: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/23.jpg)
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
![Page 24: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/24.jpg)
Setting Padding and Margins
Adding white space in margins and padding can improve appearance and readability of your site.
Expression Web 3 - Illustrated 24
![Page 25: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/25.jpg)
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
![Page 26: Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS](https://reader036.vdocuments.net/reader036/viewer/2022062518/5697bf821a28abf838c8604e/html5/thumbnails/26.jpg)
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