Style Sheet Locations for COMS326
By the time you publish your first multi-page site (such as your midterm site review project in coms326), you should know the three basic locations for CSS styling: Inline styles, embedded style sheets, and external style sheets.
- Inline: Yes, if you want to have one headline turn
red, you can inline a style by adding
style="color:red;"to a single HTML element, like this:
<h2 style="color:red;">Secondary Headline</h2>
H-tag headlines, by default, appear in a larger font and on a new line.
If you want just one word or phrase in mid-line to have a special style, you can use the inline HTML tag <span> with a style attribute or with a class name:
Students are encouraged to<span style="color:red;">Give Blood</span> - Embedded: If you want all the page's
headlines to be red, it's more powerful to embed
a whole style sheet in the head of your document, and restyle all h2
elements from there... You also can create new style classes with whatever name you like:
<style>
h2 {
color:red;
}
.money {
background-color:green;
color:white;
}
</style>- Dreamweaver's page layouts and most of my sample pages use that kind of embedded style sheet so that you can view the CSS and HTML code in a single window of your text editor or a browser's "view source" command -- or print both sections of a page for study.
- But when you are developing a multi-page site, CSS does an even bigger job when you move the styling to an external CSS document and link it to all your pages as described below.
- External style sheets
- An external style sheet is simply a plain-text document with a name ending in ".css" instead of ".html" -- and containing the same style-defining information that you have been putting between the <style> and </style> tags in the head of your document.
- You can give the document any name you like, such as "reviewstyle.css" for the styles you develop for your site review project.
- You can make your external style sheet control any page by adding an
extra line to the ".html" page's <head> section:
<link rel="stylesheet" type="text/css" href="reviewstyle.css"> - Reminder: Always save your .html and .css pages before linking them together, otherwise Dreamweaver will create "file:///" links that only function on your own computer, not on the Web.
- In keeping with the "site review" project's suggestion that you compare alternative websites, here are several versions of instruction pages for external style sheets (as well as the inline and embedded approaches).
- Notice that you can link more than one style sheet to a document, including specialized "alternate" style sheets to make your pages more printable or more useful on small-screen tablets and phones. You can explore that later as part of your book-report project or your final site.