CLASSES are a way to select custom elements without using a tag name

Size: px

Start display at page:

Download "CLASSES are a way to select custom elements without using a tag name"

Tyrone Greene
6 years ago
Views:

1 CSS (Part II)

2 Using Classes

3 CLASSES are a way to select custom elements without using a tag name

4 Adding a Class <p class="note"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>

5 You can add a CLASS attribute to ANY tag

6 The same CLASS may be applied to many different TAGS

7 The Box Model

8 (Almost) Everything is a Box p { } width: 500px;

9 (Almost) Everything is a Box p { } width: 50%;

10 (Almost) Everything is a Box p { width: 500px; height: 500px; }

11 Content, Padding, Border, Margin Hello! Padding Border Margin

12 Content, Padding, Border, Margin Hello! height width

13 Content, Padding, Border, Margin Hello! padding-top padding-bottom padding-left padding-right

14 Content, Padding, Border, Margin Hello! border-top border-bottom border-left border-right

15 Content, Padding, Border, Margin margin-top Hello! margin-bottom margin-left margin-right

16 Content, Padding, Border, Margin Hello! margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

17 Layout in CSS

18 Document Flow

19 Content is layed-out from top-to-bottom. Elements earlier in the HTML code appear closer to the top of the page.

20 There are two primary kinds of elements, INLINE and BLOCK.

21 BLOCK vs. INLINE A Header Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. one fish two fish red fish Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,! nascetur ridiculus mus. Suspendisse potenti. Duis in erat neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. blue fish

22 The way content is presented is called THE FLOW and understanding it makes layout much easier. Always start by thinking about what the browser WANTS to do and how you want to modify that behavior.!

23 Positioning

24 ABSOLUTE Positioning

25 Normal Flow A Header Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. one fish two fish red fish blue fish <!doctype html> <html> <head> <title>document</title> </head> <body> <h1>a Header</h1> <p>lorem...</p> <nav> <ul> <li>one fish</li> <li>two fish</li> <li>red fish</li> <li>blue fish</li> </ul> </nav> </body> </html>

26 Normal Flow A Header Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. one fish two fish red fish blue fish <!doctype html> <html> <head> <title>document</title> </head> <body> <h1>a Header</h1> <p>lorem...</p> <nav> <ul> <li>one fish</li> <li>two fish</li> <li>red fish</li> <li>blue fish</li> </ul> </nav> </body> </html>

27 Normal Flow A Header Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. one fish two fish <body> <h1>a Header</h1> <p>lorem...</p> <nav> <ul> <li>one fish</li> <li>two fish</li> <li>red fish</li> <li>blue fish</li> </ul> </nav> </body> red fish blue fish

28 position: absolute; A Header Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. one fish two fish red fish blue fish h1 { position: absolute; } Removes element from document flow.! This means that other elements cannot flow around them because they cannot see the absolutely positioned elements.! The width of absolutely positioned elements by default is the content width. (Normally the width of block elements is relative to the parent, but you can think of absolutely positioned elements as orphans.)

29 position: absolute; A Header Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. one fish two fish red fish blue fish h1 { position: absolute; top: 0px; left: 0px; } Location properties let you specify where the element appears. You can use:! top bottom left right!

30 Using absolute positioning can be tricky. Elements are removed from the flow which makes it DIFFICULT-TO- IMPOSSIBLE to have elements flow around them.

31 A Simple Layout A Header one fish two fish red fish blue fish Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

32 A Simple Layout one fish two fish red fish blue fish A Header Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. <body> <h1>a Header</h1> <p class= content >Lorem...</p> <nav> <ul> <li>one fish</li> <li>two fish</li> <li>red fish</li> <li>blue fish</li> </ul> </nav> </body>

33 A Simple Layout one fish two fish red fish blue fish A Header Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. <body> <h1>a Header</h1> <p class= content >Lorem...</p> <nav> <ul> <li>one fish</li> <li>two fish</li> <li>red fish</li> <li>blue fish</li> </ul> </nav> </body>

34 A Simple Layout one fish two fish red fish blue fish A Header Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.! nav { position: absolute; left: 10px; top: 60px; width: 100px; }!.content { position: absolute; left: 120px; top: 60px; width: 700px; }

35 A Simple Layout 2 A Header one fish two fish red fish blue fish Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. A Footer

36 Float

37 The float CSS property takes an element from the normal flow and places it along the left or right side of its container so text and inline elements wrap around it.

38 float: left; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium..thing { float: left; width: 200px; }

39 float: right; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium..thing { float: left; width: 200px; }

40 Normal Flow 1 2

41 Normal Flow 1 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> 2

42 float: left;

43 float: left; 1 2 li { float: left; width: 200px; } 3 4

44 More Positioning

45 FIXED Positioning

46 The Rule p { } property: value;

47 RELATIVE Positioning

48 More Selectors

49 CSS Selectors tagname h1 p id #intro p#intro class.note p.note

50 Combining CSS Selectors space h1 a Select all <a> tags in <p> tags. comma h1, h2, h3 Select all h1, h2, and h3 tags. no-space p.note Select all <p> tags with a class of note.

TITLE - Size 16 - Bold

EDCE 2010-2011 - Size 12 - Normal Conceptual Design of Structures - Size 12 - Normal Instructor: A. Muttoni, R. Salvi, P. Wahlen - Assitant: T. Clément - Author: X. Name - TITLE - Size 16 - Bold Pier Luigi