The Wikka Style Sheet: Wikka.css

CSS stands for Cascading Style Sheet. It is a plain text file that contains all of the style code for a page. There are actually more than one CSS included with WikkaWiki, but most people will only edit one, wikka.css. (there is also a style sheet for print, one for xml, and some of the actions have their own CSS) Let's take a look at what we can accomplish with just a few changes. But, first we will have to examine the structure of the page. Open your saved dummy page in an editor, and look for this, mine is at the end of line 15, yours should be close if not exactly on the same line:

And for this, which should be at the end of your page:

Everything between these two tags is the body of your page. All the content of the page, including the header, navigation, footer etc... Everything you see in your browser window is included in the body of your page. Think of 'body' as a container, containing smaller containers within it. (More on that later.) And that body is styled by this section of code in wikka.css:

Note, that this is a cascading style sheet, that means that sections within the body can be styled with rules that overwrite the rules set for the body. But, before I get into that, lets dissect the rules for body. Just remember, for now, that these are default rules, they are applied to any element on the page that doesn't get another rule applied to it.
The first rule applied is font-family. The rule here is that first the browser will check to see if Verdana is installed, and display text in that font if it is. If not, move on to Tahoma, then Ariel, Helvetica, and finally, if none of those fonts are found, we will settle for whatever default sans-serif font is found. Next is font-size, set at 13px. ('px' means pixels.) This, as the name implies, sets how large the text is. Now we come to one of these: /* This is the start of a comment, it just tells your browser, 'ignore what follows'. Later in the line, we see */, which is the end of that comment. So, the rule, 'text-align: justify;' is ignored by your browser, as is the somewhat misleading comment 'comment out this line if you really need justified text'. Misleading, because it should read 'un-comment out this line if you really need justified text'. Below that is line-height, this controls the spacing between lines. Then we come to color and background-color, which refer to the color of text, and the background. The value for the colors are in hexdecimal. If you are using FireFox, you can get a plugin called ColorPicker that will allow you to get the hex value of any color you see in your browser just by hovering your mouse over it.



more later

---

Categories:
WikkaStyle