Skybound Stylizer

Web Designers Manual

September, 2008

2008 Skybound Software. All Rights reserved.

Table of Contents
TABLE OF CONTENTS ......................................................................................................................... 2 1 INTRODUCTION............................................................................................................................... 1 About This Book ....................................................................................................................................................... 1 2 YOUR FIRST WEB SITE IN STYLIZER ............................................................................................. 2 A Typical Workflow ................................................................................................................................................. 2 Workflow in Stylizer ................................................................................................................................................ 2 Creating a New Web Site ..................................................................................................................................... 2 example1.html ...................................................................................................................................................... 3 3 USING THE GRID ............................................................................................................................. 4 Rules, Declarations, Comments .......................................................................................................................... 4 Navigating the Grid ................................................................................................................................................ 6 Moving Styles ............................................................................................................................................................ 6 Nudge....................................................................................................................................................................... 6 Cut and Paste ........................................................................................................................................................ 6 Disabling Styles ........................................................................................................................................................ 6 !important ................................................................................................................................................................... 7 4 CHOOSING COLORS ........................................................................................................................ 8 Color Picker ................................................................................................................................................................ 8 Eye Dropper ............................................................................................................................................................... 9 Stored Colors ........................................................................................................................................................... 10 Using the Color Grid ......................................................................................................................................... 10 Adjusting Colors in the Color Grid ............................................................................................................... 10 Color Quick Reference ...................................................................................................................................... 11 5 SETTING SIZES ............................................................................................................................... 12 Size Grips................................................................................................................................................................... 12 Sizing with the Keyboard and Mouse Wheel ........................................................................................... 12 Tape Measure .......................................................................................................................................................... 13 Rulers .......................................................................................................................................................................... 14 Lens ............................................................................................................................................................................. 14 6 FINDING STYLES ............................................................................................................................ 15 Using Bullseye to Find Styles ............................................................................................................................ 15 Live Search ................................................................................................................................................................ 16 Advanced Queries .............................................................................................................................................. 17 Navigating the Style Sheet ............................................................................................................................. 17 About Filters............................................................................................................................................................. 17

7 DEFINING STYLES .......................................................................................................................... 18 Making Rules Using the Breadcrumb ............................................................................................................ 18 Duplicating Selectors ........................................................................................................................................... 19 Stakeout .................................................................................................................................................................... 19 How Stakeout Works ........................................................................................................................................ 19 8 SUPPORTING MULTIPLE BROWSERS ......................................................................................... 21 Switching Between Firefox and IE ................................................................................................................... 21 Media Filters ............................................................................................................................................................ 22 Browser Filters ......................................................................................................................................................... 22 9 FILE MANAGEMENT ...................................................................................................................... 24 The Save Dialog.................................................................................................................................................. 25 Saving Locally .......................................................................................................................................................... 25 Saving To FTP .......................................................................................................................................................... 25 The Spaghetti Test................................................................................................................................................. 25 Why "Spaghetti"? ............................................................................................................................................... 25 Viewing and Changing Save Locations ......................................................................................................... 26 10 TEXT EDITOR INTEROPERABILITY ............................................................................................ 27 Output Formatting ................................................................................................................................................ 27 Customization ..................................................................................................................................................... 27 Managing Presets .............................................................................................................................................. 28 Formatting Codes .............................................................................................................................................. 29 Cleanser ..................................................................................................................................................................... 29 Cut, Copy and Paste ............................................................................................................................................. 30 11 IDE FEATURES .............................................................................................................................. 31 Tabbed Workspaces ............................................................................................................................................. 31 Light/Dark Background ....................................................................................................................................... 31 About Box ................................................................................................................................................................. 31 Entering a Product Key ........................................................................................................................................ 31 12 APPENDIX .................................................................................................................................... 32 Using a Proxy Server ............................................................................................................................................. 32 Keyboard Shortcuts .............................................................................................................................................. 33

1 Introduction

1 Introduction

TYLIZER IS PERHAPS THE MOST EXTRAORDINARY CSS EDITOR you will ever encounter. Its uniqueness lies in its simplicity and in its tireless effort to deliver a user experience as rewarding as possible. Stylizer takes bold steps forward by scrapping conventional notions

of file management, text editing, floating tool palettes and manual workflows. You may find it alarming at first, as if Stylizer is reading your mind and doing exactly what you want. But as you learn to depend on it, you will wonder how on earth you ever functioned without it. This program is a culmination of knowledge, experience, usability studies and 24-hour workdays put together by a startup company with a vision of how web sites should be designed. We are interested only in building the most refined CSS editor everdown to the very last pixel, mouse gesture, and keyboard shortcut. Stylizer will be complete when all one requires to design beautiful websites is an imagination.

About This Book

This user manual is designed to get you up and running using Stylizer as quickly as possible, and to be a reference for you. You may read it cover to cover, or simply skip to the sections which interest you most. Stylizer is a fast-growing program, but the more you know about it, the more efficiently you will work, and the more beautiful your designs will be.

2 Your First Web Site in Stylizer

2 Your First Web Site in Stylizer

EFORE YOU START, YOU SHOULD HAVE AN OVERALL PICTURE OF HOW STYLIZER approaches workflow. Stylizer uses a very natural, obvious workflow designed specifically for a CSS editor. If you are accustomed to the typical workflow imposed by text editors,

you may be surprised at Stylizers simplicity and elegance.

A Typical Workflow
If you work like most CSS designers, your current workflow for CSS may be something along these lines. To create a new file, you open your favorite text editor and press New. You type your CSS by hand, formatting it exactly how you like it as you go. When you have typed something that you think may look reasonable, you save the file next to your HTML file. Next, you switch to your HTML source code and add a link tag to associate the CSS file with the HTML. Finally, you switch to your web browser of choice and open the HTML file to see what the CSS looks like. Its incomplete, so you switch back to the CSS code in your text editor, and make more changes. Then, you switch back to your web browser and press Refresh.

