Homework Assignment: CSS Adjustments and Graphic Design Principles

1. Position, width, height, and float And your first real homework assignment And a little bit about graphic design

2. Today • Your first homework assignment • Adjusting box positions • Basic graphic design principles

3. First homework assignment • Your first homework assignment involves taking an HTML file I give you and writing CSS to make it look appealing • It is due just under a week from today (Thursday at 11:59pm) • I suggest looking at the CSS chapters in the book if you think they'd be helpful (they would be)

4. Adjusting box sizes and positions • We can use the width: and height: properties to adjust the size of an element • By default, these are set to auto • We can set them in terms of units we've seen • Percentages are relative to the width and height of the parent element • If we want to change where an element is placed, we can set the position: property, along with top:, left:, bottom:, and right:

5. float: and clear: • You can set float: on an element to either left or right to make the element move to that side of its container and let other things wrap around it • If you set an element to clear: left, it will be positioned beneath all of the left-floated elements within the parent container. Same with right and both • This can be useful to get multiple block elements on a single line

6. position: static; • Static position has an element positioned exactly as it normally would be • top:, left:, bottom:, and right: don't affect it at all

7. position: relative; • Relative position takes the normally calculated position and moves the element relative to it • top:, left:, bottom:, and right: adjust the offset from the original position

8. position: fixed; • Fixed positioning allows us to remove elements from the normal flow of the page and place them relative to the web browser screen (the viewport) • We can use the tlbr (I'm lazy) to specify the position • The following will make a div be placed in the bottom-left of the view: .special { position: fixed; bottom: 0px; left: 0px; }

9. position: absolute • Absolute positioning positions an element relative to its parent element • This element is removed from normal flow • blrt specifies position in terms of the box for the parent element

10. Graphic design principles • Spacing (including white space) • Simplicity • Alignment • Legibility • Affordance

11. Spacing • Leave some room between elements • Elements that are closer together seem to be grouped together • Elements further apart seem to be separated from each other • Don't leave too much room between elements

12. Simplicity • Don't add graphical elements for the sake of graphical elements • Don't add lines if you can indicate a connection or grouping without them • Don't use way too many fonts, colors, styles, sizes, etc. • A counterexample…

14. Alignment • Generally, it looks nice when things line up • Either make things line up, or intentionally make things not line up • Being off by a few pixels is… ew.

17. Legibility • Don't make text too big, small, cramped, or loose • Text should have a color that is visible against the background • Increasing line-height can help text be easier to read • Studies have shown that maximum legibility occurs when each line has 60-80 characters • Maybe don't let text span the entire webpage width? • Underlined text can be hard to read • Bold text is harder to read that regular text • ALL CAPS or Capitalization Like A Title is harder to read

18. Affordance • People have been trained to expect different things to happen based on what something looks like • If I mouse over something and it changes color, I can click on it • If something has a colorful background, only a few words on it, and rounded corners, I can click on it • If text has an underline, I can click on it • If text is different color from the surrounding text, I can click on it