1. Advanced CSS & HTML 5 Introduction to Web Design and Development

3. Classes

4. CSS Classes Classes can be used to apply varying format to a tag. When defining the style use a dot to modify the tag name. For the name, use a meaningful term (no spaces). p {font-name: Arial} /* General, all p elements */ p.fontBlue {color: blue} /* Only the p element using the p.fontBlue class */ …

5. CSS Classes Classes can be generalized to apply to multiple elements. Defining a class without an associated element gives us the ability to apply those rules to multiple elements on a page..fontBlue {color: blue} /* CSS code */ …

6. CSS Classes General style applied, then class style. Each tag can have multiple classes (separated with a space) p { font-family: Arial, Helvetica, sans-serif } /* General rule in CSS */.bold { font-weight: bold } /* CSS class for font weight */.italics { font-style: italic } /* CSS class for font style */ This is special text This is special h1

7. Flashback! Identify the elements in the following CSS rule: p { color: #FF8822; } Selector Property Value Well Done!

8. IDs

9. CSS IDs IDs are similar to classes. Difference: ID can only be applied to a single, unique page element. When defining the ID use a # to indicate the id name. p {font-name: arial} #special {color: blue} When applying, specify the style in the tag opening. This is special text

10. CSS IDs Used by both CSS and Javascript Identifies an element on a page so that Javascript code can access and modify the content after the page has loaded on the client’s browser Works with the Document Object Model (DOM) You’ll learn more about this in Advanced Web In order for Javascript to know which element to modify, the element must have a unique identification (hence, ID)

11. CSS Classes and IDs Any single element can have both classes and an ID. …

12. CSS Classes and IDs In terms of order of operation, classes are applied first, and then the ID..bold{ font-weight: bold; }.italics{ font-style: italic; }.fontRed{ color: red; } #footerStyle{ font-weight:normal; background-color:green; color:pink;} …

13. and

14. HTML elements and … Div elements are block level container that allows us to create sections of our webpage. Used to be used to organize a web page. Now, used to identify major ‘chunks’ of data and provide dynamic content.

15. HTML elements and … Span elements are inline container elements that allows us to apply formatting (bold, underline, color change, etc) to small sets of text.

16. Span Example… In this new paragraph we are going to have a section that is That is bolded, underlined, and red. IN CSS.bold{font-weight:bold;}.underline{text-decoration:underline;}.fontRed{color:red;}

17. Organizing a Page

18. … The Old Way This is how CSS used to be used to organize a page’s main components. HTML 5 is so new, that it is probably still in wide use, but will pass as HTML 5 semantic elements are adopted by developers. Each of these IDs are associated with elements on the web page in the order, left to right and top to bottom, that they appear. Thus, the web page starts out with a, then a “nav” div, a “sidebar” div, a “content” div, and, finally, a “footer” div.

19. The HTML 5 Way This is how the new HTML 5 semantic elements are used to replace the old CSS IDs and thus, again, make structure the responsibility of HTML while leaving the styling to CSS. Each of these elements, of course, can be styled using CSS, but the structure of the document is defined by the HTML. For example, in our CSS, we could make a rule, section { background-color: #F9F9F9 } Which would make the background color of the section element of the resulting page a light gray.

20. CSS Positioning

21. We can use the position property to position the elements on the screen. Potential values: position: static Default value. Elements are shown on the screen in the order they are defined position: relative The element is positioned relative to its normal (static) position

22. CSS Positioning We can use the position property to position the elements on the screen. Potential values: position: absolute The element is positioned absolutely based on its container (if container is something other than static position) position: fixed The element is positioned in the browser’s window and fixed in that location

23. CSS properties width – determines how wide an element can be height – determines how tall an element can be left – defines its left position based upon the container it is within (can be negative value) right – defines its right position based upon the container it is within (can be negative value) bottom – defines its bottom position based upon the container it is within (can be negative value) top – defines its top position based upon the container it is within (can be negative value)

24. CSS Positioning Example

25. CSS Property Float and Clear Float allows us to float objects to the left or the right of the screen. Example: img{ float: left;} div{ float:right;} Clear allows us to stop the floating of the objects and return to the next line..clear{ clear: both;} Float and Clear Demo:

26. CSS Contextual Selectors

27. In CSS, you have the option to group tags together. To do this, separate each tag with a comma. CSS example: h1, h2, h3, h4, h5, h6 { background-color:lightblue;} Instead of: h1{ background-color:lightblue;} h2{ background-color:lightblue;} h3{ background-color:lightblue;} h4{ background-color:lightblue;} h5{ background-color:lightblue;} h6{ background-color:lightblue;}

28. CSS Contextual Selectors In addition, we have the ability to change properties of any nested tags We can use contextual selectors to modify immediately nested tags or tags that are a descendant of another tag

29. CSS Contextual Selectors Examples (in CSS): * { background-color:green } /* all tags will have bg green */ h1 em { background-color:green } /* all italics tags nested inside of an h1 tag will have a bg green */

30. CSS Contextual Selectors Examples (in CSS): h1 > em {background-color:green} /* all italics tags immediately nested inside of an h1 tag will have a bg green */

31. CSS Contextual Selectors CSS: div strong {color: green;} HTML: color color color

32. CSS Contextual Selectors CSS: div > strong {color: green;} HTML: color color color

33. Pseudo Classes

34. Pseudo-classes CSS pseudo-classes are designed to allow us to add special effects to some selectors. For instance, if we wanted to change the way a hyperlink looks when someone hovers over a link, we can do that with pseudo-classes. We signify a pseudo-class with the : colon character after the tag or class. Example: a:hover{ color:green;}.nav:hover{color:green;}

35. Pseudo-classes Some examples :linka:linkunvisited links :visiteda:visitedvisited links :activea:activeactive links :hovera:hovermoused over links :first-letterp:first-letterfirst letter of a paragraph :first-linep:first-linefirst line of a paragraph

36. More on the Box Model

37. Margin Collapse When two elements are above one another, the bottom margin of the 1 st element will collapse with the top margin of the 2 nd.

38. Box Model and CSS properties In CSS, we have the ability to set the padding, border, and margin of the HTML tags to adequately position them on the screen. Padding, borders, and margins are optional and default to 0. However browsers will still apply a minimal margin when laying out a page. Can be overridden explicitly with CSS (and is good practice to do so).

39. Padding We have the ability to set padding for each side of an HTML tag. We can do this one of two ways: Example one: padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; div{ padding-right: 10px; }

40. Padding We have the ability to set padding for each side of an HTML tag. We can do this in several ways: padding: 10px Sets top, right, bottom, and left padding to 10px padding: 10px 5px 15px 20px; Sets top to 10px, right to 5px, bottom to 15px, and left to 20px; padding: 10px 5px Sets top and bottom to 10px and left and right to 5px; div{ padding: 10px; } div.padRight{ padding-right:20px;}

41. Border With border, we can overload the border property as follows (which sets all four borders): border: 5px solid red; Top, left, bottom, and right borders are a solid line, 5px thick, and colored red;

42. Border We can also set border-width, border-style, and border-color border-width: (thin, medium, thick, 5px) border-style: (solid, dotted, dashed, double, groove, ridge, inset, outset) border-color: (named color, hexadecimal, rgb, rgba) div{ border-width:5px; border-style:solid; border-color: red; }

43. Border Beyond using the properties border, border-style, border- width, and border-color, we also have the following:  border-left:  border-left-color:  border-left-style:  border-left-width:  border-top:  border-top-color:  border-top-style:  border-top-width:  border-right:  border-right-color:  border-right-style:  border-right-width:  border-bottom:  border-bottom-color:  border-bottom-style:  border-bottom-width:

44. Margin We have the ability to set margin for each side of an HTML tag. We can do this several ways: margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px; div{ margin-right: 10px; }

45. Margin margin: 10px Sets top, right, bottom, and left margin to 10px margin: 10px 5px 15px 20px; Sets top to 10px, right to 5px, bottom to 15px, and left to 20px; margin: 10px 5px Sets top and bottom to 10px and left and right to 5px; div { margin: 10px; } div.padRight { margin-right:20px;}

46. Centering Elements w/ Margin When we think of centering content, typically we think of text-align. This property will only center the content (or text) of a particular block-level element. But what if you wanted to center the entire element itself.

47. Centering Elements w/ Margin One “trick” commonly used in CSS is to set the margin to the following: div{ margin: 0 auto; } In this particular example, we are saying apply no margins to the top and the bottom. For the left and right, take the empty space between the html tags, and apply it evenly to the left and to the right

48. Centering Elements w/ Margin - Example CSS: div{ width: 400px; height: 500px; background-color: green; margin: 0 auto; } HTML: test

49. Display and Visibility

50. CSS Display The CSS property display can alter how an html tag is displayed on the screen. Most common usage is to change an inline element (think or ) to a block level element. This is important for changing width, height, positioning, etc.

51. CSS Display Example: img{ display:block; width: 400px; margin: 0 auto; } By doing this, I can now center the image in its container

52. CSS Display Another example is display: none. In this example, the object will not be visible on the screen and it will not take up space on the screen. Example: div{ display:none; }

53. CSS visibility CSS visibility allows us to declare if the object is visible on the screen. Example: div{ visibility: hidden; } div{ visibility: visible; } The difference between display:none and visibility:hidden is that visibility:hidden will continue to take up screen space.

54. Unordered List Navigation Bar Example of using CSS to alter a set of tags

55. HTML & CSS – Navigation Bar Using HTML and CSS we can transform a basic unordered list into a navigation bar:

56. Navigation Bar - HTML Home News Articles Forum Contact About

57. Navigation Bar - CSS First, remove the bullets, margins, and paddings from the list: ul{ list-style-type:none; margin:0; padding:0; }

58. Navigation Bar - CSS Second, we need to float the list items to the left: li{ float:left; }

59. Navigation Bar - CSS Last, we need to display the as a block and set a width: li > a{ display:block; width:60px; }

60. Navigation Bar - CSS Let’s make it pretty: Remove the following CSS: li > a{ display:block; width:100px; }

61. Navigation Bar - CSS Making it pretty li > a:link, li > a:visited { display: block; float: left; width: 100px; margin-right: 3px; line-height: 1.8em; background-color: #00A; color: #FFF; border-radius: 10px; text-align: center; text-decoration: none; position: relative; left: 50px; top: -15px; } li > a:hover, li > a:visited { background-color: #A0A; color: #FF0; }

62. Sources “CSS Navigation Bar”, W3Schools, Retrieved from http://www.w3schools.com/css/css_navbar.asp “HTML5 Semantic Elements”, W3Schools, Retrieved from http://www.w3schools.com/html/html5_semantic_elements.asp “HTML Reference”, W3Schools, Retrieved from http://www.w3schools.com/tags/default.asp “CSS Reference”, W3Schools, Retrieved from http://www.w3schools.com/cssref/default.asp

63. Copyrights Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation. IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, System z9, z10, z9, iSeries, pSeries, xSeries, zSeries, eServer, z/VM, z/OS, i5/OS, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server, PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER, OpenPower, PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX, Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered trademarks of IBM Corporation. Linux is the registered trademark of Linus Torvalds in the U.S. and other countries. Oracle is a registered trademark of Oracle Corporation. HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World Wide Web Consortium, Massachusetts Institute of Technology. Java is a registered trademark of Sun Microsystems, Inc. JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape. SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP Business ByDesign, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries. Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects S.A. in the United States and in other countries. Business Objects is an SAP company. ERPsim is a registered copyright of ERPsim Labs, HEC Montreal. Other products mentioned in this presentation are trademarks of their respective owners. Presentation prepared by and copyright of John Ramsey, East Tennessee State University, Department of Computing. (ramseyjw@etsu.edu)ramseyjw@etsu.edu