Using CSS class selectors in VWD is a bit of a pain, because their names don t show up in IntelliSense menus or any drop-downs anywhere. You have to remember the names and type them yourself. For an inline style like the .Mono example, your best bet would be to enclose the text to be formatted in … tags in Source view and specify the class name in the tag, as follows: text to format goes here Note that within the tag you don t include the leading dot, just the name. The class name must be enclosed in single or double quotation marks. You ll need to work directly in Source view to type the tags. But it will be easiest to find the text if you first select that text in Design view. For example, let s say in Figure 6-19 you want to display the sample code LET X = 10 in monospace. First, select that text as shown in Figure 6-19 by dragging the mouse pointer through only that text. To switch to Source view, click the Source button at the bottom of the Design surface. The text you selected in Design view is still selected in Source view, making it a little easier to find among all the other stuff that appears in Source view. Next, click a space just to the left of the first character you want to format, then manually type in the tag, as follows: VWD automatically adds the closing tag right after the opening tag. You need to move that closing tag so that it s after the text to which you want to apply the style. A simple way to do that would be to cut and paste the text so that it s between the two tags. For example, in Figure 6-20 I ve moved the sample code LET X = 10 so it s between the … tags. Figure 6-19: Selecting text in Design view. 118 Part II: Building Your Web Site
Note: In case you are looking for affordable and reliable webhost to host and run your business application check Vision ftp web hosting services

For example, suppose the currently linked CSS style sheet contains the H1 style shown earlier. In the current document, you select a chunk of text, and then choose the Heading 1 style from the Block Format drop-down list on the Formatting toolbar, as in Figure 6-18. The style is applied to the selected text. In Source view, the formatted text is contained in the usual pair of HTML tags, like this:

Hello World

The words Hello World take on the formatting defined by the H1 style rule in the style sheet. You don t have to do anything special to make that happen. The connection between

in the page and the H1{…} style in the style sheet is built-in and automatic. If you change the H1{} style rule in the style sheet, the change shows up in all pages automatically. Applying CSS class selectors CSS class selectors aren t associated with any particular HTML element. In a style sheet, their names are preceded by a dot, as in this .Mono class selector: .Mono { font-family: Courier New , Monospace; font-style: normal; color: navy; } Block format Selected text Figure 6-18: Applying an element style. Chapter 6: Designing with Styles 117
Note: In case you are looking for affordable webhost to host and run your servlet application check Vision servlet hosting services

Unless there are styles in the style sheet that apply to tags already in the Master Page, you won t notice any difference. But if you switch to Source view, you ll see that VWD has inserted a link to the style sheet between the and tags near the top of the page. That link will look something like this example:
Keep in mind that only pages that have that tag near the top use the styles in the style sheet. If you create a new page from scratch, and don t specify a Master, drag the CSS file over to the page to create the link. Using Styles in a Page After you ve linked a style sheet to a page, HTML element styles will be formatted automatically. For example, if you styled the body{} element, then body text in the page takes on the style you defined immediately. As you format text in the page, any new styles will come into play as you use the element. For example, let s say you created a style for Heading 1 elements in your CSS style sheet, like this: H1 { font-size: 16pt; font-family: Arial Black ; font-style: italic; } Any text in the document that is already formatted as H1 will automatically be displayed in the new style. That is, any text between the

and

tags in the Web page will be displayed in 16 point Arial Black italic font. Exactly how you use a style rule to format new or existing content on the page depends on which type of selector defines the rule. I ll start with the easiest one, in which the selector s name matches an HTML tag (for example, as H1 or BODY). Applying CSS element selectors A CSS element selector is any CSS rule whose name does not contain a dot. The name of the selector matches the name inside the HTML tags of the element. Applying such a selector takes no real effort at all. You just apply the element as you normally would. 116 Part II: Building Your Web Site
Note: In case you are looking for affordable webhost to host and run your servlet application check Vision ecommerce web hosting services

All those property: value pairs that Style Builder creates are straight from the online CSS specification, available at www.w3.org/TR/CSS21. Saving a CSS style sheet When you ve finished working with a style sheet, just close and save it as you would any other document. The styles you defined won t be applied to anything until you link the style sheet to a page (or Master Page), as discussed next. Linking to a Style Sheet The rules you create in a CSS style sheet are applied only to the pages to which you link the sheet. If you ve created a Master Page, you can link the style sheet to the Master Page. The styles automatically carry over to all content pages that use the Master Page. The easy way to link to a style sheet is just to drag its icon from Solution Explorer into the page you re editing. For example, to add a CSS link to a Master Page, you simply open the Master Page (by double-clicking its icon in Solution Explorer), drag the CSS file s icon from Solution Explorer to the upper-left corner of the page you re editing, and drop it there. Figure 6-17 shows an example: I m dragging a style sheet named MyStyles.css into an open Master Page named MasterPage.master. To use your style sheet in an HTML page (or an .aspx page that doesn t use the master), just open that page in Design view and drag the style sheet s icon from Solution Explorer onto the page. Drag CSS file Figure 6-17: to page Link a style sheet to a Master Page. Chapter 6: Designing with Styles 115
Note: If you are looking for cheap and reliable webhost to host and run your mysql application check Vision mysql hosting services

When designing borders, you can choose to define all the borders at once, or just the left, right, top, or bottom margin. You can also collapse the vertical borders in a table so there s only one line and no gap between cells vertically. This only works if you re defining the style characteristics of a table element (that is, using a

tag). To collapse vertical borders in the table, click Other in left column of the Style Builder. Then, under the Tables heading, choose Collapse Cell Borders from the Tables drop-down list. Saving Style Builder choices When you ve finished choosing options from the Style Builder, just click OK. Your selections are translated into appropriate CSS property: value pairs and inserted between the curly braces for the rule. Here s a general example: DIV.BoxedText { border-right: navy thin solid; padding-right: 25px; border-top: navy thin solid; padding-left: 25px; float: left; padding-bottom: 25px; margin: 0px 25px 15px 0px; border-left: navy thin solid; padding-top: 25px; border-bottom: navy thin solid; width: 30%; background-color: #ffffcc; } To change your selections, right-click anywhere between the curly braces and choose Style Builder again. Make your changes and click OK. Remember, your style sheet can contain as many, or as few, style rules as you like. Padding Margin Figure 6-16: Margins, padding, and borders for a table. 114 Part II: Building Your Web Site
Note: In case you are looking for affordable webhost to host and run your web application check Vision cheap hosting services

Posted in Linux | No Comments »

---