Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.

Slides:



Advertisements
Similar presentations
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
Advertisements

1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.
Cascading Style Sheets
Today CSS HTML A project.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Slide 1 CMPS 211 Internet Programming Spring 2008 Dynamic Effects with Styles Chapter 12 2/6/08.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris.
Chapter 7 Page Layout Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Very quick intro HTML and CSS. Sample html A Web Title.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
1 Web Developer & Design Foundations with XHTML Chapter 9 Key Concepts.
Copyright (c) 2009 Prentice-Hall. All rights reserved.
Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.
CSS BASICS. CSS Rules Components of a CSS Rule  Selector: Part of the rule that targets an element to be styled  Declaration: Two or more parts: a.
Building a Website: Cascading Style Sheets (CSS) Fall 2013.
1 Pengantar Teknologi Internet W03: CSS Cascading Style Sheets.
CIS 1310 – HTML & CSS 6 Layout. CIS 1310 – HTML & CSS Learning Outcomes  Describe & Apply the CSS Box Model  Configure Float with CSS  Designate Positioning.
Navigation Bars Level 2 Extended Certificate Unit B12 Doing Business Online.
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
Unit 20 - Client Side Customisation of Web Pages
Chapter 8 More on Links, Layout, and Mobile Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
CSS (Cascading Style Sheets): How the web is styled Create Rules that specify how the content of an HTML Element should appear. CSS controls how your web.
Web Development & Design Foundations with XHTML Chapter 6 Key Concepts.
Web Development & Design Foundations with XHTML Chapter 6 Key Concepts.
Chapter 8 More on Links, Layout, and Mobile Copyright © 2013 Terry Ann Morris, Ed.D revised by Bill Pegram, 9/24/
Page Layout & Mobile Web Using columns, grid systems, etc… to layout sites for desktops and mobile.
Web Development & Design Foundations with XHTML
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Week 8 – Part 3 More on Links, Layout, and Mobile Key Concepts 1.
Copyright © Terry Felke-Morris CSS Flow & Positioning 1 Copyright © Terry Felke-Morris.
Chapter 2 HTML Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Week 8 – Part 2 Page Layout Basics Key Concepts 1.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Web Development & Design Foundations with HTML5 7th Edition
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Internet Technology Dr Jing LU Updated Dr Violet Snell / Dr Kalin Penev 1 Internet Technology (week 6)  Recap: Validating HTML  Page Layout.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
Web Development & Design Foundations with XHTML Chapter 6 Key Concepts.
WebD Introduction to CSS By Manik Rastogi.
CSS.
Web Development & Design Foundations with HTML5 7th Edition
Web Development & Design Foundations with XHTML
Creating Page Layouts with CSS
Advanced CSS BIS1523 – Lecture 20.
Web Development & Design Foundations with HTML5 8th Edition
Cascading Style Sheets (Layout)
Web Development & Design Foundations with HTML5 7th Edition
Chapter 7 Page Layout Basics Key Concepts
Web Development & Design Foundations with HTML5 8th Edition
Web Development & Design Foundations with HTML5
Basics of Web Design Chapter 7 Page Layout Basics Key Concepts
Web Development & Design Foundations with HTML5 7th Edition
6 Layout.
CSS Borders and Margins.
Float Property Elements that seem to “float" on the right or left side of either the browser window or another element are often configured using.
Web Development & Design Foundations with H T M L 5
Web Development & Design Foundations with HTML5 8th Edition
Web Development & Design Foundations with H T M L 5
Web Development & Design Foundations with HTML5
Web Development & Design Foundations with XHTML
Web Development & Design Foundations with HTML5
School of Business Administration
Presentation transcript:

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris

LEARNING OUTCOMES In this chapter, you will learn how to...  Describe and apply the CSS Box Model  Configure margin with CSS  Configure float with CSS  Configure relative and absolute positioning with CSS  Create two-column page layouts using CSS  Configure navigation in unordered lists and style with CSS  Add interactivity to hyperlinks with CSS pseudo-classes  Configure web pages with HTML5 structural elements, including section, header, hgroup, nav, aside, and footer 2

