DocsSimpleHtml5AndCss

Revision as of 14:27, 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 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.

In the Projects window you can see that the project contains index.html, JS libraries and a CSS file. The file index.html opens in the editor. The CSS Rules and Navigator windows also open in the IDE.

  1. Click the Run button in the toolbar to run the project in the Chrome browser. You need to install the NetBeans extension for Chrome if not already installed.

In the browser you can see a simple expandable menu.

  1. Click the Open NetBeans Action icon in the URL field of the browser to open the NetBeans menu and select Table Portrait in the menu. The window resizes.
  2. Select Enable Inspect in NetBeans in the menu.
  3. Click Vice President in the browser. You can see that the element is now highlighted in the browser. In the IDE you can see that the h4 element is displayed in the CSS Rules window. The h4 element has 4 properties. The properties are specified by various rules in the stylesheet. When you select a property in the upper pane of the CSS Rules window the rule that defines that property is selected in the Applied Styles pane of the window. You can click on the link to the line in the stylesheet to view the rules
  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