Enhancing a Design with CSS

Unit F

The CSS Box Model

CSS Presentation and layout is based on the CSS Box Model.

The CSS Box Model states that every element on a page is a rectangular box.

This includes: divs, images, headers, paragraphs, lists, and more.

Each box has one core component (the content area)

Three optional components: borders, padding, and margins.

(Optional components do not appear unless specified in a style sheet)

Components Content Area:

› the innermost box› Contains the text, images, or other content

Padding Area:› Creates space between the content & border

Borders: › Enclose both the padding & the content area

Margin:› Creates space surrounding the other three

components (borders, padding, content)

› Can also provide space between separate elements

For every element you can provide different padding, border, and margin properties to each of the four sides of the box.

CSS Layouts in Expression Web

Masthead: used for the main header and branding area for the site

Top_nav: can be used for horizontal navigation Left_col: a left-hand column Page_content: an area to the right of the

column that holds the site content, both images and text

Container: a div that contains both the left_col and the page_content divs

Footer: a div at the bottom of the page that holds text-based navigation and copyright notice

Adding Background Images Background images are applied

through a style rule not directly inserted into an HTML page.

Once you’ve created a style rule to have a background image display in a div, it shows up on all pages that have that div as part of their structure.

Background Properties

When you add the background-image property to a style rule, you can specify values for 4 properties: › Background-repeat: controls whether &

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: control where the image is placed relative to the element’s left edge.

› (Y) Background-position): control where the image is placed relative to the element’s top edge.

› Table F-1 page 125

› We want to add background images to the Tradewinds site – page 124

Setting Color: Eyedropper Tool

The select or Eyedropper tool allows you to sample a color or select it by clicking it on your screen.

When you want to exactly match the color in an existing style rule or image, the eyedropper tool is your best bet.

Web Safe Colors

Web Safe Colors: colors that display reliably on all computer monitors that have 256 colors or less. › Now most generally used for mobile

devices (smart phones or handhelds)

Lets Try the Eyedropper tool in our Tradewinds website – page 126

Setting Color: Swatch

Predefined swatches appear when you click a color list arrow.

Provide access to basic colors.

Best when specifying basic black & white

Lets try setting a color using swatch in our Tradewinds website – page 128

Adding a Border: 3 Properties

Border-style: choose from 11 different options (not all are well-supported by browsers

Border-width: use keywords (thin, medium, or thick) or specify a value in pixels › Best to specify in pixels- different browsers

interpret keywords differently

Border- color: choose color by using hex value

Lets create a border in our Tradewinds website – page 130

Setting Margins and Padding

Adding margins and padding (white spaces):› looks less cluttered › Improves appearance › Increases readability

Lets fix the margins and padding on our Tradewinds website – page 132

Styling the Footer

Webpage footers feature:› Text-only navigation› Copyright notice› Links to reference areas:

Private policy & Contact information De-emphasize (less noticeable/ not

distracting)

Lets fix the footer on our Tradewinds webpage – page 134

Adding a Font Family

Font Family: prioritized list of fonts (instead of a single font) › In case the visitor’s computer doesn’t have

a specific font installed

By default, Expression offers only 3 sets of font-families but you can create your own.

Web Safe fonts: fonts likely to be available on Windows, MAC, & Linux-based computer systems

Generic font families: part of the CSS specification › Displayed if no other fonts on the list are

available › 3 generic font families are consistently

understood: Serif, sans serif, & monospace

Serif: › such as Times New Roman › has visible strokes at the ends of the character

Sans-serif:› such as Arial› Has no strokes at the end of the character

Monospace:› Such as Courier› Has equal space between characters

Lets add font families to our Tradewinds website – page 136

Styling Headings

Creating interesting styles for heading is a great way to make your site more readable & more visually pleasing.

Lets adjust the headings in our Tradewinds website – page 138

Complete the Concept Review › Page 140 - 141

Complete the Skills Review› Page 141- 142

Complete the Real-Life Challenge › Page 145

Prepare for Exam