Element Styles and Style Sharing

Contents and Styles

A page element may contain contents and styles. For example, a paragraph may have tex [Hello World!] as its contents; a paragraph's styles include text color, background color, font family, font size, columns, border, cursor, etc. An image element may have an image URL as its contents; an image's styles include border, size, cursor, etc.
Web page editing is to create page elements, set element contents and styles.

What is style sharing

Suppose you have 10 paragraphs and you want their text color to be blue. You may just set one paragraph's text color to be blue and all other paragraphs' text all becomes blue automatically. You do not have to set each paragraph one by one. That is, these paragraphs share the same color style. But you may have another 5 paragraphs and you want their text color to be red. That is, different paragraphs share different groups of styles. In HTML specifications there are rules for determining which elements should share which styles, it is called Cascade Styling. The code for specifying which elements should share which styles in a web page is called the web page's Cascade Style Sheet (CSS). The code can be in a file and the file is called a CSS file.
By using Limnor HTML Editor, you do not have to learn CSS rules and CSS coding. Limnor HTML Editor does CSS code generation for you, visually. This chapter explains how you can take advantage of style sharing to simplify your web page editing.
Note that you should pay attention in using style sharing. It greatly simplifies web page authoring. It gives your web pages consistent look and feel.

Default style sharing

Let's create several paragraphs in a web page. Let's set the text color of one paragraph to green.

You can see that all paragraphs' text color becomes green, not just the paragraph under editing:

By default setting a style will apply it to all the same type of elements on the page. In the example above, setting color of one paragraph will apply the color to all paragraphs on the page.

Named style sharing

Make all the same type of elements to have the same styles may not always be what you want. A styleName property can be used to group styles. The elements with the same styleName share their styles.
Let's give a paragraph a styleName [pstyle1]:

Set the color of the paragraph. You will see that the color setting does not affect other paragraphs:

Now let's set another paragraph's styleName to be the same as [pstyle1], you will see that its color changes too:

Note that if you do not want to let other element to share styles, before setting a style be sure to set styleName to a not-blank value or set styleShare to "NotShare". If styleName is left blank then what you set to the element be will be applied to all other elements of the same kind. If you make such a mistake then you may correct it by selecting the HTML element, click "Show page head" button, click beside "Page classes" to show CSS classes, find the tag of the element under "Page classes", click  beside it to delete it.

Priority of style share

A default style share will be applied to elements even they have style names but do not have the style set. We use examples to explain it.

Suppose paragraph A is given styleName "p1"; paragraph B's styleName is blank.

Case 1: paragraph A's color style is not set. Set paragraph B's color to blue; paragraph A's color also become blue even though paragraph A's styleName is not blank.

Case 2: paragraph B's color style is not set. Set paragraph A's color to blue; paragraph B's color remains not set.

Case 3: paragraph A's color style is red. Set paragraph B's color to blue; paragraph A's color remains red.

 

Not to share styles

If you want to make some style changes but you do not want to let other elements to share the changes then you may set styelShare to NotShare first. After setting property styleShare to "NotShare", new modifications will not be shared by other elements. It will not affect already shared styles.

Let's use table cells to illustrate the effect of NotShare.

Case 1: set a cell to NotShare and then use center-alignment

We can see that all other cells are not affected:

Case 2: give a name to a cell's styleName, then make it right-alignment

We can see that setting right-alignment of this cell does not affect other cells

So, Case 1 and Case 2 both stopped style sharing. But with Case 2, we can make other cells share the styles by giving the same styleName, as Case 3 shows below.

Case 3. give a cell the same styleName of Case 2,

We can see that it is also automatically right-aligned:

Now changes made in one cell will automatically be applied to all other cells sharing the same styleName. Let's change the cell's background color:

We can see that it changes more than one cell:

What if we do not want our changes to be applied to other cells? We need to set styleShare to NotShare before doing modifications, as shown in following case.

Case 4. set styleShare to NotShare and then change color to red.

We can see that changing of the color does not apply to other cells:

Note that NotShare does not apply to the following styles: linearGradientStartColor, linearGradientEndColor, and linearGradientAngle

Sharing styles between web pages

The styles used in one page can be shared by other pages. It not only simplifies your authoring work, but also makes all your web pages have consistent look and feel.
Suppose you have authored a web page named PageA.html. Now you start authoring web page PageB.html. You may let PageB.html use styles already created in PageA.html: 1. Click HTML element in the parent element list; 2. click [Show page head] button; 3. Click button C on the element toolbar; 4. Set href property to PageA.css

Styles/Properties Allowed by Most Elements

