Working with CSS Style Sheets in an HTML5 Application

NetBeans IDE 7.3 introduces a new project type to help you develop HTML5 applications. HTML5 applications typically combine HTML, CSS and JavaScript to create applications that are run in a browser and that are displayed on a variety of devices, including smartphones, tablets and laptops. This document demonstrates how the IDE provides tools that can help you work with CSS rules to modify the layout of an application.

The NetBeans Connector extension for the Chrome browser can help you view applications as they would appear on various devices. The extension enables the Chrome browser and the IDE to communicate with each other. The Inspect in NetBeans mode can help you locate elements in your source code by selecting them in the browser. After you select an element in the browser you can use the IDE to view the CSS rules and properties that are applied to that element.

For details on how to install the NetBeans Connector extension for the Chrome browser, see the tutorial Getting Started with HTML5 Applications.

To watch a screencast of this tutorial, see Video of Working with CSS Style Sheets in HTML5 Applications.

Contents

Content on this page applies to NetBeans IDE 7.3

To complete this tutorial, you will need the following resources.

Software or Resource Version Required
NetBeans IDE, Java 7.3
Java Development Kit (JDK) 6 or 7
Chrome Browser --
NetBeans Connector Extension for Chrome 1.0.0
HTML5DemoSiteTemplate.zip --

Notes:

  • The HTML5DemoSiteTemplate.zip is a site template that you will use when you create the project.
  • If you would like to compare your project with a working solution, you can download the site template of the finished project.
  • This document assumes you have some basic knowledge of, or programming experience with HTML, CSS, and JavaScript.

Creating the HTML5 Application

In this tutorial you use a site template to create the HTML5 project. The site template that you use in this tutorial is the same template that was saved as a site template in the Getting Started with HTML5 Applications tutorial. If you performed the steps in the Getting Started tutorial you can use the site template that you saved in the last section. Alternatively, you can download the HTML5DemoSiteTemplate.zip site template.

Perform the following steps to create the application from a site template.

  1. Download the HTML5 site template (HTML5DemoSiteTemplate)
  2. Choose File > New Project (Ctrl-Shift-N; ⌘-Shift-N on Mac) in the main menu to open the New Project wizard.
  3. Select the HTML/JavaScript category and then select HTML5 Application. Click Next.
  4. Type HTML5DemoCss for the project name and specify a location. Click Next.
  5. Select the Select Template option and click Browse to locate the site template (HTML5DemoSiteTemplate.zip). Click Finish.
    screenshot of New HTML5 Application wizard

When you click Finish the IDE creates the project and opens the index.html file in the editor. In the Projects window you can see that the project contains index.html, a CSS style sheet, some JavaScript libraries and some images. The CSS Rules and Navigator windows also open in the IDE.

Viewing the Application on Different Devices

In this tutorial you will run the application in the Chrome browser with the NetBeans Connector extension installed. When the extension is installed you can use the NetBeans menu in the browser to easily resize the browser window to view the application as it would appear on some common devices.

Notes. For this tutorial it is recommended that you use the Chrome browser and install the NetBeans extension for Chrome. See the tutorial Getting Started with HTML5 Applications for details on how to install the NetBeans Connector extension.