Workflow in Stylizer
The first thing you do is add a link tag to your HTML source, specifying the name of a CSS file which doesnt exist (yet) as the href. Next, open Stylizer, and open the HTML file in the Stylizer embedded browser. Stylizer automatically creates a new blank CSS file for you with the name specified earlier. As you begin to add CSS to the style sheet, you will see your styling happening in real time in the embedded browser. You do not need to switch between applications. When you are finished styling, you press Save and Stylizer knows exactly where to put the file. The workflow is the same for a site on a remote web server. By typing the URL into the address bar, Stylizer automatically shows you the CSS files which are styling the page. When you press Save, Stylizer will ask you where the first file goes. However, the location of all other files can almost always be determined automatically. for you without you doing anything. And Stylizer remembers where files are saved between sessions, so when you return to work the next day, Stylizer will open and save your CSS

Creating a New Web Site

For this example, we will use a sample HTML file which has already been created. Please create an HTML file using the example1.html document at the end of this chapter.

2 Your First Web Site in Stylizer

The first step is to run Stylizer and open example1.html. There are 3 ways to open an HTML file in Stylizer: 1. 2. 3. Click file. Type the path to the HTML file into the web browser address bar and press enter. Press CTRL+D to focus the address bar quickly. Drag the file from Windows Explorer and drop it on Stylizer. on the toolbar or press CTRL+O display the open dialog, then choose the

You should now see the example HTML page in the web browser. Its still very plain at this point because we havent added any styles yet. Next, were going to attach a style sheet. Open example1.html in your HTML editor. Add the following line in the <head> section: <link rel="stylesheet" type="text/css" href="example1.css"/> Save your changes to the HTML file. Now, switch back to Stylizer. A new tab has opened to the right of the browser containing an empty file called example1.css. Stylizer saw that you added this tag to your HTML file and has automatically created the new file for you. Note that this file is a temporary file in Stylizer and wont be a file on your hard disk until you save. Almost all file opening is handled like this in Stylizerautomatically. It is rare that you would need to create or open a CSS file directly.

example1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example 1</title> </head> <body> <h1>Stylizer Example</h1> <p>This is an example page from the Stylizer manual.</p> </body> </html>

3 Using the Grid

3 Using the Grid

DDING STYLES TO A CSS FILE IN STYLIZER IS DIFFERENT from the system to which you are likely accustomed. Stylizer tosses away the CSS syntax that you will find in generalpurpose text editors, and instead organizes your styles in a compact, manageable grid.

You will notice that the general structure of the file is the same, but that it is more easily navigated and understood. Organizing in a grid has other advantages, too. In the following chapters, you will see how it is used to filter and reorder the rules as necessary; provide better context-sensitive information and control; provide outstanding undo and redo; and simplify access to common tasks such as browser and media type filters.

Rules, Declarations, Comments

Lets change the font used in the document to 8 point Sans Serif. Heres how the CSS code might look in a text editor: BODY { font-family: sans-serif; font-size: 8pt; } Heres how its done in Stylizer. To create a new rule, click the Add Rule link at the end of the style sheet. A box will appear, into which you can enter the CSS selector specifying the HTML elements you would like to style (NOTE: If Add Rule is already selected, clicking is unnecessary you may simply start typing). Since were styling the entire document, type body and press ENTER. Stylizer will automatically convert body into uppercase (this is configurablesee Chapter 10: Output Formatting), and a new line below the selector will be created for you. Here you will enter a declaration, starting with the property name. Stylizer knows about every CSS property you will ever use, and uses that knowledge to accelerate input by typing characters for you when its sure about what you want. For example, to type font-family you need only type f-. After you have typed the name, press (:) to advance to the property value. How Stylizer Accelerates Typing The name of every CSS property appears in a box below the style sheet. As you type, the property which most closely matches what is typed so far is highlighted. Pressing the dash key (-) will complete the current word, and pressing (:) will insert the entire

3 Using the Grid

highlighted item. In the example above, pressing F moves the selection to the first CSS property which starts with f (font). Next, pressing (-) completes the current word (font) and then appends a dash. Finally, pressing (:) inserts the highlighted property, which is font-family.

Next, well enter the property value sans-serif. Notice that, as with the property name, upon typing s the sans-serif item will highlight in the list below. Simply press semi-colon (;) to insert the value and move to the next declaration. The second property font-size can be entered by typing f-s:8 ENTER. Pressing Enter does not create a new declarationit only confirms the current one. Note how the default unit for the font-size property is pt, or points, so there is no need to type it. The grid should now look something like this:

Since 8 point looks a little too small, lets change the font size to 10 points. Type 10 ENTER. Stylizer can choose a default unit for you when none is specified, but it will also remember the CSS unit youve used in each declaration should it be different from the default. For example, if your font size property is currently set to 1.5em, and you type 2 ENTER, Stylizer will change it to 2em. If you are transitioning from a text editor, you may be accustomed to using comments to disable unneeded styles without actually Stylizer deleting them from the style sheet.

Alternate Ways to Insert Press ENTER insert below, or INSERT to insert above. With the Add Rule or Add Property row is already selected, just start typing Stylizer will insert the new item for you. This one may sound complicated, but it is actually quite simple and effective when it becomes natural. Left click and hold where you would like to insert a new rule. While the left button is down, press the right button.

handles this situation differently, thus comments in Stylizer are used only for their intended purpose: inserting a human-readable comment into the style sheet.

3 Using the Grid

To create a comment, press / and then type your comment text. When you are finished, press ENTER. Comments may be inserted anywhere rules or declarations can be inserted.

Navigating the Grid

Stylizers grid system is somewhere between a spread sheet and a data grid. Of course arrow keys, page up and page down work as you would expect. Unlike a spread sheet, however, portions of the style sheet can be expanded and collapsed so that only rules in which you are interested are open. To collapse a rule, press LEFT and to expand it again, press RIGHT. You can also use the (-) and (+) keys on your numeric keypad to do the same thing. Holding CTRL while you press (-) or (+) will cause all rules in the entire style sheet to be expanded or collapsed. Some CSS properties, like margin, are composite properties. A composite property is a special property that sets the value of several CSS properties at the same time. For example, margin sets margin-top, margin-right, margin-bottom and margin-left. Composite properties like this one can also be expanded and collapsed in the same way as rules. To delete a rule, declaration or comment, just press DELETE. accident, press If you delete something by

on the Style Sheets toolbar, or CTRL+Z. You can also select several rules or

properties at once using the mouse and delete them all at the same time.

Moving Styles
The ordering of declarations in CSS is important; declarations written below override those written above. This can dramatically change the way a page is rendered. In Stylizer, there are basically two ways to move styles.

