Advanced Style Settings (CSS)

The "Advanced Style Settings" button can be used to "style" many visual aspects of your page, and the elements contained within it. You can also include external style sheets (.css files) via this button. When initially clicked, you are presented with 3 options:
  • Include an External Style Sheet (*.css) - Use this to embed an external style sheet into your page
  • Define Global Document Styles - Use this to define visual styles for every occurrence of a particular element, or elements - for example if you want all the links in your page to appear in a certain way
  • Create a Custom Style - Use this to create a set of styles which you can reuse again and again throughout your page, and assign to multiple elements via the "Style Class" option when inserting various elements into your page
    Include an External Style Sheet (*.css)
    External Style SheetThe URL of the external style sheet you wish to include. Use the "Browse" button to select a file from your local computer/network
    Media TypeThe "Media Type" setting allow you to specify what type of output device the style sheet is aimed at. Normally this will be a computer "screen", however you may wish to include multiple style sheets for making the page accessible for viewing on a projector, or a hand-held device, etc

    Define Global Styles / Create Custom Style
    Apply To All(Define Global Styles only) - Select the HTML "tags" which the style you are creating should be applied to. Hold down "Ctrl" whilst clicking to apply to multiple tags
    Class Name(Create Custom Styles only) - Enter a unique name for your "Style Class" to be used to identify it throughout your page (This name will be present in the various "Style Class" drop-down lists
    Pseudo ClassA Pseudo Class is a sub-class, allowing once set of visual styles to be defined as the "default", and another set of visual styles to be defined to alter the appearance of the element(s) whilst, for example, the mouse "hovers" over it.
    Preview AreaThe "Preview Area" can give an instant visual indication of how your styles will look

    Style Settings

    BACKGROUND

    Background Color Sets a single color to be used as the background.
    Background Image Allows you to specify an image that will be used as the background.
    NOTE: All paths are 'relative' to the current directory.
    Background Position Sets the 'offset' of the background image from the top-left corner.
    For information on units Click Here
    Background Settings TILE - Causes the background image to be tiled in the horizontal, vertical, or in all directions, or to only display once, without being tiled.
    SCROLL - Controls whether the background image should scroll along with the content it is behind.

    FONT

    Foreground Color Sets a single color to be used as the foreground.
    Font Family Sets the 'font' for text to be rendered in.
    The 'Include Alternative' option can be used to use a similar font, if the selected font is not installed on a users system.
    Font Size Sets the size of the text.
    For information on units Click Here
    Font Style Sets the 'font' style for rendered text.
    Font Variant Sets the 'font' variant for rendered text.
    In a small-caps font, the glyphs for lowercase letters look similar to the upper-case ones, but in a smaller size and with slightly different proportions.
    Font Weight Sets the 'boldness' of the 'font' for rendered text.
    Font Stretch Stretches/Compresses the 'font' for rendered text in the horizontal direction.
    Text Indent Sets an 'indent' (margin) to the left of rendered text.
    For information on units Click Here
    Text Alignment Sets the alignment of rendered text within the specified element.
    Text Decoration Allows effect such as over/underline to be applied to rendered text.
    Text Transform Affects the 'case' of rendered text.
    Letter/Word Spacing Sets the spacing between letters/words in rendered text.
    For information on units Click Here
    Line Height Allocates the 'height' of the current line.
    For information on units Click Here
    White Space Controls how 'White Space' within the element is handled.

    MARGINS & BORDERS

    Margins Sets the distance between any adjacent content.
    For information on units Click Here
    Padding Sets the distance between the content and the edge of the element.
    For information on units Click Here
    Border Width Sets the width of a border around the element
    Border Color Sets a single color to be used as the border color.
    Border Style Alters the 'style' of the border:
    Dotted
    Dashed
    Solid
    Double
    Groove
    Ridge
    Inset
    Outset

    SIZE & POSITION

    Size Sets the width/height of the element.
    The 'min' values can be used to set the size of the element if it contain no content.
    The 'max' values can be used to constrain the size of the element. If the content within it exceeds these values, it will 'wrap around'.
    For information on units Click Here
    Position Sets the initial position of the element.
    The 'Type' setting controls how these position are interpreted.
    For information on units Click Here

    MISC

    Display Type Define how/what the element should be displayed as.
    Cursor Change the cursor whilst the mouse is over the element.
    A 'custom' cursor file (.cur, .csr) can also be specified, to allow you to use your own cursors on your pages!
    Scrollbars If the object is one which can have scrollbars (i.e. <BODY> or <TEXTelement>), these settings allow complete control over the colors of each component part of the scrollbars

    Next Topic: Embed Media >