Transcription
W3.CSSAbout the TutorialW3.CSS is a Cascading Style Sheet (CSS) developed by w3schools.com. It helps in creatingfaster, beautiful, and responsive websites. It is inspired from Google Material Design.AudienceThis tutorial is meant for professionals who would like to learn the basics of W3.CSS andhow to use it to create faster, beautiful, and responsive websites. This tutorial explains allthe fundamental concepts of W3.CSS.PrerequisitesBefore proceeding with this tutorial, you should have a basic understanding of HTML, CSS,JavaScript, Document Object Model (DOM), and any text editor. In addition, it will help ifyou know how web-based applications work.Execute W3.CSS OnlineFor most of the examples given in this tutorial, you will find a Try-it option. Use this optionto execute your W3.CSS programs on the spot and enjoy your learning.Try the following example using the Try-it option available at the top right corner of thefollowing sample code box html head title The W3.CSS Example /title meta name "viewport" content "width device-width, initial-scale 1" link rel "stylesheet" href "http://www.w3schools.com/lib/w3.css" /head body header class "w3-container w3-teal" h1 Hello World! /h1 /header /body /html i
W3.CSSCopyright & Disclaimer Copyright 2014 by Tutorials Point (I) Pvt. Ltd.All the content and graphics published in this e-book are the property of Tutorials Point (I)Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republishany contents or a part of contents of this e-book in any manner without written consentof the publisher.We strive to update the contents of our website and tutorials as timely and as precisely aspossible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt.Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of ourwebsite or its contents including this tutorial. If you discover any errors on our website orin this tutorial, please notify us at contact@tutorialspoint.comii
W3.CSSTable of ContentsAbout the Tutorial . iAudience . iPrerequisites . iExecute W3.CSS Online . iCopyright & Disclaimer. iiTable of Contents . iii1.W3.CSS – OVERVIEW . 1What is W3.CSS? . 1Responsive Design . 1Standard CSS . 1Material Design . 12.W3.CSS – ENVIRONMENT SETUP . 2How to Use W3.CSS? . 2Local Installation . 2CDN Based Version . 33.W3.CSS – CONTAINERS. 4Example . 44.W3.CSS – CODE COLORING . 75.W3.CSS – CARDS. 10Example . 106.W3.CSS – RESPONSIVE DESIGN. 13Example . 13iii
W3.CSS7.W3.CSS – GRIDS. 16Columns for Small Screen Devices . 16Columns for Medium Screen Devices . 17Columns for Large Screen Devices . 17Usage . 17Example . 188.W3.CSS – FORMS. 20Example . 209.W3.CSS – BUTTONS . 23Example . 2310. W3.CSS – TOOLTIPS . 25Example . 2511. W3.CSS – MODAL DIALOG . 27Example . 2712. W3.CSS – TABLES. 29Example . 2913. W3.CSS – LISTS . 33Example . 3314. W3.CSS – IMAGES. 36Example . 3615. W3.CSS – ICONS . 38Usage . 38Example . 38iv
W3.CSS16. W3.CSS – COLORS . 41Color Themes . 41Example . 4217. W3.CSS – NAVIGATION . 44Example . 4418. W3.CSS – UTILITIES. 46Example . 46v
1. W3.CSS – OVERVIEWW3.CSSWhat is W3.CSS?W3.CSS is a Cascading Style Sheet (CSS) developed by w3schools.com. It helps in creatingfaster, beautiful, and responsive websites. It is inspired from Google Material Design.Some of its salient features are as follows: In-built responsive designing Standard CSS Inspired by Google Material Design Free to useResponsive Design W3.CSS has in-built responsive designing so that the website created usingW3.CSS will redesign itself as per the device size. W3.CSS has a 12 column mobile-first fluid grid that supports responsive classes forsmall, large, and medium screen sizes. W3.CSS classes are created in such a way that the website can fit any screen size. The websites created using W3.CSS are fully compatible with PC, tablets, andmobile devices.Standard CSS W3.CSS uses standard CSS only and it is very easy to learn. There is no dependency on any external JavaScript library such as jQuery.Material Design W3.CSS is inspired from Google Material Design. It supports paper-like design. It supports shadows and bold colors. The colors and shades remain uniform across various platforms and devices.And most important of all, it is absolutely free to use.1
2. W3.CSS – ENVIRONMENT SETUPW3.CSSHow to Use W3.CSS?There are two ways to use W3.CSS: Local Installation - You can download the W3.CSS file on your local machine andinclude it in your HTML code. CDN Based Version - You can include the W3.CSS file into your HTML code directlyfrom the Content Delivery Network (CDN).Local Installation Go to http://www.w3schools.com/w3css/w3css downloads.asp to download thelatest version available. Then, put the downloaded w3.css file in a directory of your website, e.g. /css.ExampleNow you can include the css file in your HTML file as follows html head title The W3.CSS Example /title meta name "viewport" content "width device-width, initial-scale 1" link rel "stylesheet" href "css/w3.css" /head body header class "w3-container w3-teal" h1 Hello World! /h1 /header /body /html 2
W3.CSSIt will produce the following result –CDN Based VersionYou can include the W3.CSS file into your HTML code directly from the Content DeliveryNetwork (CDN). W3Schools.com provides content for the latest version.Note: We are using W3Schools.com CDN version of the library throughout this tutorial.ExampleNow let us rewrite the above example using jQuery library from W3Schools.com CDN. html head title The W3.CSS Example /title meta name "viewport" content "width device-width, initial-scale 1" link rel "stylesheet" href "http://www.w3schools.com/lib/w3.css" /head body header class "w3-container w3-teal" h1 Hello World! /h1 /header /body /html It will produce the following result –3
3. W3.CSS – CONTAINERSW3.CSSHTML5 has the following container elements: div - Provides a generic container to HTML content. header - Represents the header section. footer - Represents the footer section. article - Represents articles. section - Provides a generic container for various types of sections.W3.CSS provides w3-container as a primary class to style all the above-mentionedcontainers. W3.CSS also has other classes like w3-border, w3-red, w3-teal, w3padding-32to add further styling attributes to the containers.ExampleThe following example showcases the use of w3-container class to style various containers.w3css containers.htm html head title The W3.CSS Containers /title meta name "viewport" content "width device-width, initial-scale 1" link rel "stylesheet" href "http://www.w3schools.com/lib/w3.css" /head body header class "w3-container w3-red" h1 HTML5 Tutorial /h1 /header div class "w3-container w3-border w3-teal" p HTML5 is the latest and most enhanced version of HTML. Technically,HTML is not a programming language, but rather a mark up language. /p /div article class "w3-container" p The latest versions of Apple Safari, Google Chrome, MozillaFirefox, and Opera all support many HTML5 features and Internet Explorer 9.04
W3.CSSwill also have support for some HTML5 functionality. The mobile web browsersthat come pre-installed on iPhones, iPads, and Android phones all haveexcellent support for HTML5. /p /article section class "w3-container" p HTML5 is designed, as much as possible, to be backward compatiblewith existing web browsers. New features build on existing features and allowyou to provide fallback content for older browsers. /p /section footer class "w3-container w3-red" p Copyright @TutorialsPoint.COM /p /footer /body /html ResultVerify the result.W3.CSS also provides containers with hide/close capability. See the following example:w3css hide container.htm html head title The W3.CSS Containers /title meta name "viewport" content "width device-width, initial-scale 1" link rel "stylesheet" href "http://www.w3schools.com/lib/w3.css" /head body div class "w3-container w3-border w3-teal" span class "w3-closebtn"onclick "this.parentElement.style.display 'none'" X /span p Close container by clicking on the X in the upper right corner. /p 5
W3.CSS /div /body /html ResultVerify the result.6
4. W3.CSS – CODE COLORINGW3.CSSW3.CSS provides excellent support for syntax highlighting of the following languages: HTML - Use classes w3-code htmlHigh on the container having HTML Code. CSS - Use classes w3-code cssHigh on the container having CSS Code. JS - Use classes w3-code jsHigh on the container having CSS Code.You have to include the following script to have a link to the js file to have the syntaxhighlighting support: script src "http://www.w3schools.com/lib/w3codecolors.js" /script w3css color coding.htm html head title The W3.CSS Syntax Highlighter /title meta name "viewport" content "width device-width, initial-scale 1" link rel "stylesheet" href "http://www.w3schools.com/lib/w3.css" /head body header class "w3-container w3-teal" h2 HTML Syntax Highlighted /h2 /header div class "w3-code htmlHigh" html head title The W3.CSS Example /title meta name "viewport" content "width device-width, initial-scale 1" link rel "stylesheet" href "css/w3.css" /head body header class "w3-container w3-teal" h1 Hello World! /h1 /header /body 7
W3.CSS /html /div header class "w3-container w3-teal" h2 CSS Syntax Highlighted /h2 /header div class "w3-code cssHigh" .bold {font-weight:bold;}#boldLabel {font-weight:bold;}table, th, td {font-family:sans;} /div header class "w3-container w3-teal" h2 JS Syntax Highlighted /h2 /header div class "w3-code cssHigh" script type "text/javascript" function(message){}var message "Hello, World!";alert(message); /script /div script src "http://www.w3schools.com/lib/w3codecolors.js" /script /body /html Result8
W3.CSSVerify the result.9
5. W3.CSS – CARDSW3.CSSW3.CSS has several special classes to display containers as paper-like cards with shadow.Class NameDescriptionw3-cardStyles a container for any HTML content with borderw3-card-2Styles a container for any HTML content with 2px bordered shadoww3-card-4Styles a container for any HTML content with 4px bordered shadoww3-card-8Styles a container for any HTML content with 8px bordered shadoww3-card-12Styles a container for any HTML content with 12px bordered shadowExamplew3css cards.htm html head title The W3.CSS Syntax Highlighter /title meta name "viewport" content "width device-width, initial-scale 1" link rel "stylesheet" href "http://www.w3schools.com/lib/w3.css" style div {width : 200px;height : 200px;} /style /head body header class "w3-container w3-teal" h2 Yellow Card Demo /h2 /header br/ 10
W3.CSS div class "w3-card w3-yellow" p b TODO: /b Learn HTML5 /p /div div class "w3-card-2 w3-yellow" p b TODO: /b Learn HTML5 /p /div div class "w3-card-4 w3-yellow" p b TODO: /b Learn HTML5 /p /div div class "w3-card-8 w3-yellow" p b TODO: /b Learn HTML5 /p /div br/ header class "w3-container w3-teal" h2 White Card Demo /h2 /header br/ div class "w3-card w3-white" p b TODO: /b Learn W3.CSS /p /div div class "w3-card-8 w3-white" p b TODO: /b Learn HTML5 /p /div br/ div class "w3-card-4" style "width:550px;" header class "w3-container w3-blue" h1 HTML5 Tutorial /h1 /header div class "w3-container" style "width:550px;" p The latest versions of Apple Safari, Google Chrome, MozillaFirefox, and Opera all support many HTML5 features and Internet Explorer 9.0will also have support for some HTML5 functionality. The mobile web browsersthat come pre-installed on iPhones, iPads, and Android phones all haveexcellent support for HTML5. /p /div /div br/ header class "w3-container w3-teal" 11
W3.CSS h2 Image Card Demo /h2 /header br/ div class "w3-card-12" style "width:255px; height: 230px;" img src "/html5/images/html5-mini-logo.jpg" alt "html5" div class "w3-container" p Learn HTML5 /p /div /div /body /html ResultVerify the result.12
6. W3.CSS – RESPONSIVE DESIGNW3.CSSW3.CSS has several special classes to create a responsive design.ClassDescriptionNamew3-halfSets the container to occupy 1/2nd of the window on medium or large screendevices. If a screen is smaller than 601 pixels, then it resizes the containerto 100%.w3-thirdSets the container to occupy 1/3rd of the window on medium or large screendevices. If a screen is smaller than 601 pixels, then it resizes the containerto 100%.w3-Sets the container to occupy 1/4th of the window on medium or large screenquarterdevices. If a screen is smaller than 601 pixels, then it resizes the containerto 100%.w3-colSpecifies a column in a 12 column grid.w3-rowSpecifies a padding-less container to be used for responsive classes. Thisclass is mandatory for responsive classes to be fully responsive.Examplew3css responsive design.htm html head title The W3.CSS Containers /title meta name "viewport" content "width device-width, initial-scale 1" link rel "stylesheet" href "http://www.w3schools.com/lib/w3.css" /head body header class "w3-container w3-teal" h2 Mobile First Design Demo /h2 13
W3.CSS p class "w3-large" Resize the window to see the effect! /p /header br/ div class "w3-row w3-border" div class "w3-container w3-half w3-red" h2 w3-half /h2 p Sets the container to occupy 1/2 sup nd /sup of the windowon medium or large screen devices. If a screen is smaller than 601 pixels thenit resizes the container to 100%. /p /div div class "w3-container w3-half" h2 w3-half /h2 /div /div /div br/ div class "w3-row w3-border" div class "w3-container w3-third w3-red" h2 w3-third /h2 p Sets the container to occupy 1/3 sup rd /sup of the windowon medium or large screen devices. If a screen is smaller than 601 pixels thenit resizes the container to 100%. /p /div div class "w3-container w3-third" h2 w3-third /h2 /div /div /div br/ div class "w3-row w3-border" div class "w3-container w3-quarter w3-red" h2 w3-quarter /h2 p Sets the container to occupy 1/4 sup th /sup of the windowon medium or large screen devices. If a screen is smaller than 601 pixels thenit resizes the container to 100%. /p /div div class "w3-container w3-quarter" h2 w3-quarter /h2 14
W3.CSS /div /div /div /body /html ResultVerify the result.15
7. W3.CSS – GRIDSW3.CSSW3.CSS provides a 12 column fluid responsive grid.It uses the w3-row and w3-col style classes to define rows and columns respectively.ClassDescriptionNamew3-rowSpecifies a padding-less container to be used for responsive columns.This class is mandatory for responsive classes to be fully responsive.w3-colSpecifies a column with sub-classesw3-col has several sub-classes meant for different types of screens.Columns for Small Screen DevicesHere is a list of column-level styles for small screen devices, typically smartphones.ClassDescriptionNames1Defines 1 of 12 columns with width as 08.33%.s2Defines 2 of 12 columns with width as 16.66%.s3Defines 3 of 12 columns with width as 25.00%.s4Defines 4 of 12 columns with width as 33.33%.s5 - s11s12Defines 12 of 12 columns with width as 100%. Default class for small screenphones.16
W3.CSSColumns for Medium Screen DevicesHere is a list of column-level styles for medium screen devices, typically tablets.ClassDescriptionNamem1Defines 1 of 12 columns with width as 08.33%.m2Defines 2 of 12 columns with width as 16.66%.m3Defines 3 of 12 columns with width as 25.00%.m4Defines 4 of 12 columns with width as 33.33%.m5 - m11m12Defines 12 of 12 columns with width as 100%. Default class for mediumscreen phones.Columns for Large Screen DevicesHere is a list of column-level styles for large screen devices, typically laptops.ClassDescriptionNamel1Defines 1 of 12 columns with width as 08.33%.l2Defines 2 of 12 columns with width as 16.66%.l3Defines 3 of 12 columns with width as 25.00%.l4Defines 4 of 12 columns with width as 33.33%.l5 - l11l12Defines 12 of 12 columns with width as 100%. Default class for largescreen devices.UsageEach subclass determines the number of columns of the grid to be used based on the typeof a device. Consider the following HTML snippet. div class "w3-row" 17
W3.CSS div class "w3-col s2 m4 l3" p This text will use 2 columns on a small screen, 4 on a medium screen,and 3 on a large screen. /p /div /div Default columns to be used are 12 on a device if a sub-class is not mentioned in the classattribute of an HTML element.Examplew3css grids.htm html head title The W3.CSS Grids /title meta name "viewport" content "width device-width, initial-scale 1" link rel "stylesheet" href "http://www.w3schools.com/lib/w3.css" /head body header class "w3-container w3-teal" h2 Mobile First Design Demo /h2 p class "w3-large" Resize the window to see the effect! /p /header div class "w3-row" div class "w3-col m1 w3-center w3-grey" 1 /div div class "w3-col m1 w3-center" 2 /div div class "w3-col m1 w3-center w3-grey" 3 /div div class "w3-col m1 w3-center" 4 /div div class "w3-col m1 w3-center w3-grey" 5 /div div class "w3-col m1 w3-center" 6 /div div class "w3-col m1 w3-center w3-grey" 7 /div div class "w3-col m1 w3-center" 8 /div div class "w3-col m1 w3-center w3-grey" 9 /div div class "w3-col m1 w3-center" 10 /div div class "w3-col m1 w3-center w3-grey" 11 /div div class "w3-col m1 w3-center" 12 /div 18
W3.CSS /div div class "w3-row" div class "w3-col w3-container m4 l3 w3-yellow" p This text will use 12 columns on a small screen, 4 on amedium screen (m4), and 3 on a large screen (l3). /p /div div class "w3-col w3-container s4 m8 l9" p This text will use 4 columns on a small screen (s4), 8 on amedium screen (m8), and 9 on a large screen (l9). /p /div /div /body /html ResultVerify the result.19
8. W3.CSS – FORMSW3.CSSW3.CSS has a very beautiful and responsive CSS for form designing. The following CSSare used:Class Namew3-groupDescriptionRepresents a bordered container. Can be used to groupa label and input.w3-inputBeautifies an input control.w3-labelBeautifies a label.w3-checkbox w3-checkmarkBeautify a checkbox/ radio button.Examplew3css forms.htm html head title The W3.CSS Forms /title meta name "viewport" content "width device-width, initial-scale 1" link rel "stylesheet" href "http://www.w3schools.com/lib/w3.css" /head body form class "w3-container w3-card-8" div class "w3-group" input class "w3-input" type "text" style "width:90%" required label class "w3-label" User Name /label /div div class "w3-group" input class "w3-input" type "text" style "width:90%" required label class "w3-label" Email /label /div div class "w3-group" textarea class "w3-input" style "width:90%" required /textarea 20
W3.CSS label class "w3-label" Comments /label /div div class "w3-row" div class "w3-half" label class "w3-checkbox" input type "checkbox" checked "checked" div class "w3-checkmark" /div Married /label br label class "w3-checkbox" input type "checkbox" div class "w3-checkmark" /div Single /label br label class "w3-checkbox" input type "checkbox" disabled div class "w3-checkmark" /div Don't know (Disabled) /label br br /div div class "w3-half" label class "w3-checkbox" input type "radio" name "gender" value "male" checked div class "w3-checkmark" /div Male /label br label class "w3-checkbox" input type "radio" name "gender" value "female" div class "w3-checkmark" /div Female /label br label class "w3-checkbox" input type "radio" name "gender" value "female" disabled div class "w3-checkmark" /div Don't know (Disabled) /label /div 21
W3.CSS /div /form /body /html ResultVerify the result.22
9. W3.CSS – BUTTONSW3.CSSW3.CSS has a very beautiful and responsive CSS for customizing the look of a button. Thefollowing CSS are used:Class Namew3-btnDescriptionRepresents a standard button. Can be used to style a link as buttonas well.w3-btn-floatingRepresents a floating button being circular in design.w3-btn-floating-Represents a large floating button.largeExamplew3css buttons.htm html head title The W3.CSS Forms /title meta name "viewport" content "width device-width, initial-scale 1" link rel "stylesheet" href "http://www.w3schools.com/lib/w3.css" /head body class "w3-container" h2 Standard Buttons /h2 button class "w3-btn" Click Me /button button class "w3-btn w3-teal" Click Me /button button class "w3-btn w3-disabled" I am disabled /button h2 Links as Buttons /h2 a class "w3-btn" Link /a a class "w3-btn w3-teal" Link /a a class "w3-btn w3-disabled" Disabled Link /a h2 Floating Buttons /h2 a class "w3-btn-floating" /a 23
W3.CSS a class "w3-btn-floating w3-teal" /a a class "w3-btn-floating w3-disabled" /a h2 Large Floating Buttons /h2 a class "w3-btn-floating-large" /a a class "w3-btn-floating-large w3-teal" /a a class "w3-btn-floating-large w3-disabled" /a /body /html ResultVerify the result.24
10. W3.CSS – TOOLTIPSW3.CSSW3.CSS supports a different kind of tooltip using w3-tooltip class. Take a look at thefollowing example. Here we've put a tooltiptext within a div and an image and applied w3tooltip on the parent div. div class "w3-tooltip" div class "w3-text w3-container w3-teal" style "width:255px;" p Learn HTML5 in simply easy way @TutorialsPoint.com /p /div div img src "html5-mini-logo.jpg" alt "html5" /div /div Examplew3css tooltips.htm html head title The W3.CSS Tooltips /title meta name "viewport" content "width device-width, initial-scale 1" link rel "stylesheet" href "http://www.w3schools.com/lib/w3.css" /head body class "w3-container" h2 Hover Demo /h2 div class "w3-tooltip" div class "w3-text w3-container w3-teal" style "width:255px;" p Learn HTML5 in simply easy way @TutorialsPoint.com /p /div div img src "html5-mini-logo.jpg" alt "html5" /div /div /body 25
W3.CSS /html ResultVerify the result.26
11. W3.CSS – MODAL DIALOGW3.CSSW3.CSS can be used to display a customizable modal dialog box instead of the standardJavaScript alert.It uses w3-row and w3-col style classes to define rows and columns respectively.Class NameDescriptionmodal-dialogRepresents the main parent window to define a dialog box.w3-modal-dialogRepresents the dialog content container.w3-modal-contentRepresents dialog contents.Examplew3css modal dialog.htm html head title The W3.CSS Modal dialog /title meta name "viewport" content "width device-width, initial-scale 1" link rel "stylesheet" href "http://www.w3schools.com/lib/w3.css" /head body class "w3-container" h2 Modal dialog Demo /h2 a class "w3-btn w3-teal" href "#model-dialog" Open a Modal dialog /a div id "model-dialog" class "w3-modal" div class "w3-modal-dialog" div class "w3-modal-content w3-card-8" header class "w3-container w3-teal" a href "#" class "w3-closebtn" /a h2 TutorialsPoint /h2 /header div class "w3-container" p Hello World! /p /div footer class "w3-container w3-teal" 27
W3.CSS p @TutorialsPoint.COM /p /footer /div /div /div /body /html ResultVerify the result.28
12. W3.CSS – TABLESW3.CSSW3.CSS can be used to display different types of tables using various styles over w3-table.Class NameDescriptionw3-tableRepresents a basic table without any border.w3-stripedDisplays a stripped table.w3-borderedDraws a table with a border across rows.w3-borderDraws a table with borders.w3-cardDraws a table as a card.w3-Draws a responsive table to show a horizontal scroll
W3.CSS 7 W3.CSS provides excellent support for syntax highlighting of the following languages: HTML - Use classes w3-code htmlHigh on the container having HTML Code. CSS - Use classes w3-code cssHigh on the container having CSS Code. JS - Use classes w3-code jsHigh on the container having CSS Code. You have to inc
![Archive final version[1]](/img/5/2007.jpg)
