QUICK TUTORIAL - EMBEDDED AND EXTERNAL STYLE SHEETSEmbedded and External Style Sheets have a similar syntax: Note that one of these styles changes all <td> tags. Any HTML tag can be altered in each place that it appears by changing its properties in the stylesheet. One of the styles is a user-defined "class" which can apply to any tag by adding the class to the tag, like this: <p class="smallwhitebold"> or <td class="smallwhitebold"> One of the styles is a user-defined "id" which can apply to one section of the web page. Only one. It is added to the tag like this: <div id="content">. Internal (Embedded) Style Sheet - goes on the page in <head> section:
External (Linked) Style Sheet - separate page
Note that the stylesheet does not have <html> or <head> or <body> tags. The stylesheet can be called whatever you want, and it has the filename extension "css". I usually indicate which website it's for, for example, primerstyle.css, or htmlbasicstyle.css. To link to a stylesheet, this goes in the <head> section: <link rel="stylesheet" href="../style/primerstyle.css" type="text/css"> This means "This link is concerning ("related to") a stylesheet, whose address ("hypertext reference") is in a different peer directory called style, and whose filename is primerstyle.css (or whatever you called yours), with the type text - cascading style sheet." You can also add a stylesheet to a page by using "@import." This can have the advantage of hiding your stylesheet from some older browsers, which do not recognize the @import rule, and simply skip over it. Since your page may be inoperable on certain early browsers if they cannot handle your style declarations, you're better off with no styles at all. It won't be pretty, but the information can still be there and your links will work. <style> @import URL("../style/primerstyle.css") </style> There's another way to include styles on your page as well, "inline styles."
|