Website styles

Within the BB2 editor, many different styles and layouts can be created and used to display a broad range of different effects, and make adjustments to the visual appearance of a website.

When using the editor, most effects that a website owner will usually want to create at their website, can be created and adjusted simply by clicking relevant buttons within the editor interface.

There are however, always instances in which a website owner and designer will want to create unique features, which display either on each page at the website or display within a single page or on several pages at the website.

To accommodate these types of unique non standard features, BB2 enables users to add unique html code and unique CSS code, either to individual pages or throughout the entire website.

Plus, when a unique feature is added throughout a website, it is possible to easily turn that feature off on individual selected pages. Alternatively, the feature can be saved as a reusable block and then added to selected pages only.

This provides designers and users with a level of control and sophistication, usually seen only on professionally designed and hand-coded, expert managed websites.

In addition, any website features can be added to a page, tested within a browser and visually verified before publishing the changes to the web. If you later wish to remove or temporarily hide a feature, that can also be easily accomplished.

The video shown below, provides a demonstration of using the Add Custom CSS feature within SBI's BB2 Site Designer to add or edit website effects originally specified within the site's style sheet.

Click the video to play.

Video copyright © SBI. Courtesy of YouTube.

You can create and manage a successful website without needing to understand or edit html code or CSS script.

However, if you wish to take full control of the visual appearance of your website, then you will need to learn at least some basics about how CSS script works.

This section of Making Websites Made Simple is intended for use by individuals who wish to learn how to change and enhance the visual appearance of their website pages.

Within this section, you will find information which will enable you to add unique effects to your website, plus change the existing appearance.

Editing effects requires a basic understanding of CSS script. We will take each demonstrated example technique in turn and walk you step-by-step through using that technique within your website.

You will then know how to add and edit script to create desired effects.

Editing website appearance is quite simple once you know how to do it.

CSS controls the appearance and positioning of all elements displayed within a well designed website, including text, photographs and buttons, etc.

It is as though the CSS scripts represent an architects specifications for a building, while the html code represents the structure, including the foundations and the framework and components of the floors, walls and roof of the building.

The contents of a website are like the fittings and furnishings in a building, and are the last items to be added.

Unlike in a physical building, correctly developed and applied CSS, enables colour schemes, text, heading sizes and even the positioning of elements on the pages of a website to be changed in an instant simply by changing the CSS specifications.

For example, if an item displayed on a website is colored blue. By changing the specification for that item to red, each instance of that element throughout the entire website is instantly changed to red.

The style specifications for a website are contained within a document known as a style sheet. This is similar to the ways in which specifications for a building are contained within documents generated by an architect.

Imagine if an architect could by changing the specifications for a completed building, change the specified items in the actual building. Doors which were painted green, would all instantly be changed to blue.

Of course, doing that is impossible with a physical building, although any aspect of a well designed website, other than the words and image/video contents of the site, can be instantly changed by changing the specifications in the style sheet.

Heading Fonts

Regarding the use of non standard heading fonts. Website owners sometimes want to use non standard fonts in headings, as shown in the example above.

Only standard fonts (those available on all computers) are recommended for live text. You can however, create a heading as a graphic image displaying any font you wish to use.

Next, add the relevant heading text to the heading image as an alt tag.

Then, apply the code calling the graphic image and the alt tag to the page through a raw html block located in the appropriate position within the page.

The code used to achieve the example website style shown above, is displayed below. Copy the code, create your own heading graphic, and change the code details to suit your requirements.

<img alt="The alt tag text" src="/image-files/heading-fonts-1.png" height="40" width="500" /></a>

For SEO purposes, using a graphic as a heading does mean that you lose the benefit of the H1 heading tag. So if you do use an image as a heading, you will probably also want to add at least one additional instance of the heading keywords to your text.

Return to the top of the styles page.

Return to the create a website page.

Article by ©