CSS stands for Cascading Style Sheets. CSS is used to define how we display the HTML elements of our web pages. Using CSS, we can design practically how we want the site to appear in terms of looks.
For example, let us say that we want the word "border" to have a small border. CSS is what makes having a border possible. This guide will show you how to use CSS, how to apply it to Wikidot, and provide various reference material for your benefit.
Note: A great source for CSS information is w3schools.com
Defining CSS
So, how did we get a border? To use CSS, there are a few things you need to know about HTML. CSS can be used to define or modify many different HTML tags, such as a, div, span, img, table, td, p, and many others. To get that border around "border", we used CSS in a span tag.
To define CSS in a tag, in HTML you would do this:
<span style="border: 1px solid #888;">border</span>
You use the style= to indicate that you want to describe the span. In the Wikidot syntax, we use this:
[[span style="border: 1px solid #888;"]]border[[/span]]
Notice that there is seemingly no difference. We define the CSS in the same way. You can do the same thing in any HTML tag, though in the Wikidot syntax, this becomes impossible to do it inline for a (links), img (images), and others, though it can be done with another method to be described later.
CSS-ing the Entire Page
There is another way to define CSS, and this is the method by which is used in order to affect the web-pages as a whole rather than individual tags. In the HTML code, CSS can be defined in this way:
<html> <head> <style type="text/css"> THE CSS </style> </head> <body> </body> </html>
Wikidot automatically does this for every single page. All you have to do is edit a single box in order to affect many pages in the site.
Under the Site Manager, click Appearance, then Custom Themes. There, you can modify the CSS. For example, let us say that we wanted to cause all links to be red. Open up the theme box and type in the following code:
a{ color: red; }
Press Save. You can apply your custom theme by pressing Themes in the site manager bar and selecting the theme that you want displayed over the whole site. If you press save, every single link will become red.
The following section will describe how to define other attributes of the site.
CSS Selectors
Selectors refer to elements that make up an HTML page. We select these elements so we can style them with CSS. Selectors are styled in blocks (framed by curly braces ({…}) that contain properties and values). The syntax typically looks something like this:
selector { property: value; property: value; property: value; }
This is how we might style the HTML <body> … </body> section of our web site using CSS:
/* --------------------------------- */ /* CSS comments are framed like this */ /* --------------------------------- */ /* 'body' is the selector' */ /* 'margin', 'padding', 'background' and 'color' are properties /* /* values for each property follow the colon (:) and end with a semi-colon (;)*/ body { margin: 0px; padding: 0px; background: #0000cc; color: #333333; }
Selector Definitions
There are various kinds of selectors…