CSS

1. CSS chapter 4 Floating & Positioning elements Embedding fonts CSS3 animations http://jigsaw.w3.org/css-validator/

2. The CSS float property (reference) • Browsers normally place text and elements on screen in the order in which they appear in the HTML file. • Elements can be removed from the normal flow of text. • Floating allows to move an element to one side of the screen; other content in the document will then flow around the floated element • underlying text wraps around it as necessary < div id=“sidebar”>…</div> <h1>…</h1> <p>…</p> HTML #sidebar { float: right; } CSS

3. Floating element example <imgsrc="images/borat.jpg" alt="Borat" class="headericon" /> Borat Sagdiyev (born July 30, 1972) is a ...> HTML img.headericon { float: left; } CSS Output Borat Sagdiyev (born July 30, 1972) is a fictional Kazakhstani journalist played by British comedian Sacha Baron Cohen. He is the main characterportrayed in the controversial and successful film Borat: Cultural Learnings of America for Make Benefit Glorious Nation of Kazakhstan ...

4. Common floating bug: missing width • often floating elements should have a width property value • if no width is specified, the floating element may occupy 100% of the page width; so contents may be unable to wrap around the floating element • width applies only to block and image elements

5. Another floating example-part1 Define left margin Defines the border for this div class Sets a spacing of .2 em from the inside of the border to the element’s content Sets a spacing of .5 em from the outside of the border to all other content Moves element to the right, and lets other content flow around it

6. Another floating example-part2

7. The clearproperty • floating elements may overlap with other elements • left: places this element below any left-floating elements. • right: places this element below any right-floating elements. • both: places this element below any floating elements on either side p { background-color: fuchsia; } h2 { clear: right; background-color: yellow; } CSS Output

8. Clear diagram CSS div#sidebar { float: right; } p { clear: right; }

9. Common error: container too short <p> <imgsrc="images/homestar_runner.png" alt="homestar runner" /> Homestar Runner is a Flash animated Internet cartoon. It mixes surreal humour with .... </p> HTML p { border: 2px dashed black; } img { float: right; } CSS Output • Image is inline element in p, then we want the img floating element to fit in the p element. • p should extend downward so that its border encloses the entire image • How?

10. The overflowproperty • Useful for telling the browser not to let the floating content hang off the bottom of an element • hidden or auto: the browser makes the element large enough to fit the floating content. • scroll: is used to enable scrollbars on elements like text boxes and tall divs p { border: 2px dashed black; overflow: hidden; } CSS Output

11. Multi-column layouts • When more than one element floats in the same direction, they stack horizontally. • The first floating element is the furthest toward the float direction • This can be useful to multi-column layouts HTML <div> <p>the first paragraph</p> <p>the second paragraph</p> <p>the third paragraph</p> Some other text that is important </div> CSS p { float: right; width: 20%; margin: 0.5em; border: 2px solid black; } div { border: 3px dotted green; overflow: hidden; }

12. The position property (examples) • Allows absolutepositioning, which providesgreater control over where on a page elements reside. • Normally, elements are positioned on the page in the order that they appear. • Absolute positioning removes them from the normal flow of elements on the page and positions them according to distance from the top, left, right or bottom margin of its parent element div#ad { position: fixed; right: 10%; top: 45%; } CSS

13. Relative positioning CSS #lifted { position: relative; left: 0.5em; top: 1em; border: 2px solid black; } HTML <p> This example has <span id="lifted">some text</span> with a relative position. </p> Output • Relative positioning sets the location of an element to an offset from its normal static position. • actual position determined by top, bottom, left, rightvalues • should often specify a width property as well

14. Absolute positioning CSS HTML #menubar { position: absolute; right: 40px; top: 20px; width: 100px; } <div id=“area1”>…</div> <div id=“area2”> <div id=“menubar”>…</div> </div> <p>…</p> • removed from normal flow (like floating ones) • positioned relativeto the block element containing them if this block also uses absoluteor relativepositioning • Otherwise, it is positioned relative to the edges of the entire page • actual position determined by top, bottom, left, rightvalues • should often specify a width property as well

