Revision as of 17:00, 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.

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 Styles 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 Styles 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 open the stylesheet in the CSS editor.
  4. Select the color property for h4 in the upper pane of the CSS Styles window.

You can see that the h4 tag is inheriting the color that is specified in the ui-widget-content style in the stylesheet.

  1. In the lower pane of the CSS Styles window, modify the color by selecting a new value in the dropdown list or typing a value, eg. #666666. When you change the property value the IDE modifies the rule in the stylesheet and the page in the browser is immediately updated. The color of all the content is changed.

Create New CSS File

  1. Right-click the project in the Projects window and choose New > Cascading Style Sheet in the popup menu.
  2. Type mycss as the File Name.
  3. Click Browse and select the css folder. Click OK.
  4. Click Finish to create the new stylesheet. The new stylesheet opens in the editor.
  5. Add the following @media for small screens to the stylesheet.
@media (max-width: 480px) {

  1. Open the Options window and select the Code Templates tab in the Editor category.
  2. Select Cascading Style Sheet as the Language.
  3. Click New to open the New Code Abbreviation dialog.
  4. Type an abbreviation for the code template, eg. m768.
  5. Type the following snippet in the Expanded Text field
@media (min-width: 768px) and (max-width: 979px) {
  1. Click OK to close the Options window.
  2. In the mycss file in the editor, type m768 and then hit the tab key.

The editor expands the text to the @media code. Save your changes. The style sheet now contains two @media rules.

  1. In the browser, select the email line. The element is highlighted in the Navigator window and the CSS Styles window.

This does not quite exactly work as expected. Clicking Go To Source in the Navigator window does not locate the element in the html file.

  1. Add the following selector (in bold) to the <li> element in line 34.
<li <strong>class="email"</strong>><b>email:</b></li>
  1. view css properties for li in CSS Rules window
  2. demonstrate code completion by typing class, remove
  3. Select li element and right-click and choose Edit CSS Rules to open dialog
  4. Enter email as class and select an alt rule - note that the added code is visible in preview
  5. Select the mycss stylesheet
  6. When you add rule it is added to html file and css file
  7. 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