Southend Linux User Group

Add Style Rules

Using Embedded Style Sheets

To use an embedded style sheet, you define a style block which should be placed in the <HEAD> section of the document. This block (delimited by the <STYLE> and </STYLE> tags) consists of a set of style rules, where each rule defines a style for an HTML element or group of elements.

The generic syntax for a style rule is as follows:
selector { property:value ; property:value; . . . }.

A style rule has two parts (notice the curly brackets {}separating the two parts),

  • A selector that identifies an HTML element or group of elements
  • A declaration of the style property:value pair to be applied to that

Using Linked Style Sheets

You can keep your style sheet in a separate file and link to it from a
document or set of documents, using a <LINK> tag in the <HEAD>
section of the linking document, as follows:

    <link rel="stylesheet" href="../myStyles.css" type="text/css">

The linked sheet (mystyles.css) consists of a set of style rules, exactly like an embedded style sheet, except that the style rules are not enclosed in the surrounding <style> tag.

A sample style sheet is show below

    body     {margin-top:0px;margin-left:10px;background-color:#ffffff }
    body.idx {margin:0; background-image:url(none);background-color:#a7daff;}

    22       {margin-top:0px;margin-left:-10px; height:90px;text-align:center; 
              font-style:italic; font-weight:bold; 
              background:#a7daff; color:#00008B;
    h3       {font-style:italic; color:#00008B; }

    pre      {font-size:12pt;}

    caption  {display:none;}
    th       {text-align:left;font-weight:normal;height:30px;}
    td       {vertical-align:top;height:25px;}

    .bld     {font-weight:bold;color:#000000;}
    .none    {list-style-type: none;text-indent:-2pc;}
    .hide    {display:none;}
    .page    {page-break-after: always }
    .note    {margin-left:2em;background-color:#f5deb3;}
    .warn    {margin-left:2em;background-color:#ffd000;}
    .border  {margin-left:2em;border:1px double black;background-color:#ffffe0;}

To create a linked style from a (template) page which contains the styles you want, simply open any text editor (e.g. Notepad) and copy and paste the styles into the text file. Instead of saving the file as *.txt, save it as *.css.
Next add the <LINK> command as shown above to your web page (the example links to a css file called myStyles.css contained in the parent folder).

Remember that the styles on externally linked stylesheet(s) can be overriden by styles declared locally (i.e. on the web page) between style tags, or by inline styles. Once an external style sheet has been created, any page in your web site can use it and it will ensure a consistent style across your site.

Should you wish to change a style, it only has to be changed once, on the external style sheet. The changes will then be applied to all web pages that are linked to that style sheet., considerably reducing the maintenance overhead on large sites.

Using Imported Style Sheets

An external style sheet may also be imported into a document by using the @import property in a style sheet:

    @import: url(mystyles.css) ;

The @import tag should appear at the beginning of a style block or a linked sheet, before any declarations. Imported style sheets rules are applied before the rules defined for the containing style sheet, putting them at the bottom of the “pecking order” of the importing sheet.

Author: Alan Campion - Page reference: 933
Last modified: Alan Campion - 2015-03-01