Nudge
The nudge feature will move a rule, declaration or comment up or down by a single row. To nudge, select the row or rows you would like to move, and press CTRL+UP or CTRL+DOWN. The rows will move in the given direction.

Cut and Paste

In Stylizer, cut and paste works in the same manner as in a spread sheet application. First, select the row or rows you would like to move. Press on the Style Sheets toolbar or the shortcut key, CTRL+X. You will see that the rows you have selected are outlined in marching ants; this is to indicate the rows which will be moved. As with any ordinary application, simply select the location where you would like the rows to be inserted and press or the shortcut key, CTRL+V. on the Style Sheets toolbar

Disabling Styles

3 Using the Grid

Stylizer can turn off, or disable individual declarations or entire rules. When a declaration is disabled, it is completely hidden from the browser as though it does not exist; in practice, it is much the same as commenting out a declaration in a text editor. To disable styles, select the rules or declarations you would like to disable and then press on

the Style Sheets toolbar or the shortcut key, F8. Consecutively disabling and enabling styles can often help you find problems or reveal exactly how a particular set of styles is affecting your page.

!important
In CSS, styles can come from many places: inline style sheets embedded directly in HTML source, style sheets linked to a web page by a link tag, style sheets imported by other style sheets, and inline declarations placed directly on an element with a style attribute. Generally speaking, if two declarations target the same element, the declaration which appears later will override the other. However, CSS provides a mechanism to change this behavior called !important. Any style marked as !important takes precedence over any style appearing after it. You can mark a property as !important by selecting the property and clicking the shortcut key, !. on the Style Sheets toolbar, or

4 Choosing Colors

4 Choosing Colors

TYLIZER PROVIDES A SYSTEM OF CHOOSING AND ADJUSTING COLOR based on several color models and an efficient system of storing and reusing common colors throughout a style sheet. The design of the color picker is based loosely on that used by photo editing

software such as Adobe Photoshop. Since choosing colors for a style sheet is one of the most common things you will do when designing a web site, one of the design goals for Stylizer was to make this tool as convenient and as powerful as possible. In CSS, colors are typically written either as a simple name (for example, black or white) or as a color code, in hexadecimal. In Stylizer, you can choose and adjust your colors visually and the CSS color code will be automatically entered into the style sheet for you. Color can be described in many different ways. A system of describing colors is called a color space, and each color in a color space is described using a set of components. For example, in the RGB color space (with which youre no doubt familiar) each color is described using three components: red, green and blue. This is currently the only color space usable with CSS. However, although CSS only recognizes RGB, Stylizer also understands the hue-saturationbrightness (HSB) color space. HSB is often a more intuitive way to chose colors, and when you choose a color using HSB, Stylizer will automatically translate it into an RGB color for you when it inserts it into the style sheet.

Color Picker
The color picker appears on the screen below the style sheet whenever a CSS property which accepts colors is selected. The color picker is divided into several sections: the adjusted color, the original color, RGB/HSB values, and the sweeps.

4 Choosing Colors

The color box on the right is the original color. This is the color assigned to the property before the adjustment was started. The color box on the left is the adjusted color. This is the new color that will replace the current color when you press ENTER. On the right side of the color picker are the color sweeps. You may click anywhere within these sweeps to change the adjusted color. The tall, vertical box called the primary sweep is onedimensional, and the rectangular box called the secondary sweep is two-dimensional. Each axis on the sweeps controls a single component of color within a single color space. For example, if the primary sweep is adjusting a hue value, the secondary sweep can be used to adjust the saturation and brightness. If the primary sweep is adjusting red, the secondary sweep will adjust green and blue. Below the color boxes are the HSB and RGB components of the adjusted color. These are also text boxes into which you may type any value you like (should you know exactly what you want). Each component is labeled to the left, and you may also click on these labels to set the component used in the primary sweep.

Eye Dropper
The eye dropper can sample a color from any pixel on your screen. Use it to extract a color from a web page, photograph, or a color used in any other application. To begin an eye drop, click your screen. on the color picker. A magnifier

window will appear in the upper left or upper right corner of This window provides an enlarged view of the screen area over which the mouse is positioned. As you move your mouse, Stylizer will read colors from the screen and show a live preview of what the color would look like if it were inserted into the style sheet. While the magnifier window is open, you can also use the arrow keys to move the mouse one pixel at a time. You may switch to any other application or use the computer as you normally would in order to find the color. When you have located the color you want, press SHIFT to close the magnifier window and stop sampling colors. You may also press ESC at any time to cancel the Eye Dropper and return the color property to its original value. Note for Windows Vista Users In the Windows Vista security model, an application may be run either as an Administrator or as a Standard User. Most applications, including Stylizer, run as a

4 Choosing Colors

Standard User by default. The limited permissions of the Standard User account prevent it from interacting with other applications running as Administrator. An unfortunate side effect of this is that Stylizer is unable to know when you press SHIFT or ESCAPE if the active application is running as Administrator. To work around this, make sure Stylizer or another application running as a Standard User is active when you press the shortcut key.

Stored Colors
Colors are often reused throughout a style sheet. Since CSS provides no built-in mechanism for reusing a color, using the same color in more than one style would require duplicating the color code through (usually) copy and paste. Stylizer overcomes this limitation with its convenient system of storing, choosing and reusing common colors throughout a style sheet. Stylizer stores your reusable colors in a 10x10 grid which acts as somewhat of a palette. Inserting a stored color back into your style sheet requires only a single click, and colors in the grid may be adjusted, rearranged or deleted.

Using the Color Grid

Whenever you have a color value selected in the style sheet, you can store it in the color grid by pressing in the Color Picker or the shortcut key, F6. When you store a color in this way, it is automatically copied into the first available cell in the grid, and the color value in the style sheet will be set to @xy where x and y represent the x and y coordinate of the color in the grid. Clicking on a color on the color grid will insert it into another color property in the style sheet. You can also type the grid coordinates directly into the style sheet to insert the color. Colors in the color grid may be rearranged freely. To begin rearranging colors, hold the SHIFT key and click anywhere on the grid. The grid will now have the input focus. You may navigate the grid using the arrow keys, or by clicking wherever you want. Select cells in the same way you would for the style sheet: click and hold to select multiple colors or hold shift when using the arrow keys to grow or shrink the selection. Hold CTRL when you press up, down, left or right to move colors to different places in the grid. When you do this, the style sheet will automatically be updated with the new grid coordinates of the color. You can also hold CTRL and drag colors using the mouse.

