Download presentation
Presentation is loading. Please wait.
1
External Style Sheets
2
External Style Sheets:
An external style sheet is a separate file with a .css extension. It contains only CSS code and no XHTML. Utilized to maintain consistent styling across multiple pages. Enables us to make global changes to a website from a single file. Further separates our page content from our page styling.
3
Linking to an External Style Sheet:
For each XHTML page that will use the styling of the external CSS file, place a <link> statement in the <head> section of the document. <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> This is the name of the external CSS file. If no path is specified, the file must reside in the same folder as the XHTML file.
4
The External CSS File: style.css:
p { color: brown; font-style: normal; font-weight: bold; font-family: Arial; font-size: 12px; } h1 { text-align:center; font-style:italic; font-weight:bold; font-size:24px; font-family:Arial; The syntax for the external CSS file is nearly identical to an internal style sheet. We do not need the <style> element or any other introductory code. It doesn't matter whether or not we place a space between the selector and the property. Using spaces does make the style sheet easier to read.
5
Adding CSS Comments: p { color: brown; font-style: normal; font-weight: bold; font-family: Arial; font-size: 12px; } /*This main heading will be changed to Verdana in June.*/ h1 { text-align: center; font-style: italic; font-size: 24px; Just as we add comments to our XHTML code, we can do the same with CSS. Everything between the opening /* and closing */ will be ignored by the browser. CSS comments can be used when experimenting with styles. Instead of deleting style declarations and then retyping them, we can "comment them out" temporarily and then remove the /* and */ later.
Similar presentations
