In Internal Style Sheet is when the css styles are included with the html page code. These styles will only apply to one html page.

Transcription

1 You might want to have Expression open, showing your DM22 website from the last assignment. Then go through this tutorial as you create your own External Style Sheet and styles for text formatting. FYI An External Style Sheet is a css file. This.css file is separate from the html files. You should have a css file in your website folder after completing this tutorial. In Internal Style Sheet is when the css styles are included with the html page code. These styles will only apply to one html page. Dreamweaver calls specific formatting in a style sheet a rule. Expression calls it a style. Same thing-different names. You will be defining styles and rules for an External Style Sheet that your html files are linked to.

2 Expression setting up your External Style Sheet This tutorial shows the following: How to set up a new style for specific text formatting. How to save the style in an External style sheet with the.css file type. How to save the external.css file. How to apply the style sheet to another html or htm file.

3 Here is the basic student website in Expression. index.htm is open. This picture shows: Site structure Always open files from here. The Apply Styles window is where you will begin creating the new style on a new External Style Sheet. See if you can locate these parts in your Expression interface.

4 This will be useful eventually. The CSS Properties panel. This is my index.htm webpage open, I just added some text so have something visual to apply a style to. I will use this to create a new style named.headline See if you can locate these parts in your Expression interface.

5 Here is the window to create the new style. I will name the style.headline Be sure you have selected New Style sheet so the software knows you are going to create an external style sheet. Then click Apply at the bottom. See if you can locate this window in your Expression.

6 Here is new external css file, it was named Untitled_1.css by default. See the text style named.headline. This is what a style sheet looks like. I need to save this css file to the root or local website folder. I can rename it too. Go to File>Save As to save this css to the local root folder.

7 Here is the Save As window where I define where the css file will be saved and what it will be named. Be sure it gets saved to the right place your local root website folder. The css file will eventually be used with all the pages in your website and uploaded to your mirrored website on ISWEB.

8 There it is. My external style sheet saved to the local root website folder. Here is the.headline style showing the text formatting I designed and this style is applied to the headline text in my index.htm webpage. To make a new style for the hyperlink text, I can highlight the correct text on the webpage, then click New Style in the Apply Styles panel.

9 Here is the.hyperlink style showing the text formatting I designed and this style is applied to the hyperlink text in my index.htm webpage. I also selected to add this style to Existing style sheet.

10 Everyone should have an external.css file that is applied to all webpages in your website. The style sheet should have these standard styles you have created:.headline.subhead.caption.bodytext.hyperlink Plus any other styles you want to add. You can see I have created two styles. Now I can create the others as defined on the left. Everyone should have these 5 styles minimum.

11 To apply the External CSS Style Sheet to another htm or html file. I opened the Project Proposal webpage from the Files list (always open files from here). I click the Attach Style Sheet in the Apply Styles panel. In the Attach window I browse to find the css file in my local folder. It is that easy. Now I have access to all the styles in my external css.

12 It is that easy. Now I have access to all the styles in my external css. I use these to format text in all my webpages. To make text hyperlink to another web page, select the text and go to Insert>Hyperlink.