Adjusting Colors in the Color Grid

Clicking on a color in the color grid will insert it into the style sheet. However, if you hold shift when you click on the color grid, it will receive the input focus. Once the Color Grid has the input focus, the color sweeps and color values can be used to adjust the stored color. Adjusting a stored color causes the style sheet to be automatically updated in all places where the stored

10

4 Choosing Colors

color is used. This can be a real time saver. You can delete a color by pressing Delete (however, you cant delete a stored color thats in use).

Color Quick Reference

Desired Action Adjust a Color Store a Color Insert a Stored Color Adjust a Stored Color Rearrange Colors in the Grid Steps Select a color property value; then click the new color on the color sweep. Select a color property value; click the Store This Color button or press F6. Select a color property value; click on the stored color. Hold shift and click on the stored color in the Color Grid; click the new color on the color sweep. Hold CTRL to drag the color to a new location.

11

5 Setting Sizes

5 Setting Sizes

IKE CHOOSING COLORS, SETTING SIZES IS A TASK BEST DONE VISUALLY. Stylizer provides several methods of measuring and adjusting dimensions, on-screen rulers to help ensure that all elements in your layout line up, and a lens to magnify elements too miniature for

the naked eye. CSS supports several fixed units of measurement, such as pixels and inches, as well as various relative units of measurement, such as percent and em-height. Though Stylizer supports all of these units, its on-screen measurement tools work exclusively in pixels.

Size Grips
Size grips can be used to adjust numeric values in the style sheet using the mouse. A size grip will always appear on the right side of a CSS property value when the selected property accepts dimension or length values. To use a size grip, left-click and hold on the grip, then move the mouse. The pointer will disappear while dragging, and reappear again when you release the mouse button.

If the selected property is one-dimensional (for example, width or height) moving the mouse up or down will increase or decrease the value. If the selected property is two-dimensional (for example, background-position) moving the mouse up or down will adjust the Y value whereas moving the mouse left or right will adjust the X value. background image will simply move along with your mouse. Note for Virtual Machine Users Virtual Machines (such as VMWare, Virtual PC and Virtual Box) use a feature called host mouse integration to allow the mouse to be moved freely between host and virtual machine windows. Unfortunately, the size grips in Stylizer do not function properly when this feature is enabled. problem. Turning this feature off will correct the In practice, this means that the

Sizing with the Keyboard and Mouse Wheel

To use a size grip without moving the mouse, hold the CTRL key and spin the mouse wheel. Spinning down will increase the selected value; spinning up will decrease it. If the selected property is two-dimensional, holding CTRL will adjust the vertical component and holding ALT will adjust the horizontal component. You may also hold both modifiers simultaneously to adjust both the horizontal and vertical components at the same time.

12

5 Setting Sizes

The same effect may be achieved without using the mouse wheel by pressing [ or ] while holding CTRL and/or ALT. If more than one property is selected when the keyboard or mouse wheel is used in this way, the behavior of the CTRL and ALT modifiers is a little different. Holding CTRL will adjust the vertical properties and holding ALT will adjust the horizontal properties. For example, if you have selected both height and width, holding CTRL will cause height to be adjusted and holding ALT will cause width to be adjusted. Or, if you have expanded a margin property and selected all four children, margin-top, margin-right, margin-bottom and margin-left, CTRL may be used to adjust the top and bottom while ALT may be used to adjust the right and left.

Tape Measure
Often there are elements on the screen whose dimensions you would like to use in a style sheet. In particular, designers who create their layout in a graphics editing program first before translating it to the web need to do quite a bit of measuring to ensure the web version matches their original design. For these reasons, Stylizer includes a virtual Tape Measure which can be used to measure the size of anything on the screen. As with Size Grips, the Tape Measure is usable for any CSS property which accepts dimension or length values. To begin, press the Tape Measure button below the style sheet. The magnifier window will appear as well as a horizontal or vertical red line. This line indicates the starting line from which your measurement will begin. Move the mouse to the top, left, bottom or right edge of the object you wish to measure and press SHIFT. Next, move the mouse to the opposite edge. When you are finished, press SHIFT again to have the dimension inserted into your style sheet. You can also press ESCAPE at any time to cancel. As with the Eye Dropper, when the magnifier window is open, you may use the arrow keys to move the mouse one pixel in any direction.

13

5 Setting Sizes

Rulers
Web page rulers are a quick and easy way to measure the dimensions of an element on the page, measure the distance between two elements, or to ensure several elements line up. Stylizer provides both vertical and horizontal pixel rulers. When the mouse is positioned over a ruler, two guidelines are drawn over the page; one from at 0-point of the ruler, and one at the mouse position. A tooltip will also appear in the upper-left or upper-right corner of the browser, on which is written the distance between the two guidelines. You can move the 0-point by clicking on the ruler with the left mouse button. Generally, youll set the 0-point to the left or top edge of the area you wish to measure. Once the 0-point is positioned, find the opposite edge of the element by moving the mouse over the ruler. Youll see the width or height of the measured area in the tooltip. You can also right-click the ruler to lock the guide lines in place; left-clicking again on the ruler will hide them.

Lens
When activated, the lens follows the mouse and magnifies the area of the web page beneath it. The lens reveals alignment errors and color inaccuracies which may be undetectable at normal size. Activate the Lens by clicking on the toolbar, or

pressing F3. Once the lens is activated, it will follow the mouse pointer over the browser. It does not obstruct the mouse; you may click the mouse and navigate freely as though the lens were not even there. Pressing F3 a This second time will cause the lens to lock in place.

mode is most useful when you would like to use the ruler at the same time as the lens, or when you would like to keep an area magnified while making adjustments to the style sheet. Pressing F3 a third time will hide the lens.

14

6 Finding Styles

6 Finding Styles

SS STYLES CONSTITUTING THE APPEARANCE OF AN HTML ELEMENT can appear in numerous places. One CSS rule may style several elements, and several rules may style the same element. Using a mixture of class names, IDs, element names, and a variety of