A style or a property is an attribute of an element. A style can be shared by many elements. A property belongs to only one element. The available styles are defined by HTML specifications. You cannot create your owner styles; you can only change style values. There are properties defined by HTML specifications. You may also create new properties. You may change values for properties.
The styles and pre-defined-properties available to be applied to different kinds of elements are different. This section introduces briefly some styles and properties allowed by most elements. They are presented in following groups: general, columns, border, box, formatting, background, font, position, margins and paddings, size and location.

For simplicity below we refer to both styles and properties as properties.

General properties

The properties in this group are available to almost all kinds of elements.

id

It is a unique identifier for an element.

accessKey

It is a shortcut key to activate/focus an element

cursor

It specifies the type of cursor to be displayed when pointing on an element.

class

It lists class names separated by spaces. A class name identifies a group of styles.

title

It is extra information about an element

Column Properties

You may make page body, paragraphs and some other elements multiple columns. In this example, the first paragraph is set to have 2 columns.

columnCount

the number of columns an element should be divided into

columnWidth

Width of each column

columnGap

Width of gap between columns

columnRuleStyle

style of the rule between columns

columnRuleWidth

width of the rule between columns

columnRuleColor

color of the rule between columns

Border Properties

Border properties let you specify styles for element border. For example, border width, border color, border line style, corner radius, etc. This example shows a blue border with corner radius 10.

borderBottomColor

color of the bottom border

borderBottomStyle

the style of the bottom border

borderBottomWidth

Sets the width of the bottom border

borderColor

Sets the color of the four borders

borderLeftColor

Sets the color of the left border

borderLeftStyle

Sets the style of the left border

borderLeftWidth

Sets the width of the left border

borderRightColor

Sets the color of the right border

borderRightStyle

Sets the style of the right border

borderRightWidth

Sets the width of the right border

borderStyle

Sets the style of the four borders

borderTopColor

Sets the color of the top border

borderTopStyle

Sets the style of the top border

borderTopWidth

Sets the width of the top border

borderWidth

Sets the width of the four borders

outlineColor

Sets the color of an outline

outlineStyle

Sets the style of an outline

outlineWidth

Sets the width of an outline

borderBottomLeftRadius

Defines the shape of the border of the bottom-left corner

borderBottomRightRadius

Defines the shape of the border of the bottom-right corner

borderImage

A shorthand property for setting all the border-image-* properties

borderRadius

A shorthand property for setting all the four border-*-radius properties

borderTopLeftRadius

Defines the shape of the border of the top-left corner

borderTopRightRadius

Defines the shape of the border of the top-right corner

boxShadow

Attaches one or more drop-shadows to the box. for example, 10px 10px 5px #888888. you may use the color picker to get color value.

Box properties

You may set width and height properties for a visible element.  Other box properties include minimum width and height, maximum width and height. [overflowX] and [overflowY] let you specify how the contents of an element should be displayed if the contents are larger than the element box.

overflow

Specifies what happens if content overflows an element's box

overflowX

Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area

overflowY

Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area

height

Sets the height of an element. It can be auto, inherit, or a length value, i.e. 100px, or in percent of its container, i.e. 100%

maxHeight

Sets the maximum height of an element. It can be none, inherit, or a length value, i.e. 100px, or in percent of its container, i.e. 100%

maxWidth

Sets the maximum width of an element. It can be none, inherit, or a length value, i.e. 100px, or in percent of its container, i.e. 100%

minHeight

Sets the minimum height of an element. It can be none, inherit, or a length value, i.e. 100px, or in percent of its container, i.e. 100%

minWidth

Sets the minimum width of an element. It can be none, inherit, or a length value, i.e. 100px, or in percent of its container, i.e. 100%

width

Sets the width of an element. It can be auto, inherit, or a length value, i.e. 100px, or in percent of its container, i.e. 100%

Formatting properties

Formatting properties are for formatting text in an element, including color, language, direction, alignment, decoration, etc.

color

Sets the color of text

lang

The language of the element's content. Use ISO Language Codes.

direction

Specifies the text direction/writing direction

letterSpacing

Increases or decreases the space between characters in a text. It can be normal, inherit, or in length such as 2px

lineHeight

Sets the line height. It can be normal or inherit, or a number that will be multiplied with the current font size to set the line height, or a fixed line height in px, pt, cm, etc., i.e. 1px, or a line height in percent of the current font size, i.e. 20%

textAlign

Specifies the horizontal alignment of text

textDecoration

Specifies the decoration added to text

textIndent

