Presentation on theme: " 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:"— Presentation transcript:
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)
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.
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
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.
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
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: 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
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
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
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
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
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
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 Complete the Skills Review › Page Complete the Real-Life Challenge › Page 145 Prepare for Exam