Revision as of 14:13, 14 January 2013 by Kganfield (Talk | contribs)

Working with CSS Support in an HTML5 Application


Requirements for This tutorial

You need the following software:

  • NetBeans IDE 7.3

Create HTML5 Application

To create the HTML5 application:

  1. Download the HTML5 project template
  2. Open the New Project wizard and choose HTML5 Application in the HTML/JavaScript category. Click Next.
  3. Type CSSDemoApp for the project name and specify a location. Click Next.
  4. Select Select Template and click Browse to locate the project template zip that you downloaded. Click Finish.
 Project contains index, js libraries and css file
  1. Run project in Chrome
  2. Show menu and different screen sizes
  3. Enable Inspect in NetBeans
  4. Locate h4 text in editor
  5. Show style elements for h4 in CSS Rules and the rules that determine each property
  6. Click Edit CSS Rules to open dialog
  7. Add h4 element
  8. Click Add Property and then modify color in dialog -- show change in browser
  9. change screensize in browser
  10. create new stylesheet mycss
  11. add @media for small screen
  12. open options window and create @media code template for larger screen
  13. add second @media alt rules to css using template
  14. in browser, select email line - element highlighted in navigator window and CSS Rule
  15. view css properties for li in CSS Rules window
  16. demonstrate code completion by typing class, remove
  17. Select li element and right-click and choose Edit CSS Rules to open dialog
  18. Enter email as class and select an alt rule - note that the added code is visible in preview
  19. Select the mycss stylesheet
  20. When you add rule it is added to html file and css file
  21. In browser, switch between views to to show how rule is applied only in smaller screen sizes
Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo