COMS 359: Interactive Media

Size: px

Start display at page:

Download "COMS 359: Interactive Media"

Franklin Stafford
5 years ago
Views:

1 COMS 359: Interactive Media

2 Agenda Review CSS Layout Preview

3 Review Introducting CSS What is CSS? CSS Syntax Location of CSS The Cascade Box Model Box Structure Box Properties

4 Review

5 Style is cascading when there is an established precedence among different ways of specifying style specifications; this precedence is established by the W3C Review

6 Internal Style Sheet Add a <style> element to the <head> of the document Specify selectors and property:values using CSS syntax

7 External Style Sheet

8 Review CSS Box Model Every html element resides in its own virtual box. Use CSS to alter the features and appearance of these boxes: width, height, background color, border, margin, padding, etc.

9 Review Properties background-color width height min-width max-width min-height max-height overflow

11 Continue with CSS Today margin, border & padding CSS layout

12 Every CSS box has three properties that can be adjusted to control its appearance: - Border - Margin - Padding

13 CSS - Box Model Padding Empty space around the page element

14 Border Outside edge of the page element

15 Margin Empty space around the box

16 Border Properties

17 border-style img {border-style:solid}

18 border-width img {border-style:solid; border-width:30px} Note: In order for border-width to work you must first specify a border. You do this by using border-style

19 border-color img {border-style:solid; border-width:30px; border-color:#338800} Note: In order for border-color to work you must first specify a border. You do this by using border-style

20 Exercise 1

21 Exercise 1

22 Exercise 1 Shorthand notation

23 Padding Properties

24 Margin Properties

25 padding: 50px margin:30px

26 Exercise 2 add padding and margin

28 Shorthand notation Values are in clockwise order: top, right, bottom, left

29 display The display property allows you to turn an inline element into a block level element or vice-versa.

30 display:inline Causes a block-level element to act like an inline element display:block Causes an inline element to act like a block-level element display:inline-block Causes a block-level element to flow like an inline element, while retaining other features of a block-level element display:none Causes an element to be hidden and not displayed

31 Exercise 3 alter the display of the <li> element

32 CSS Layout Options for Page Layout Project #1 Project #2 <table> CSS positioning

33 Positioning Schemes CSS Layout Lorem Ipsum Lorem Ipsum Lorem Ipsum Normal Flow Every block element appears on a new line. New elements move down the page and do not flow around to the side. (default positioning) Relative Position Moves an element to a new position defined in relation to where it would have sat in the normal flow of things. Absolute Position Box is taken out of normal flow and no longer affects the position of the other elements on the page.

34 Positioning Schemes CSS Layout Lorem Ipsum Lorem Ipsum Fixed Position A form of absolute positioning that positionis the element in relation to the browser window. Stays in the same fixed place when the user scrolls up or down the page. Float Takes an element out of the normal flow and allows subsequent elements to flow along side them. Useful for multiple columns.

35 Exercise 4 Use float to position elements side-by-side Normal Flow Float

36 Exercise 4 Use float to position elements side-by-side 1. <link> Add a <link> tag to the basic HTML document. Set the value of the href to stylesheet4.css

37 2. Stylesheet Make a new CSS document. Save as stylsheet4.css

38 Apply float:left to all <p> elements. This will float each paragraph to the left and flow the rest of the page elements around to the right. In effect, this will produce three columns of text, since the body is 900px wide and each of the three paragraphs are 260px. Apply clear:left to the <h5> footer element. This will prevent the footer from flowing around to the right of the floated <p> elements and return it to normal flow positioning.

40 Exercise 5 Use absolute positioning to get same layout 1. <link> Add a <link> tag to the basic HTML document. Set the value of the href to stylesheet5.css

41 Exercise 5 Use absolute positioning to get same layout 2. Class Attributes Add a class attribute to each of the <p> tags. The values of this attribute will be: column1, column2 and column3

42 3. Stylesheet Make a new CSS document. Save as stylsheet5.css No change to the first four elements: body, h1, li, a

43 Add classes for.column1.column2.column3 Use absolute positioning

44 Add absolute positioning to the <h5> element

46 Project #2 Deliverables Jump Drive Online Label Preview Name Address Name of first file or URL

COMS 359: Interactive Media

COMS 359: Interactive Media Agenda Review CSS Preview Review Transparent GIF headline Review JPG buttons button1.jpg button.psd button2.jpg Review Next Step Tables CSS Introducing CSS What is CSS? Cascading