Intro to CSS
______
CSS: Cascading Style Sheets
Style = rule for describing how to format a piece of HTML
Style Sheet = a collection of rules that you want to apply

Can Use For:
Fonts
Borders
Background Colors and Images
Margins

Layout
And Much More
Why CSS Styles are important
Flexible layout and design
Quick update of many pages at once
Consistent design from page to page
Relatively quick download times

Types of Styles (“Selectors”)
See
1)Class Style (for individual elements, applied by hand)
- can be used many times on a page
- commonly used for fonts, borders, floating images left or right, etc.
- file begins with period and then word (example: .celeb_names), no spaces.

2) Tag Styles (applies to tags)

- appears every time the tag appears
- commonly used for tags such as headline tag, body tag, paragraph tag, etc.
- file is named by the tag (examples: body, h1, p, etc.)
3) I.D. Styles (used for foundational elements such as layout)
- can only be used once on a page
- commonly used for foundational divs (see “CSS Layout”)
- file begins with # (e.g., #header, #sidebar), no spaces
4) Compound Styles (used to combine styles in a specific div)
- Example: #sidebar h1 a:link means when there’s a headline (h1) with a link in it, and it appears inside the side bar, it will appear with these attributes (whichever attributes you choose)
- begins with # and then a space appears between each indicator.

External Versus Internal Styles (See Diagram, Next Page)
1) External pages

-You attach the CSS rules page to whatever pages you want to affect. This external page is not an HTML page, and the extension is .css. To link a page, open the page and then click the link icon in the styles panel.

2) Internal Rules
-Listed in the <head> tag
-Only applies to that single page, so not terribly useful for web sites w/ more than one page (we don’t generally use internal rules—we use external pages).

Same Style Sheet for All Pages
If you are going to use the same style sheet for all pages in a site, you can keep a style sheet in the root directory or in a folder for styles (example: mystyles.css).

INTERNAL STYLES EXTERNAL STYLES

CSS Intro Tutorial
This tutorial introduces basic styles. For CSS layout, see next tutorial.
______
Preparation
1) Create two new HTML pages that link back and forth to each other and save them to your root directory.

2) Open CSS Panel (Window>CSS) and click the “All” button.
NOTE: Your general preferences in Dreamweaver, by default, will be set to those below. If someone has changed them, you might need to change them back by going to Edit>Preferences:
- CSS Styles (deselect “Open CSS Files When Modified”)
- General (select “Use CSS” instead of HTML)
- Layers (select “Nesting”—so a cell can appear inside another cell)

Create some content:
1) On the home page, type the word “Headline.” insert a photo, and type a paragraph of text right after the photo. Create a link to page 2.
2) One the second page, create a paragraph of text. Create a link to your home page.

1) CLASS STYLES: CREATE
Create a Class Style for Special Type
(Remember class styles only apply to the text or object you hand choose in a page.):
1) On the CSS panel, click the + button to create a new style.
2) Selector Type: (Select “Class”)
3) Selector Name: .redbold
4) Rule Definition: “New Style Sheet File”
5) Click “O.K.”
6) You will now create your new style sheet, where all of your styles now and in the future for this web site will be held. You will only do this once instead of making a new style sheet for every style. Indicate the file name (example: mystyles.css). Save this file to your root directory if you intend to use it for all the pages in your site. After you have clicked “Save,” proceed to next step.
7) Select “Type” and indicate characteristics you want for your main content text (e.g., red, bold).
8) Click “O.K.”

9) When you close, nothing is affected. You have to select the text, then go to properties inspector and select .redbold in the styles.

Create Class Styles for Images

