DocsSimpleHtml5AndCss

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

Working with CSS Support in an HTML5 Application

Contents


Requirements for This tutorial

You need the following software:

  • NetBeans IDE 7.3


Create Enterprise Application

To create the enterprise application:

  1. Download File:CSSDemoTemplate.zip
  2. Create project from template
 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