Specifies the indentation of the first line in a text-block. It can be a length defining a fixed indentation in px, pt, cm, em, etc., i.e. 5px, or be the indentation in % of the width of the parent element

textTransform

Controls the capitalization of text

verticalAlign

Sets the vertical alignment of an element. It can be a length which raises or lowers an element by the specified length, i.e. 2px, negative values are allowed;  it can be in a percent of the "line-height" property, i.e. 10%, which raises or lowers an element, negative values are allowed; it can be "baseline" which aligns the baseline of the element with the baseline of the parent element, this is default;  it can be "sub" which aligns the element as it was subscript; it can be "super" which aligns the element as it was superscript; it can be "top" indicating that the top of the element is aligned with the top of the tallest element on the line; it can be "text-top" indicating that the top of the element is aligned with the top of the parent element's font; it can be "middle" indicating that the element is placed in the middle of the parent element; it can be "bottom" indicating that the bottom of the element is aligned with the lowest element on the line; it can be "text-bottom" indicating that the bottom of the element is aligned with the bottom of the parent element's font; it can be "inherit", specifying that the value of the vertical-align property should be inherited from the parent element

whiteSpace

Specifies how white-space inside an element is handled

wordSpacing

Increases or decreases the space between words in a text. It can be normal or inherit, or in a length defining an extra space between words in px, pt, cm, em, etc., i.e. 3px. Negative values are allowed

textAlignLast

Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify"

textJustify

Specifies the justification method used when text-align is "justify"

textOverflow

Specifies what should happen when text overflows the containing element. It can be clip to clip the text; or ellipsis to show ..., or specify a string to be displayed

textShadow

Adds shadow to text. IE does not support it. It is specified as h v blur (optional) color (optional). h: The position of the horizontal shadow. Negative values are allowed. v: The position of the vertical shadow. Negative values are allowed. example:2px 2px #ff0000

wordBreak

Specifies line breaking rules for non-CJK scripts. Not supported by Opera.

wordWrap

Allows long, unbreakable words to be broken and wrap to the next line

Background properties

Background properties let you set element background color, image, size, position, etc.

backgroundImage

The background-image property sets one or more background images for an element.

backgroundRepeat

The background-repeat property sets if/how a background image will be repeated

backgroundPosition

The background-position property sets the starting position of a background image.

backgroundColor

The background-color property sets the background color of an element.

backgroundAttachment

The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.

backgroundSize

The background-size property specifies the size of the background images.

backgroundClip

The background-clip property specifies the painting area of the background.

backgroundOrigin

The background-origin property specifies what the background-position property should be relative to.

Font properties

Font properties let you specify font family, font size, font style, font weight, font variant and color.

fontFamily

Specifies the font for an element.

fontSize

Sets the size of a font.

fontStyle

Specifies the font style for a text.

fontWeight

Sets how thick or thin characters in text should be displayed.

fontVariant

Specifies whether or not a text should be displayed in a small-caps font. In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.

color

Sets the text color

Position properties

Position properties let you specify the location and visibility of an element.

clip

Clips an absolutely positioned element. It can be auto, inherit, or rect(top, right, bottom, left), i.e. rect(0px,50px,50px,0px)

display

Specifies how a certain page element should be displayed

visibility

Specifies whether or not an element is visible

position

Specifies the type of positioning method used for an element (static, relative, absolute or fixed)

clear

Specifies which sides of an element where other floating elements are not allowed

float

Specifies whether or not a box should float

right

Specifies the right position of a positioned element. It can be auto, inherit, or a length value, i.e. 100px, or in percent of its container, i.e. 100%

left

Specifies the left position of a positioned element. It can be auto, inherit, or a length value, i.e. 100px, or in percent of its container, i.e. 100%

top

Specifies the top position of a positioned element. It can be auto, inherit, or a length value, i.e. 100px, or in percent of its container, i.e. 100%

bottom

Specifies the bottom position of a positioned element. It can be auto, inherit, or a length value, i.e. 100px, or in percent of its container, i.e. 100%

zIndex

Sets the stack order of a positioned element

tabindex

Specifies the tab order of an element (when the "tab" button is used for navigating).

opacity

Sets the opacity level for an element, in percentage of 0 to 100.

Margins and Paddings properties

These properties specify an element's margins and paddings.

marginBottom

margin can be specified in following ways: auto, inherit, or in percent, i.e. 1%, or in length value, i.e. 2px

marginLeft

marginRight

marginTop

paddingBottom

padding can be specified by length, i.e. 2px, or in percent, i.e. 1%

paddingLeft

paddingRight

paddingTop