Creating Multicolumn CSS Websites in Visual Studio 2010

Views: This article has been read 95663 times.
Abstract: An overview of Visual Studio 2010's Design view features and functions with an emphasis on designing Web pages using Cascading Style Sheets.

Creating CSS Websites in Visual Studio 2010

Back in the late 1990s, creating CSS Websites with multiple columns was at best a hack job. When it came to designing the user interface, I would use tables and nested tables … and more nested tables. Because the Cascading Style Sheet (CSS) standard was only just becoming available in the latest version of Internet Explorer, designers really had no alternative but to use resource-demanding tables. Back then, download bandwidth was precious. Designing a Website in tables was awful and it made future maintenance a nightmare, only second to the spaghetti code that Classic ASP would leave behind.

In those days, I often would speculate with other developers on what the future of Web development tools would look like. As Microsoft developers, we would often dream of how easy and powerful Visual InterDev would be. I’m happy to report those days are finally here in Microsoft Visual Studio 2010!

Visual Studio 2010 makes creating multicolumn Websites very easy and actually fun. The .NET developer can smoothly make the transition from programming advance object-oriented backend applications to designing the frontend—without getting bogged down in the syntax of Cascading Style Sheet properties and their attributes. With VS 2010’s powerful windows, dialog boxes and drag-and-drop capabilities, the developer can now design advanced and well-structured CSS user interfaces all in Design view. If you don't already have Visual Web Developer Express 2010, you can be download it for free.

The purpose of this article is to familiarize the developer in the shortest amount of time to Visual Studio 2010’s Design view features and functions. A more thorough tutorial is offered through Microsoft.

If you are designing a Website from scratch, the best approach in VS 2010 is to first design a Web page with inline CSS styles in Design view while viewing the results. After this is done, you can simply move these styles to a Cascading Style Sheet in order to make them available to all Web pages. If you want to create a multiple column layout, and don’t have any Web page content, I would recommend copying the starter code with tags from Microsoft’s tutorial and pasting that into your Web page. If you already have Web content, just paste that into the page and add your tags to the content.

Manage Styles Window

Manage Styles Window & Tag Selector Bar

  1. Create a Web page and add some content with <div> tags. If you don’t have content, you can copy example content with <div> tags from Microsoft's tutorial.
  2. In Design view, select an area of the page you want to add a style to and then select the <div> tag from the tag selector bar.
  3. Display the Manage Styles window by selecting the Manage Styles submenu from the View/Other Windows menu.

New Style Dialog Box

  1. Select the New Style button in the Manage Styles window. The New Style dialog box appears, as shown below. Within this box, you create your style. No need to know CSS syntax!

New Style Dialog Box

New Style Dialog Box.gif

  1. Select OK to finish creating your new inline style. At this point, you can view the automatically generated CSS syntax in Source view.

Moving Inline Styles to a CSS File

  1. After creating your inline styles and are satisfied with their appearance in Design view, you can then move them to a style sheet in order to share them with all your Web pages.
  2. To create a new style sheet, right click on the solution’s name in the Solution Explorer window and select the Add New Item… menu. The Add New Item dialog box appears.
  3. From the Add New Item dialog box, select the Style Sheet template, give it a name and then select the Add button.
  4. Before you can move the styles from the Web page to the style sheet, you must first attach the style sheet to the Web page. To do this, select Design view within the page containing the styles and then select the Attach Style Sheet button in the Manage Styles window. The Select Style Sheet dialog box appears.
  5. From the Select Style Sheet dialog box, select the style sheet you created and then select the OK button.
  6. The style sheet is now attached to the Web page. You can view the syntax in Source view.
  7. It is now very easy to move all inline styles in the Web page to the style sheet by simply selecting the styles listed in the Manage Styles window and dragging them onto the name of the style sheet also displayed in the Manage Styles window. Once this is done, all styles will be now stored in the style sheet. The Manage Styles window also makes it easy to organize styles within the style sheet by dragging the names to their new positions.

By Todd Paholsky