Perform the following steps to run the application in the Chrome browser.

  1. Confirm that Chrome with NetBeans Integration is selected in the dropdown list in the Toolbar.
  2. Click the Run button in the toolbar to run the project in the Chrome browser.

    In the browser you can see a simple expandable menu.

    You will notice that there is a yellow bar in the browser tab that notifies you that the NetBeans Connector is debugging the tab. The IDE and the browser are connected and are able to communicate with each other when the yellow bar is visible. When you launch an HTML5 application from the IDE the JavaScript debugger is automatically enabled. When you save changes to a file or make changes to a CSS style sheet you do not need to reload the page because the browser window is automatically updated to display the changes.

    If you close the yellow bar or click Cancel you will break the connection between the IDE and the browser. If you break the connection you will need to launch the HTML5 application from the IDE.

    You will also notice that the NetBeans icon is visible in the URL location field of the browser. You can click the icon to open a menu that provides various options for changing the display size of the browser and for enabling the Inspect in NetBeans mode.

  3. Click the Open NetBeans Action icon in the URL field of the browser to open the NetBeans menu and select Tablet Portrait in the menu.

    The window resizes to the size of a tablet browser in portrait mode. The menu stretches to fill the right side and the entire menu is visible.

    screenshot of browser in Tablet Portrait view

    If you select one of the default devices in the menu the browser window will resize to the dimensions of the device. This enables you to see how the application will look on the selected device. HTML5 applications are usually designed to respond to the size of the screen of the device on which they are viewed. You can use JavaScript and CSS rules that respond to the screen size and modify how the application is displayed so that the layout is optimized for the device.

  4. Click the NetBeans icon again and select Smartphone Landscape in the NetBeans menu.
    screenshot of NetBeans menu in browser

    The window resizes to the size of a smartphone in landscape orientation and you can see that the bottom part of the menu is not visible without scrolling.

    screenshot of browser window resized to Smartphone Landscape

In the next section you will modify the style sheet so that it is possible to view the entire menu without scrolling on a smartphone in landscape view.

Modifying the Layout

It should be possible to make some minor changes to the elements of the page so that no scrolling is required. These changes should be applied only when the size of the browser is the size of a smartphone or smaller. When oriented in landscape view, the browser window of a smartphone is 480 pixels wide and 320 pixels high.

Create a Media Style Sheet

In this exercise you will create a new style sheet and add a media rule for devices that have smartphone displays. You will then add some CSS Rules to the media rule.

  1. Right-click the css folder node in the Projects window and choose New > Cascading Style Sheet in the popup menu.
  2. Type mycss as the File Name. Click Finish.

    When you click Finish the new style sheet opens in the editor.

  3. Add the following media rule to the style sheet.
    /*My rule for smartphone*/
    @media (max-width: 480px) {
    
    }

    Any CSS rules that you add between the brackets for this rule will only be applied when the dimension of the browser is 480 pixels wide or less.

    Create code templates for code snippets that you might use frequently. You can create CSS code templates in the Code Templates tab in the Editor category of the Options window.

  4. Save your changes.
  5. Open index.html in the editor.
  6. Add the following link to the style sheet between the <head> tags in index.html. Save your changes.
    <link type="text/css" rel="stylesheet" href="css/mycss.css">

    You can use code completion in the editor to help you add the link to the style sheet.

