School of GeoSciences

School of GeoSciences

Styles and Style Sheets

The textual content of a web page is usually marked up only for structure using html tags such as <h3>, <p>, <ul>, <table>, etc. The appearance of the page is controlled by style rules. If you have not specified any rules yourself then style rules are inherited, ultimately from the browser itself. For example, headings usually appear bold because that is a default browser rule. Style rules may be overridden at various levels. This is known as cascading. The overall appearance of the site is set by a site style sheet - a separate file containing a list of style rules.

If you wish to change the appearance of a branch of the site you must override rules in the site style sheet with rules in a local style sheet, or provide additional rules. You may also override rules in a single page, or in a single element of a page. By and large it is best to use style sheets that apply to branches of the site, and very bad practice to type style rules into the same sorts of tags wherever they occur.

These instructions guide you through creation of a local style sheet for use in a branch of the site, but please be aware of the Site Rules that restrict changing the appearance of School-owned pages.

The School Style Sheets

The School site uses two cascading style sheets defined in the master page template used by every page:

  1. The Basic Style Sheet: this defines the appearance of most the elements of a standard page.

  2. The Local Style Sheet: this defines the banner background, and it may define other features. The content of this style sheet is ignored by some older browsers that do not handle background images properly. The Local Style Sheet my be replaced in subfolders to customise the appearance of branches of the site.

A style rule is illustrated in the following blue heading with green underline, applied to the element as it is a one-off example.

The User Area Selector

The user area is this white panel containing the text you are reading. There is only one such area in each page so it is given an id: #siteCPanel (you will need to know this to override the styles that apply to this panel only). If you make all headings blue then you will inadvertently affect the Banner text and Menus.

Next: make a local style sheet.