can you please help me solving this it is E Commerce Cours TRY IT OUT Writing Your First CSS In this Try It Out you will write some CSS that changes the appearance of a header and two paragraphs You'll hand code the page for now the second half of this chapter shows you how to use the CSS tools available in VS 1 In the Demos folder of the Planet Wrox project, create a new Web Form called cssDemo aspx For this exercise, it doesn't matter if you choose Inline Code or Code Behind 2 Make sure the page is in Markup View and then locate the closing tag in the source Position your cursor at the end of the line and press Enter to create an empty line between the and tags On this new line type the word style and then press Tab Vs completes the element for you Press Enter to create some room between the tags and then complete the block as follows NOTE This code completion feature uses code snippets that enable you to associate a piece of code (like the element) with an identifier (like style in this example) Code snippets are very useful for inserting pieces of code quickly by typing only the short identifier Many more code snippets are available, and where appropriate I'll point them out throughout this book Instead of using the style code snippet, you can also type the full code yourself Note that as soon as you type the opening angle bracket ( element in the Document Window to select it and then choose Format New Style The New Style dialog box appears (visible in Figure 3 16) that lets you visually create new CSS code 3 At the top of the screen, open the Selector drop down list and choose (inline style) It's the first item in the list This ensures that the new style is applied as an inline style to the chl element 4 Switch to the Box category, shown in Figure 3 17 This dialog box has a handy diagram that serves as a refresher on the CSS Box Model, showing you where the properties padding, border, and margin end up By default, browsers draw some white space above or below an element, but the actual amount differs between browsers To give each browser the same consistent settings, you can reset the padding to 0 and then apply a little bit of margin at the bottom of the heading, which creates some distance to the elements following it To do this, set padding to o in the top box and clear the value from the drop down list next to the text box By leaving the Same for All option Working with CSS in Visual Studio 93 can simply choose them from different lists on the CSS Properties Grid This grid enables you to enter values manually but also offers handy tools to select colors, files, items from drop down lists, and more All changes you make in the Properties Grid are applied to the relevant style sheet, whether you're working with an inline, embedded, or external style sheet At the same time, the Design View is updated to reflect the new CSS options you have set When you look at the element, you can see that VS created an inline style with padding set to o to affect all four sides at once, and margin set to 0 0 10px 0 to control all four sides individually, Once you have created a bunch of useful and reusable styles, you need a way to apply your existing styles to other pages or HTML elements You see how this works next Applying Styles If you have some experience with Microsoft Word, you may be familiar with the Styles dialog box, which lists all available styles and enables you to apply them to selected portions of text This way, you can quickly apply identical formatting to blocks of text This works similarly in VS With the Apply Styles window accessible by choosing View Apply Styles from the main menu you can easily apply style rules to elements in the page WWOH TYR IT OUT Using the Apply Styles Window Cear Styles In this exercise, you reuse the Introduction class and apply it to the second paragraph of the page as well That way, both paragraphs end up looking the same 1 Still in Default aspx, make sure you're in Design View and then select the second paragraph of the page by clicking it Ensure that the Tag Selector at the bottom of the Document Window shows that the element is selected, and not another one like b that may be part of the element If you have only one Apply Styles paragraph of text, create a new one first (by pressing Enter after the Options first paragraph in Design View), enter some text, and then select that paragraph 2 Open the Apply Styles window by choosing View Apply Styles Make sure the window is not accidentally docked in the main Introduction Document Window, but either floats or is placed at the side of the Document Window This window shows all the selectors it finds in PageWrapper the current page and any attached style sheet If you don't see all the styles shown in Figure 3 23, click the Options button and choose Styles cms Show All Styles 3 Click the Introduction class in the CSS Styles list VS adds a class FIGURE 3 23 attribute to the tag Feel free to have a sa href Default aspx look around there are lots of interesting reviews and concert pictures to be found here Working with CSS in Visual Studio 195 1 Make sure that Default aspx is still open and switch to Markup View if necessary 2 Locate the chi element and click it once VS highlights the tag in the Tag Selector at the bottom of the Document Window to indicate it's the active tag rador 3 Open the Apply Styles window by choosing View Apply Styles PageWrapper from the main menu Alternatively, if you have the window docked with other windows, simply click its tab to make it active Again, make sure the window is not accidentally docked in the main Document Window, but either floats or is placed at the side of the hi Document Window At the bottom of the Apply Styles window, you'll see an inline style appear (see Figure 3 24) Style 4 Right click Inline Style and choose New Style Copy The New Style FIGURE 3 24 dialog box appears, enabling you to create a new style based on the current selection At the top of the window, choose hi from the Selector drop down list, and from the Define In dropdown list choose Existing style sheet From the URL drop down list, choose Styles styles css If that item isn't available, click the Browse button to locate and select it Your dialog box should end up like Figure 3 25 New Style AU und AalbYyoguj FIGURE 3 25 5 Click OK to close the dialog box VS creates a copy of the ni style and places it in the stylen cas file VS creates a new selector for hi in the styles css file instead of adding the padding and margin info to the existing rule set If you want to, you can combine the two selectors into one manually TRY IT OUT Writing Your First CSS In this Try It Out you will write some CSS that changes the appearance of a header and two paragraphs You'll hand code the page for now the second half of this chapter shows you how to use the CSS tools available in VS 1 In the Demos folder of the Planet Wrox project, create a new Web Form called cssDemo aspx For this exercise, it doesn't matter if you choose Inline Code or Code Behind 2 Make sure the page is in Markup View and then locate the closing tag in the source Position your cursor at the end of the line and press Enter to create an empty line between the and tags On this new line type the word style and then press Tab Vs completes the element for you Press Enter to create some room between the tags and then complete the block as follows NOTE This code completion feature uses code snippets that enable you to associate a piece of code (like the element) with an identifier (like style in this example) Code snippets are very useful for inserting pieces of code quickly by typing only the short identifier Many more code snippets are available, and where appropriate I'll point them out throughout this book Instead of using the style code snippet, you can also type the full code yourself Note that as soon as you type the opening angle bracket ( element in the Document Window to select it and then choose Format New Style The New Style dialog box appears (visible in Figure 3 16) that lets you visually create new CSS code 3 At the top of the screen, open the Selector drop down list and choose (inline style) It's the first item in the list This ensures that the new style is applied as an inline style to the chl element 4 Switch to the Box category, shown in Figure 3 17 This dialog box has a handy diagram that serves as a refresher on the CSS Box Model, showing you where the properties padding, border, and margin end up By default, browsers draw some white space above or below an element, but the actual amount differs between browsers To give each browser the same consistent settings, you can reset the padding to 0 and then apply a little bit of margin at the bottom of the heading, which creates some distance to the elements following it To do this, set padding to o in the top box and clear the value from the drop down list next to the text box By leaving the Same for All option Working with CSS in Visual Studio 93 can simply choose them from different lists on the CSS Properties Grid This grid enables you to enter values manually but also offers handy tools to select colors, files, items from drop down lists, and more All changes you make in the Properties Grid are applied to the relevant style sheet, whether you're working with an inline, embedded, or external style sheet At the same time, the Design View is updated to reflect the new CSS options you have set When you look at the element, you can see that VS created an inline style with padding set to o to affect all four sides at once, and margin set to 0 0 10px 0 to control all four sides individually, Once you have created a bunch of useful and reusable styles, you need a way to apply your existing styles to other pages or HTML elements You see how this works next Applying Styles If you have some experience with Microsoft Word, you may be familiar with the Styles dialog box, which lists all available styles and enables you to apply them to selected portions of text This way, you can quickly apply identical formatting to blocks of text This works similarly in VS With the Apply Styles window accessible by choosing View Apply Styles from the main menu you can easily apply style rules to elements in the page WWOH TYR IT OUT Using the Apply Styles Window Cear Styles In this exercise, you reuse the Introduction class and apply it to the second paragraph of the page as well That way, both paragraphs end up looking the same 1 Still in Default aspx, make sure you're in Design View and then select the second paragraph of the page by clicking it Ensure that the Tag Selector at the bottom of the Document Window shows that the element is selected, and not another one like b that may be part of the element If you have only one Apply Styles paragraph of text, create a new one first (by pressing Enter after the Options first paragraph in Design View), enter some text, and then select that paragraph 2 Open the Apply Styles window by choosing View Apply Styles Make sure the window is not accidentally docked in the main Introduction Document Window, but either floats or is placed at the side of the Document Window This window shows all the selectors it finds in PageWrapper the current page and any attached style sheet If you don't see all the styles shown in Figure 3 23, click the Options button and choose Styles cms Show All Styles 3 Click the Introduction class in the CSS Styles list VS adds a class FIGURE 3 23 attribute to the tag Feel free to have a sa href Default aspx look around there are lots of interesting reviews and concert pictures to be found here Working with CSS in Visual Studio 195 1 Make sure that Default aspx is still open and switch to Markup View if necessary 2 Locate the chi element and click it once VS highlights the tag in the Tag Selector at the bottom of the Document Window to indicate it's the active tag rador 3 Open the Apply Styles window by choosing View Apply Styles PageWrapper from the main menu Alternatively, if you have the window docked with other windows, simply click its tab to make it active Again, make sure the window is not accidentally docked in the main Document Window, but either floats or is placed at the side of the hi Document Window At the bottom of the Apply Styles window, you'll see an inline style appear (see Figure 3 24) Style 4 Right click Inline Style and choose New Style Copy The New Style FIGURE 3 24 dialog box appears, enabling you to create a new style based on the current selection At the top of the window, choose hi from the Selector drop down list, and from the Define In dropdown list choose Existing style sheet From the URL drop down list, choose Styles styles css If that item isn't available, click the Browse button to locate and select it Your dialog box should end up like Figure 3 25 New Style AU und AalbYyoguj FIGURE 3 25 5 Click OK to close the dialog box VS creates a copy of the ni style and places it in the stylen cas file VS creates a new selector for hi in the styles css file instead of adding the padding and margin info to the existing rule set If you want to, you can combine the two selectors into one manually

The Answer is in the image, click to view ...

Answered step by step

Verified Expert Solution

Link Copied!

Question

1 Approved Answer

Posted on Sep 26, 2024

can you please help me solving this it is E- Commerce Cours TRY IT OUT Writing Your First CSS In this Try It Out you

image text in transcribed

can you please help me solving this it is E- Commerce Cours

TRY IT OUT Writing Your First CSS In this Try It Out you will write some CSS that changes the appearance of a header and two paragraphs. You'll hand code the page for now; the second half of this chapter shows you how to use the CSS tools available in VS. 1. In the Demos folder of the Planet Wrox project, create a new Web Form called cssDemo.aspx. For this exercise, it doesn't matter if you choose Inline Code or Code Behind. 2. Make sure the page is in Markup View and then locate the closing tag in the source. Position your cursor at the end of the line and press Enter to create an empty line between the and tags. On this new line type the word style and then press Tab. Vs completes the <style> element for you. Press Enter to create some room between the tags and then complete the block as follows: <title></style> NOTE This code completion feature uses code snippets that enable you to associate a piece of code (like the NOTE This code completion feature uses code snippets that enable you to associate a piece of code (like the