![Page 1: 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:](https://reader035.vdocument.in/reader035/viewer/2022071805/56649cd65503460f9499e1db/html5/thumbnails/1.jpg)
Enhancing a Design with CSS
Unit F
![Page 2: 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:](https://reader035.vdocument.in/reader035/viewer/2022071805/56649cd65503460f9499e1db/html5/thumbnails/2.jpg)
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.
![Page 3: 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:](https://reader035.vdocument.in/reader035/viewer/2022071805/56649cd65503460f9499e1db/html5/thumbnails/3.jpg)
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)
![Page 4: 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:](https://reader035.vdocument.in/reader035/viewer/2022071805/56649cd65503460f9499e1db/html5/thumbnails/4.jpg)
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
![Page 5: 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:](https://reader035.vdocument.in/reader035/viewer/2022071805/56649cd65503460f9499e1db/html5/thumbnails/5.jpg)
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.
![Page 6: 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:](https://reader035.vdocument.in/reader035/viewer/2022071805/56649cd65503460f9499e1db/html5/thumbnails/6.jpg)
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
![Page 7: 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:](https://reader035.vdocument.in/reader035/viewer/2022071805/56649cd65503460f9499e1db/html5/thumbnails/7.jpg)
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.
![Page 8: 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:](https://reader035.vdocument.in/reader035/viewer/2022071805/56649cd65503460f9499e1db/html5/thumbnails/8.jpg)
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.
![Page 9: 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:](https://reader035.vdocument.in/reader035/viewer/2022071805/56649cd65503460f9499e1db/html5/thumbnails/9.jpg)
› (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
![Page 10: 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:](https://reader035.vdocument.in/reader035/viewer/2022071805/56649cd65503460f9499e1db/html5/thumbnails/10.jpg)
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.
![Page 11: 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:](https://reader035.vdocument.in/reader035/viewer/2022071805/56649cd65503460f9499e1db/html5/thumbnails/11.jpg)
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
![Page 12: 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:](https://reader035.vdocument.in/reader035/viewer/2022071805/56649cd65503460f9499e1db/html5/thumbnails/12.jpg)
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
![Page 13: 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:](https://reader035.vdocument.in/reader035/viewer/2022071805/56649cd65503460f9499e1db/html5/thumbnails/13.jpg)
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
![Page 14: 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:](https://reader035.vdocument.in/reader035/viewer/2022071805/56649cd65503460f9499e1db/html5/thumbnails/14.jpg)
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
![Page 15: 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:](https://reader035.vdocument.in/reader035/viewer/2022071805/56649cd65503460f9499e1db/html5/thumbnails/15.jpg)
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
![Page 16: 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:](https://reader035.vdocument.in/reader035/viewer/2022071805/56649cd65503460f9499e1db/html5/thumbnails/16.jpg)
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.
![Page 17: 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:](https://reader035.vdocument.in/reader035/viewer/2022071805/56649cd65503460f9499e1db/html5/thumbnails/17.jpg)
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
![Page 18: 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:](https://reader035.vdocument.in/reader035/viewer/2022071805/56649cd65503460f9499e1db/html5/thumbnails/18.jpg)
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
![Page 19: 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:](https://reader035.vdocument.in/reader035/viewer/2022071805/56649cd65503460f9499e1db/html5/thumbnails/19.jpg)
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
![Page 20: 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:](https://reader035.vdocument.in/reader035/viewer/2022071805/56649cd65503460f9499e1db/html5/thumbnails/20.jpg)
Complete the Concept Review › Page 140 - 141
Complete the Skills Review› Page 141- 142
Complete the Real-Life Challenge › Page 145
Prepare for Exam