Introduction

The Stylesheets section and sub-sections provide access to hundreds of properties that may be used to modify the format of the generated pages. The average user can safely ignore most of those settings. Choosing a Theme in the Styles section sets the stylesheet properties to values chosen by the Theme Designer.

The Stylesheets.Theme sub-section contains properties that control some of the basic style choices for the site, including font, color, and background options. If you want to change the way a Theme looks, start there.

The Stylesheets.System sub-section contains many further sub-sections and can be daunting at first. I recommend that new users avoid those settings until they are comfortable with how Second Site works. There's no danger in modifying property values in this section, but many of the properties there derive their value from properties in the Stylesheets.Theme sections and that's why it's better to make changes there.

Changing style properties can lead to results where the formatting differs across browsers. This is a fact of life in web page design: it takes some work and testing to get good results in all browsers. If you are concerned, leave the default settings in place. The defaults have been set for a very consisent look across browsers. If you do change style properties, try to review your site using more than one browser.

It is beyond the scope of these help files to describe styles and stylesheets in detail. If you understand HTML and CSS at least a little bit, or if you feel adventurous, browse through the settings and experiment. You can learn more about Web technologies using some of the links on the resources page. The W3Schools.com site has tutorials on HTML, and CSS, among others. (CSS stands for Cascading Stylesheets, the formal name of the technology used to format HTML elements)

Subsections

Each subsection under the Stylesheets.Theme, Stylesheets.Menu, Stylesheets.System, and Stylesheets.User sections is derived from a stylesheet script. You don't have to know anything about stylesheet scripts except that they define the styles used by Second Site. The entries within a section represent individual styles.

Clicking on the name of a subsection will change the right-hand pane to a display of the attributes of that style, which includes common CSS parameters like font-family, font-size, font-weight, font-style, and color.

Setting Colors

The official way to set colors in HTML and stylesheets is to use color codes like "#336699" which are made up of three color channels that control the amount of red, green, and blue to mix together to produce a specific color. In "#336699", 33 is the value for the red channel, 66 for the green channel, and 99 for the blue channel.

The codes use hexadecimal numbers, where each digit ranges from 0 to F. The higher the number, the more red, green, or blue present in the resulting color. When all three channels are set to the highest value, "#ffffff", the result is white. Black is "#000000", the absence of all color.

Some browsers also support color names. Color names are easier to remember, but they are not part of the HTML or CSS standards, so it is not a good idea to use color names in your documents. Second Site color properties accept any text value you supply, but Second Site recognizes the names of 140 different colors and converts the names to color codes.

Second Site includes two tools for working with colors, the Color Picker and the Color Box.

Selected Attributes

The following style attributes are present in multiple styles.

border-color

The border-color property sets the color of a border around a paragraph or block of text. See the Setting Colors section for more information about setting colors. (W3C definition)

border-style

The border-style property sets the style of a border around a paragraph or block of text. Choose a value from the pulldown list. (W3C definition)

border-width

The border-width property sets the width, in pixels, of borders around paragraphs or blocks of text. You can only set the border-width to a number. Setting the border-width to zero will remove the border. (W3C definition)

color

The color property sets the color of an HTML element. In Second Site, the color attribute usually controls the color of text, but that can vary based on the HTML element that uses the style. Other attributes, such as border-color or background-color, control the color of other visual elements. See the Setting Colors section for more information about setting colors. (W3C definition)

font-family

The font-family property sets the font for a block of text or range of characters. Users generally call these "fonts" or "font names", but the official CSS terminology is font-family, so that is the name used here. Choose a value from the pulldown list or key the value you want. (W3C definition)

font-size

The font-size property sets the font size for a block of text or range of characters. If the value is empty, the size will be the same as the surrounding text. Setting font-size to a percentage, such as 90% or 110%, means that the font size will be relative to surrounding text. It's best to use browser-relative terms like "small", "medium", and "large" for font-size, or percentages, rather than fixed point sizes. Those methods work better for users with poor eyesight or other vision problems. One challenge with using percentages is that the effects are cumulative; setting the font-size to 80% for text that is enclosed by an element that is already set to 80%, results in an effective font-size of 64% (80% of 80% is 64%). (W3C definition)

