1 Dreamweaver CS5 intermediate class by Cookie Setton Build a CSS website WITHOUT TABLES Just when you thought you were starting to understand HTML coding, style sheets come along. It is not an absolute necessity that you know how to hand code CSS, but just like with HTML there are always going to be situations where it helps to at least understand what you are looking at. Another unique feature of CSS is that it can be used both in a document and outside of a document as an External Cascading Style Sheet. However, with all of your CSS in an external sheet you are able to make site wide changes that wouldn’t be possible if all of your CSS coding was only in the document. 1.External or linked (style.css) – no in code. 2.Internal or embedded (this document only) 3.Inline – not recommended. Next to text. In the first lessons we will keep the CSS IN This Document so that we can use different CSS styles within one folder. CSS elements: selector, declaration with the { } – Untitled Document – –body { –font-family: Arial, Helvetica, sans-serif; –color: #C06; –line-height: 2.0; –margin:0px; –padding:0px; –background:#000000; –} – ______________________________________________________________________________ Change tags – create a rule for an existing HTML rule Create Rules for p, H1, H2, h3, etc.

2 The code will look something like this: Lesson 1 body { font-family: Arial, Helvetica, sans-serif; color: #C06; line-height: 2.0; margin:0px; padding:0px; background:#000000;} p { color: #FFF;} h1 { color: #300; background-color: #F39;} h2 { color: #FC0; text-decoration: underline;} h3 { a: 1.5em; display: block; } The design page will look something like this:

3 Index1 - Create some tags: body, P, H tags - to generate text. Copy 5 paragraphs, save as lipsum.txt in (notepad) Page properties, insert parksbg, Copy lorem ipsum text & paste Select tag, use the pencil to edit or double click body in CSS styles panel (remove the p if necessary) –Type 16px, tahoma Separate some of the text for header tags –H tags, header tags: h1 – h6 ctrl+1= H1 – put the cursor inside the paragraph –Make h1, h2, h3. Select the tag, make a rule, less specific, compound H1 - 22px, purple, uppercase H2 – 18px, capitalize, burnt orange H3 – 16px, block.15 em letter space (space between the letters) Make a change, save a change Insert an image: add text for search engine purposes. Choose an img from the image folder. –Copy and paste img 2 more times. Double click the img and replace with any img. It saves the alt text. Create a div: select all, insert div tag: wrap around selection, wrapper. Make a rule (ID type) –Box: 900 W x 650 H –Margin 18px (1/4”), right & left auto –Border solid, 2px, (by default it is aligned to the center of the page) Reduce some of the text –* tag – universal tag, wild card, first tag. Box: padding 0, Margin 0. Anytime you see a blank box, it defaults to the parent div. * is the grandfather of all divs.. Talks to all of the other tags. Nothing selected + new rule P – paragraph tag for the entire site. (Box) margin Bottom 1.5 em space height of the letter.

4 Separate content into divs 1 st paragraph – select, name: header 2 nd paragraph – select, name: mainConent (camel case) Set the rules: Select the: header tag, make the rule. –Box: H150 – 20, padding 10 all, 900 W – 20 pad Img: Specific for header: remove p, (so now it says #header img ). Float to the left, margin 1.1em right. mainContent, rule –Box W for sitNav- 60 padding (690), H 650 – 150 for the header -60 for padding (440) –Padding: 30 px, -60 from the height., Float to the left even though the sitNav is not there yet. End 1/10/11 –Img tag – parent tag for the entire site –Float: left, margin 1.1 em on the right, which will look like the heading image tag for now 3 rd paragraph – sitNav has not been created yet. Click at the end of main content text, insert div tag “Before tag”,, or we could have chosen After tag, ID; sitNav. It will be between header and mainContent. Now make a rule. –Select: sitNav - Make the rule: Box, W (130), (480), padding 10, float left –Type: about, price, products, service, contact (enter between each) Go back to wrapper, add the color: white. If you have a background image it will cover it. Rearrange the CSS Right panel like the image

5 Float the mainContent image to the right by creating a class tag or custom tag Select the mainContent image. Select the tag, make the rule. Create a rule for the #maincontent img.rightimg The period makes it into a class. Classes are defined, then classes are assigned. Now we are to assign it to something. –(define) Box override the parent tag (the img tag), float to the right, margin to the Left 1.1em. Right 0. 0 is a value –(assign) Select the Class tag: rightimg. Now it moves to the right.

6 (P3) Make aesthetic changes to the div tags mainContent - remove some text to fit in space –Box: top add 10 to padding (40 total), subtract 10 from the height (430). Add 27 from the left, subtract 27 from the width (663) P tag rule for maincontent. Select the tag, make the rule #mainContent p –Line height 1.6em (more space between the paragraph lines) Create a rule specifically for the main content images. –Click 1 st img of maincontent, #mainContent img Border: solid, 2, pink. Right now both images have a pink border –Double click the class tag #mainContent img.rightimg to make a blue border. Change the color to blue. You do not have to put the style or width since it reads the parent tag #mainContent img –H2 inside of maincontnet, name #mainContent hr – Box, margin.6 em. Makes more space between the tags. Check the order of the tags. Links: select Paragraphs (about, price, etc), add unordered list. –Make hyperlinks: add # symbols to each. They behave like a hyperlink. –Select all of the items, create a rule for #sitNav ul: List, none. –Select tag, #sitnav ul li a, type: white, background purple, (apply – it’s in a line) Display: Block, Block category, Line height 30px, padding, left, 12 px, Box: margin: 12 (outside of the box) Hover tag –Select rule #sitenav ul li a:hover (type in from scratch) –Background > green. No other rules because a is the parent tag. An entire page with Rules, floats, div tags, class tags Clean up the CSS styles: move the rules in order of groups. _________________________________________________________________END

7 The Div Tag for Page Divisions Dividing the Page with the Tag The tag is used to establish separate divisions or areas of your page. It is one of the most powerful elements in xhtml, as it is essential for positioning the design of your page using CSS. The id Attribute (the name of the div) The id attribute can be used with any tag element, but to identify and define an area of your page, the tag can be used. Facts about id’s: The value for the id attribute must be used only once on your page. It is a unique identifier. The id value is case-sensitive. “Home" is different from “HOME" and also different from “home" – it is easiest to use all lower case letters. Do not use spaces or any special characters as the id value. You may use letters, digits (1 thru 9), dashes (-), and underscores (_) but you must start the id value with a letter.