15. Absolute in relative/absolute positioned elements HTML #menubar { position: absolute; right: 40px; top: 20px; width: 100px; } #area2 { position: relative; } CSS <div id=“area1”>…</div> <div id=“area2”> <div id=“menubar”>…</div> </div> <p>…</p> • absolute-positionedelements are normally positioned at an offset from the corner of the edges of the overall web page • To cause the absolute element to position itself relative to some other element's corner, wrap the absolute element in an element whose position is relative

16. Fixed positioning CSS #menubar { position: fixed; right: 40px; top: 20px; width: 100px; } <div id=“area1”>…</div> <div id=“area2”> <div id=“menubar”>…</div> </div> <p>…</p> HTML • Like absolute positioning, fixed positioning elements are removed from normal flow (like floating ones) • positioned relative to the browser window, not to the page or their containing element • even when the user scrolls the window, element will remain in the same place • Bottom Figure shows the page after the user has scrolled down.

17. z-indexing • z-index property allows a developer to layer overlapping elements • Elements that have higherz-index values are displayed in front of elements with lower z-index values Class that sets an element’s absolute position at the top left of the containing element Lowest z-index, so this element is behind all the others Set element’s position 25px from the top and 100 from the left This element will appear on top of the first one, since it has a higher z-index This element will appear on top of all others, since it has the highest z-index

18. z-indexing

19. Alignment vs. float vs. position • if possible, lay out an element by aligning its content • horizontal alignment: text-align • set this on a block element; it aligns the content within it (not the block element itself) • vertical alignment: vertical-align • set this on an inline element, and it aligns it vertically within its containing element • if alignment won't work, try floating the element • if floating won't work, try positioning the element • absolute/fixed positioning are a last resort and should not be overused

20. Details of inline elements • size properties (width, height, etc.) are ignored for inline boxes • margin-top and margin-bottom are ignored, but margin-left and margin-right are not • the containing block box's text-alignproperty controls horizontal position of inline boxes within it • text-aligndoes not align block boxes within the page • each inline box's vertical-alignproperty aligns it vertically within its block box

21. The vertical-align property • can be top, middle, bottom, baseline (default), sub, super, text-top, text-bottom, or a length value or % • baseline means aligned with bottom of non-hanging letters

22. vertical-align example CSS HTML p { background-color: yellow;} .happy {vertical-align: bottom;} span { border: 1px solid red; vertical-align: top;} .puppy {vertical-align: middle;} <p> <span > Don't be sad! Turn that frown <imgsrc="sad.png" alt="sad" />upside down! <imgclass="happy" src="smiley.jpg" alt="smile" /> Smiling burns calories, you know. <imgclass="puppy" src="puppy.jpg“ alt="puppy" /> Anyway, look at this cute puppy; isn't he adorable! So cheer up, and have a nice day. The End. </span> </p> Output

23. Common bug: space under image CSS HTML .alert {background-color: red; margin: 0px; padding: 0px;} <p class="alert"> <imgsrc="smiley.jpg" alt="smile" /> </p> <p class=“bottom"> <imgsrc="smiley.jpg" alt="smile" /> </p> .bottom{vertical-align:bottom;} Output Output • red space under the image, despite padding and margin of 0 • this is because the image is vertically aligned to the baseline of the paragraph (not the same as the bottom) • setting vertical-alignto bottomfixes the problem (so does setting line-height to 0px) 23

24. The display property • allows a programmer to decide if an element is displayed as a block element, inline element, or is not rendered at all (none) • values: none, inline, block, run-in, compact, ... • use carefully, because it can radically alter the page layout • Even if you set span’s display to block, the validator will compalin why span is not placed inside a block CSS HTML h2 { display: inline; background-color: yellow; border: 1px solid black; } <h2>This is a heading</h2> <h2>This is another heading</h2> Output One common use to display block elements as inline elements

