CSS Shorthand Properties and the Box Model: Page 1 of 4 ... 1 http://www.
w3schools.com/css/css_howto.asp The other CSS pages are linked in this page's
...
L I S 5 3 4 L A B : E X T E R N A L C S S S T Y L E S H E E T , C S S B O X M O D E L , I M A G E S & L I N K S This lab introduces CSS properties relating to images and hyperlinks, the CSS box model, and external CSS style sheet.
OBJECTIVES By the end of this module, you will be able to: • • • •
Understand and use the box model for design and layout of elements. Use an external style sheet with an XHTML document. Use additional CSS properties to adjust images and links. Use the pseudo-‐classes as selectors
REQUIRED RESOURCES AND KEY PREREQUISITES • • • • • •
Basic understanding of XHTML Windows PC with Internet connection Web browser A text editor such as Notepad Access to HTML / XHTML tutorials and references at W3Schools.com The file programs3.html from the Floating Images and Links in CSS lab.
LEARNING ACTIVITIES Before beginning, it will be useful to review the use of external style sheets in CSS How To1 and the CSS Box Model from W3Schools.com. Use the “Try it Yourself” options to make sure you understand how the elements of the CSS Box Model work. Make a copy of the programs3.html file. Name it programs4.html. If you do not have your copy of the modified programs3.html file, you can download the file2 and save it as programs4.html.
External CSS style sheet 1. Create an external style sheet and link it to the XHTML file by doing the following. a. Open programs4.html in a text editor. Cut the entire style element from the head (including the style opening and closing tags). 1 http://www.w3schools.com/css/css_howto.asp The other CSS pages are linked in this page's menu. 2 http://www.ualberta.ca/~dzhao/courses/534/labs/programs3.html
CSS Shorthand Properties and the Box Model: Page 1 of 4
b. Paste this into a new text document. Delete the style tags (and XHTML comment markers if you used them). Save the file in the same directory as programs4.html with the name myStyle.css. Make sure you choose the "All files" option in the Save dialogue box to avoid Windows using a .txt extension. c. Add the following link tag to the head of programs4.html: d. Save the file, then load programs4.html in your web browser to verify the file saves and the linking has been done correctly.
The CSS box model 2. We will be using horizontal rules here to demonstrate the CSS box model. However, try to use borders rather than horizontal rules to separate content in your real XHTML files. a. Add two horizontal rules to your XHTML document, one before the footer section and one after. b. Add id attributes to each of the horizontal rules in your documenting, numbering them from one to five, or however many you have (e.g.,
). c. Add the following rules to myStyle.css hr#one { height: 12 px; border-top: solid 6px #ccc; border-bottom: solid 6px #888; border-left: solid 5px #888; border-right: solid 5px #333;} hr#two { color: white; background:white; height: 12px; border-top: solid 1px white; border-bottom: solid 3px #666; border-left: solid 1px white; border-right: solid 2px #333; width: 70%; text-align: left;} d. Experiment with the settings, and observe what happens. i. What happens when you change the width to 20%? ii. What happens when you change the top border to 30px? iii. Change the CSS rules so that hr#one has a green background with orange top and bottom borders and blue left and right borders. e. Use similar techniques to format the other three horizontal bars so that they look like those in the image below.
CSS Shorthand Properties and the Box Model: Page 2 of 4
f. Save the file. Validate the CSS using the File Upload option. g. Do you now understand the CSS box model better? h. Use the CSS box model to format your header, menu and footer sections to your liking.
Floating Images & Links in CSS 3. Add an image to the document, and then style the image. •
Add the image (slis.jpg) below
Programs
. View the document in a browser.
•
Use the following to style the image. View the document in a browser. img{ float: right; border: dashed blue 5px; margin: 1em; } CSS Shorthand Properties and the Box Model: Page 3 of 4
•
Play with the settings, and observe what happens. You may also want to try adding another image to the page, and style it.
4. Add styles to links. •
Add the following to the style sheet. View the edited document in a browser. a { color:#09c; text-decoration:none; font-weight:600; }
•
Add the following to the style sheet. View the document in a browser. Mouse over a link. What do you see? Click on a link, and come back to the page. What did you see? a:link {color:#09c;} a:visited {color:#07a;} a:hover {background-color:#eee;}
• •
•
Change the rules so that a link becomes underlined on mouse over. Recall how you removed the squares from the list in the menu section. Now, using the same technique, make the links in the menu brown, and links in the content section underlined. Play with the settings, and observe what happens. Revalidate the changed CSS.
Assignment Apply what you have learned in this lab to your Usability by Example site.
Acknowledgements I would like to thank my graduate assistants over the years for their help improving the labs in various ways.
LIS 534 (Information Architecture) course materials by Dangzhi Zhao (http://www.ualberta.ca/~dzhao/) are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License (http://creativecommons.org/licenses/by-nc-sa/3.0/). CSS Shorthand Properties and the Box Model: Page 4 of 4
