1. CSU - DCE 0715 - Introduction to CSS CSS URLs - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Specifying URLs Instructor: Joseph DiVerdi, Ph.D., M.B.A.

2. CSU - DCE 0715 - Introduction to CSS CSS URLs - Fort Collins, CO Copyright © XTR Systems, LLC Syntax URLs have a straightforward form: url(path) url(http://www.whitehouse.gov/whfront1.jpg) –Do not enclose URL in quotation marks –Leave no space between url and ( BODY { background-image: url(/~diverdi/images/stone.jpeg); }

3. CSU - DCE 0715 - Introduction to CSS CSS URLs - Fort Collins, CO Copyright © XTR Systems, LLC Specifying URLs Absolute http://www.whitehouse.gov/whfront1.jpg Relative images/main.gif Relative to Server Root –On Single Site Servers /images/main.gif –On Multiple Site Servers /~diverdi/images/main.gif

4. CSU - DCE 0715 - Introduction to CSS CSS URLs - Fort Collins, CO Copyright © XTR Systems, LLC Relative Path Issues

5. CSU - DCE 0715 - Introduction to CSS CSS URLs - Fort Collins, CO Copyright © XTR Systems, LLC Relative Path Issues Referencing stone.jpeg in main.css –main.css is used by index.html & fourth.html –stone.jpeg is referenced in main.css Which path should be used in main.css? Path to stone.jpeg from main.css-../images/stone.jpeg index.html- images/stone.jpeg fourth.html-../images/stone.jpeg

6. CSU - DCE 0715 - Introduction to CSS CSS URLs - Fort Collins, CO Copyright © XTR Systems, LLC Relative Path Issues Must be relative to the main.css main.css-../images/stone.jpeg Otherwise, the style sheet would only work for web pages in the same directory Makes sense, right?

7. CSU - DCE 0715 - Introduction to CSS CSS URLs - Fort Collins, CO Copyright © XTR Systems, LLC Relative Path Issues Some major browser versions get this wrong –Arrrghhh! –The URL is treated as being relative to the HTML document being rendered not the style sheet

8. CSU - DCE 0715 - Introduction to CSS CSS URLs - Fort Collins, CO Copyright © XTR Systems, LLC Relative Path Issues Defensive strategy is to use only absolute URLs in style sheets /images/main.gif Also OK to use URLs relative to Server Root /~diverdi/images/main.gif

9. CSU - DCE 0715 - Introduction to CSS CSS URLs - Fort Collins, CO Copyright © XTR Systems, LLC Syntax URLs have a straightforward form: url(path) url(http://www.whitehouse.gov/whfront1.jpg) –Do not enclose URL in quotation marks –Leave no space between url and ( BODY { background-image: url(/~diverdi/images/stone.jpeg); }

10. CSU - DCE 0715 - Introduction to CSS CSS URLs - Fort Collins, CO Copyright © XTR Systems, LLC Personal Web Pages Add a background image to your Web Site Use the background image at /~diverdi/images/stone.jpeg Verify that this works in your hands Then copy this image into your own directory Verify that this works in your hands