Stylesheets Section

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

The Color Box in the Second Site toolbar is designed to help you pick colors. When you set a color property to a color name or to a color code, the Color Box shows the color and the color code. See the Color Box page for more details including a chart of all the color names that are valid in Second Site.

Selected Attributes

The following style attributes are present in multiple styles.

The border-color property sets the color of a border around a paragraph or block of text. See the Setting Colors section.

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

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.

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

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.

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

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

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

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.

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.

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.

Special Values

Inherit

For most style properties you can enter "Inherit" (or choose it from the drop-down list) to avoid 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.Content.border-color is:

theme:backcolor.border-color

That notation indicates that the value of the Content.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 in 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.