syntax features, rules can be constructed to style HTML with an exacting degree of precision. Done with care, dividing style information between individual rules is likely to improve manageability, and designers frequently use this technique to advantage. Flexibility like this, however, comes with cost. Because the various styles affecting an element can appear virtually anywhere, they can be difficult to locate without a full knowledge of the internal workings of the web site. And when inheritancethe process by which child elements receive certain styles from their parent elemententers the equation, it is plain to see how, unless you are a computer, determining which styles affect an element can become quite difficult. Because styles can appear in so many different places, the CSS specification defines a formula, called specificity, used to determine their importance. The order of rules in a style sheet is significant, as is the order in which style sheets are linked to a document. The quantity of class names, IDs and element names appearing in a selector is also important. Unfortunately, many style-related bugs are caused by confusion over specificity; although it is trivial to calculate the specificity of a single rule, determining which rule of many has the highest specificity can be tedious. Stylizer is capable of filtering your view of a style sheet so that only specific, relevant rules are displayed. It can also automatically reorder the rules according to specificity. In this chapter, you will learn how to use Stylizer to quickly find applicable styles.

Using Bullseye to Find Styles

Bullseye is a multi-purpose tool which filters style sheets according to and provides information about HTML elements visible on a web page. Use Bullseye when you can see in the web browser the HTML element you would like to style, but you are unsure of how it is already being styled by existing rules. Begin Bullseye by clicking on the Web Browser toolbar, or by pressing SPACE.

Once started, Bullseye will actively highlight HTML elements in the web browser as you point to them. Clicking on an element will display all rules affecting it in the active style sheet, ordered by specificity. Rules at the bottom are the most specific and override rules above, and styles Modify darkened styles with care: overridden within the same style sheet are darkened.

15

6 Finding Styles

although they cannot change the style of the selected element, they may affect the styling of other elements for which the style is not overridden. If multiple style sheets are linked to the same page, the Bullseye filter will stay active when switching between them; this facilitates searching for styles across multiple files. Bullseye does not ever combine rules from separate style sheets into one unified list. Pressing ESCAPE or clicking the bar at the top of the style sheet will remove the filter and restore the original order of rules.

Live Search
As CSS syntax is quite simple, searches within a style sheet tend to be straightforward. Most searches are for class names or IDs or properties of a certain name or value. Stylizer exploits this to streamline the search experience. It replaces common search options, such as regular expressions and case matching, with an in-place query syntax designed to provide relevant results from a minimum number of keystrokes. Start Live Search by clicking on the Style Sheet toolbar, or by pressing CTRL+F. A search query is composed of one or more terms, each separated by a space. As you type into the search box, Stylizer searches for and displays rules which match every term. The last term in the query matches any word that begins with it. All other terms in the query match only full words. The last term can also be made to match only full words by adding a space to the end of the query. For example, consider the following queries when performed on the given set of CSS selectors: Search Query .bar Match Match Match Match Match Match Match Match Match Match .barSPACE .bar .drinks .bar .drinksSPACE

CSS Selector .barTender .bar .bar .drinksFree .bar .drinks

16

6 Finding Styles

In order to improve search performance and increase the relevance of results, single-letter terms always match full words regardless of their position in the query. For example, searching for A will match rules containing A elements, but not rules containing only ABBR elements. Like Bullseye, Live Search works as a filter for rules. Each rule matching all search terms is included in the results. A property not containing any search terms is darkened. A rule wherein the only match is in the selector list, thus having all its properties darkened, is collapsed by default. Unlike Bullseye, the rules in this list are ordered sequentially according to their location in the style sheet.

Advanced Queries
Words between dashes are matched as though they were separate words. Thus, list-styletype would be matched by both style and list style. Several characters with special meaning also restrict terms to specific places in the style sheet: ; (semi-colon) represents the boundary between properties : (colon) represents the boundary between property name and value You may recognize these operators as CSS syntax; indeed, they are. Here are some examples of how they might be used: Search Query ;right -right Match Match Match Match

CSS Style right: 5px; margin-right: 10px; text-align: right;

right Match Match Match

right: Match Match

:right

right;

Navigating the Style Sheet

Live Search can also be used as a way to quickly jump to another location in the style sheet. Upon exiting a filter, rules are displayed and may be reordered, yet the selected row remains unchanged. To jump, for example, to the first rule which contains an LI element, press CTRL+F, then type LI, and then press ESCAPE.

About Filters
When a style sheet is filteredeither by Bullseye or Live Searchnew rules cannot be added and the order of rules cannot be changed. And although rules can be deleted, if a delete operation is undone when a filter is active, it will be automatically cancelled. There are no restrictions on propertiesthey may be added, deleted or reordered regardless of the active filter.

17

7 Defining Styles

7 Defining Styles

VERY CSS RULE BEGINS WITH A SET OF SELECTORS WHICH DETERMINE THE HTML elements it styles. Because a selector is essentially a pattern used to match one or more elements in a document, writing a selector correctly can be difficult without either an

intimate knowledge of the document structure or a tool to inspect the document structure while designing. Most selectors contain only tag names, classes and IDs, and Stylizer provides simple tools to facilitate writing selectors falling under this common case. Stylizer also includes Stakeout, which actively identifies all elements styled by a rule.

Making Rules Using the Breadcrumb

When Bullseye is activated, pointing to an area on the web page will highlight the element at the pointer. elements leading up to the highlighted element. remains onscreen even after Bullseye is deactivated. Besides revealing document structure, the Breadcrumb can also be used to quickly write CSS selectors. Each tag, class and ID in the Breadcrumb is a clickable button; selectors are written by clicking on each chosen tag, class and ID, and then clicking Make Rule. The new rule is inserted in the style sheet after the selected rule. If a Bullseye or Live Search filter is in use, it is cancelled before the new rule is inserted. A typical use of the Breadcrumb as a selector builder is: 1. Point to the web page element you would like to style. 2. Press SPACE to activate Bullseye. 3. Ensure that the correct element is highlighted. 4. Press SPACE again to deactivate Bullseye. 5. Within the Breadcrumb, click on each tag, class and ID you would like to use in the new rule. 6. Press Make Rule. The The Breadcrumb below the web browser reveals the ancestry of Breadcrumb is displayed when Bullseye is activated, and Why "Breadcrumb"? In the fairytale Hansel and Gretel, two children leave a trail of bread crumbs as a means of finding their way home from the middle of the woods. Perhaps this story is the origin of term "breadcrumb", as it is used in computing, to describe a navigation bar which tracks steps through a hierarchy of nodes.

18

