Skybound Stylizer

Web Designer’s 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

or simply skip to the sections which interest you most. Stylizer will be complete when all one requires to design beautiful websites is an imagination. But as you learn to depend on it. 1 . You may read it cover to cover. This program is a culmination of knowledge. the more efficiently you will work. and to be a reference for you. Stylizer takes bold steps forward by scrapping conventional notions of file management.1 Introduction 1 Introduction S TYLIZER IS PERHAPS THE MOST EXTRAORDINARY CSS EDITOR you will ever encounter. experience. About This Book This user manual is designed to get you up and running using Stylizer as quickly as possible. usability studies and 24-hour workdays put together by a startup company with a vision of how web sites should be designed. but the more you know about it. floating tool palettes and manual workflows. text editing. you will wonder how on earth you ever functioned without it. Stylizer is a fast-growing program. and keyboard shortcut. You may find it alarming at first. mouse gesture. We are interested only in building the most refined CSS editor ever–down to the very last pixel. as if Stylizer is reading your mind and doing exactly what you want. Its uniqueness lies in its simplicity and in its tireless effort to deliver a user experience as rewarding as possible. and the more beautiful your designs will be.

However. we will use a sample HTML file which has already been created. YOU SHOULD HAVE AN OVERALL PICTURE OF HOW STYLIZER approaches workflow. Stylizer automatically shows you the CSS files which are styling the page. When you have typed something that you think may look reasonable. Stylizer will open and save your CSS Creating a New Web Site For this example. You do not need to switch between applications. Stylizer will ask you where the first file goes. You type your CSS by hand. you switch to your HTML source code and add a link tag to associate the CSS file with the HTML. open Stylizer. Please create an HTML file using the example1. you save the file next to your HTML file. you press Save and Stylizer knows exactly where to put the file. the location of all other files can almost always be determined automatically. and open the HTML file in the Stylizer embedded browser. your current workflow for CSS may be something along these lines. you switch back to your web browser and press Refresh. As you begin to add CSS to the style sheet. you open your favorite text editor and press New. for you without you doing anything. To create a new file. so you switch back to the CSS code in your text editor.html document at the end of this chapter. It’s incomplete. 2 . Finally.2 Your First Web Site in Stylizer 2 Your First Web Site in Stylizer B EFORE YOU START. Then. A Typical Workflow If you work like most CSS designers. and make more changes. so when you return to work the next day. The workflow is the same for a site on a remote web server. you may be surprised at Stylizer’s simplicity and elegance. formatting it exactly how you like it as you go. you switch to your web browser of choice and open the HTML file to see what the CSS looks like. By typing the URL into the address bar. obvious workflow designed specifically for a CSS editor. you will see your styling happening in real time in the embedded browser. And Stylizer remembers where files are saved between sessions. Workflow in Stylizer The first thing you do is add a link tag to your HTML source. When you press Save. Stylizer uses a very natural. Stylizer automatically creates a new blank CSS file for you with the name specified earlier. specifying the name of a CSS file which doesn’t exist (yet) as the href. Next. If you are accustomed to the typical workflow imposed by text editors. When you are finished styling. Next.

switch back to Stylizer. Almost all file opening is handled like this in Stylizer–automatically. then choose the You should now see the example HTML page in the web browser. Type the path to the HTML file into the web browser address bar and press enter. Note that this file is a temporary file in Stylizer and won’t be a file on your hard disk until you save. Click file.w3. It’s still very plain at this point because we haven’t added any styles yet. There are 3 ways to open an HTML file in Stylizer: 1.org/TR/html4/strict.html. 3. Add the following line in the <head> section: <link rel="stylesheet" type="text/css" href="example1. A new tab has opened to the right of the browser containing an empty file called example1.dtd"> <html> <head> <title>Example 1</title> </head> <body> <h1>Stylizer Example</h1> <p>This is an example page from the Stylizer manual. on the toolbar or press CTRL+O display the open dialog. 2. Open example1. example1.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.html in your HTML editor. Drag the file from Windows Explorer and drop it on Stylizer. Next.css"/> Save your changes to the HTML file.2 Your First Web Site in Stylizer The first step is to run Stylizer and open example1. Stylizer saw that you added this tag to your HTML file and has automatically created the new file for you. It is rare that you would need to create or open a CSS file directly. we’re going to attach a style sheet.</p> </body> </html> 3 . Press CTRL+D to focus the address bar quickly.01//EN" "http://www. Now.css.