Give your image a border.
1) On the CSS panel, click the + button to create a new style.
2) Selector Type: (Select “Class”)
3) Selector Name: .border
4) Rule Definition: [select your .css sheet]
5) Click “O.K.”
6) Inside the pop-up box, select “Border.” Choose settings you want.
7) Click “O.K.” and apply your border by selecting your photo and going to the properties inspector to choose the .border style you made.
Make your photo float left so that the text flows around it to the right. Note: Only one class style can be applied to an object at a time, so if you want two or more styles to appear on an object, you have to combine them into one. So, we’re going to open the .border style you already created and add more styles to it.
1) Open your .border style by double-clicking on it in the CSS window.
2) In the pop-up box, select “Box.”
3) Float: Left; Margin: Top, Bottom, and right 15. Click “OK.” Notice that the margin setting will give some space between your photo and text on the top, right, and bottom, instead of having text touching your photo when it wraps around.
4) Copy and paste your type to the right of your photo and watch it wrap to the right.
5) Rename your .border style to say .border_floatleft. This new name will show that you have added to this class style.

2) TAG STYLES: CREATE
Create a Tag style for the background color.
1) On the CSS panel, click the + button to create a new style.
2) Selector Type: (Select “Tag”)
3) Selector Name: (Select body)
4) Rule Definition: (make sure your style sheet is selected)
5) Click “O.K.”
6) In the popup window, select “Background,” choose the color you want, and click “O.K.” Notice that the background immediately changes colors (you did not have to select anything by hand). That is because tag styles apply automatically to the tags that appear on the page.

Create Tag style for the p tag (will affect all type after a p tag):
1) On the CSS panel, click the + button to create a new style.
2) Selector Type: (Select “Tag”)
3) Selector Name: (Select p)
4) Rule Definition: (make sure your style sheet is selected)
5) Click “O.K.”
6) Select “Type” and indicate characteristics you want for your main content text.
7) Click “O.K.”
NOTE: Setting the “default” font for your page is usually done either in the body tag or the p tag.
Create Tag Style for h1 tag:
1) Follow the steps above for creating a tag style, and set this one for the h1 tag.
2) Inside the pop-up window, select “Type” and choose the styles you want for your type. Click “O.K.”
3) Notice that nothing has changed yet, because you have not created any h1 tags on your page. To create an h1 tag for your headline, you can either do it by hand inside the HTML, using the “Code” view, OR you can use the “Insert” panel to create the code for you (see next step).
4) To use the “Insert” panel, go to Windows>Insert to open the panel.
5) Highlight the text you want to have the h1 tag.
6) In the Insert panel, select the “Text” menu.
7) Select h1. You will see your highlighted text change style because it now has the h1 tag, and you created a style for that tag.

To Edit a Style
There are several ways to edit a style:
1) We have already shown you that you can go to the CSS panel and double-click the style to open the pop-up window.
2) Another way: Use the Properties section of the CSS Styles panel to edit styles. To find this area of the CSS Styles panel, you will expand the window by clicking and dragging it vertically down.
3) You can open the .css page itself by double clicking on it or selecting it and clicking the “Live Code” button in the upper menu.
Class vs. Tag Styles: How to Choose?

Q: Why don’t we just create an <img> tag style for styles applied to our photos?
A: Because a tag style would assign the same styles to ALL photos. What if you want some photos to float right, others to float left, etc.?

How to Move Internal Styles to An External Style Sheet
Let’s say you accidentally created internal styles that you now want to have as an external style sheet that can be applied to more than one page. Can it be done? Yes, you can simply move your styles to an external sheet.

1) In the CSS styles panel, click the fly-down menu and select “Move CSS Styles.”
2) A dialogue box will pop up where you can identify an existing style sheet or create a new sheet with .css file extension.
3) Click “O.K.”

Link your style sheet to your second page.
Notice that your second page does not have any styles. If you’d like to link that page to the styles you’ve created, take the following step:
In the CSS Panel, select the link icon. In the “File” field, browse to indicate the .css page you want to link to. Click “O.K.” The styles should now appear in your second page.
When you create the home page of your web site, you will actually have an easier way to create other pages. Simply go to File>Save As, to create copies of your home page with new names. Then, you can open those pages and just change the content of the page. All design, styles, etc., will already be intact.

To continue learning about CSS, go to the
“CSS Layout” handout or “CSS Link Styles with Compound Selectors”