7 Defining Styles

Duplicating Selectors
Rules targeting contiguous elements are often grouped together in a style sheet. For example, rules for menu bars likely precede rules for menu items they contain. Stylizer offers an efficient way to create these rules. Recall that INSERT and ENTER create new rules above and below the selected rule; similarly, CTRL+INSERT and CTRL+ENTER create rules by duplicating the selector list of the selected rule. For example, consider the following HTML fragment: <div class="page"> <div class="menu"> <a href="home.html">Home</a> <a href="contact.html">Contact</a> </div> </div> Assume a rule for .page .menu already exists and that it is selected. To create a new rule which styles the A elements within .menu, press CTRL+ENTER, A, ENTER. The rule .page .menu A will be inserted below. Or, to create a new rule which styles .page, press CTRL+INSERT, CTRL+BACKSPACE+BACKSPACE, ENTER. The new rule .page will be inserted above.

Stakeout
As selectors become more complex, it is increasingly difficult to visualize the HTML elements which they affect. Stakeout by clicking Stakeout reveals these elements by surrounding them in boxes. on the Web Browser toolbar, or by pressing the shortcut key, F9. Enable

Using Stakeout is effortless; once enabled, elements affected by whichever rule is currently selected will be outlined. And when first writing or editing a rule, outline boxes will be updated continually as you type. This reduces user error by providing immediate feedback about the selector before it is confirmed.

How Stakeout Works

Stakeout takes advantage of the uncommonly used CSS outline property to draw its outline boxes. outline is a good fit for Stakeout becausein contrast to borderit does not alter page layout. If a real CSS outline property is used in the current rule, disable Stakeout temporarily to expose the real CSS outline. Unfortunately, outline is unsupported by Internet Explorer 7 and earlier. disabled when using one of these browsers. Stakeout will be

19

7 Defining Styles

It is possible that the Stakeout outline box could appear in an incorrect location or not appear at all. This is usually caused by unconventional use of CSS. Fortunately, the CSS border property is usually not affected by unconventional CSS. Instead of relying on Stakeout in this situation, press CTRL+F9 instead to quickly add or remove a 1-pixel solid red border property from the current rule.

20

8 Supporting Multiple Browsers

8 Supporting Multiple Browsers

ECAUSE INTERNET EXPLORER WAS DEVELOPED BEFORE WEB STANDARDS had been finalized, its rendering behavior often differs from that of more recently developed browsers such as Apple Safari, Opera, and Mozilla Firefox, all of which use more modern

rendering engines. Rendering differences do exist between these modern browsers, though they are uncommon and can almost always be avoided. It is unavoidable, however, that designers will face situations where, in order to deliver a unified experience to all visitors regardless of their browser, special CSS needs to be served to Internet Explorerespecially version 6. There are two generally accepted methods of achieving this. The first method requires using separate style sheets in conjunction with Internet Explorers Conditional Comments feature, which can be used to direct different CSS files to different versions of Internet Explorer. Unfortunately, this creates maintenance issues because CSS information which should logically be grouped together must be dispersed across multiple files. The second method is to exploit the way Internet Explorer parses CSS, so that certain versions of the browser ignore specific parts of the style sheet. This method, however, has its own set of problems: it creates clutter in the style sheet, can cause the style sheet not to validate, and requires in-depth knowledge of web browser technology to ensure compatibility with future browser versions. Fortunately, grid-based editing overcomes all these problems, making this second method the preferred way of supporting multiple browsers in Stylizer. Stylizer uses Tags to provide one-click access to the most common browser filters a designer will need, plus a unique approach to target media types. It also offers effortless switching between the two most widely used Windows browsers: Firefox and Internet Explorer. In this chapter, you will learn how to test and debug your CSS across platforms, browsers and settings.

Switching Between Firefox and IE

To toggle the embedded browser between Firefox and Internet Explorer, click into the new browser. Because each browser has its own separate browsing history, cookie storage and state, these settings are not maintained between switches. For example, if you are logged in to a website, you will need to log in again after you switch browsers. or on the Web Browser toolbar or press the shortcut key, CTRL+F12. The current page will be reloaded

21

8 Supporting Multiple Browsers

Media Filters
CSS allows a designer to provide separate styles for different target media types. For example, a designer may provide a master style sheet, plus different style sheets for print, screen and handheld. Satellite style sheets targeting a specific media type rarely restyle the entire document; instead, they override only specific styles defined in the master style sheet to correct the pages appearance. For example, a page with a dark background and light-colored text might want to invert this color scheme when the page is printed. Essentially, there are 3 ways to specify a target media type: 1. 2. 3. By including a media attribute on the link tag which references style sheet; By specifying a media type after the URL of an @import directive; By creating a media block within the style sheet.

The first two define the media type for an entire style sheet, while the third can be used for one or more individual rules. Stylizer takes the concept one step further by allowing a designer to Tag an individual declaration with a target media type. Of course, CSS does not support this directly: behind the scenes, Stylizer places Tagged declarations in another rule of a separate media block. This all happens transparentlywhen using Stylizer, it is as if CSS had already provided this additional functionality. To Tag a declaration with a target media type, click declaration may only have a single target media type. on the Style Sheets toolbar. An icon will

appear on the right side of the property value grid cell indicating the target media type. Each

Browser Filters
To show or hide individual declarations under certain versions of Internet Explorer, put a Browser Filter Tag on a declaration in the same way as you would put a Media Filter Tag: Sheets toolbar. indicating the kind of Browser Filter applied. Browser Filters work by encoding the property name in a special way so that different versions of Internet Explorer interpret it differently. These encodings are well-documented online: on the Style As with Media Filters, when a Browser Filter is used, an icon will appear

Filter Only IE 7 Or Less

Encoded Property #margin: 0;

22

8 Supporting Multiple Browsers

Only IE 6 Or Less Hide In IE 6 Hide In IE 5.5 Or Less Hide In IE 5 Or Less

_margin: 0; margin /**/: 0; ma\rgin: 0; margin/* */: 0;

23

9 File Management

9 File Management

LTHOUGH SEPARATION OF CONTENT AND DESIGN IS A TOPIC MUCH STRESSED throughout the industry, it is of absolute necessity that we see a web page in concert with its styles, as CSS is a thing we mustnt write blindly.

