1. CSCI 1720
W3.CSS – Part 2
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

2. w3.css - Cards East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

3. w3.css - Cards Class Defines w3-card Same as w3-card-2 w3-card-2
Container for any HTML content (2px bordered shadow)
w3-card-4
Container for any HTML content (4px bordered shadow)
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

4. w3.css - Cards http://csci1720.net/examples/w3cards.php
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

5. w3.css - Picture Cards http://csci1720.net/examples/w3cards2.php
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

6. w3.css - Fonts East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

7. w3.css – Font Sizes
Headings should be used for what they are: Headings With W3.CSS, font sizes can be set by the following w3-size classes
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

8. w3.css – W3.CSS Fonts
With W3.CSS it is extremely easy to add new fonts to a web page Very easy to use (only CSS and HTML) Unlimited use of external font libraries (Like Google Fonts) Works in all modern browsers Internal Fonts (much like standard CSS) External Fonts
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

9. w3.css – W3.CSS Fonts Remember the Google Fonts API?
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

10. w3.css – W3.CSS External Fonts
In your external stylesheet (or in the document’s head element), include an external font, and give the font a class name
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

11. w3.css – W3.CSS External Fonts
In the body of your web page, use the class name
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

12. w3.css – Display / Images
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

13. w3.css – W3.CSS Display
The display classes allow you to display HTML elements in specific positions inside other HTML elements
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

14. w3.css – Images
Like Bootstrap, w3.css includes a number of classes to modify the way an image is displayed Rounded Circle Bordered With text
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

15. w3.css – Images
Rounded
The w3-round class adds rounded corners to an image
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

16. w3.css – Images
Circled
The w3-circle class shapes an image to a circle
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

17. w3.css – W3.CSS Display Text in an Image
The display classes allow you to display HTML elements in specific positions inside other HTML elements
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

18. w3.css - Tables
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

19. w3.css – W3.CSS Table Classes
Defines
w3-table
Container for an HTML table
w3-striped
Striped table
w3-border
Bordered table
w3-bordered
Bordered lines
w3-centered
Centered table content
w3-hoverable
Hoverable table
w3-table-all
All properties set
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

20. w3.css – W3.CSS Striped Table
The w3-striped class is used to add zebra-stripes to a table
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

21. w3.css – W3.CSS Striped Table
You can modify the row color with the w3-color class
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

22. w3.css – W3.CSS Bordered Table
The w3-bordered class adds a bottom border to each table row
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

23. w3.css – W3.CSS Striped Bordered Table
Combine the w3-striped class and the w3-bordered class to create a striped bordered table
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

24. w3.css – W3.CSS Border Around a Table
The w3-border class is used to display a border around a table
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

25. w3.css – W3.CSS Hoverable Table
The w3-hoverable class adds a grey background color on mouse-over
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

26. w3.css – W3.CSS Hoverable Table
Modify the hover colors using the w3-hover-color or w3-hover-text-color classes on each row (<tr>…</tr>)
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

27. w3.css – Lists East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

28. w3.css – Lists The w3-ul class is used to display a basic list
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

29. w3.css – Lists The w3-border class adds a border around the list
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

30. w3.css – Lists
The w3-card-number classes can be used to show a list as a card
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

31. w3.css – Lists
The w3-card-number classes can be used to show a list as a card
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

32. w3.css – Lists
The w3-color classes can be used to add a color to the list
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

33. w3.css – Lists Click on the "x" to close/hide a list item
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

34. w3.css – Tags East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

35. w3.css – Tags W3.CSS provides one class for tags, labels, and signs
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

36. w3.css – Tags Signs are nothing but large tags
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

37. w3.css – Tags
The w3-round-size classes can be used to add rounded corners to a sign
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

38. w3.css – Tags Use the standard CSS transform property to rotate a sign
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

39. w3.css – Icons East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

40. w3.css – Icons
With W3.CSS you can use the icon library you like, such as: Font Awesome Icons Google Material Design Icons Bootstrap Icons
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

41. w3.css – Icons To insert an icon
Include the icon library from a CDN (Content Delivery Network) in the <head> section OR
Add the name of the icon class to any inline HTML element
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

42. w3.css – Icons
The <i> and <span> elements are widely used to add icons To control the size of the icon, change the font-size property of the icon, or use one of the w3-size classes: w3-tiny w3-small w3-large w3-xxlarge w3-xxxlarge w3-jumbo
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

43. w3.css – Icons Some Font Awesome Icons
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

44. w3.css – Icons http://csci1720.net/examples/w3icons1.php
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

45. w3.css – Icons http://csci1720.net/examples/w3icons2.php
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

46. w3.css – Other CSS Integrations
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

47. w3.css – W3.CSS Other w3.css Integrations
W3.CSS Text W3.CSS Round W3.CSS Padding W3.CSS Margins W3.CSS Buttons W3.CSS Notes W3.CSS Quotes W3.CSS Alerts
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

48. Sources
mobile-first
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design

49. Copyrights East Tennessee State University Department of Computing
Presentation prepared by and copyright of John Ramsey, East Tennessee State University, Department of Computing .
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.
East Tennessee State University Department of Computing
CSCI 1720 Intermediate Web Design