Copyright © Terry Felke-Morris THE BOX MODEL  Content  Text & web page elements in the container  Padding  Area between the content and the border  Border  Between the padding and the margin  Margin  Determines the empty space between the element and adjacent elements 3

Copyright © Terry Felke-Morris CONFIGURE MARGIN WITH CSS  The margin property  Related properties:  margin-top, margin-right, margin-left, margin-bottom  Configures empty space between the element and adjacent elements  Syntax examples h1 { margin: 0; } h1 { margin: 20px 10px; } h1 { margin: 10px 30px 20px; } h1 { margin: 20px 30px 0 30px; }

Copyright © Terry Felke-Morris CONFIGURE PADDING WITH CSS  The padding property  Related properties:  padding-top, padding-right, padding-left, padding-bottom  Configures empty space between the content of the HTML element (such as text) and the border  Syntax examples h1 { padding: 0; } h1 { padding : 20px 10px; } h1 { padding : 10px 30px 20px; } h1 { padding : 20px 30px 0 30px; }

Copyright © Terry Felke-Morris BOX MODEL IN ACTION 6

Copyright © Terry Felke-Morris NORMAL FLOW  Browser display of elements in the order they are coded in the Web page document

Copyright © Terry Felke-Morris RELATIVE POSITIONING Changes the location of an element in relation to where it would otherwise appear 8 h1 { background-color:#cccccc; padding: 5px; color: #000000; } #myContent { position: relative; left: 30px; font-family: Arial,sans-serif; } h1 { background-color:#cccccc; padding: 5px; color: #000000; } #myContent { position: relative; left: 30px; font-family: Arial,sans-serif; }

Copyright © Terry Felke-Morris ABSOLUTE POSITIONING Precisely specifies the location of an element in the browser window h1 { background-color: #cccccc; padding: 5px; color: #000000; } #content {position: absolute; left: 200; top: 100; font-family: Arial,sans-serif; width: 300; } h1 { background-color: #cccccc; padding: 5px; color: #000000; } #content {position: absolute; left: 200; top: 100; font-family: Arial,sans-serif; width: 300; } 9

Copyright © Terry Felke-Morris ABSOLUTE POSITIONING EXAMPLE

Copyright © Terry Felke-Morris h1 { background-color:#cccccc; padding:5px; color: #000000; } p { font-family:Arial,sans-serif; } #yls {float:right; margin: 0 0 5px 5px; border: solid; } FLOAT PROPERTY  Elements that seem to “float" on the right or left side of either the browser window or another element are often configured using the float property. 11

Copyright © Terry Felke-Morris CLEAR PROPERTY  Useful to “clear” or terminate a float  Values are left, right, and both The h2 text is displayed in normal flow. clear: left; was applied to the h2. Now the h2 text displays AFTER the floated image.

Copyright © Terry Felke-Morris OVERFLOW PROPERTY  Intended to configure the display of elements on a Web page.  However, it is useful to “clear” or terminate a float before the end of a container element  Values are auto, hidden, and scroll The background does not extend as far as you’d expect. overflow: auto; was applied to the div that contains the image and paragraph. Now the background extends and the h2 text displays AFTER the floated image.

Copyright © Terry Felke-Morris CHECKPOINT 1. List the components of the box model from innermost to outermost. 2. Describe the difference between relative and absolute positioning. 3. Describe the purpose of the CSS float property. 14

Copyright © Terry Felke-Morris DISPLAY PROPERTY  Configures how and if an element is displayed  display: none;  The element will not be displayed.  display: block;  The element is rendered as a block element – even if it is actually an inline element, such as a hyperlink.  display: inline;  The element will be rendered as an inline element – even if it is actually a block element – such as a.  You’ll work with the display property later in the chapter. 15

Copyright © Terry Felke-Morris CSS PAGE LAYOUT TWO COLUMNS (LEFT NAV)

Copyright © Terry Felke-Morris CSS PAGE LAYOUT TWO COLUMNS (TOP LOGO, LEFT NAV)

Copyright © Terry Felke-Morris CONFIGURE HYPERLINKS IN AN UNORDERED LIST  Vertical Navigation Home Menu Directions Contact  CSS removes the list marker and underline: #leftcolumn ul { list-style-type: none; } #leftcolumn a { text-decoration: none; } 18

Copyright © Terry Felke-Morris CONFIGURE HYPERLINKS IN AN UNORDERED LIST  Horizontal Navigation HTML: Home Menu Directions Contact  CSS removes the list marker, removes the underline, adds padding, and configures the list items for inline display. #nav ul { list-style-type: none;} #nav a { text-decoration: none; padding-right: 10px; } #nav li { display: inline; } 19

Copyright © Terry Felke-Morris CSS PSEUDO-CLASSES Pseudo-classes and the anchor element ◦ link – default state for a hyperlink ◦ visited –a hyperlink that has been visited ◦ focus – triggered when the hyperlink has focus ◦ hover – triggered when the mouse moves over the hyperlink ◦ active – triggered when the hyperlink is being clicked a:link {color:#000066;} a:visited {color:#003366;} a:focus {color:#FF0000;} a:hover {color:#0099CC;} a:active {color:#FF0000;} a:link {color:#000066;} a:visited {color:#003366;} a:focus {color:#FF0000;} a:hover {color:#0099CC;} a:active {color:#FF0000;}

Copyright © Terry Felke-Morris CSS PSEUDO-CLASSES a:link { color: #ff0000; } a:hover { text-decoration: none; color: #000066; } 21

Copyright © Terry Felke-Morris DECIDING TO CONFIGURE A CLASS OR ID  Configure a class:  If the style may apply to more than one element on a page  Use the. (dot) notation in the style sheet.  Use the class attribute in the HTML.  Configure an id:  If the style is specific to only one element on a page  Use the # notation in the style sheet.  Use the id attribute in the HTML. 22

Copyright © Terry Felke-Morris CHOOSING A NAME FOR A CLASS OR AN ID A class or id name should be descriptive of the purpose: ◦ such as nav, news, footer, etc. ◦ Bad choice for a name: redText, bolded, blueborder, etc. The the 10 most commonly used class names are: footer, menu, title, small, text, content, header, nav, copyright, and button Source: 23

Copyright © Terry Felke-Morris CSS DEBUGGING TIPS  Manually check syntax errors  Use W3C CSS Validator to check syntax errors   Configure temporary background colors  Configure temporary borders  Use CSS comments to find the unexpected /* the browser ignores this code */  Don’t expect your pages to look exactly the same in all browsers!  Be patient! 24

Copyright © Terry Felke-Morris CHECKPOINT 1. Open the chapter6/practice/index.html file from Hands-On Practice 6.5 in a browser. Resize the browser window. Describe what happens. What type of page design layout (ice, jello, or liquid) is being used? 2. Describe one CSS debugging tip that you have found helpful. 3. Describe how to choose whether to configure an HTML element selector, create a class, or create an id when working with CSS. 25

Copyright © Terry Felke-Morris HTML5 STRUCTURAL ELEMENTS  Header Element  contains the headings of either a web page document or an area in the document such as a section or article.  Hgroup Element  contains two or more heading elements (h1, h2, and so on) 26

Copyright © Terry Felke-Morris HTML5 STRUCTURAL ELEMENTS  Header Element  Hgroup Element Example: Lighthouse Island Bistro the best coffee on the coast 27

Copyright © Terry Felke-Morris MORE HTML5 ELEMENTS  Nav Element  contains a section of navigation hyperlinks  block display  Footer Element  contains the footer content of a web page or specific area (such as a section or article) on a web page  block display  Aside Element  contains a sidebar, a note, or other tangential content  block display 28

Copyright © Terry Felke-Morris MORE HTML5 ELEMENTS  Section Element  contains a “section” of a document, such as a chapter or topic  block display  Article Element  contains an independent entry, such as a blog posting, comment, or e- zine article that could stand on its own  block display  Time Element  represents a date or a time  could be useful to date articles or blog posts  inline display 29

Copyright © Terry Felke-Morris CHECKPOINT 1. Describe a reason to use HTML5 structural elements instead of div elements for some page areas. 2. Describe the purpose of the article element. 3. Describe the purpose of the hgroup element. 30

Copyright © Terry Felke-Morris SUMMARY  This chapter introduced you to the box model, CSS pseudo-classes, configuring two-column page layouts with CSS, and HTML5 structural elements. 31