Tips & Tricks for ASP.NET, IIS, and Visual Web Developer : CSS and HTML

Tip #69: Did you know…The keyboard shortcut for View in Browser?

WebDevTools — Mon, 01 Jun 2009 00:27:35 GMT

Ctrl +Shift+W does the trick for you.

This short cut is mentioned under File Menu -> View in Browser.

So if you are still using Select File -> Right click for context menu and then selecting View in Browser as shown below, you may want to start using Ctrl+Shift+W.

Reshmi Mangalore

SDET, Visual Web Developer

Tip #68 Did you know… How simple it is to attach an existing style sheet to your web page?

WebDevTools — Mon, 01 Jun 2009 00:19:01 GMT

Open an existing web site in VWD. Open the page by double clicking on it in solution explorer to which you want to attach the existing style sheet in your web site.

Now, switch to Design View of the page and bring up Select Style Sheet dialog by clicking on menu: Format –> Attach Style Sheet as shown below.

Click the OK button and this will add a link to the Style sheet that you selected in the Select Style Sheet dialog. Now you can make use of all the styles described in this style sheet.

<head runat="server">
    <title>Untitled Page</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head></PRE< P>

Alternatively, you can just switch the page to which you want to add the link and Drag Drop the style sheet from solution explorer to the page in which you want to make use of the styles. The drag drop action adds the above piece of code to source view.

Reshmi Mangalore

SDET, Visual Web Developer

Tip #54: Did you know…How you can turn off intellisense for HTML/ CSS editors

WebDevTools — Sat, 25 Apr 2009 01:18:43 GMT

If you would like turn off intellisense in HTML editors (aspx, html files) and CSS editor (css files), you could do so by going to Tools->Options dialog.

For HTML editor, go to Tools->Options->HTML->General. In the right pane, under Statement Completion, uncheck "Auto list members"

For CSS Editor, go to Tools->Options->Text Editor->CSS->General. In the right pane, under Statement Completion, uncheck “Auto list members”

Ranjini Mathrubootham

SDET, Visual Web Developer

Tip #28 Did you know… That “Go to definition” is supported for CSS Class?

WebDevTools — Wed, 26 Nov 2008 00:15:36 GMT

If you have a style defined as Class = ”fooRed” as shown below and want to quickly know what does fooRed style contain?

 <div class ="fooRed">
    In RED
 </div>

Just place your cursor on fooRed and hit the F12 button. This will highlight the CSS class for you even if the class lives in the Current Page or in an External style sheet.

F12 is the short cut you can use instead of, Right Clicking fooRed and selecting “Go to Definition” action in the context menu as shown in the picture below.

So, when you hit F12, the class is highlighted as shown below.

This way you can get to style definition with just one key –>F12

Reshmi Mangalore

SDET, Visual Web Developer

Tip #24: Did you know…You could display CSS/HTML errors as warnings or as errors?

WebDevTools — Sat, 15 Nov 2008 04:22:25 GMT

VS 2008 has this cool feature of downgrading any CSS/HTML errors to warnings. This is helpful when you want to separate out validation errors and are looking for what is actually stopping your build.

In VS 2008 the default behavior is to display any HTML/CSS errors as warnings as shown in the picture below. Note that warnings have a green squiggle.

The settings for this feature is available under Tools –>Options –>Text Editor –>HTML->Validation as shown below.

If you still want your CSS/HTML errors to show up as errors you can uncheck the as warnings (HTML, CSS) check box. By doing this, VS will display it as errors as shown below. Note that error have a red squiggle as shown below.

Reshmi Mangalore

SDET, Visual Web Developer

Tip #18: Did you know…How to absolute position controls on copy paste or drag drop from Toolbox?

WebDevTools — Wed, 29 Oct 2008 13:38:00 GMT

To absolute position any control on your designer, you select the control and then select the following menu option: Format –> Position… ->Position style ->Absolute.

