> ASP.NET Basics > Styling with CSS, Master Pages and Skins > Visual Studio Style Sheets Tools > Using ASP.NET External CSS

ASP.NET Basics

HTML Basics
ASP.NET Web Server
Advanced HTML
Application Designing
Using Visual Studio
ASP.NET Standards
ASP.NET Styling
ASP.NET Navigation

ASP.NET Tips

ASP.NET Validation
HTML forms
CSS Styling
CSS Advanced
ASP.NET Features
ASP.NET Image Effects
Common mistakes
DB Design tips

Building Applications

Design Secure Apps
Build Secure Apps

2.1 Using ASP.NET External CSS

« Previous Chapter

Next Chapter »

The following tutorial shows you a step by step process on how to use the built in ASP.NET External CSS and its Graphical Style sheet tools to manage the Styles for your website.

  1. Open the Style Sheet (Default is “StyleSheet.css”)
  2. Go to Styles menu and click Add Style Rule.

Style Menu Add Style Rule
Style Menu – Add Style Rule

  1. In the Add Style Rule dialog box, select one of the following CSS selectors and then click OK.

Add Style Rule dialog box
Add Style Rule dialog box

  1. Element

    Defines a rule for an element by tag name.

    For example:

    If you want to select the h1 element to define the background color, font family, and link colors for all of the h1 elements on your Web page.

  2. Class name

    Defines a rule for a CSS class.

    For example:

    If you want to define a “.txtIndent” style to indent the text enclosed within all “<p class="txtIndent">” tags.

  3. Element ID

Defines a rule for an element with a specific ID.

For example:

If you want to define a “#txtPop” style to reveal and position just one of the div elements on your page.

  1. Select the new style selector and then place the cursor between the braces ( { } ).

For example:

If you chose Element as h1 and click on OK, place the cursor as shown below.

Placing cursor in new Style Selector
Placing cursor in new Style Selector

  1. Go to Styles menu and click Build Style.

Style Menu Build Style
Style Menu – Build Style

  1. In the Style Builder dialog box, define the style attributes that you want the element to have, and then click OK.

Style Builder for h1
Style Builder for h1

The Style Builder dialog box inserts CSS style attributes within the braces ( { } ) of the style selector as show below.

« Previous Chapter

Next Chapter »

Table of Contents

Chapter 1 - Placing Style Rules
        Chapter 1.1 - Visual Studio Auto Format
        Chapter 1.2 - Inline/Hardcoding Styles
        Chapter 1.3 - Local Style Tag
        Chapter 1.4 - ASP.NET External CSS
Chapter 2 - Visual Studio Style Sheets Tools
        Chapter 2.1 - Using ASP.NET External CSS
        Chapter 2.2 - Generated Styles
Chapter 3 - Styling with Master Pages
        Chapter 3.1 - Creating Styled ASP.NET Master Page
        Chapter 3.2 - Connecting Styled ASP.NET Master Page to Regular Page
Chapter 4 - ASP.NET Themes and Skins
        Chapter 4.1 - Creating an ASP.NET Theme
        Chapter 4.2 - Applying Theme to a Web Site
        Chapter 4.3 - Applying Theme to a Page

[top]