font-style

The font-style property sets the font style for a block of text or range of characters. Choose a value from the pulldown list. The most common choices are "Normal" and "Italic". (W3C definition)

font-weight

The font-weight property sets the font weight for a block of text or range of characters. Choose a value from the pulldown list. The most common choices are "Normal" and "Bold". (W3C definition)

margin

The margin properties, margin-left, margin-right, margin-top, and margin-bottom, set the amount of space for the margin of the object. If an object has a border, the margin is outside the border, whereas the padding is inside the border. (W3C definition)

padding

The padding properties, padding-left, padding-right, padding-top, and padding-bottom, set the amount of space, between the object and its margin or, if there is a border, between the object and its border. So if an object has a border, the padding is inside the border, whereas the margin is outside the border. (W3C definition)

For margin and padding properties, you must supply the units as well as the values. You can use pixels, as in "4px". You can use EMs, where "1em" is the width of an uppercase M in the current font. You can use other units, but pixels and ems are the most common.

other

The other property is a text field you can use to add other style attributes that are not available via the properties defined by Second Site. So, for example, if you want to use the letter-spacing style attribute (W3C definition) but the Second Site property section does not include a control for that attribute, you can use the other property to do so. When you enter text in the other property, you must supply the style property name and the other text required by the CSS rules for specifying attribute values. So, for example, to increase letter spacing by 1 pixel, key the following text in the other property:

letter-spacing: 1px;

You can key multiple CSS attributes in the other property. So, for example, to increase both the letter spacing and the word spacing (W3C definition), key the following text in the other property:

letter-spacing: 1px; word-spacing: 1px;

For legibility, you can add linebreaks to the text in the other property, but you must use the Text Editor to do so. Click on the textbox so that the text cursor appears, then press [F7] to open the Text Editor. If you add a linebreak between the two values, the example text above would appear as follows:

letter-spacing: 1px;
word-spacing: 1px;

Special Values

Inherit

For most style properties you can enter "Inherit" (or choose it from the drop-down list) to omit setting a value for the attribute. When an attribute is omitted, the value is inherited from the parent element, which is usually the element that visually surrounds it or precedes it. For example, if a name is included in a paragraph of text, and there is a style associated with the name, setting font-family to "Inherit" will set the font-family to the same value as the surrounding paragraph text.

Empty Values

Some style properties have blank values. Like "inherit", Second Site will not write the CSS parameter if the value is empty. For most such properties, the parameter value is not inherited from the enclosing HTML element's value; the parameter defaults to whatever value the browser assigns to elements where the value isn't specified.

Despite the subtle difference between a blank value and an inherited one, you can think of them as essentially the same.

Reference Values

Some values, especially in the Stylesheets.System section, use a reference notation for style values. For example, the value of Stylesheets.System​.Pages.Container​.border-color is:

theme:backcolor.border-color

That notation indicates that the value of the Container.border-color property is determined by a property in the Stylesheets.Theme section: Stylesheets.Theme.Colors, Backgrounds.border-color. ("theme:" refers to "Stylesheets.Theme", and "backcolor" is the shorthand for "Colors, Backgrounds".)

That notation is the method Second Site uses to allow Theme properties to influence properties under the Stylesheets.System section. Most Stylesheets.Theme properties are referenced multiple times in the Stylesheets.System section. Using references reduces the work to create a Theme and modify it, and also helps to keep the look of the site consistent.

The value of a Theme property may refer to another Theme property. Using the example above, if the value of Stylesheets.Theme.Colors, Backgrounds.border-color was "theme:backcolor.light-border-color", then the actual color value would be determined by the value of Stylesheets.Theme.Colors, Backgrounds.light-border-color. This is a form of recursion, and Second Site allows value recursion up to 12 levels deep.

On This Page