Stylizer Manual

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

1 Introduction

1

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 ever–down 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.

S

2 Your First Web Site in Stylizer

2


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 Stylizer’s 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. It’s 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 doesn’t 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. 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

for you without you doing anything.

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.

B


3

The first step is to run Stylizer and open example1.html.

There are 3 ways to open an HTML file in Stylizer:

1. Click on the toolbar or press CTRL+O display the open dialog, then choose the

file.

2. 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.

3. Drag the file from Windows Explorer and drop it on Stylizer.

You should now see the example HTML page in the web browser. It’s still very plain at this point

because we haven’t added any styles yet. Next, we’re 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 won’t be a file on your hard disk until you save.

Almost all file opening is handled like this in Stylizer–automatically. 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

4

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 general-

purpose 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

Let’s change the font used in the document to 8 point Sans Serif. Here’s how the CSS code

might look in a text editor:

BODY

{

font-family: sans-serif;

font-size: 8pt;

}

Here’s how it’s 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 we’re styling the entire document, type body and press

ENTER. Stylizer will automatically convert “body” into uppercase (this is configurable—see

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 it’s 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

A

3 Using the Grid

5

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, we’ll 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 declaration–it 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, let’s 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 you’ve 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

deleting them from the style sheet. Stylizer

handles this situation differently, thus comments

in Stylizer are used only for their intended

purpose: inserting a human-readable comment

into 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.

3 Using the Grid

6

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

Stylizer’s 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. If you delete something by

accident, press 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 on the Style Sheets toolbar

or the shortcut key, CTRL+V.

Disabling Styles

3 Using the Grid

7

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 on the Style Sheets toolbar, or

the shortcut key, !.

4 Choosing Colors

8

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 you’re 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-saturation-

brightness (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.

S

4 Choosing Colors

9

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 one-

dimensional, 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 on the color picker. A magnifier

window will appear in the upper left or upper right corner of

your screen. 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

10

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

4 Choosing Colors

11

color is used. This can be a real time saver. You can delete a color by pressing Delete (however,

you can’t delete a stored color that’s in use).

Color Quick Reference

Desired Action Steps

Adjust a Color Select a color property value; then click the new color on the

color sweep.

Store a Color Select a color property value; click the Store This Color button

or press F6.

Insert a Stored Color Select a color property value; click on the stored color.

Adjust a Stored Color Hold shift and click on the stored color in the Color Grid; click

the new color on the color sweep.

Rearrange Colors in the Grid Hold CTRL to drag the color to a new location.

5 Setting Sizes

12

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. In practice, this means that the

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. Turning this feature off will correct the

problem.

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.

L

5 Setting Sizes

13

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.

5 Setting Sizes

14

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,

you’ll 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. You’ll 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

second time will cause the lens to lock in place. This

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.

6 Finding Styles

15

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 inheritance–the process by which child elements

receive certain styles from their parent element–enters 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

overridden within the same style sheet are darkened. Modify darkened styles with care:

C

6 Finding Styles

16

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:

CSS Selector Search Query

.bar .barSPACE .bar .drinks .bar .drinksSPACE .barTender Match .bar Match Match .bar .drinksFree Match Match Match .bar .drinks Match Match Match Match

6 Finding Styles

17

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-style-

type 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:

CSS Style Search Query

right right: ;right -right :right right;

right: 5px; Match Match Match margin-right: 10px; Match Match Match text-align: right; Match Match Match

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 filtered–either by Bullseye or Live Search–new 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

properties–they may be added, deleted or reordered regardless of the active filter.

7 Defining Styles

18

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. The

Breadcrumb below the web browser reveals the ancestry of

elements leading up to the highlighted element. The

Breadcrumb is displayed when Bullseye is activated, and

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.

E

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.

7 Defining Styles

19

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 reveals these elements by surrounding them in boxes. Enable

Stakeout by clicking on the Web Browser toolbar, or by pressing the shortcut key, F9.

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 because–in contrast to border–it 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. Stakeout will be

disabled when using one of these browsers.

7 Defining Styles

20

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.

8 Supporting Multiple Browsers

21


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 Explorer–especially version 6.

There are two generally accepted methods of achieving this. The first method requires using

separate style sheets in conjunction with Internet Explorer’s 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 or on the

Web Browser toolbar or press the shortcut key, CTRL+F12. The current page will be reloaded

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.

B


22

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 page’s

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. By including a media attribute on the link tag which references style sheet;

2. By specifying a media type after the URL of an @import directive;

3. 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 transparently–when using Stylizer, it is as if CSS had already

provided this additional functionality.

To Tag a declaration with a target media type, click 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

declaration may only have a single target media type.

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: on the Style

Sheets toolbar. As with Media Filters, when a Browser Filter is used, an icon will appear

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:

Filter Encoded Property

Only IE 7 Or Less #margin: 0;


23

Only IE 6 Or Less _margin: 0;

Hide In IE 6 margin /**/: 0;

Hide In IE 5.5 Or Less ma\rgin: 0;

Hide In IE 5 Or Less margin/* */: 0;

9 File Management

24

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 mustn’t 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. A local HTML file is loaded in the web browser, and local CSS files referenced by the

HTML area loaded and saved locally;

2. 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 load-

to-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.

A

9 File Management

25

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. The encrypted

password is saved in Stylizer's configuration file.

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 technique–uploading a file to one place, 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 both procedures,

something is inserted into one side, with a fairly good chance, though no guarantee, that it

might come out the other.

9 File Management

26

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.

10 Text Editor Interoperability

27


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 on the Style Sheet toolbar, then Output

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.

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:

A


28

� 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.


29

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.


30

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.

11 IDE Features

31

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.

12 Appendix

32

12 Appendix

Using a Proxy Server

The embedded Internet Explorer browser uses the same settings as your standalone Internet

Explorer browser, so it shouldn’t require any additional configuration.

The embedded Firefox browser can be configured using Firefox’s “about:config” page. Here’s

how:

1. Make sure the current web browser is Firefox.

2. Navigate to about:config.

3. Click the “I’ll be careful, I promise” button (if you promise to be careful).

4. Type proxy into the text box at the top.

5. Double click on network.proxy.type and enter the number 1.

6. Double click on network.proxy.http and enter the name or IP address of your proxy

server.

7. 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.

12 Appendix

33

Keyboard Shortcuts

Shortcut When Action

CTRL+Up/Down Not editing Nudge selection up/down

SHIFT+Up/Down Not editing Grow selection up/down

SHIFT+Left/Right Not editing Grow selection right/left

Right/+ Not Editing Expand current row

Left/- Not Editing Collapse current row

CTRL+(+/-) Not Editing Expand/Collapse all rules

Enter Not editing Insert new rule or property below

Insert Not editing Insert new rule or property above

CTRL+Enter Not editing Insert rule with duplicate selector list below

CTRL+Insert Not editing Insert rule with duplicate selector list above

Delete Not editing Delete the current row

/ Not editing Insert comment

{ Editing a selector list Insert first property

: Editing a property name Move to property value

; Editing a property value Insert new property below

} Editing a property value Insert new rule below

! A property is selected Toggle !important

F2 Not editing Begin editing

Enter Editing Confirm edit

Escape Editing Cancel edit

Tab Editing Move to next editable cell

ALT+F12 - Toggle light/dark background

CTRL+F9 - Add/Remove 1 pixel red border

CTRL+F12 - Switch web browser

CTRL+T - Open New Tab

CTRL+D - Focus address bar

CTRL+N - Create new unlinked CSS file

CTRL+O - Open local unlinked CSS file

CTRL+S - Save

CTRL+Z/Y/X/C/V - Undo/Redo/Cut/Copy/Paste

CTRL+F - Find

F3 - Show/lock/hide lens

F5 - Refresh web browser

F6 - Store color

F7 - Tape measure

F8 - Disable/Enable CSS

F9 - Turn Stakeout On/Off

Documents

Stylizer Manual