Stylizer will automatically convert “body” into uppercase (this is configurable—see Chapter 10: Output Formatting). but that it is more easily navigated and understood.3 Using the Grid 3 Using the Grid A DDING STYLES TO A CSS FILE IN STYLIZER IS DIFFERENT from the system to which you are likely accustomed. Organizing in a grid has other advantages. Here you will enter a declaration. For example. provide outstanding undo and redo. clicking is unnecessary – you may simply start typing). Stylizer tosses away the CSS “syntax” that you will find in generalpurpose text editors. manageable grid. press (:) to advance to the property value. and a new line below the selector will be created for you. You will notice that the general structure of the file is the same. starting with the property name. To create a new rule. Rules. Here’s how the CSS code might look in a text editor: BODY { font-family: sans-serif. A box will appear. How Stylizer Accelerates Typing The name of every CSS property appears in a box below the style sheet. } Here’s how it’s done in Stylizer. to type font-family you need only type f-. and pressing (:) will insert the entire 4 . provide better context-sensitive information and control. After you have typed the name. too. Declarations. In the following chapters. the property which most closely matches what is typed so far is highlighted. As you type. you will see how it is used to filter and reorder the rules as necessary. Pressing the dash key (-) will complete the current word. click the Add Rule link at the end of the style sheet. Comments Let’s change the font used in the document to 8 point Sans Serif. type body and press ENTER. Stylizer knows about every CSS property you will ever use. and instead organizes your styles in a compact. Since we’re styling the entire document. and uses that knowledge to accelerate input by typing characters for you when it’s sure about what you want. font-size: 8pt. and simplify access to common tasks such as browser and media type filters. into which you can enter the CSS selector specifying the HTML elements you would like to style (NOTE: If Add Rule is already selected.

and you type 2 ENTER. we’ll enter the property value sans-serif. pressing F moves the selection to the first CSS property which starts with f (font). pressing (-) completes the current word (font) and then appends a dash. Notice that. let’s change the font size to 10 points. Left click and hold where you would like to insert a new rule. press the right button. upon typing s the sans-serif item will highlight in the list below. In the example above. Stylizer will change it to 2em. or INSERT to insert above. but it will also remember the CSS unit you’ve used in each declaration should it be different from the default. With the Add Rule or Add Property row is already selected. but it is actually quite simple and effective when it becomes natural. if your font size property is currently set to 1.) to insert the value and move to the next declaration. This one may sound complicated. Alternate Ways to Insert Press ENTER insert below. If you are transitioning from a text editor. Note how the default unit for the font-size property is pt. While the left button is down. pressing (:) inserts the highlighted property. Next. you may be accustomed to using comments to disable unneeded styles without actually Stylizer deleting them from the style sheet. as with the property name. Next. Pressing Enter does not create a new declaration–it only confirms the current one. For example. Simply press semi-colon (. The grid should now look something like this: Since 8 point looks a little too small. Finally. which is font-family. or points.5em. 5 . Stylizer can choose a default unit for you when none is specified. just start typing – Stylizer will insert the new item for you. handles this situation differently. thus comments in Stylizer are used only for their intended purpose: inserting a human-readable comment into the style sheet. The second property font-size can be entered by typing f-s:8 ENTER.3 Using the Grid highlighted item. Type 10 ENTER. so there is no need to type it.

margin-bottom and margin-left. Composite properties like this one can also be expanded and collapsed in the same way as rules. Of course arrow keys. Comments may be inserted anywhere rules or declarations can be inserted. this is to indicate the rows which will be moved. Press on the Style Sheets toolbar or the shortcut key. select the row or rows you would like to move. CTRL+X. and press CTRL+UP or CTRL+DOWN. To delete a rule. Nudge The nudge feature will move a rule. When you are finished. The rows will move in the given direction. press / and then type your comment text. This can dramatically change the way a page is rendered. like margin. declaration or comment. just press DELETE. accident. First. Navigating the Grid Stylizer’s grid system is somewhere between a spread sheet and a data grid. press ENTER. are composite properties. page up and page down work as you would expect. To nudge. press If you delete something by on the Style Sheets toolbar. Holding CTRL while you press (-) or (+) will cause all rules in the entire style sheet to be expanded or collapsed. declaration or comment up or down by a single row. select the row or rows you would like to move. margin-right. press RIGHT. In Stylizer. CTRL+V. A composite property is a special property that sets the value of several CSS properties at the same time. there are basically two ways to move styles. press LEFT and to expand it again. For example. or CTRL+Z. To collapse a rule. cut and paste works in the same manner as in a spread sheet application. You can also use the (-) and (+) keys on your numeric keypad to do the same thing.3 Using the Grid To create a comment. As with any ordinary application. Cut and Paste In Stylizer. Moving Styles The ordering of declarations in CSS is important. margin sets margin-top. You will see that the rows you have selected are outlined in “marching ants”. portions of the style sheet can be expanded and collapsed so that only rules in which you are interested are open. You can also select several rules or properties at once using the mouse and delete them all at the same time. however. declarations written below override those written above. Some CSS properties. Unlike a spread sheet. on the Style Sheets toolbar Disabling Styles 6 . simply select the location where you would like the rows to be inserted and press or the shortcut key.

style sheets linked to a web page by a link tag. or disable individual declarations or entire rules. !important In CSS. on the Style Sheets toolbar. or 7 . style sheets imported by other style sheets. the declaration which appears later will override the other. !. select the rules or declarations you would like to disable and then press on the Style Sheets toolbar or the shortcut key.3 Using the Grid Stylizer can turn off. F8. and inline declarations placed directly on an element with a style attribute. styles can come from many places: inline style sheets embedded directly in HTML source. CSS provides a mechanism to change this behavior called !important. Generally speaking. Any style marked as !important takes precedence over any style appearing after it. To disable styles. it is completely hidden from the browser as though it does not exist. it is much the same as commenting out a declaration in a text editor. if two declarations target the same element. When a declaration is disabled. However. You can mark a property as !important by selecting the property and clicking the shortcut key. in practice. Consecutively disabling and enabling styles can often help you find problems or reveal exactly how a particular set of styles is affecting your page.

the original color. In CSS. colors are typically written either as a simple name (for example. although CSS only recognizes RGB. RGB/HSB values. and when you choose a color using HSB. Stylizer also understands the hue-saturationbrightness (HSB) color space. and each color in a color space is described using a set of components. This is currently the only color space usable with CSS. Color can be described in many different ways. In Stylizer. A system of describing colors is called a color space.4 Choosing Colors 4 Choosing Colors S 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. Stylizer will automatically translate it into an RGB color for you when it inserts it into the style sheet. in hexadecimal. Color Picker The color picker appears on the screen below the style sheet whenever a CSS property which accepts colors is selected. For example. HSB is often a more intuitive way to chose colors. you can choose and adjust your colors visually and the CSS color code will be automatically entered into the style sheet for you. However. 8 . The design of the color picker is based loosely on that used by photo editing software such as Adobe Photoshop®. The color picker is divided into several sections: the adjusted color. green and blue. Since choosing colors for a style sheet is one of the most common things you will do when designing a web site. and the sweeps. “black” or “white”) or as a color code. one of the design goals for Stylizer was to make this tool as convenient and as powerful as possible. in the RGB color space (with which you’re no doubt familiar) each color is described using three components: red.

and the rectangular box called the secondary sweep is two-dimensional. This is the new color that will replace the current color when you press ENTER. To begin an eye drop. Note for Windows Vista Users In the Windows Vista security model. When you have located the color you want. Each component is labeled to the left. You may switch to any other application or use the computer as you normally would in order to find the color. and you may also click on these labels to set the component used in the primary sweep. You may click anywhere within these sweeps to change the adjusted color. an application may be run either as an Administrator or as a Standard User. Below the color boxes are the HSB and RGB components of the adjusted color.4 Choosing Colors The color box on the right is the original color. if the primary sweep is adjusting a hue value. photograph. As you move your mouse. run as a 9 . While the magnifier window is open. These are also text boxes into which you may type any value you like (should you know exactly what you want). the secondary sweep will adjust green and blue. vertical box called the primary sweep is onedimensional. Each axis on the sweeps controls a single component of color within a single color space. You may also press ESC at any time to cancel the Eye Dropper and return the color property to its original value. or a color used in any other application. press SHIFT to close the magnifier window and stop sampling colors. The color box on the left is the adjusted color. the secondary sweep can be used to adjust the saturation and brightness. click your screen. This is the color assigned to the property before the adjustment was started. you can also use the arrow keys to move the mouse one pixel at a time. including Stylizer. For example. 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. on the color picker. On the right side of the color picker are the color sweeps. Eye Dropper The eye dropper can sample a color from any pixel on your screen. The tall. Use it to extract a color from a web page. 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. If the primary sweep is adjusting red. Most applications.

You can also type the grid coordinates directly into the style sheet to insert the color. if you hold shift when you click on the color grid.4 Choosing Colors Standard User by default. When you store a color in this way. make sure Stylizer or another application running as a Standard User is active when you press the shortcut key. rearranged or deleted. Stylizer stores your reusable colors in a 10x10 grid which acts as somewhat of a palette. Colors in the color grid may be rearranged freely. Hold CTRL when you press up. Since CSS provides no built-in mechanism for reusing a color. you can store it in the color grid by pressing in the Color Picker or the shortcut key. F6. it will receive the input focus. Inserting a stored color back into your style sheet requires only a single click. Once the Color Grid has the input focus. 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. Stylizer overcomes this limitation with its convenient system of storing. using the same color in more than one style would require duplicating the color code through (usually) copy and paste. Clicking on a color on the color grid will insert it into another color property in the style sheet. 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. Stored Colors Colors are often reused throughout a style sheet. You can also hold CTRL and drag colors using the mouse. The grid will now have the input focus. down. Using the Color Grid Whenever you have a color value selected in the style sheet. or by clicking wherever you want. When you do this. To work around this. 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 . However. To begin rearranging colors. it is automatically copied into the first available cell in the grid. hold the SHIFT key and click anywhere on the grid. and colors in the grid may be adjusted. choosing and reusing common colors throughout a style sheet. You may navigate the grid using the arrow keys. left or right to move colors to different places in the grid. Adjusting Colors in the Color Grid Clicking on a color in the color grid will insert it into the style sheet. 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. The limited permissions of the Standard User account prevent it from interacting with other applications running as Administrator. the style sheet will automatically be updated with the new grid coordinates of the color.

you can’t delete a stored color that’s in use). click on the stored color. Select a color property value. click the Store This Color button or press F6. This can be a real time saver. click the new color on the color sweep. Hold CTRL to drag the color to a new location. You can delete a color by pressing Delete (however. 11 . 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. Hold shift and click on the stored color in the Color Grid. then click the new color on the color sweep. Select a color property value.4 Choosing Colors color is used.

Unfortunately. Though Stylizer supports all of these units. If the selected property is two-dimensional (for example. and reappear again when you release the mouse button. A size grip will always appear on the right side of a CSS property value when the selected property accepts dimension or length values. as well as various relative units of measurement. 12 . You may also hold both modifiers simultaneously to adjust both the horizontal and vertical components at the same time. SETTING SIZES IS A TASK BEST DONE VISUALLY. and a lens to magnify elements too miniature for the naked eye. Spinning down will increase the selected value. then move the mouse. spinning up will decrease it. on-screen rulers to help ensure that all elements in your layout line up. such as percent and em-height. If the selected property is two-dimensional. holding CTRL will adjust the vertical component and holding ALT will adjust the horizontal component. Size Grips Size grips can be used to adjust numeric values in the style sheet using the mouse. If the selected property is one-dimensional (for example. Turning this feature off will correct the In practice. To use a size grip. background image will simply move along with your mouse. Stylizer provides several methods of measuring and adjusting dimensions. its on-screen measurement tools work exclusively in pixels. The pointer will disappear while dragging. 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. left-click and hold on the grip. 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.5 Setting Sizes 5 Setting Sizes L IKE CHOOSING COLORS. Note for Virtual Machine Users Virtual Machines (such as VMWare. the size grips in Stylizer do not function properly when this feature is enabled. this means that the Sizing with the Keyboard and Mouse Wheel To use a size grip without moving the mouse. CSS supports several fixed units of measurement. hold the CTRL key and spin the mouse wheel. width or height) moving the mouse up or down will increase or decrease the value. such as pixels and inches. problem.

In particular. Next. holding CTRL will cause height to be adjusted and holding ALT will cause width to be adjusted. The magnifier window will appear as well as a horizontal or vertical red line. if you have selected both height and width. margin-bottom and margin-left. As with Size Grips. Stylizer includes a virtual Tape Measure which can be used to measure the size of anything on the screen. Or. you may use the arrow keys to move the mouse one pixel in any direction. press the Tape Measure button below the style sheet. 13 . left. when the magnifier window is open. To begin. As with the Eye Dropper. the Tape Measure is usable for any CSS property which accepts dimension or length values. You can also press ESCAPE at any time to cancel. press SHIFT again to have the dimension inserted into your style sheet. move the mouse to the opposite edge. bottom or right edge of the object you wish to measure and press SHIFT. For these reasons. the behavior of the CTRL and ALT modifiers is a little different. Tape Measure Often there are elements on the screen whose dimensions you would like to use in a style sheet. margin-right. if you have expanded a margin property and selected all four children.5 Setting Sizes The same effect may be achieved without using the mouse wheel by pressing [ or ] while holding CTRL and/or ALT. 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. margin-top. Holding CTRL will adjust the vertical properties and holding ALT will adjust the horizontal properties. This line indicates the starting line from which your measurement will begin. If more than one property is selected when the keyboard or mouse wheel is used in this way. For example. Move the mouse to the top. CTRL may be used to adjust the top and bottom while ALT may be used to adjust the right and left. When you are finished.

You can move the 0-point by clicking on the ruler with the left mouse button. left-clicking again on the ruler will hide them. Activate the Lens by clicking on the toolbar. it will follow the mouse pointer over the browser. You can also right-click the ruler to lock the guide lines in place. When the mouse is positioned over a ruler. Once the lens is activated. and one at the mouse position. or to ensure several elements line up. find the opposite edge of the element by moving the mouse over the ruler. 14 . on which is written the distance between the two guidelines. one from at 0-point of the ruler. Pressing F3 a third time will hide the lens. or pressing F3. Stylizer provides both vertical and horizontal pixel rulers. You’ll see the width or height of the measured area in the tooltip.5 Setting Sizes Rulers Web page rulers are a quick and easy way to measure the dimensions of an element on the page. mode is most useful when you would like to use the ruler at the same time as the lens. The lens reveals alignment errors and color inaccuracies which may be undetectable at normal size. or when you would like to keep an area magnified while making adjustments to the style sheet. Generally. It does not obstruct the mouse. A tooltip will also appear in the upper-left or upper-right corner of the browser. Once the 0-point is positioned. the lens follows the mouse and magnifies the area of the web page beneath it. you’ll set the 0-point to the left or top edge of the area you wish to measure. measure the distance between two elements. Pressing F3 a This second time will cause the lens to lock in place. two guidelines are drawn over the page. you may click the mouse and navigate freely as though the lens were not even there. Lens When activated.

and a variety of syntax features. Unfortunately. ordered by specificity. It can also automatically reorder the rules according to specificity. dividing style information between individual rules is likely to improve manageability. the CSS specification defines a formula. you will learn how to use Stylizer to quickly find applicable styles. The order of rules in a style sheet is significant. Done with care. Once started. as is the order in which style sheets are linked to a document. used to determine their importance. called specificity. although it is trivial to calculate the specificity of a single rule. element names. Stylizer is capable of filtering your view of a style sheet so that only specific. And when inheritance–the process by which child elements receive certain styles from their parent element–enters the equation. IDs and element names appearing in a selector is also important. 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. determining which styles affect an element can become quite difficult. Begin Bullseye by clicking on the Web Browser toolbar. it is plain to see how. One CSS rule may style several elements. Because styles can appear in so many different places.6 Finding Styles 6 Finding Styles C SS STYLES CONSTITUTING THE APPEARANCE OF AN HTML ELEMENT can appear in numerous places. Use Bullseye when you can see in the web browser the HTML element you would like to style. Because the various styles affecting an element can appear virtually anywhere. Rules at the bottom are the most specific and override rules above. unless you are a computer. rules can be constructed to style HTML with an exacting degree of precision. however. Flexibility like this. The quantity of class names. Clicking on an element will display all rules affecting it in the active style sheet. and styles Modify darkened styles with care: overridden within the same style sheet are darkened. IDs. and designers frequently use this technique to advantage. relevant rules are displayed. many style-related bugs are caused by confusion over specificity. In this chapter. determining which rule of many has the highest specificity can be tedious. and several rules may style the same element. comes with cost. but you are unsure of how it is already being styled by existing rules. Bullseye will actively highlight HTML elements in the web browser as you point to them. 15 . they can be difficult to locate without a full knowledge of the internal workings of the web site. Using a mixture of class names. or by pressing SPACE.

drinksFree . As you type into the search box. All other terms in the query match only full words. this facilitates searching for styles across multiple files. the Bullseye filter will stay active when switching between them. searches within a style sheet tend to be straightforward. with an in-place query syntax designed to provide relevant results from a minimum number of keystrokes.barTender . Stylizer searches for and displays rules which match every term.bar .bar Match Match Match Match Match Match Match Match Match Match . they may affect the styling of other elements for which the style is not overridden. or by pressing CTRL+F. Start Live Search by clicking on the Style Sheet toolbar.bar . Stylizer exploits this to streamline the search experience. each separated by a space. It replaces common search options.bar .bar . The last term in the query matches any word that begins with it.drinks 16 .drinks . A search query is composed of one or more terms. If multiple style sheets are linked to the same page. Most searches are for class names or IDs or properties of a certain name or value. Pressing ESCAPE or clicking the bar at the top of the style sheet will remove the filter and restore the original order of rules. For example. Live Search As CSS syntax is quite simple. Bullseye does not ever combine rules from separate style sheets into one unified list.barSPACE .bar .drinksSPACE CSS Selector . such as regular expressions and case matching.6 Finding Styles although they cannot change the style of the selected element. The last term can also be made to match only full words by adding a space to the end of the query. consider the following queries when performed on the given set of CSS selectors: Search Query .

Like Bullseye. to the first rule which contains an LI element.6 Finding Styles In order to improve search performance and increase the relevance of results. text-align: right. right Match Match Match right: Match Match :right right. Unlike Bullseye. Live Search works as a filter for rules. (semi-colon) represents the boundary between properties : (colon) represents the boundary between property name and value You may recognize these operators as CSS syntax. margin-right: 10px. Each rule matching all search terms is included in the results. and then press ESCAPE. And although rules can be deleted. but not rules containing only ABBR elements. is collapsed by default. About Filters When a style sheet is filtered–either by Bullseye or Live Search–new rules cannot be added and the order of rules cannot be changed. For example. searching for A will match rules containing A elements. list-styletype would be matched by both style and list style. for example. indeed.right -right Match Match Match Match CSS Style right: 5px. A rule wherein the only match is in the selector list. Upon exiting a filter. yet the selected row remains unchanged. single-letter terms always match full words regardless of their position in the query. Navigating the Style Sheet Live Search can also be used as a way to quickly jump to another location in the style sheet. it will be automatically cancelled. the rules in this list are ordered sequentially according to their location in the style sheet. 17 . Here are some examples of how they might be used: Search Query . Thus. deleted or reordered regardless of the active filter. if a delete operation is undone when a filter is active. A property not containing any search terms is darkened. rules are displayed and may be reordered. There are no restrictions on properties–they may be added. thus having all its properties darkened. then type LI. press CTRL+F. Advanced Queries Words between dashes are matched as though they were separate words. Several characters with special meaning also restrict terms to specific places in the style sheet: . To jump. they are.

Perhaps this story is the origin of term "breadcrumb". two children leave a trail of bread crumbs as a means of finding their way home from the middle of the woods. 4. Press Make Rule. Making Rules Using the Breadcrumb When Bullseye is activated. Each tag. class and ID in the Breadcrumb is a clickable button. pointing to an area on the web page will highlight the element at the pointer. remains onscreen even after Bullseye is deactivated. click on each tag. the Breadcrumb can also be used to quickly write CSS selectors. The new rule is inserted in the style sheet after the selected rule. selectors are written by clicking on each chosen tag. A typical use of the Breadcrumb as a selector builder is: 1. and then clicking Make Rule. Press SPACE to activate Bullseye. The The Breadcrumb below the web browser reveals the ancestry of Breadcrumb is displayed when Bullseye is activated. classes and IDs. If a Bullseye or Live Search filter is in use. Point to the web page element you would like to style. class and ID you would like to use in the new rule. Ensure that the correct element is highlighted. 2. it is cancelled before the new rule is inserted. and Why "Breadcrumb"? In the fairytale Hansel and Gretel. class and ID. Because a selector is essentially a pattern used to match one or more elements in a document. 5. 18 . as it is used in computing. to describe a navigation bar which tracks steps through a hierarchy of nodes. 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. 3. which actively identifies all elements styled by a rule. Within the Breadcrumb. Besides revealing document structure. 6. Press SPACE again to deactivate Bullseye. Stylizer also includes Stakeout. Most selectors contain only tag names. and Stylizer provides simple tools to facilitate writing selectors falling under this common case. elements leading up to the highlighted element.7 Defining Styles 7 Defining Styles E VERY CSS RULE BEGINS WITH A SET OF SELECTORS WHICH DETERMINE THE HTML elements it styles.

This reduces user error by providing immediate feedback about the selector before it is confirmed. rules for menu bars likely precede rules for menu items they contain. To create a new rule which styles the A elements within .html">Contact</a> </div> </div> Assume a rule for . outline is unsupported by Internet Explorer 7 and earlier.html">Home</a> <a href="contact. outline is a good fit for Stakeout because–in contrast to border–it does not alter page layout. A. For example. And when first writing or editing a rule. The new rule . Unfortunately. press CTRL+ENTER. press CTRL+INSERT. CTRL+BACKSPACE+BACKSPACE. ENTER. disable Stakeout temporarily to expose the real CSS outline.menu A will be inserted below. Or. ENTER.page will be inserted above. CTRL+INSERT and CTRL+ENTER create rules by duplicating the selector list of the selected rule. once enabled. Recall that INSERT and ENTER create new rules above and below the selected rule.menu. Enable Using Stakeout is effortless. outline boxes will be updated continually as you type. Stylizer offers an efficient way to create these rules. Stakeout will be 19 . How Stakeout Works Stakeout takes advantage of the uncommonly used CSS outline property to draw its outline boxes. similarly.menu already exists and that it is selected.7 Defining Styles Duplicating Selectors Rules targeting contiguous elements are often grouped together in a style sheet. to create a new rule which styles .page. on the Web Browser toolbar.page . disabled when using one of these browsers. Stakeout As selectors become more complex. consider the following HTML fragment: <div class="page"> <div class="menu"> <a href="home. If a real CSS outline property is used in the current rule. For example.page . or by pressing the shortcut key. Stakeout by clicking Stakeout reveals these elements by surrounding them in boxes. it is increasingly difficult to visualize the HTML elements which they affect. The rule . elements affected by whichever rule is currently selected will be outlined. F9.

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

cookie storage and state. Switching Between Firefox and IE To toggle the embedded browser between Firefox and Internet Explorer. Fortunately. Unfortunately. Because each browser has its own separate browsing history. grid-based editing overcomes all these problems.8 Supporting Multiple Browsers 8 Supporting Multiple Browsers B ECAUSE INTERNET EXPLORER WAS DEVELOPED BEFORE WEB STANDARDS had been finalized. however. There are two generally accepted methods of achieving this. The current page will be reloaded 21 . in order to deliver a unified experience to all visitors regardless of their browser. which can be used to direct different CSS files to different versions of Internet Explorer. For example. browsers and settings. so that certain versions of the browser ignore specific parts of the style sheet. Rendering differences do exist between these modern browsers. and requires in-depth knowledge of web browser technology to ensure compatibility with future browser versions. however. can cause the style sheet not to validate. all of which use more modern rendering engines. and Mozilla Firefox. that designers will face situations where. Stylizer uses Tags to provide one-click access to the most common browser filters a designer will need. its rendering behavior often differs from that of more recently developed browsers such as Apple Safari. if you are logged in to a website. these settings are not maintained between switches. or on the Web Browser toolbar or press the shortcut key. In this chapter. making this second method the preferred way of supporting multiple browsers in Stylizer. Opera. It also offers effortless switching between the two most widely used Windows browsers: Firefox and Internet Explorer. This method. The first method requires using separate style sheets in conjunction with Internet Explorer’s Conditional Comments feature. plus a unique approach to target media types. though they are uncommon and can almost always be avoided. you will need to log in again after you switch browsers. It is unavoidable. special CSS needs to be served to Internet Explorer–especially version 6. click into the new browser. CTRL+F12. has its own set of problems: it creates clutter in the style sheet. you will learn how to test and debug your CSS across platforms. 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.

they override only specific styles defined in the master style sheet to correct the page’s appearance. An icon will appear on the right side of the property value grid cell indicating the target media type. plus different style sheets for print. 2. instead. By specifying a media type after the URL of an @import directive. a page with a dark background and light-colored text might want to invert this color scheme when the page is printed. For example. These encodings are well-documented online: on the Style As with Media Filters. Browser Filters work by encoding the property name in a special way so that different versions of Internet Explorer interpret it differently. 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 places Tagged declarations in another rule of a separate media block. By including a media attribute on the link tag which references style sheet. Satellite style sheets targeting a specific media type rarely restyle the entire document. By creating a media block within the style sheet. Stylizer takes the concept one step further by allowing a designer to Tag an individual declaration with a target media type.8 Supporting Multiple Browsers Media Filters CSS allows a designer to provide separate styles for different target media types. when a Browser Filter is used. 3. put a Browser Filter Tag on a declaration in the same way as you would put a Media Filter Tag: Sheets toolbar. Essentially. This all happens transparently–when using Stylizer. indicating the kind of Browser Filter applied. an icon will appear Filter Only IE 7 Or Less Encoded Property #margin: 0. 22 . CSS does not support this directly: behind the scenes. For example. click declaration may only have a single target media type. a designer may provide a master style sheet. Of course. there are 3 ways to specify a target media type: 1. Each Browser Filters To show or hide individual declarations under certain versions of Internet Explorer. To Tag a declaration with a target media type. on the Style Sheets toolbar. screen and handheld. it is as if CSS had already provided this additional functionality.

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. 23 . margin /**/: 0. ma\rgin: 0.

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

Stylizer automatically attempts to make a connection to the FTP server. and then downloading from a completely different place to check whether that file exists–he likened it to the practice of inserting spaghetti up your nostril and feeding it out through your mouth. In Folder. press Change and read the warning before proceeding. press Save to have Stylizer will verify the location of the file and complete the save. if all fields have been filled. the file name field will be read-only. text boxes appear below to enter the connection information: FTP address. If this file is linked to a web page. Saving Locally Below the Save to drop-down. 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. enter the path to the folder where the file will be saved. that it might come out the other. password is saved in Stylizer's configuration file. Why "Spaghetti"? When Paul first proposed this technique–uploading a file to one place. though no guarantee. or choose a folder using the tree below. Saving To FTP When you choose FTP Site in the Save To drop-down. with a fairly good chance. or use the tree below to navigate. the encryption key is based on the login information for the currently logged on Windows user. type the path to the folder on the FTP site where the file should be saved. 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. 25 . an empty file with a random file name is saved in the chosen save folder. to enable this field. the path is verified. The file name is entered separately in the File Name field below. When you have chosen the desired location. something is inserted into one side.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. If the file can be downloaded. First. Next. login and password. Passwords are encrypted using encryption features built in to Windows. Upon pressing TAB from the password dialog. In both procedures. port number.

in the unlikely event that you should need to manually change the location where a file is saved. 26 . the location where the file is saved (if any). 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. press the Change button in the File Properties window to reopen the Save Dialog at any time. However. Viewing and Changing Save Locations The button on the Style Sheet toolbar displays the File Properties window. as well as the size of the file and the number of rules. the Spaghetti Test will fail and Stylizer will display the save dialog. containing information about the current style sheet: the location from where the file was loaded.9 File Management And so this metaphor eventually came to be understood around the office as nomenclature for Stylizer's verification system.

then Output Customization Once you have opened the Output Formatting window. a tool which identifies errors in CSS and provides a user interface to make corrections. Stylizer can customize the following settings: 27 . and provides features to ease the transition between systems. For this reason. and essential for mediums such as specifications and books. Stylizer includes two standard presets: Stylizer Default. Output Formatting CSS can be formatted in more ways than there are CSS designers. spacing. Stylizer recognizes the important role played by text-based CSS. It is convenient for information exchange mediums such as email and forums. Designers working under these policies can use Output Formatting options to specify exactly how a CSS file will be formatted when saved by Stylizer. and when working in a team. To specify formatting options for a CSS file. which eliminates all excess whitespace from the file. on the Style Sheet toolbar. and Compressed. SITUATIONS ARISE WHERE TEXT-BASED notation is appropriate. Some companies have policies implemented to ensure CSS code written within the organization is formatted in a certain way. each with different formatting requirements. but files created in text editors often do. specify formatting options by changing settings in the Selector List and Properties group boxes. the default formatting scheme applied when no other has been specified. CSS files created in Stylizer will never contain structural errors. thereby reducing download size and improving browser efficiency. The nature of grid-based editing makes it impossible to display CSS containing structural errors. and line breaks. open the Output Formatting window by first clicking Formatting. Stylizer saves Output Formatting options separately for each file. including casing. Stylizer includes Cleanser. A preview of your format is displayed in the preview box below.10 Text Editor Interoperability 10 Text Editor Interoperability A S POWERFUL AS GRID-BASED CSS EDITING IS. this is useful to designers who work for multiple companies. consistent and predictable formatting is critical.

However.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. 28 . You will be asked to provide a name for the preset. To save a preset. click next to the preset drop-down. To save overtop an existing preset. Properties: These drop-down lists specify the kind and amount of space between each element in the property list. they may be saved as a preset for easy access. click the drop-down button in the Preset Name field and choose the name of an existing preset to overwrite. Press OK to save. Space between Selectors: Inserts a single space between each CSS selector. Managing Presets If a particular style of Output Formatting will only be used for a single file. The formatting options will be saved in the CSS file itself. Each drop-down is positioned on the screen in the same physical place into which it inserts space in the style sheet. if you intend to use the formatting options repeatedly. it is unnecessary to save it as a preset.

29 . In the Preset drop-down list.10 Text Editor Interoperability To delete a preset. Style sheets containing errors. It points out errors and warnings in the style sheet and provides a user interface to fix those errors. Think of Stylizer as a kind of clean room for CSS. There are two categories of errors: critical and warning. and in part to poor error detection capabilities of many text editors. the default preset is displayed in bold. or save a file for the first time. the output format will be known and maintained when the file is saved again. All CSS must pass through Cleanser before being admitted into the grid. Stylizer uses the formatting options specified by the Default Preset. Cleanser is a part of the CSS parsing engine in Stylizer. These codes can also be shared between developers and entered manually. one of these codes is written to every CSS file saved by Stylizer so that if another designer opens the same file. non-validating CSS often slips under the radar. or attempting to paste CSS code which contains errors. which ignore CSS errors as per the W3C specification. Formatting Codes A Formatting Code encapsulates a complete set of formatting options. Upon opening a style sheet containing errors. however. Cleanser displays the incorrect CSS and a list of non-validating lines to be corrected. When you create a new file. Cleanser The web is rife with non-validating CSS. You may change the Default Preset to the current preset by pressing Default. Composed of up to 11 hexadecimal digits. press . The Formatting Code is displayed in the upper right corner of the Output Formatting window. Due in part to the forgiving nature of web browsers. cannot be opened in Stylizer.

Cleanser will be displayed again.10 Text Editor Interoperability A critical error. Copy and Paste The Cut and Copy features in Stylizer also copy the selection to the clipboard in text format. A warning. Some examples of warnings are unknown HTML tag names. the line containing the error will be selected in the code window above. a style sheet with a "critical" error cannot be opened. Once a property has been validated. it cannot be changed back to its original. Cleanser will then re-check the style sheet to ensure that it validates with your corrections applied. which does not strictly need to be fixed before the style sheet is opened. is a structural error which must be fixed. An example of a critical error is a misplaced {. The reverse also works. you may use Paste to insert it into Stylizer. If you do not wish to fix all warnings. indicated by a red circle with a white exclamation point. the entire selector list will be become a comment and the selector list for the rule will be replaced with #INVALID-RULE. Upon clicking. the CSS text may be pasted into a traditional text editor. If CSS text copied from another source (such as a text editor. blog post or help file) is on the clipboard. is a validation error. If an unrecognized property value is ignored. the new value must validate. To navigate between errors. and invalid color codes. Cut. unknown CSS properties. 30 . If you change the value of the property. Should the CSS on the clipboard contain errors. Should errors still remain. Ignoring certain warnings will cause the style sheet to be modified: If an invalid selector is ignored. indicated by a yellow sign with a black exclamation point. it will appear in the grid in orange. Cleanser will appear and provide an opportunity to make corrections before it is inserted. non-validating value. click each item in the error list one-by-one. When all errors have been corrected. press Try Again. Once copied. the entire property will become a comment. If an unknown CSS property name is ignored. press Continue to ignore them an continue loading the style sheet.

To enter the key manually. CTRL+T. the style sheets will appear only in the first tab. Open the About Box by clicking the diamond. right-click on the style sheet and choose "Light Background". About Box The About Box displays information about the current version of Stylizer. To open a new tab. Each workspace has its own separate web browser and linked style sheets. click Change Product Key in the About Box. license information in your product key. if the same website is opened in more than one tab. and provides a button to open the Skybound Software web site. or using the shortcut key F1. then "About Stylizer". or press the shortcut key ALT+F12. 31 . or to change your product key. Tabbed Workspaces Stylizer supports tabbed workspaces. Entering a Product Key To enter a product key in Stylizer. Light/Dark Background Some users may find the style sheet easier to read with a white background. press at the top of the Stylizer window beside the diamond. or press the shortcut key.11 IDE Features 11 IDE Features This chapter explains general features of the Stylizer application which do not relate specifically to CSS. To switch between color schemes. simply copy it to the clipboard. Stylizer will recognize that you have entered a valid product key and accept it automatically. Note that a style sheet may only be open in one tab at a time.

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

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 .