Exercise 1: What's New in the CSS Editor

Web developers should be familiar with many of the difficulties that related to CSS editing. One of the biggest issues of CSS styling is cross-browser compatibility. It often happens that, after applying styles to your site, you notice that it looks different if you open it in another browser or device. Therefore, you may spend a considerable time on fixing those visual issues to realize that, when you finally make it work in one browser, it is broken in the others.

Visual Studio now includes features that help developers access, work and organize CSS style sheets effectively. Throughout this exercise, you will meet the new features for an effective organization and edition, as well as the CSS3 Code Snippets for cross-browser compatibility.

Task 1 – New Editor Features

In this task, you will discover the new features of the CSS Editor. This new editor will help you increase your productivity by taking advantage of the new smart indentation, the improved code comments and the enhanced IntelliSense list.

1. Start Visual Studio and open the WhatsNewASPNET.sln solution located in the Source\WhatsNewASPNET folder of this lab.

2. In Solution Explorer, open the Site.css file located under the Styles folder. Make sure the Text Editor tools are visible on the toolbar. To do that, select the View |Toolbars menu option, and check the Text Editor options. You will notice that, since this new version, the Comment button () and the Uncomment button () are also enabled for the CSS editor.

   Figure 1

   Enabling Editor and CCS Tools

3. Scroll the code and select any CSS class definition. Click the Comment () button to comment the selected lines. Then, click the Uncomment() button to undo the changes.

4. Click the Collapse () and Expand () buttons located on the left margin of the text. Notice that you can now hide the styles you don’t use to have a cleaner view.

   Figure 2

   Collapsing CSS classes

5. Make sure that the smart indentation feature is enabled. Select the Tools | Options menu option, and then select the Text Editor | CSS | Formatting page in the left pane of the screen. Check the Hierarchical indentation option.

   Figure 3

   Enabling hierarchical indentation

6. Locate the main class definition (.main) and append a style to the div elements. You will notice that the code aligns automatically, helping users to find the parent classes at a glance.

   CSS

   .main

   FakePre-883ae356eeff4ee08091c8f4e5656098-00c523bbf62d4d22afd2f6bf29c33eb5FakePre-8f27dd323f824de686a3b926288587b9-cc1768abbae74216af0666ed12c11815FakePre-95a824157138458bb79c937d8e98e98f-4e8499e1cf8c46c08b7626d7177d7d66FakePre-e5c569319d97415f9cad7287538fa358-505e842283e74d55a9379714ba328272FakePre-2951ffa44647474b9a26ce0bb97b5e18-580f95d723544810b056642c18d376f0 .main div { border: 0px; }
   Figure 4

   Hierarchical alignment in CSS

7. Inside .main div class, locate the cursor at the end of border: 0px; and press Enter to display the IntelliSense list. Start typing top and notice how the list is filtered as you type. The list will display the elements that contain top at any part of the word (In prior versions of Visual Studio, the list is filtered by the items that begin with the term).

   Figure 5

   IntelliSense enhancements in CSS

Task 2 – The Color Picker

In this task, you will discover the new CSS Color Picker integrated into Visual Studio IntelliSense.

1. In Site.css, locate the header class definition (.header) and place the cursor next to background-color attribute, between the “:” and “#” characters on that line of code.

   Figure 6

   Locating the cursor

