Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Once you have declared an external style sheet file and linked it into your pages, you can then start declaring CSS rules and apply them to various parts of your web pages using standard Cascading Style Sheet architectures. In CSS, you can declare what we call Selectors. There are three types of selectors, Tag selectors, Class selectors and ID selectors. Tag selectors apply to all HTML elements of a particular name. Class Selectors apply to elements that join a group explicitly using the class attribute. ID selectors apply only to single elements that have a particular unique ID.
I am going to demonstrate here how to declare a class selector and then add a particular ASP.NET component to that class to adopt the appearance that's defined in the class. I'll be working with the following files. First of all, Header.ascx, a custom server control that displays the banner image and also a set of hyperlinks wrapped into a panel. I am going to be modifying the panel using the external style sheet file that's linked into all pages. Then styles.css, the starting CSS file that was included with this chapter's Exercise Files. When you open styles.css, you should see something called the CSS Outline View appear on the left. Now if you don't see that view, go to the menu and select Window > Reset Window Layout and confirm.
You should see the view appear. The CSS Outline view allows you to create brand new style declarations in an external style sheet. It groups the style sheet by elements or what are known in actual Cascading Style Sheets as tag selectors, classes and IDs. I'll right click on any of the elements in the CSS Outline view and select Add Style Rule. Here you can add an element or a tag selector. If you pull down the list, you will see all HTML elements listed. You can create your own class name or you can specify a particular element ID.
I'll choose class name and I'll type in a class of menuPanel. Notice that Visual Web Developer interprets that as a style declaration with a prefix of a period. In Cascading Style Sheets, all CSS class selectors have a period prefix and then the arbitrary name of the class that you select. I'll click OK and that actually creates the class selector code in styles.css. Now if you know your Cascading Style Sheet syntax, you can just fill it in here, but Visual Web Developer will help you create it through a visual interface, a dialog box that will help you build the code if you don't know how to build it yourself. Go to the CSS Outline view, click the + icon next to Classes. Go to menuPanel, right click and select Build Style. This takes you into the Modify Style dialog box.
Now I'm going to set a number of properties in different categories. Notice that there are Block Properties that affect word spacing, letter spacing, and so on. Background Properties for background colors and Border Properties. I'll start here in the Border. For the Border style, I'll leave the option Same for All selected so that I'll be setting the style for top, bottom, left and right. I'll choose a style of solid. Notice that in the Preview pane at the bottom, you can see what the style will look like. I look at the border and think that that's a little too thick.
So then I'll click under border- width, once again leaving Same for All selected, typing in number of 1. Then I'll leave this selection of px there. When I press the Tab key to tab out of this selector, the Preview pane shows me the result, a much thinner border. I'll leave the border color alone, so to use the browser's default. I'll go to the Box settings. For the Box settings, I'm going to set padding for three borders. I'll uncheck Same for All and then I'll put a value of 5 pixels into the top, bottom and left. I'm not concerned about the right border, because there is nothing on that side. Then I'll click Position.
For the Position, I'll put in a width of 250 pixels. So I have set values in three categories. I'll review. Here are the Border settings with all border styles and widths set to solid and 1 pixel. The Box settings to control padding for individual borders and the Position settings just to control the width of the container. Take one more look at the Preview and the Description and then click OK. Then look at the code that was generated in styles.css. You will see that Visual Web Developer translated its properties names and values into well-formed CSS mark-up. Press Ctrl+S to save your changes.
Now return to the file Header.ascx. Go to the second asp:panel. This is the one with the ID of menuPanel. Then press Enter and a Tab character. Press Ctrl+Space, type CSSClass and then press Enter. Put in an equals, a quote and then the name of your new selector, menuPanel. Make sure you spell the class name exactly the same as you did in the styles.css file. Press Ctrl+S to save your changes. Let's go back and look at styles.css and I want to make sure that the class name here matches the class name as declared in the Header file.
Now we'll test it with our pages. I'll open the file Default.aspx. Notice I'm not making any changes in this file. I have centralized all of the code, so that the inclusion of the Cascading Style Sheet file is in the server control and the declaration of what the class means is in the external style sheet. I will run the page by pressing Ctrl+F5. Notice the new look of the menu bar. That's how it looks on the default page and also on the Titles, Authors and Publishers pages. You can extend your own sense of visual design now to the entire website, creating your own styles in the external CSS file and then linking into the styles by applying the CSS class in whichever visual controls need those styles.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 96834 Viewers
56 Video lessons · 110530 Viewers
71 Video lessons · 79371 Viewers
131 Video lessons · 38072 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.