Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

Change the Visual Style of a Web Page

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
[♪ music ♪] [Microsoft ASP.NET] [] Hello and welcome to the 9-part. "How do I:" video series on Microsoft WebMatrix. You are currently watching part 3 of the series, "How Do I Change the Visual Style of the Web Page Using the WebMatrix tool?" In this example we will demonstrate how to add styling to the web page using a cascading style sheet or CSS in WebMatrix. We will apply this styling to the default.html page that we created in part 2 of this series. Let's begin with the page division that is used to logically divide the page into blocks by using the <div>. To do this, wrap the list containing the movies into a <div>. The <div> is a logical divider that doesn't have any physical appearance so there will be no impact on the output. Now let's apply the hyperlink functionality to the list items. To convert all of the list items into hyperlinks wrap the text of the movie in an <a> and set the href property to #. Next let's add a header and footer to the page. To add the header just wrap the the <h1> in a <div> and provide the ID value as header. Similarly add the footer and enter some text in a hyperlink in it. Next let's apply some style to the header. To do this apply the style attribute to the <h1> and set the color property to blue, font size to 32, font family to Verdana, and text decoration to underline. Now run the page in the web browser. The page displays a list of movies with a hyperlink applied on each of the list elements. Also the header and footer are displayed with the styles applied to them. Applying style on every individual element would end up with a lot of text on the page which results in slowing down the browser and hence affecting the overall performance of the site. So instead of putting all the style code in individual tags let's specify the class attribute title on the <h1>. To do this enter the CSS code syntax for the title class. This code is placed within a <style> in the header of the page. Also set the class attribute of the <h1> as title. Next let's apply some style to the list of movies. To do this enter the CSS code syntax for the movie list class that sets the list style property as none. This would remove all the numbers from the list. Now run the page in the web browser. The header is displayed with the styles applied to it. Also the list is displayed without the numbers. Until now we have been writing the complete code in the default.html file. But if a site has more than 1 page then it is better to use the CSS file. So now let's create a CSS file and put all the style codes in it. To do this click new and then click new file. The new file dialogue box opens up. Here select CSS as a file type and name it, "movies.css." Then click okay. It opens the movies .css file with an empty body tag. Replace this with the CSS code. Now go back to the html file, delete the entire script tag, and replace it to use the references of the movies.css file. It tells the browser to load the style sheet instead of getting the styles directly within the page. Similarly remove the reference of the title class from the <h1>. Next let's apply some style to the footer to make it look a little nicer. To do this insert a footer class in the movies.css file and apply some style to this class. Now run the page in the web browser to see the result. The page shows the similar results as shown earlier with some styles implemented on the footer. This sample application shows how you can apply CSS and WebMatrix to add the styling information to your web page and to externalize the CSS so that it can be shared across different pages including how to set up a CSS class that allows you to style multiple elements. Thanks for watching the video. Hope you enjoyed it and see you next time. [♪ music ♪] [Microsoft] []

Video Details

Duration: 4 minutes and 25 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 6
Posted by: neudesicasp on Sep 23, 2013

Part 3 gets you started with CSS and style sheets so you can make your page more beautiful.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.