Like a brush, its beauty is imperceptible by the eye if not for a canvas. Except perhaps, for one who pens a novel from memory, or composes a sonata in silence; though many fail to attain the creative likes of Chesterton or Beethoven, we can improve our chances considerably when we can see what we're doing. Because a web page is so necessary, and because it is the web page which references the style sheet, and not the opposite, it is quite natural and convenient to begin by opening the web page first. The web, however, is not a writeable medium; therefore saving must be done by another means. For this reason, Stylizer tracks two paths for each style sheet: one from which it was loaded, and one to which it will save. Even though the file still exists only in one physical location, using separate paths allows for a different protocol to be used when loading and saving. In practice, there are two likely scenarios: 1. 2. A local HTML file is loaded in the web browser, and local CSS files referenced by the HTML area loaded and saved locally; A remote URL is opened in the web browser, and CSS files are saved to an FTP site, network share, or local file (if it is a local web server). In the first scenario, the location of the CSS file is known, and it is saved directly to the file system. In the second scenario, Stylizer prompts for a save path the first time the file is saved. After you have chosen a path, Stylizer uses a "Spaghetti Test" (outlined below) to verify that the load and save paths point to the same location. Finally, if the file is successfully saved, this loadto-save path mapping is saved in your local Stylizer configuration file. Once the mapping between a single load and save path is known, Stylizer can guess with high accuracy the location of other style sheets on the same web site. This may not work if you are using an unconventional virtual directory setup, or if you are sourcing CSS file from another server. Of course, Stylizer verifies the guessed save location before it saves; should the location not verify, you will be prompted to enter the correct path.

24

9 File Management

The Save Dialog

The Save to drop-down at the top of the window determines whether the file will be saved to the local file system or to an FTP server.

Saving Locally
Below the Save to drop-down, enter the path to the folder where the file will be saved, or choose a folder using the tree below. The file name is entered separately in the File Name field below. If this file is linked to a web page, the file name field will be read-only; to enable this field, press Change and read the warning before proceeding.

Saving To FTP
When you choose FTP Site in the Save To drop-down, text boxes appear below to enter the connection information: FTP address, port number, login and password. Upon pressing TAB from the password dialog, if all fields have been filled, Stylizer automatically attempts to make a connection to the FTP server. In Folder, type the path to the folder on the FTP site where the file should be saved, or use the tree below to navigate. When you have chosen the desired location, press Save to have Stylizer will verify the location of the file and complete the save. Passwords are encrypted using encryption features built in to Windows; the encryption key is based on the login information for the currently logged on Windows user. password is saved in Stylizer's configuration file. The encrypted

The Spaghetti Test

Stylizer uses this simple test to verify that the FTP server or file system location where a file is being saved points to the same physical location from which the file was originally loaded on the web. First, an empty file with a random file name is saved in the chosen save folder. Next, the file is attempted to be downloaded from the web by combining the path of the original CSS file on the web with the random file name. If the file can be downloaded, the path is verified.

Why "Spaghetti"?
When Paul first proposed this techniqueuploading a file to one place, and then downloading from a completely different place to check whether that file existshe likened it to the practice of inserting spaghetti up your nostril and feeding it out through your mouth. In both procedures, something is inserted into one side, with a fairly good chance, though no guarantee, that it might come out the other.

25

9 File Management

And so this metaphor eventually came to be understood around the office as nomenclature for Stylizer's verification system.

Viewing and Changing Save Locations

The button on the Style Sheet toolbar displays the File Properties window, containing information about the current style sheet: the location from where the file was loaded, the location where the file is saved (if any), as well as the size of the file and the number of rules. If you attempt to save a CSS file after an FTP password has changed or the folder structure containing the CSS file has been modified, the Spaghetti Test will fail and Stylizer will display the save dialog. However, in the unlikely event that you should need to manually change the location where a file is saved, press the Change button in the File Properties window to reopen the Save Dialog at any time.

26

10 Text Editor Interoperability

10 Text Editor Interoperability

S POWERFUL AS GRID-BASED CSS EDITING IS, SITUATIONS ARISE WHERE TEXT-BASED notation is appropriate. It is convenient for information exchange mediums such as email and forums, and essential for mediums such as specifications and books. Stylizer

recognizes the important role played by text-based CSS, and provides features to ease the transition between systems. Some companies have policies implemented to ensure CSS code written within the organization is formatted in a certain way. Designers working under these policies can use Output Formatting options to specify exactly how a CSS file will be formatted when saved by Stylizer, including casing, spacing, and line breaks. Stylizer saves Output Formatting options separately for each file; this is useful to designers who work for multiple companies, each with different formatting requirements. The nature of grid-based editing makes it impossible to display CSS containing structural errors. CSS files created in Stylizer will never contain structural errors, but files created in text editors often do. For this reason, Stylizer includes Cleanser, a tool which identifies errors in CSS and provides a user interface to make corrections.

Output Formatting
CSS can be formatted in more ways than there are CSS designers, and when working in a team, consistent and predictable formatting is critical. To specify formatting options for a CSS file, open the Output Formatting window by first clicking Formatting. Stylizer includes two standard presets: Stylizer Default, the default formatting scheme applied when no other has been specified; and Compressed, which eliminates all excess whitespace from the file, thereby reducing download size and improving browser efficiency. on the Style Sheet toolbar, then Output

Customization
Once you have opened the Output Formatting window, specify formatting options by changing settings in the Selector List and Properties group boxes. A preview of your format is displayed in the preview box below. Stylizer can customize the following settings:

27

10 Text Editor Interoperability

HTML Element Case: Specifies whether HTML tag names are written upper or lower case Maximum Line Length: Specifies the maximum number of characters in a single line of a CSS selector list. Space between Selectors: Inserts a single space between each CSS selector. Properties: These drop-down lists specify the kind and amount of space between each element in the property list. Each drop-down is positioned on the screen in the same physical place into which it inserts space in the style sheet.

Managing Presets
If a particular style of Output Formatting will only be used for a single file, it is unnecessary to save it as a preset. The formatting options will be saved in the CSS file itself. However, if you intend to use the formatting options repeatedly, they may be saved as a preset for easy access.

To save a preset, click

next to the preset drop-down. You will be asked to provide a name

for the preset. To save overtop an existing preset, click the drop-down button in the Preset Name field and choose the name of an existing preset to overwrite. Press OK to save.

28

10 Text Editor Interoperability

