DocsSimpleHtml5AndCss

Working with CSS Support in an HTML5 Application

Contents 1 Working with CSS Support in an HTML5 Application 1.1 Requirements for This tutorial 1.2 Create Enterprise Application

Requirements for This tutorial

You need the following software:

• NetBeans IDE 7.3

Create Enterprise Application

To create the enterprise application:

1. Download project template
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