Linking to an External Style Sheet Web Design Section 4-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials
Objectives The Student will: Understand the difference between internal and external style sheets Understand the difference between internal and external style sheets Create an external style sheet, and link to it from within your web pages Create an external style sheet, and link to it from within your web pages Know how to control aspects of the external style so they apply to just 1 file. Know how to control aspects of the external style so they apply to just 1 file.
External Style Sheets Adding a element in a html file is a great way to format a webpage What if you would like that same style to apply across multiple web pages? This would provide consistency in the web pages This would provide consistency in the web pages Allow a single place to change the style and have that change affect all web pages Allow a single place to change the style and have that change affect all web pages External Style sheets allow you do that.
External Style Sheets You can take all your CSS style code and place it in a separate file (styles/ mystyle.css) The sheet is then linked into any html files that you want to share that style: The sheet can be included in multiple html files.
Restricting Styles There are some styles that you may have applied to one page, but don't want it to apply to all pages. This is especially true on the home page, since home pages tend to be different than other pages in both content and structure. This is especially true on the home page, since home pages tend to be different than other pages in both content and structure.
Restricting Styles Two solutions are: 1.Keep the styles that differ in the section of index.htm. All other style definitions from this page can be relocated to the new external CSS file, as long as students want these styles to apply to all pages on their site 2.Assign a unique id to the body tag of the home page, for example, id="home". Then, in the external CSS file, preface those style definitions that apply only to the home page with #home.
Example My index.htm file looks like: <html><head> Mr. Schmidt's Web Portfolio Mr. Schmidt's Web Portfolio </head>
Example My mystyle.css file looks like: h1, h2,p { text-align: center; text-align: center; } h1,#home h2, #home h3 { font-weight: bold; font-weight: bold; color: #FFFFFF; color: #FFFFFF;} These will only be applied to h2 and h3 on the home page. These will be applied to all pages.
Summary External CSS sheets allow you to apply the same styles across all your web pages. Styles can be unique to a web page by adding an id to the body section of the html or by adding that style into the web page. Easier if all styles are in one place Easier if all styles are in one place
Rest of Today Download the instructions for Homework 4-3 from the Hancock WebPage (in the homework section) Complete this assignment today. Show me the results – This is for 2 grades: CSS Code CSS Code External Style Sheet External Style Sheet