Visual C# Tutorials

Formatting Texts

Visual Web Developer's Designer has tools to format and style the content of your page anyway you want. We will use the website that we created in the previous lesson. Create a new ASPX page by right clicking the solution explorer and clicking Add New Item. Choose web form and name it formatting-texts.aspx. You can go to the Design View by pressing F7 or clicking the Design tab below.

 The Formatting Toolbar in VWD is pretty much the central control panel for formating any selected text or content in the Designer. You might find it similar to the formatting toolbar in popular word processing softwares such as Microsoft Word. Figure 1 shows you the formatting toolbar while Figure 2 shows the functionality of each of its parts.

Figure 1

Label	Description
1	Allows you to apply inline CSS Styles to the selection. CSS is use to style and make your site more presentable. It will be discussed briefly in another lesson.
2	Allows you to change or insert a block tag to use. These tags includes <p> for paragrahp, <h1> to <h6> tags for headers, <pre>, <ul>, <ol>, and more. It also allows you to apply CSS styles.
3	Allows you to choose the font family to use for the selected text.
4	Allows you to set the font size of the selected text.
5	Allows you to make the selected text bold, italicized, or underlined.
6	Allows you to change the selected text's font color.
7	Allows you to change the selected text's background color (highlight).
8	Allows you to change the text alignment of the selected block.
9	Changes the selected block into an unordered list (<ul>).
10	Changes the selected block into an unordered list (<li>).
11	Allows you to attach a hyperlink to the selected text.
12	Allows you to generate a local resource that you can later use in code.

Figure 2

If you can't find the Formatting Toolbar, go to View > Toolbars and choose Formatting. By default, it is located below the first row of toolbars of VWD.

Changing the Block Tag

In HTML, certain tags are created with the purpose of containing blocks of texts. An example of block tags is the <p> tag. It is recommended to enclose all of the text that will serve as content of your page in the <p> tags. This makes a logical distinction as to which are the main content of your page.

You can insert <p> tags and other block tags by using the block tag combobox (#2 of figure 1). Let's go to the new page that we created. Position your cursor inside the <div> tag. Go to the block tag combobox and select paragraph. A <p> tag will now be created inside the div tag. A tag name indicator at the top left of the block in the Designer will show you that you are now inside a <p> tag. You can also see that more clearly in the tag navigator below.

We can now start typing text inside the created <p> tag. For this example, we type "Learning ASP.NET is fun and rewarding!".

When you are inside a block tag, you can change the block tag used by again going to the block tag combobox and choosing a different block tag. For example, we can make our paragraph as a heading by changing it to one of the heading tags. Go inside the created <p> tag and choose Heading 1 in the block tag combobox.

The <p> tag was now changed to <h1> tag. <h1> tag is used as the main heading of a webpage that's why it's size increased. Change back the block tag to <p> for the next section.

Changing the Font

Like word processors, you can simply change the selected font by going to the formatting toolbar's font selection combobox (#3 in Figure 1) and choosing the desired font. In our web form, select the word "ASP.NET" in the Designer. Now to to the font seletion combobox and change the font into Consolas.

You will now notice that the selected text's font changes. Note that you can simply type the font name in the font selection combobox if you are having a hard time finding it from a large list.

Changing the Font Size

Changing the font size of the selected text is as easy as changing the font, next to the font selection combobox is another combobox used for selecting font size. Select the word "fun" in our text and go to the font size combo box. You can choose from any of the predefined sizes. Choose xx-large for this example.

The size of the selected text is now larger. You can also type a numerical size in the combobox if you can't find the size you want from the list.

Changing the Font Style

In adddition to changing the selection text's font and font size, you can also make it bold, italicized, or underlined. You can click the respective font style buttons from the formatting toolbar (#5). Select the word "Learning" of the text. Click the bold, italicized, and underline buttons.

You can see the changes each buttons made to the selected text.

Changing Font Background and Foreground

Changing the font's color and background is also relatively easy. The foreground and background buttons(#6 and #7) from the formatting toolbar will show a color picker where you can choose your desired color. Select the word "rewarding" from our text. Click the foreground button and you will see a color picker where you can choose a color:

Figure 3

The color picker also allows you to specify RGB values for the color in the Value textbox. Clicking the Custom button will bring in more colors you can choose from. For this demonstration, pick the blue color with RGB value of 0000FF (you can check it in the Value textbox). Click OK to confirm the color.

Now click the Background button and the color picker will show up again. Pick the yellow color FFFF00 and click OK.

The foreground and background colors of the selected text are now changed.

Changing Text Alignment

Finally, you can change the alignment of text inside a block. The alignment button (#8) allows you to align the text to the left, right, center, and you can also justify it. To try it out, position you cursor inside the <p> tag (you don't need to select the text). Click the arrow to the right of the button to see the list of alignments. For this demonstration, choose the Justify Center to center the alignment of text.

When you wan't to reapply the settings to other block, then simply click the button itself.

The <style> Tag

The formatting you made to the text in a document are generated inside a <style> tag. The content's of the style tag are the CSS codes that specifies the look of each of the text we formatted. Go to the Code Editor by pressing Shift + F7 or clicking the Source tab. Inside the <head> tags, you will see the style tags and the CSS codes.

Don't worry if you don't know CSS, we will have a separate tutorial on them. The important thing is you know where the styles are going when you apply them to a selection of text. If you know CSS, you can edit these styles here instead of going to the formatting toolbar.

---

Previous Lesson Web Forms

Index ASP.NET

Next Lesson Generating Tables with Visual Web Developer

blog comments powered by Disqus