2. Press the spacebar to display the color picker. Notice that the first colors you will see are the most frequent colors of your site. If you click the white color, its HTML color code (#fff) will replace the current color code in the stylesheet.

   Figure 7

   Color picker

3. Press the Expand () button on the color picker to display the color gradient, and then drag the gradient cursor to select a different color. After that, click the Eyedropper button and select any color from the screen. Notice that background color value changes dynamically while you move the cursor.

   Figure 8

   Color picker gradient

4. In the Opacity slider, move the selector to the center of the bar to reduce the opacity. Notice that background-color value now changes its scale to RGBA.

   Figure 9

   Color picker Opacity

   Note:

    The RGBA (Red, Green, Blue, Alpha) color definition in CSS3 enables you to define the color opacity value for a single item. Unlike opacity – a similar CSS attribute – RGBA colors are also compatible with the latest browsers.

Task 3 – CSS-Compatible Code Snippets

In this task, you will learn how to use cross-browser compatible CSS3 snippets in order to implement some features in your website.

1. In the Site.css file, locate the header CSS class definition (.header) and place the cursor below the /*border radius*/ placeholder to add a new snippet. Press Enter to display the IntelliSense list and type radius to filter the list. Select the border-radius option from the list with a single-click, and then press the TAB key twice to insert the snippet. Then, type a radius size in pixels and press enter. For instance, type 15px.

   The CSS3 attributes added by the snippet will render rounded borders in most HTML5 compliance browsers, including Mozilla and WebKit-based browsers.

   Figure 10

   Using a border-radius snippet

2. Apply the same border snippets in the page style (.page).

   CSS

   .page

   FakePre-5d8a1a3c91444256819ede87f8b5f4ae-ad89e879f7144a019346137fba513f6fFakePre-60d445fabfc54129b75ce4319b5a2851-e8c8b43d46e642e3abcd39f204e625ffFakePre-828f22f08c964ab6b4002fe2d3d54d6c-14ff910400e947ef8d2c178a89730004FakePre-b26e88b3762e448eb285b4b2e2b1dc6b-283ce227d0ba4b64a4301773cb70150eFakePre-38a63fc25f2843cdaaad38405b769a8a-f37971740a77478d910fa7937d638af0FakePre-fd052ff04f194e968997480df5cd3f45-ecd6dda7348a4a018c6b31d6fa0aacfc -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;FakePre-12e3aee3ac4d4f388ce2e8d34ef9ff3a-bfc50fbfc1904a1884cd1d8a5a4313fc

3. Press F5 to run the solution. Notice that each page now has rounded borders.

   Figure 11

   Rounded corners

4. Close the browser and return to Visual Studio.
5. Open the Custom.css file located under the Styles folder and place the cursor inside div.images ul li img class definition.

6. Press enter to display the IntelliSense list, type box-shadow and press the TAB key twice to insert the default shadow code snippet inside the class definition. Then, type border-radius and insert the code snippet. Type 15px to set radius size and press ENTER.

   Figure 12

   Rounded corners with shadow

   Note:

   At this moment, the shadow attribute is inserted with the corresponding prefix (moz, webkit, o) to support Mozilla and Webkit (Chrome, Safari, Konkeror) browsers.

7. Create a new class div.images ul li img:hover below the div.images ul li img class definition and place the cursor inside the brackets.

   CSS

   div.images ul li img

   FakePre-215a2666c11848cba9b4a67656c726f2-5cacabed9c634c2a8d214509f788e858FakePre-8eda9d504daf4b269565e6409545bea2-3fbb504e12a24d70bd1e1a7fbf332ba3FakePre-4e3547a1086e4888bf3f58c147699929-d5c7dc59ab68458c906041330e63d7b8FakePre-34c6a46a4ab24c64af76e5e0e4499744-843387b6c06a49bd92964d3514eaa91ddiv.images ul li img:hover { }

8. Type transform and press the TAB key twice in order to insert the transform snippet. Then, enter 15 to change the rotation angle value when images are hovered.

   CSS

   div.images ul li img

   FakePre-2c4daeda5ddb4d29a66845f22e017449-21b34a63a8434c278e483df7cee76bc2FakePre-8d91ef1407b941389a3571116ea6ec0b-e5899a995c3b4cc9aaebe0f1c3c5e34fFakePre-596f8f481d954c5e80996e43377eaa58-6e01413b04fd426f8445d0ba59235958FakePre-40a817d0c7644d0c8a2a3d7c4a9b2c62-597e0e0893d64f248cd477008ee28e05FakePre-8914b5ae65654d4fa6a89fa6e21e5461-cec5fc39d76c4e478183438ca76bc35dFakePre-45983418d0054427912e21be7a94b15f-b35f4b8117a44906b80b84edd0137b8bFakePre-f3ba95b5056e4383973a5fd68e78ead8-cacdf3f770194204a6776bec0bc1e8f1FakePre-e8a4fed9408c4934966b75060a14cbeb-d6bc0a1d82a04b029ecca7a3ae57b87bFakePre-8d862f5b5c9242d18a0a0682dc4e22df-023e45bf484242f9b4b01f576d542617 -ms-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -o-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg);FakePre-9efd686cf0384d6b906c2f600ae48273-c66984ecfa814ef3ba69e85e9ff21f06

9. Press F5 to run the solution and browse to the CSS3 page. Notice that the images have rounded corners and box shadows. Hover the mouse over the images and watch them rotate.

   Figure 13

   Transform snippet rotating an image

   Note:

   If you cannot see the shadows, make sure the document mode is set to IE9 standards. Press F12 to open Internet Explorer developer tools and click Document Mode to change to IE9 standards.