Styles and style sheets



The following tutorial provides an introduction to how styles and style sheets work, and how they can be used to design and enhance your website.

Styles and style sheets are not difficult to create or edit.

You will however need to study and experiment with creating and editing styles in order to acquire a solid understanding how you can use them to take control of the appearance and layout of your website.

You can experiment with editing your website styles, without risking changing your live site until you are absolutely certain that the styles you have created, or the changes you have made will display as intended.

Once you know how to create and edit CSS styles, you will be able to change styles and style sheets to change any page design and layout with ease.

All CSS code used to define styles within your website should be located within your website's style.css file.

With SBI's web editing system, you start with a pre designed webpage design and then change the design as required by changing the styles.

Alternatively, you can if you prefer, with a website design that is blank, and then format your own styles and create your own graphics to give your website a unique visual appearance.

Once your design is complete and your styles and style sheets are updated, you can then add content to your pages using the BB2 editor. You can also easily change the design without deleting any of the existing text or images from your pages.

Styles and style sheets are edited directly within the BB2 Website Designer area of your website, and updated at your website without you ever needing to open, edit and upload the style sheet manually.

Also, whenever you add a new style to your website, the style formatting is checked to ensure that it complies with web standards, before the style is applied to your website.

You can preview your new and edited styles before applying them to your published website, and you can always undo the styling if you later notice an issue that you did not initially notice.

The above means that unless you are careless, it is virtually impossible to accidentally change your published website design in ways that were unintended when editing your website styles and style sheets.

By learning how to edit your website styles and style sheets, you will be able to change the appearance of your entire website with relative ease.

Any visual aspect of your website design will be able to be changed instantly, and without you needing to manually edit and upload a revised copy of your style sheet to your website hosting account.

Body background styles

In the early days of the internet, web browsers displayed the background color of website pages as grey by default. That browser default background color was changed to white many years ago.

This means that even if you do not specify a background color, on all modern web browsers the background will automatically be white.

You can if you wish, specify the background color as white, or you can specify a color other than white. The style shown below can be used within the BB2 Custom CSS window, and the color specification can be changed to specify the color you wish to display.

body {background-color: #333 ;}

Within the above code, the declaration background color: #333 specifies the background color of the body style. This sets the background color of the entire base page.

The color specification #333 can be replaced with a different, hexadecimal color specification such as #ffff99.

Alternatively, you could dispense with the # (pound) symbol and the alpha numeric color code, and describe the color by name such as:
body {background-color: powderblue;}.

Lists of valid color names, plus lists of valid hexadecimal color codes are available throughout the Internet and can be used with your styles and style sheets.

Plus lists of colors can also be found on many relevant websites. The text color selector used in SBI's BB2 editor also displays hexadecimal codes for each selected color.

Most hexadecimal colors require six alpha numeric characters to describe the color accurately. The example shown above which uses only three characters, is a short form of the hexadecimal color specification system that can be used to specify a limited number of colors

Other background attributes can also be included within the body style.

For example, a single image or even multiple images can be displayed within the background of a page. Declarations are used to specify exactly where the image(s) will display within the background.

These additional body style attributes will be discussed in greater detail elsewhere at this website.

With a body background color and a single background image specified, plus with some other basic styling declarations included, the body style code could display as shown below.

body {
background: url("http://www.making-websites-made-simple.com/image-files/page-header-extension.gif"); background-repeat: repeat-x;
font: 1em/1.3 Verdana, Geneva, sans-serif;
color: #000;
margin: 0;
}

Within the above style, the style name 'body', which is formally known as the style selector appears first, and is followed {within curly braces} by the style specifications, which are formally known as the declaration.

Also, in the above style: background: url("http://www.making-websites-made-simple.com/image-files/page-header-extension.gif");
describes and calls the specified background image.

The following declaration: background-repeat: repeat-x;
Tells the web browser to display an unlimited number of repeated copies of the background image in a horizontal direction.

The alternative repeat-y declaration displays an unlimited number of copies of the background image in a vertical direction.

The declaration no-repeat causes the background image to display only once in each direction.

Displaying no repeat declaration in the style, by default causes the background image to repeat in both the horizontal direction and in the vertical direction, and would fill the entire page background with duplicates of the image.

The declaration: font: 1em/1.3 Verdana, Geneva, sans-serif;
Describes the default font used on the page as being 1em in size, which is equivalent to 12pt.

The abbreviation pt stands for point, which is a typographical measurement. 1pt is approximately equivalent to 1/72 of an inch.

The declaration /1.3 specifies the line height as a vertical distance of 1.3 ems from the base line of one line of text to the base line of the next line of text.

Alternatively using the line spacing declaration /2.0 would display the text with double line spacing, and the declaration /3.0 would display the text with triple line spacing.

The declaration Verdana, Geneva, sans-serif specifies Verdana as the primary font and Geneva as the 2nd preference if Verdana is not available.

Alternatively, a default sans-serif font would be displayed if neither of the two previously specified fonts are available.

The declaration color: #000; describes the default text color.

The declaration margin: 0; tells the web browser that the page should display without default margins. Which means that page elements will display adjacent to the browser frame, unless the website designer specifies otherwise.

Without the margin: 0; setting, each page would by default display with a 10px margin along each edge of the page.

Other styles

All other style declarations are structured similar to the above examples.

#Header {
min-height: 13.5em;
height: 13.5em;
width: 96em;
}

In the style shown above, the # (pound) symbol displayed before the selector name Header, indicates that this is an ID style, which should be used only once within each page.

In the style displayed below, the . (period) symbol displayed before the selector name Navigation, indicates that this is a CLASS style, which can be used multiple times within each page.

.Navigation li {
margin: 0;
list-style: none;
display: block;
}

More examples of styles and style sheets, including selectors, declarations and their purpose and use, will be described elsewhere within this website.

Return to the top of the styles and style sheets page.

Return to the website styles page.




















































































Article by ©