CSS is a mechanism within recent versions of HTML that gives you greater
control over text styles. Any traditional tag such as the
<h1>
header can be given a new font, color, line-height, letter spacing, etc.
You can define your own style classes to be applied at your
discretion. CSS also provides a more consistent means of laying out web
content than tables or frames. However, the layouts you need have already
been written in our templates.
CSS styles can be defined in one of two locations: within an HTML file or in a separate CSS file. Creating an independent CSS document has the advantage of modularity; every time you make a change, all the web pages that use your CSS file reflect that change. The standard CSS file for COF pages can be found here:
http://www.cof.orst.edu/Templates/site.css
The syntax for tag and class definitions is consistent and not particularly complicated. This template serves as a good example of what CSS can do. A complete CSS styles reference can be found at htmlhelp.com.
To begin, we recommend you link you link your HTML document to your CSS file. While this is not necessary for the browsing, editors like Dreamweaver MX rely on linking to preview and browse CSS classes.
<link rel="stylesheet" href="someaddress" type="text/css">
Just copy and paste the above code into the head element where
someaddress
is the URL for your CSS file.
To actually use your CSS in a web page, you have to import it. Use
the following code below the
link
tag in the head element:
<style type="text/css">
<!--
@import url(http://someaddress);
-->
</style>
where someaddress is the URL
for your CSS file.
You can also override in HTML any of the original styles you've written in
CSS with the
style
attribute. Say, for example, you want to change the line height for just one
paragraph to 110% of the original. Your opening tag would look like this:
<p style="line-height: 110%;">
This is just one example of size adjustment. Notice, however, that it's a relative adjustment. We recommend that this and other relative units (em, ex) be used in place of absolute units so that user adjustments to font size on the browser end work consistently.
In addition to modifying individual tags, you can set the style for
block-level content with the
<div>
tag or for inline content with the
<span>
tag. This follows the same syntax as the original CSS definitions. CSS attributes
can also be looked up in the O'Reilly CSS section of the reference tab in
Dreamweaver MX.
If you are interesting in learning about controlling layout and positioning using CSS, the following article provides a good explanation.