Adding CSS Rules

  1. In the Chrome browser, click the NetBeans icon and select Inspect in NetBeans Mode in the menu.
  2. Click the image in the browser.

    An element is highlighted when it is selected in Inspect mode. In this screenshot you can see that the image is highlighted in blue.

    screenshot of image selected in the browser

    In the IDE you can see that the CSS rules and properties that apply to img are listed in the CSS Styles window. The Selection tab of the CSS Styles window has three panes that provide details about the selected element.

    screenshot of CSS Styles window when image is selected

    Upper Pane

    In the upper Properties pane of the window you can see that six property-value pairs are applied to the img element. Three of the pairs (border, float and margin) are applied via a CSS rule for the img element. The remaining three pairs are applied because the img element inherits the properties of class selectors that are applied to objects that contain the img element. You can clearly see the structure of the DOM in the Navigator window. The border property is currently selected in the Properties pane. of the CSS Styles window.

    Middle Pane

    In the middle Applied Styles pane you can see that the border property and value is specified in a CSS rule that defines the img element. The rule is located on line 12 in the basecss.css file. You can click the location in the pane to open the style sheet in the editor.

    Lower Pane

    The lower pane displays all the properties that are defined in the CSS rule for the rule that is selected in the middle pane. In this case you can see that the rule for img defines the border, float and margin-right properties.


  3. Click the Edit CSS Rules button (Edit CSS Rules button) in the Applied Styles pane of the CSS Styles window to open the Edit CSS Rules dialog box.
  4. Select Element as the Selector Type and type img as the Selector.
  5. Select css/mycss.css as the Style Sheet and (max-width:480px) as the At-Rule. Click OK.
    screenshot of Edit CSS Rules dialog box

    When you click OK the IDE creates a CSS rule for img in the css/mycss.css style sheet between the brackets of the media rule. The new rule is now listed in the Applied Styles pane. You can see that there are two CSS rules for img. One of the rules is located in mycss.css and one is located in basecss.css.

  6. Select the new img rule (defined in mycss.css) in the Applied Styles pane of the CSS Styles window.
    screenshot of styles for the selected element in the CSS Styles window

    In the lower pane of the window you can see that the rule has no properties.

  7. Click the Add Property button in the lower pane of the CSS Styles window to open the Add Property dialog box.
  8. Type width in the filter field at the top of the dialog box and then type 90px as the value for the width property. Click OK.
    screenshot of Add Property dialog box

    When you click OK the image in the browser is automatically resized to be 90 pixels wide. The IDE added the property to the CSS rule in the mycss.css style sheet. In the editor the style sheet should now contain the following rule.

    /*My rule for smartphone*/
    @media (max-width: 480px) {
    
        img {
            width: 90px;
        }
    
    }

    Some additional changes need to be made to the style sheet because the menu still does not fit within the window.

  9. Select the unordered list (<ul>) element in the browser window.
    screenshot of list element selected in browser

    When you select the element you can see that <ul> is selected in the Navigator window and you can see the styles that are applied to that element in the CSS Styles window.

    screenshot of Navigator window

    If you select font-family in the CSS Styles window you can see that the font-family property and value are defined in the .ui-widget class selector.

  10. Click in the index.html file in the editor and then click the Document tab in the CSS Styles window.
  11. Expand the css/mycss.css node in the CSS Styles window.
    screenshot of Document tab of CSS Styles window

    The mycss.css style sheet currently has the default root rule and the rule for img that you created earlier.

  12. Click the Edit CSS Rules button (Edit CSS Rules button) in the CSS Styles window to open the Edit CSS Rules dialog box.
  13. Select Class as the Selector Type and type ui-widget as the Selector.
  14. Select css/mycss.css as the Style Sheet and (max-width:480px) as the At-Rule.
  15. Deselect Apply Changes to the Element. Click OK.
    screenshot of Edit CSS Rules dialog box

    When you click OK the IDE adds the new rule to the mycss.css style sheet and opens the file in the editor. If the file does not open in the editor you can double-click the ui-widget rule under the css/mycss.css node in the CSS Styles window to open the style sheet. The cursor is placed in the line containing the rule in the style sheet.

  16. Add the following property and value (in bold) to the rule for ui-widget.
    .ui-widget {
        font-size: 0.9em;
    }

    When you change the value in the style sheet the page automatically updates in the browser window.

    You can type the property and value in the editor and use the code completion to help you. Alternatively, you can select the .ui-widget rule in the upper pane and click the Add Property button in the lower pane to open the Add Property dialog box.

    screenshot of CSS code completion in the editor

    After you add the rule you can see that the menu now fits in the page.

    screenshot of page in browser after CSS rules are applied
  17. Click the NetBeans icon in the browser and select Tablet Portrait in the menu.

    When the browser window resizes you can see that the changes to the style sheet do not affect the display when the screen size is larger than 480 pixels wide.

Summary

In this tutorial, you learned how to add and modify the CSS rules of an HTML5 application to improve how the application is displayed on a device with a smaller screen size. You viewed the application in a browser that was resized to that of a standard smartphone. You used the Inspect in NetBeans Mode in the Chrome browser to help you locate CSS style rules and then modified the rules to optimize the layout for a smaller screen size.



See Also

For more information about support for HTML5 applications in the IDE on netbeans.org, see the following resources:

For more information about jQuery, refer to the official documentation:

get support for the NetBeans

Support


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