Sometimes you may want the controls to be absolutely positioned on the design surface as soon as you drag drop control from the tool box or as soon as you copy paste on designer.

Here is how you enable this:

Go to Tools –> Options –>HTML Designer –>CSS Styling

And check “Change positioning to absolute for controls using Toolbox, paste or drag and drop” as show below in the picture.

Now, if you switch to Design View and drag drop a button control, the designer will automatically add style="position: absolute" to the control. This control can then be dragged on the design surface by grabbing the white tab (asp:button#Button1) and placed where required.

Absolutely positioned button control with the white tab:

Reshmi Mangalore

SDET, Web Development Tools

Tip #16: Did you know… How to change the default format settings for CSS Editor?

WebDevTools — Mon, 20 Oct 2008 18:23:00 GMT

There is a Tools –>Options setting under Text Editor –> CSS –>Format Node which helps you change the default CSS Format settings.

This dialog gives you the flexibility of setting the default CSS Formatting styles in any of the following Styles:

Compact rules: In this option the Style selector and the properties are placed in one single line as shown below:

Semi-Expanded: In this option the selector and start of the curly brace are placed on the same line, the various properties appear in a new line and the closing curly braces appear in yet another new line as shown below:

.MyCSStyle {
           text-align: center;
           margin-left: 5px;
       }
</style>

Expanded: In this option, the selector, curly braces and the properties all appear on different lines as shown below.

After setting this, you can select the style in your Editor and click on Edit Menu->Format Selection. This will format the old CSS format to the newly set formatting style.

Reshmi Mangalore

SDET, Web Development Tools

Tip #11 Did you know… New Style builder can be invoked from various other tool windows in Visual Web Developer.

WebDevTools — Fri, 03 Oct 2008 03:55:35 GMT

Tip#10 spoke about the New Style Builder Dialog. There are various other entry points to this dialog. You can invoke it from the following places from the IDE:

CSS Properties Tool Window: Bring up the CSS properties dialog by selecting View –>CSS Properties. Click on any rule in “Applied Rules” and bring up the context menu by using mouse right click. This context menu has an option for “New Style” as shown in the picture below.

Manage Style Tool Window: Bring up the Manage Style tool window dialog by selecting View->Manage Style. This has an option for “New Style” as shown in the picture below.

The context menu of styles listed under CSS styles also has an option for “New Style”

Apply Style Tool Window: Bring up the Apply Style tool window dialog by selecting View->Apply Style. This tool window has and option for “New Style” as shown in the picture below. Also, the context menu of any style listed under the “Select CSS style to apply:” has the “New Style” option.

Reshmi Mangalore

SDET, Web Development Tools

Tip #10 Did you know… Visual Web Developer 2008 has a New Style Builder Dialog?

WebDevTools — Fri, 26 Sep 2008 04:36:49 GMT

Visual Studio 2008 has a New Style builder dialog. This dialog box helps you design new styles and also preview it at the same time. Using this dialog, you can create a style which can live in current page, an existing external style sheet or a new external style sheet. You can create styles which are ID-based, element-based, in-line, class-based and styles which have complex selectors.

To invoke the “New Style” dialog go to Format Menu-> New Style option. You can also invoke this dialog via the Apply Styles and Manage Styles tool windows.

Here is how the dialog looks like:

Here are the various sections of this dialog box:

Define in: You can define your newly created style in Current page, New Style Sheet or an Existing Style Sheet.
Selector: You can type your own or select from the existing drop down. For example to use an inline selector, select (inline style) from the drop down.
Apply new style to document selection: Checking this checkbox will apply the style to the selected control in your designer.
Category: Clicking on each category will bring up associated properties on the right hand side of the dialog. Any category which has properties set will appear in bold. In the picture above you can see that Font, Background and Border are bold as they have a few properties set.
URL: This needs to be set only if you want to place your newly created style in an external style sheet. This should indicate the path to a .css file.

Now if you want to create a style for your button control in designer, all you need to do is select the button control in designer, bring up the New Style dialog, set the various properties you want, preview it and click Apply button.

Simple right?

Reshmi Mangalore

SDET, Web Development Tools

Tip #6 Did you know…About the “Tag Navigator” feature?

WebDevTools — Tue, 26 Aug 2008 20:03:52 GMT

One of the cool features in Visual studio is the Tag navigator which is available both in design and source view modes. The tag navigator appears at the bottom of HTML Editor.

Here is how it looks when you open up a page in Visual Studio:

In the picture below you can see that the cursor is placed inside the <SPAN> tag and hence the Tag Navigator at the bottom of the editor displays all the parent tag element of <SPAN> up to the root element.

You can also use the Tag Navigator to “Select a Tag” or “Select Tag Contents”, by just clicking on the Tag Navigator as shown below. In this case I have clicked on <DIV> tag and said Select Tag. This enables selection of DIV both in Design View and Source View.

Reshmi Mangalore

SDET, Web Development Tools

Tip #4 Did you know… You can add browsers to Visual Web Developer using the “Browse With…” option

WebDevTools — Mon, 11 Aug 2008 20:20:00 GMT

As a web developer one of the things that might be interesting to you is to view your page in different browsers. Here is how you do this from within Visual Studio:

1. Open your web site in Visual Studio. Select the page and right click to bring up the context menu as shown below:

2. Click on Browse With… option to bring up the Browse With dialog.

3. Click on Add button to add an alternate browser you want to view your page in. In this case I am adding Firefox. Click OK once you type in values.

4. Now Click on Browse button in the Browse dialog above. This will display your page in a different browser.

Reshmi Mangalore

SDET, Web Development Tools

Tip #2 Did you know...The Style Application Toolbar works in both Auto and Manual modes?

WebDevTools — Tue, 29 Jul 2008 14:51:00 GMT

The style application toolbar allows you to create and modify styles automatically. This tool window works in two modes "Auto mode" and "Manual mode".

The Auto mode is targeted for users who are new to CSS and in this case Visual Studio will control where the newly generated styles will be placed.

Manual mode is prescribed for experienced users. In Manual mode users can control where the style have to be placed by specifying the "Target Rule". The target rule shows the following options in the drop down for a selected control: .ClassName(Current Page), < Inline Style >, (New Auto Class) and Apply New Style…

ClassName (Current Page): All style generated by Formatting tool bar like Format bold, Format font etc will be placed in this class.
< Inline Style >: As the name suggests all new styles applied to the selected control will be placed as inline styles.
(New Auto Class): In this case the new style will be named style1, style2 and will be placed in the style block of the current page.
Apply New Style…: This will allow you to create a new style using the Style builder Dialog.

Reshmi Mangalore

SDET, Web Development Tools

Did You Know… Tip #1 – Powerful CSS Tools to Create, Manage and Apply Styles

WebDevTools — Thu, 24 Jul 2008 01:50:04 GMT

Visual Studio 2008 introduces three new tool windows for CSS styling. They are:

Apply Styles
Manage Styles
CSS Properties

All the above options are available under the View menu when you are in design view or in split view mode.

Apply Styles: Using this tool window you can create, apply and modify styles. This tool window lists all the style for a particular page. The list will include style defined inline, style in external style sheet and styles that live in current page. Applying a style to a selected control is as simple as selecting a control, then you can click on styles to be applied from the list of styles in this tool window.

Manage Styles: Using this tool window you can manage the arrangement of styles by moving them around from an external style sheet to the current page, etc.

CSS Properties: Using this tool window you can quickly find out which styles are applied to a particular control on a page. You can also figure our which style rule overrides which for a selected control. You could also use this tool to add, delete or modify CSS properties of an existing style.

Reshmi Mangalore

SDET, Web Development Tools