To delete a preset, press

When you create a new file, or save a file for the first time, Stylizer uses the formatting options specified by the Default Preset. You may change the Default Preset to the current preset by pressing Default. In the Preset drop-down list, the default preset is displayed in bold.

Formatting Codes
A Formatting Code encapsulates a complete set of formatting options. Composed of up to 11 hexadecimal digits, one of these codes is written to every CSS file saved by Stylizer so that if another designer opens the same file, the output format will be known and maintained when the file is saved again. These codes can also be shared between developers and entered manually. The Formatting Code is displayed in the upper right corner of the Output Formatting window.

Cleanser
The web is rife with non-validating CSS. Due in part to the forgiving nature of web browsers, which ignore CSS errors as per the W3C specification, and in part to poor error detection capabilities of many text editors, non-validating CSS often slips under the radar. Style sheets containing errors, however, cannot be opened in Stylizer. Think of Stylizer as a kind of clean room for CSS. Cleanser is a part of the CSS parsing engine in Stylizer. It points out errors and warnings in the style sheet and provides a user interface to fix those errors. All CSS must pass through Cleanser before being admitted into the grid.

Upon opening a style sheet containing errors, or attempting to paste CSS code which contains errors, Cleanser displays the incorrect CSS and a list of non-validating lines to be corrected. There are two categories of errors: critical and warning.

29

10 Text Editor Interoperability

A critical error, indicated by a red circle with a white exclamation point, is a structural error which must be fixed; a style sheet with a "critical" error cannot be opened. An example of a critical error is a misplaced {. A warning, indicated by a yellow sign with a black exclamation point, is a validation error, which does not strictly need to be fixed before the style sheet is opened. Some examples of warnings are unknown HTML tag names, unknown CSS properties, and invalid color codes.

To navigate between errors, click each item in the error list one-by-one. Upon clicking, the line containing the error will be selected in the code window above. When all errors have been corrected, press Try Again. Cleanser will then re-check the style sheet to ensure that it validates with your corrections applied. Should errors still remain, Cleanser will be displayed again. If you do not wish to fix all warnings, press Continue to ignore them an continue loading the style sheet. Ignoring certain warnings will cause the style sheet to be modified: If an invalid selector is ignored, the entire selector list will be become a comment and the selector list for the rule will be replaced with #INVALID-RULE. If an unknown CSS property name is ignored, the entire property will become a comment. If an unrecognized property value is ignored, it will appear in the grid in orange. If you change the value of the property, the new value must validate. Once a property has been validated, it cannot be changed back to its original, non-validating value.

Cut, Copy and Paste

The Cut and Copy features in Stylizer also copy the selection to the clipboard in text format. Once copied, the CSS text may be pasted into a traditional text editor. The reverse also works. If CSS text copied from another source (such as a text editor, blog post or help file) is on the clipboard, you may use Paste to insert it into Stylizer. Should the CSS on the clipboard contain errors, Cleanser will appear and provide an opportunity to make corrections before it is inserted.

30

11 IDE Features

11 IDE Features
This chapter explains general features of the Stylizer application which do not relate specifically to CSS.

Tabbed Workspaces
Stylizer supports tabbed workspaces. Each workspace has its own separate web browser and linked style sheets. To open a new tab, press at the top of the Stylizer window beside the diamond, or press the shortcut key, CTRL+T. Note that a style sheet may only be open in one tab at a time; if the same website is opened in more than one tab, the style sheets will appear only in the first tab.

Light/Dark Background
Some users may find the style sheet easier to read with a white background. To switch between color schemes, right-click on the style sheet and choose "Light Background", or press the shortcut key ALT+F12.

About Box
The About Box displays information about the current version of Stylizer, license information in your product key, and provides a button to open the Skybound Software web site. Open the About Box by clicking the diamond, then "About Stylizer", or using the shortcut key F1.

Entering a Product Key

To enter a product key in Stylizer, simply copy it to the clipboard. Stylizer will recognize that you have entered a valid product key and accept it automatically. To enter the key manually, or to change your product key, click Change Product Key in the About Box.

31

12 Appendix

12 Appendix
Using a Proxy Server
The embedded Internet Explorer browser uses the same settings as your standalone Internet Explorer browser, so it shouldnt require any additional configuration. The embedded Firefox browser can be configured using Firefoxs about:config page. Heres how: 1. 2. 3. 4. 5. 6. 7. Make sure the current web browser is Firefox. Navigate to about:config. Click the Ill be careful, I promise button (if you promise to be careful). Type proxy into the text box at the top. Double click on network.proxy.type and enter the number 1. Double click on network.proxy.http and enter the name or IP address of your proxy server. Double click on network.proxy.http_port and enter the port number of your proxy server. Since Stylizer downloads style sheets independently from the browser, if your proxy server requires a password, you will be asked to enter the password a second time to download them.

32

12 Appendix

Keyboard Shortcuts
Shortcut CTRL+Up/Down SHIFT+Up/Down SHIFT+Left/Right Right/+ Left/CTRL+(+/-) Enter Insert CTRL+Enter CTRL+Insert Delete / { : ; } ! F2 Enter Escape Tab ALT+F12 CTRL+F9 CTRL+F12 CTRL+T CTRL+D CTRL+N CTRL+O CTRL+S CTRL+Z/Y/X/C/V CTRL+F F3 F5 F6 F7 F8 F9 When Not editing Not editing Not editing Not Editing Not Editing Not Editing Not editing Not editing Not editing Not editing Not editing Not editing Editing a selector list Editing a property name Editing a property value Editing a property value A property is selected Not editing Editing Editing Editing Action Nudge selection up/down Grow selection up/down Grow selection right/left Expand current row Collapse current row Expand/Collapse all rules Insert new rule or property below Insert new rule or property above Insert rule with duplicate selector list below Insert rule with duplicate selector list above Delete the current row Insert comment Insert first property Move to property value Insert new property below Insert new rule below Toggle !important Begin editing Confirm edit Cancel edit Move to next editable cell Toggle light/dark background Add/Remove 1 pixel red border Switch web browser Open New Tab Focus address bar Create new unlinked CSS file Open local unlinked CSS file Save Undo/Redo/Cut/Copy/Paste Find Show/lock/hide lens Refresh web browser Store color Tape measure Disable/Enable CSS Turn Stakeout On/Off

33