www. Expression-Web-Tutorial .com

Call 1.866.363.5633

 

view cart

Expression Web 4 Tutorial for Beginners

Step 4:  Set up External Style Sheet

How to Make and Link an External CSS Style Sheet - Beginners Guide

1.  Click File

file

2.  Hover over New

3.  And choose 'Page'

new page

4.  A Dialog box opens, choose CSS from the Middle Column

new pages

css

5.  Click OK- and you will be taken back to the main editing window.

6.  Click the Save icon and Name the Style sheet something like "main.css" or "mainstyles.css".

save  Save icon is in the red square.

 


A Faster Way

how to create an external style sheet

You can use the New Page Icon, as shown above, to create new HTML pages as well as other types of Pages (including CSS pages).


 

Link the Style Sheet to the Web Page

Next, we need to attach or link the style sheet to the HTML web page.  It is via this link that the web browser will retrieve the CSS Styles that we create and store on the External Style Sheet, and in turn, render our Styles as we specifed.

1.  Locate the Manage Styles Panel and Click on Attach Style Sheet

attach style sheet

2.  Click 'Browse'

3.  Navigate to your External Style Sheet, Select it, and Click Ok.

4.  Click Ok again, and Save your work.

 

Writing Your Own External Style Sheet Link

You can certainly go into the code of your html web page and write the markup that links the External Style Sheet to your web page: Locate the section of web page. 

Type the following:  <link href="styles/main.css" rel="stylesheet" type="text/css">

Notice, the above link is made up of a tag and 3 HTML Attributes.

The HTML Tag & Associated Attributes

<link> :  this tag is only used in the <head> section of a web page. 

Most often used to link an External Style Sheet to a web page.

rel attribute:  describes the document that is linked.

href attribute:  points to the location of the external document.  The URL of the doc.

type attribute:  describes the type of data on the linked document. (the MIME type of the linked document)

 type="text/css"  -- tells us the data type is text, more specifically, it's css text.

(type="text/javascript"  -- this is used when referencing a javascript file in the section of web page.  The data is text, more specifically, it's javascript text. )

 

Read more about the 3 Types of CSS.

Step 5:  Set the Style Application Mode to Manual  next