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

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

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

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

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

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

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 http://csci1720.net/examples/w3fontsize.php East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

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

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

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

w3.css – W3.CSS External Fonts In the body of your web page, use the class name http://csci1720.net/examples/w3extfonts.php http://csci1720.net/examples/w3extfonts2.php East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

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

w3.css – W3.CSS Display The display classes allow you to display HTML elements in specific positions inside other HTML elements http://csci1720.net/examples/w3display.php East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

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

w3.css – Images Rounded The w3-round class adds rounded corners to an image http://csci1720.net/examples/w3roundimage.php# East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css – Images Circled The w3-circle class shapes an image to a circle http://csci1720.net/examples/w3circleimage.php# East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

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 http://csci1720.net/examples/w3displayimage.php East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

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

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

w3.css – W3.CSS Striped Table The w3-striped class is used to add zebra-stripes to a table http://csci1720.net/examples/w3stripedtable.php East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css – W3.CSS Striped Table You can modify the row color with the w3-color class http://csci1720.net/examples/w3stripedtable2.php East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

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

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

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

w3.css – W3.CSS Hoverable Table The w3-hoverable class adds a grey background color on mouse-over http://csci1720.net/examples/w3hovertable.php East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

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>) http://csci1720.net/examples/w3hovertable2.php East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

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

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

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

w3.css – Lists The w3-card-number classes can be used to show a list as a card http://csci1720.net/examples/w3listcard.php East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css – Lists The w3-card-number classes can be used to show a list as a card http://csci1720.net/examples/w3centeredlist.php East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css – Lists The w3-color classes can be used to add a color to the list http://csci1720.net/examples/w3coloredlist.php East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

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

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

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

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

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

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

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

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

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

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

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

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

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

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

w3.css – W3.CSS Other w3.css Integrations W3.CSS Text https://www.w3schools.com/w3css/w3css_text.asp W3.CSS Round https://www.w3schools.com/w3css/w3css_round.asp W3.CSS Padding https://www.w3schools.com/w3css/w3css_padding.asp W3.CSS Margins https://www.w3schools.com/w3css/w3css_margins.asp W3.CSS Buttons https://www.w3schools.com/w3css/w3css_buttons.asp W3.CSS Notes https://www.w3schools.com/w3css/w3css_notes.asp W3.CSS Quotes https://www.w3schools.com/w3css/w3css_quotes.asp W3.CSS Alerts https://www.w3schools.com/w3css/w3css_alerts.asp East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

Sources http://www.commonplaces.com/blog/the-importance-of-designing-for- mobile-first https://www.w3schools.com/w3css/default.asp East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

Copyrights East Tennessee State University Department of Computing Presentation prepared by and copyright of John Ramsey, East Tennessee State University, Department of Computing . (ramseyjw@etsu.edu) 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