Old habits die hard. I started writing HTML code in the mid 90’s. Back then I had a book and a few sites online for reference and that was about it. There were not many great markup editors at the time and much of my work was done by hand. Eventually I moved on to HotMetal. The functionality was very basic but there were a few shortcuts for formatting text.
As editors have evolved I have found it difficult to break my habit of going to the web for code references I cannot remember, even when my feature rich editors provide all the tools. Maybe it’s some kind of trust issue or maybe my mom just did not hug me enough as a child…who knows. Recently have committed myself to learning all the features of the tools I am using. Even if it’s not a feature I would use much, I think they are all worth learning.
In my last post I talked about how Expression Web 3 makes it easy to establish your DocType declarations. One of the other tasks that designers have to do during page setup is to attach or link an external style sheet. It’s a very simple thing to do but I have never committed the code to memory. Now I can perform this task quickly and perfectly every time.
Attaching a style sheet
In design view- drag and drop the file onto your page from the folder list (wow, that was easy)
In code view- Open the page you want to attach the style sheet to and do one of the following
From the menu: Format>CSS Styles>Attach Style Sheet
From the Style Tool Bar: Click the attach style sheet icon.
After performing one of these selection options you will be presented with the Attach Style Sheet dialog box. Browse to the style sheet you want to attach. Notice you can attach your style sheet to multiple pages at a time by selecting either All HTML pages or Selected pages. This is quite handy if you need to attach your CSS to many pages at a time.
Linking vs. Importing CSS
The last thing you need to do is determine if you want to Link or Import your CSS. From a standards perspective there is no real difference between them and each will work equally well. It used to be that using @import was a convenient way of hiding styles from older browsers that could not understand @import (Netscape 3, IE3 and 4). Now, @import is more frequently used to import styles from one style sheet into another.
After selecting your CSS file click OK and Expression Web 3 will insert the required line of code.
Leave a Reply