Right-click
on this image and save it as mosaic.jpg (or use an image of
your own)Cascading Style Sheets (CSS)
Cascading Style Sheets give you the ability to separate the layout of a webpage from its content and give you greater control of the layout
There are several ways to work with CSS:
You can create a standalone .css file that can set the layout for all of the webpages on your site. This allows you to make changes across your whole site by just modifying one file and also helps with consistency
You can create a style sheet within the head of the document that will set layout rules for that specific webpage
You can use inline style tags to change the properties of an HTML element without applying to it the whole page
Properties you can control with CSS:
Colors (text, backgrounds, ...)
Positioning
Borders
Size
Alignment
Text effects (bold, underline, ...)
Scrolling
With CSS you can modify existing HTML tags or create your own design rules and apply them to whatever you want
Here is an example of a style sheet that will make every occurrence of the h1 tag show up red, with the verdana font face:
<style type="text/css">
<!--
h1 {color: #ff0000; font-family: verdana}
-->
</style>
Notice the <style> tag is used to mark the style sheet rules
Any webpage that references this style sheet will have all of its h1 tags displayed this way (unless a more local style sheet overrides it)
Linking to an External Style Sheet
The previous example used a style sheet within the head of the document along with an inline style attribute to override one of the h1 tags.
To create an external style sheet to use across several documents, you can use Dreamweaver MX 2004 and do File > New and then, under Basic Pages, choose CSS
This will give you a blank CSS document to type in your rules and save it with the extension .css
**NOTE: You cannot use the <style> tags in an external CSS
Exercise:
1. Create a new CSS document and copy and paste the following code into it:
body {
font-family: georgia;
position: absolute;
top: 50px;
left: 50px;
border: solid #0000ff 5px;
}
2. Save it as style1.css
3. Now open up any existing HTML file you have or create a new page and the following line into the <head> of the document:
<link href="style1.css" rel="stylesheet" type="text/css">
4. Save and view your HTML and you should see the effect of the style sheet.
5. Use Text > CSS Styles > Manage Styles, click on style1.css and then click Edit to change some of the values in style1.css, save, and refresh your HTML page to see the impact.
Creating your own CSS classes
CSS classes allow you to create rules that aren't just automatically associated with a specific HTML tag
This allows you to apply the same format rule to several tags throughout the document
I've been using a class I created called code that I have used throughout this page to display the CSS code
Here is what you will find in the head of this document that defines the code class:
.code {
font-family: "Courier New", Courier, mono;
font-weight: bold;
color: #000099;
}
You use a period and then whatever name you want to give that specific layout rule followed by the property:value pairs like you would when setting the layout for an HTML tag
In Dreamweaver MX 2004, all you need to do to apply this rule in the document is highlight the text you want to apply it to and then select code from the Style drop-down box in the Properties window
Using the HTML code, you would add the attribute class="code" to any tag you wanted to apply the rules I names .code above
Exercise:
1. Open up your style1.css file
2. Create 2 classes of your own (ie. for different colored links, highlighting, heading fonts)
3. Save your CSS file
4. Open up any existing HTML file you have or create a new page and apply your 2 classes to different elements on your web page (make sure you link the HTML page to style1.css)
5. Save and view your HTML
Tiling a background image with CSS
It is really quite simple to get a nice tiling effect of an image to use as a background on a web page. Make sure you take into consideration whether text will be going over this image. Often it is better to tile the image down the side of the page or across the top so as to keep the text clear and easy to read
Exercise:
1. Right-click
on this image and save it as mosaic.jpg (or use an image of
your own)
2. Open up a web page you want to tile the image on
3. Choose Text > CSS Styles > Manage Styles...
4. Click New
5. Click the radio button for Tag
6. Choose body from the drop-down menu
7. Click the radio button for This document only (unless you want this on all of your pages)
8. Click OK
9. Click on Background from the Category list
9. Click Browse to find this image and load it's location into the background image box
10. Select Repeat-y to tile it vertically down the left (Repeat-x will tile horizontally)
11. Click Box from the Category list
12. Over by the Margin section, uncheck Same for all by clicking on it
13. In the box marked Left type in 100 (for the mosaic image here)
14. Click OK
14. Save and you should see the image tiled and text shifted over
Using CSS effectively
Ok, so now that you know a little CSS and how it works, how can you use it effectively without needing to be an expert?
CSS can be used to make nifty navigation menus and create some really beautiful, slick pages. But this takes some real experience and much more than this lesson here.
Dreamweaver MX 2004 has some built-in Page Designs that use CSS, but most of the work is already done for you as far as creating the layout rules, but you may need to tweak them from time-to-time and get into the code yourself
A good way to start is to use CSS to make your website consistent across all of the pages
CSS also allows you to: