Utilizing CSS In Freeway

Currently, as of the version used in this tutorial (Freeway 5.3.2), creating CSS styles in Freeway will take some getting used to if you're more versed in a different software. Freeway handles CSS styling in two ways: permanent and temporary styles. Permanent styles are created as rock-solid styles and are bolded in your style list (1). Once created (and optionally applied to an HTML-related item) the style continues to stay in your palette regardless if it's applied to anything or if the HTML-related item gets deleted. A temporary style is created, as its name says temporarily, until the HTML item the style was applied to is deleted and are non-bolded in your style list (2). If this style exists in other HTML items it will not delete itself until all the HTML items with that specific style are deleted. When you create CSS styles ahead of time in Freeway they are automatically created with a permanent status and can then can be changed afterwards by unchecking the box (under the Tag field) to make them temporary (make sure they're applied to an HTML-related item or they might just delete themselves right then and there). If you let Freeway create your styles as your working, by using the Inspector, then Freeway will automatically generate temporary styles for you.

NOTE: It is also important to note that permanent styles never switch to temporary styles, and vice versa, you will have to manually do so.

To create styles in Freeway you'd first want to open up your CSS window by double clicking on the Ay icon in the CSS palette. Then you'll be presented with a window and on the right hand side (at the top) there are two text-fields labelled Tag (1) and Name (2). In HTML terms Tag would be the equivalent of a Tag or ID HTML element and Name would be the equivalent of a Class style. Let's define the two.

A tag or ID identifies a specific element on a page and therefore must be unique on the page. You can only use a specific ID once per document. Currently many browsers don't enforce this rule, but it's a basic rule of HTML/XHTML. If you were to build a CSS layout in Freeway, your layered HTML items would be given a unique Tag or ID used in the Name field in the Inspector at the top. This is an example of an ID and Freeway has each HTML item start with the default name of item. Once more Tag's or ID's are made, Freeway adds a number to the end (example: item1, item2, item3). It is also important to note that a tag or ID must be a single value meaning that you can't apply multiple ID's to a particular element, but you can connect two words together with a dash if necessary (example: home-page). It must still be unique.

A class style marks itself as being part of a group of styles that are structurally the same and they can be used multiple times, so if you wanted to define a class style to text in a navigation menu and you wanted the footer navigation text to match it then you could apply the same class style multiple times. In Freeway you will be creating class styles using the Name field heavily over the Tag field.

Currently Freeway offers the ability to use the + drop down's, or by using the Extended button, to apply Properties to our CSS. A CSS Property is a named style attribute or parameter for a markup element specified in the stylesheet (1). Properties, speaking in actually writing-it-out terms, are always followed by a colon to separate them from their value pair. The Property is then followed by a Value (2) which is what we choose from the drop down's and entry fields that appear after we first select a Property. The complete specification of an individual style includes the Selector (Name)(3), Property (1), and Value (2) and is then called a Rule. The image above shows a complete class style Rule.

You can also enter Properties and Values that aren't part of Freeway by using the Extended button under the Name field. You will then be presented with a smaller window that has two columns: Name and Value. If you click on the New button, you will get an even smaller window that will allow you to enter a Name (which is the same as a Property) and a Value for that Name. This is where an external CSS program could come in handy. My personal pick has always been CSSEdit and I would recommend trying it out in the demo period.

One of the biggest parts about being a successful web designer is remembering the terminology or the lingo. It can be difficult as your knowledge of the web expands and you start building websites using other programming languages and it ends up getting confusing. Here's where CSSEdit can help. What I like to use CSSEdit for is to remember the latest Property names. As CSS develops, more and more properties are being integrated and without a cheat-sheet you would have a tough time keeping up. I start out every project by first understanding what my program is capable of and where it lacks and to be honest Freeway hasn't kept up to date with the latest properties. You are left to use the clunky Extended button and it's good to have a way to first create the style and then copy it into Freeway. Often though the problem with using the Extended button is that Freeway has no idea how to handle it in-program till you view it in an actual browser. So, as a heads up if you added extended properties it probably will not show up in your document view. With that short rant, let's open up CSSEdit from macrabbit.com.

CSSEdit is great because it will write out the Property and Value(s) for you as long as you set a selector Name for your style. Let's dissect a typical CSS rule in CSSEdit. First we've given our style a selector Name of Sample (1) and since this a class style we must start it with a period. If this were a tag or ID element then we'd need to use a # symbol. We'll then wrap our Property and Values inside an opening and closing bracket (2) which would then complete the Rule. Where this comes in handy is for properties not yet integrated into Freeway.

What we can do with these properties is copy them into Freeway using the Extended button. What we'd want to do then is go back into Freeway, create a new CSS rule by clicking on the + in the corner and then giving our style a selector Name of Sample. Next we'll want to click on the Extended button and then click on the New button and enter under the Name field just the Property name. So, in our instance here we'd copy the first Property of border-bottom (copy without the colon). Next we'll copy and paste the Value of our Property, which is 1px solid #000000, into the Value field and then click OK. You'd want to then rinse and repeat till both Property and Value entries are entered. Once we have clicked OK our CSS rule named Sample will have additional attributes that were not available from the list of properties inside the Freeway software and now our Extended button text will be underlined to show that there are extended attributes with this specific style.

CSSEdit is extremely helpful in other ways as well and we've only explored one way in which it can help us adjust to the ever changing web design world. Hopefully in the future Freeway will be able to be easily updated with the latest properties and be able to provide a better all-in-one solution to what many consider Freeway's greatest weakness: CSS. That's it, enjoy!