- HTML Controls
- HTML Server Controls
- Web Server Controls
- User Input Validation
- Cascading Style Sheets
- Exam Prep Questions
- Need to Know More?
This chapter is from the book
This chapter is from the book
This chapter is from the book
Cascading Style Sheets
A cascading style sheet (CSS) contains style definitions that are applied to elements in an HTML document. The information inside a CSS defines how HTML elements are displayed and where they are positioned on a Web page. CSS makes it easy to achieve a uniform look and feel across your Web application.
Both HTML server controls and Web server controls provide first-class support for CSS styles. In addition to this, Visual Studio .NET provides GUI-based style-editing tools, which makes it easy to work with CSS files.
NOTE
CSS is generally only supported by Web browsers that support HTML 4.0 or higher. Older Web browsers that support only HTML 3.2 or earlier simply ignore CSS styles.
When you create a Web application using Visual Basic .NET, Visual Studio .NET automatically creates a default style sheet named Styles.css for your Web application. You can also add additional style sheets for specific documents. You can modify the built-in styles or add new styles that are then associated with particular controls and elements.
To see how Visual Studio .NET lets you work with cascading style sheets, follow these steps:
-
Add a new Web Form to your Web Application.
-
Add a Label control and a TextBox control to the Web Form.
-
Type some text in the Text property of the Label control. Set the CssClass property of the Label control to MyLabelClass and set the CssClass property of the TextBox control to MyTextBoxClass.
-
Switch to the HTML view of the Web Form and add the following code inside of the HTML <HEAD> element:
-
Double-click the Styles.css file in Solution Explorer to open it. Then click the CSS Outline tab at the bottom of the Toolbox.
-
In the Style Sheet Outline in the Toolbox, right-click on the Classes folder, and select Add Style Rule.
-
In the Add Style Rule dialog box, select the Class Name radio button. Enter MyLabelClass as the classname and click the > button. Click OK to create the class. Repeat these steps to create the MyTextBoxClass style.
-
Locate the code for MyLabelClass in the Styles.css file. Right-click inside this code and select Build Style. This will open the Style Builder dialog box, shown in Figure 3.1.
-
In the Style Builder dialog box, set the font color to Blue and set the size to 2 em. Click OK to create the style.
-
Locate the code for MyTextBoxClass. Right-click inside this code and select Build Style.
-
Select the Background tab and set the background color to Lime. Select the Text tab and set the horizontal alignment to Right. Click OK.
-
Set the Web Form as the start form for the project.
-
Run the project. You'll see your font and color choices applied to the controls on the Web Form.
<LINK href="Styles.css" type="text/css" rel="stylesheet">
)
Figure
3.1 The Style Builder dialog box.