Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The first step in creating a Cascading Style Sheet visual design in an ASP.NET website is to create and attach an external style sheet file. External style sheet files are simple text files that are placed in the Websites Root folder or in a sub-folder of the root. They always have a file extension of .css. The task of actually creating the style sheet file can be done either as pure text or pure coding exercise or it can done using Visual Web Developer tools. I'm going to be working with a website that already has a number of files in it. Go to the Visual Web Developer menu and select File > Open Web Site.
Navigate to the VisualDesign folder under Chapter06 VisualDesign and click Open. In this website, there are four primary pages: Default.aspx, which is the homepage of the website, and then three other pages, Authors, Publishers and Titles. There is a server control called Header.ascx, which is used by all four pages, which contains a number of hyperlinks wrapped inside ASP panel components and there is also a beginning style sheet file called styles.css.
The style.css file has selectors for the body, table and anchor elements and a pseudo selector called a:hover that affect anchor tags when the mouse is hovering over them. If you take a look at the Default.aspx, you will see that currently the page doesn't have any links to the style sheet file and if you test the page in the web browser, you will see that the styles in the styles.css file are not being applied right now. You are seeing the default fonts and colors applied by the browser. So here is how you attach the external style sheet file to a page. Go to Default.aspx and look at the page in Design view, then over on the left, click on Manage Styles. You will see when you click the Manage Styles tab that the Manage Styles window slides out from the left. Now because we'll be using styles extensively, click the Pin icon, which will pin the panel open and also adjust the design area, so we can see both at the same time.
Now click the Attach Style Sheet link. From there, look in the Root folder and you will find the file styles.css and click OK. You will see in Design view that the fonts change immediately reflecting the settings in the Style Sheet. Now try browsing the page again in the browser. Select Debug > Start Without Debugging, look at the page in the browser and you will see it has a very different look and feel. The font settings from styles.css have been applied and if you move the cursor over the anchor tags at the top, you will see that the menu reflects the a:hover pseudo selector that was declared in the external style sheet.
If you open the other files, Publishers. aspx, Authors.aspx and Titles.aspx, you will see that this link has already been created in these other pages. So that from this point onward, any changes that you make in the external style sheet file, styles.css, will be applied to all of the pages in the entire website. Once you have created this link, it makes it very easy to create side like design settings that are created and defined in CSS and then used in all pages of the website.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 104500 Viewers
56 Video lessons · 116419 Viewers
71 Video lessons · 85628 Viewers
131 Video lessons · 40988 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.