DocsSimpleHtml5AndCss

Revision as of 17:49, 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 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 class="email"><b>email:</b> m.adams@company.com</li>

After you type the selector you will see a hint in the margin next to the line.

  1. Type Alt-Enter to open the hint and select Create rule .email and import stylesheet css/mycss.css

Save your changes.

  1. Open mycss.css in the editor.

When you open the stylesheet in the editor you can see the rules in the stylesheet in the CSS Styles window.

  1. Select the .email rule in the upper pane.
  2. Click the Add Property icon in the lower pane to open the Add Property dialog box.
  3. Type color in the filter field at the top of the dialog box.
  4. Locate the color property and then select a value in the dropdown list. Click OK.

In the browser you can see that the color is changed.

  1. Click the Edit CSS Rules icon in the CSS Styles window.
  2. Select Element as the Selector Type.
  3. Type h3 as the Selector
  4. Confirm that mycss.css is selected as the Style Sheet.
  5. Select max-width: 480px as the At-rule. Click OK.
  6. When you click OK the h3 element is add to the stylesheet inside the brackets for the @media rule.
  7. Select h3 in the CSS Styles rule under the css/mycss.css node, if not selected.
  8. Click the Add Property icon in the lower pane and add a property for the color (eg. #b81900) in the Add Property dialog box.

Alternatively, you can use the code completion in the editor to add the color property and a value to the h3 style rule.

  1. 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