Styling DG Extras

If you go into the folder where you installed DG Extras, you'll find the Proxomitron program and various files and folders. If you then go into the html folder and then into the DailyGammon folder, you'll see a file called DG Styles.css. This is the rather bare CSS stylesheet that will allow you to format and colour your pages. It's principly concerned with the top page but more can be added for other pages if required.

It's a good idea to have a look at that file before and while you read what follows.

I don't know what editor you have available but programmers typically use an editor that is focused on plain text rather than styled text (as in Word) and that uses a fixed-width font where all characters have the same size, allowing things to line up vertically. Notepad is Windows's plain text editor. It's basic and awkward but it gets the job done if there's nothing else available. Unfortunately, the tab spacing in Notepad is 8 spaces per tab but in my editor it's set to 4 because 8 wastes too much space. That means that my nice columns don't look right in Notepad or other editors that don't also use 4. Let me know if you haven't got a suitable editor.

Css works by defining styling rules that apply to items on the page. Items can be referred to in various ways, the main ones being:

By the type of html element that it is. The page itself is body, for example.

body {
    background-color:   #88C2D8;
    font-family:        Trebuchet MS;
    }

By a class name which is like a tag given to one or more html elements so that the same style can be applied to each of them. I use tblMenu for, you guessed it, the table that contains the menu. Class names are indicated by a . in front of the name.
```
.tblMenu { 
    border:             1px solid #406070;
    background-color:   #6098B0;
    padding-top:        2px;
    padding-bottom:     3px;
    font-size:          smaller;
    }
```
By individual name, so that a specific style may be given to a specific element and/or those that it contains. Being made up by the programmer/designer, these names can, and often do, look just like class names. In the stylesheet they are indicated by a # in front of the name. There aren't any of those in DG Styles.css yet but the following could be used to style Jordan's message-of-the-day if DG Extras were to "extrasify" it. ;-)
```
#divJordansMotd { 
    border:             1px solid #406070;
    background-color:   #6098B0;
    padding-top:        2px;
    padding-bottom:     3px;
    font-size:          smaller;
    }
```

Containers are an important concept in html and css. The body (page) obviously contains everything. Then you have general boxes (in html it's a div element), paragraph boxes (p), portions of text (span), tables (table), which contains rows (tr), which contain cells (td), which contain whatever you like.

In css, it's common to see the name or the class name of a container followed by other specifiers for elements within that container. This allows that style to be applied only to those elements. The only example in DG Styles.css is .tdMenuItem a which refers to the a element (html for a clickable link) which are inside a container which has a class (that's the .) called tdMenuItem. If you want to get creative with the styling, such as changing the style of different columns in the list of matches, then we'll be adding some more of these compound selectors.

The first thing you'll see in the DG Extras stylesheet is a simple section for the body which the colour of the page and the font. There are various ways to specify colours. The usual form is #RRGGBB, where the RR, GG and BB give a code (hexadecimal) for the respective levels of red, green and blue in the colour (and the # simply says that this is the colour format used). Another format, which I don't tend to use, is rgb(R, G, B) where R, G and B are numbers. You can experiment with the colour codes by changing the amounts of red, green and blue. The lowest, 00 is black and the highest, FF gives the strongest red, green or blue. If you want to get very fancy then there's another format given as rgba(R, G, B, A) where A allows you to make things transparent. As a designer, this stuff may not be news to you - and it's great if that's the case - but if you haven't seen this before then I can tell you more about colours as we go.

The rest of what you'll see in the stylesheet is probably self-explanatory. A size in px is pixels. A pixel is literally a screen pixel and that means that things in pixels get very small as the resolution of the screen goes up. They were very common back in the days of CRT monitors at a standard resolution but a more modern approach is to use a unit called em, standing for the width of an 'm', which gets converted into the appropriate number of pixels for the display. There's also a measure, pt (points), which is from the printing industry, and possibly used in design as well, but I've only very rarely seen it used in web pages.

So, given this brief outline, have a read and a play with the stylesheet and ask any questions that you might have. More importantly, think about what changes you'd like to make to the pages. I'll work out what the css needs to be and explain it to as we go along.

If you're wanting answers right away then just put "css" and a couple of keywords into the engine, eg. "css centre the page". A billion programmer enquiries have taught the search engines what we want to know, although there's a whole mixture of old-school and new school and latest school and future school advice out there, so you might have a bit of sorting and sifting to do! ;-)

playBunny