Learn how easy it is to sync an existing GitHub or Google Code repo to a SourceForge project! See Demo

Close

#10 [wish] The site should use stylesheets (CSS)

closed-wont-fix
None
5
2000-11-12
2000-10-13
Raphaël Quinet
No

Instead of using <table> and <font> tags, the site should use the
cascading style sheets (CSS). This would reduce the amount of
HTML code, and it would ensure that the same fonts, colors and
background effects are used consistently on all pages.

Here is a suggestion for a global style sheet:

/* Top-level block elements */

BODY
{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #000000;
background: #ffffff;
}

H1
{
font-family: "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
font-size: 18pt;
color: #000000;
}

H2
{
font-family: "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
font-size: 14pt;
color: #000000;
}

H3
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
color: #000000;
}

H4
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
text-decoration: underline;
color: #000000;
}

TD, TH, DIV, PRE, CODE, SPAN, P, OL, UL, DL, DT, DD, LI, BLOCKQUOTE
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #000000;
}

/* Colors for the links */
/* Netscape 4.x ignores the "hover" part, but MSIE shows it correctly */

A
{
cursor: pointer;
background: transparent
}

A:link
{
color: #3333ff;
text-decoration: none
}

A:visited
{
color: #000066;
text-decoration: none
}

A:active
{
color: #ff0000;
text-decoration: none
}

A:hover
{
color: #0000ff;
text-decoration: underline
}

/* silly examples that could be used for certs or other things */

P.mastermaster
{
border: #8000c0 3px solid;
padding: 2%;
background: #8000c0;
}

P.novicemaster
{
border: #8000c0 3px solid;
padding: 2%;
background: #808000;
}

Discussion

  • hiya, thanks! um. how do i then use these? i am a _complete_ html novice, i deliberately avoided learning it :) :)

     
  • To use these stylesheets, you have to store the global stylesheet somewhere on the web server (e.g. /style.css) and include a reference to it in the header of every page:
    <HEAD>
    <TITLE> ... </TITLE>
    ... (other stuff like META tags) ...
    <LINK REL="stylesheet" TYPE="text/css" HREF="/style.css">
    </HEAD>

    The styles that are defined without any qualifier will apply to all matching elements (like BODY, H1-H4, TD, TH and others). The styles that have an extra qualifier (like P.mastermaster above) will only apply to the elements that are given the corresponding class. For example, if you want the purple background defined for the "mastermaster" class, you would define your paragraph like this:
    <P CLASS="mastermaster"> text goes here </P>

    The advantage of using a stylesheet is that you can reduce the amount of HTML code included in each page, because you simply link to your stylesheet and you do not have to use lots of <FONT> and <TABLE> tags to get the desired effects. On the other hand, this only works in the browsers that support CSS, but this has been the case since version 4.0 of the two major browsers.

    -Raphael

     
  • hiya raph, ok. given that this is a script-usage issue rather than a programming issue, i'm going to close this one with a note to create some examples that use these. i _did_ use a css earlier in the example site, however given that it activates javascript which is unpopular in some environments [read, netscape] i switched it off, in favour of explicit generation of dynamic content using the <include/> method. does sort-of the same thing and it's more portable.

     
  • hiya raph, ok. given that this is a script-usage issue rather than a programming issue, i'm going to close this one with a note to create some examples that use these. i _did_ use a css earlier in the example site, however given that it activates javascript which is unpopular in some environments [read, netscape] i switched it off, in favour of explicit generation of dynamic content using the <include/> method. does sort-of the same thing and it's more portable.

     
    • assigned_to: nobody --> lkcl
    • status: open --> closed-wont-fix