25. The display property CSS HTML li { display: inline; padding: 0.5em; border: 2px solid gray; } <ul id="menubar"> <li>News</li> <li>Links</li> <li>Members Only</li> <li>Join</li> </ul> Output CSS HTML div { border: 2px solid black; } p.secret { display: none; } <div> <p class="secret">No one will be able to see this! :-(</p> <p>But you can see this</p> </div> Output

26. The visibility property • hidden elements will still take up space onscreen, but will not be shown • to make it not take up any space, set display to none instead • can be used to show/hide dynamic HTML content on the page in response to events CSS HTML div { border: 2px solid black; } p.secret { visibility: hidde; } <div> <p class="secret">No one will be able to see this! :-(</p> <p>But you can see this</p> </div> Output

27. The opacityproperty (CSS3) CSS body { background-image: url("images/marty-mcfly.jpg"); background-repeat: repeat; } p { background-color: yellow; margin: 0; padding: 0.25em; } p.mcfly1 { opacity: 0.75; } p.mcfly2 { opacity: 0.50; } p.mcfly3 { opacity: 0.25; } Output

28. Embedding Fonts (Internet Explorer 10, Firefox) • CSS3 gives you the capability to embed fonts on a page. • the font does not have to be installed on the user’s computer. • You must declare the new font in your CSS file as following: @font-face { font-family: MyCoolFont; src: url('BlackBoard.ttf'); } CSS • This embedsthe font'BlackBoard' and givesit the name'MyCoolFont'. • The font file (in this case, a file that ends with .ttf) must be in the same folder as the webpage. • For royalty free fonts check dafont.com and Google Web Fonts. • After declaring a font, it can be used anywhere like a normal font. h1 { font-family: MyCoolFont, Verdana; } CSS

29. CSS Transformations and AnimationsInternet Explorer 10, Firefox • CSS3 hasatransformproperty that describes rotations, scaling, and other 2D or 3D modifications to a tag (W3Schools: transform). div { width:200px; height:100px; background-color:yellow; transform:rotate(7deg); /* Rotate div */ } CSS <div>Hello</div> HTML • If you use animation(described next slide) in combination with transform, you can cause a tag to move from being rotated one way to being rotated another way, etc.

30. Animation(CSS3) • CS33 animations can replace animated images, Flash animations, and JavaScripts in existing web • To create animations, you will have to learn about the @keyframesrule (W3Schools: @keyframesrule) • After creating animation using @keyframes, it should be bound to a selector by specifying at least these two animation properties: • name of the animation • durationof the animation • animation: namedurationtiming-function delay iteration-count directionfill-modeplay-state; • name: the name of the keyframe you want to bind to the selector • duration: how many seconds or milliseconds an animation takes to complete • iteration-count : how many times an animation should be played (i.e. infinite) h1 {animation: spin 2s;} where spin is the animation created by @keyframes

31. W3Schools: @keyframes rule • With the @keyframesrule, you can create animations. Syntax : @keyframesanimationname{keyframes-selector{css-styles;}} • Animationnamedefines the name of the animation • keyframes-selectordefinethe percentage of the animation duration; legal values are: 0-100%; from (same as 0%); to (same as 100%); You can have many keyframes-selectors in one animation • css-styles: One or more legal CSS style properties • Animation is created by gradually changing from one set of CSS styles to another. @keyframesmyfirst { 0%   {background: red;} 25%  {background: yellow;} 50%  {background: blue;} 100% {background: green;} }

32. CSS Transformations and Animations @keyframesspin { from { /* styles to have at the start of the animation */ transform: rotateZ(0deg); } to { /* styles to have at the end of the animation */ transform: rotateZ(180deg); } } h1 { animation: spin 2s infinite; }

33. CSS Transformations and Animations @keyframesmymove { from {top:0px;} to {top:200px;} } div { width: 100px; height: 100px; background: red; position: relative; animation: mymove5s infinite; } <body> <div></div> </body>