CSS Primer
Guide Index Make a Wikidot Site»

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, but such 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 CODE
        </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. This will be described in a later section.

For now, Wikidot has a nifty CSS module that allows you to simply add CSS code to a single page. All you need to do is add the following to a page:

[[module CSS]]
THE CSS CODE
[[/module]]

You would place the code in the place where it cays THE CSS CODE, and immediately that CSS is added to the page with the module.

The Syntax

CSS code is done similarly to how we added a border. However, rather than styling each individual tag, CSS allows us to make declarations for certain elements. It is analogous to a rule sheet telling the various HTML tags what to look like. The tags would read this rule sheet and then attempt to follow it as best as possible.

In general, one of these rules looks as follows:

.highlight{background-color:yellow;}

Here, we describe each part of the rule:

  • .highlight is a selector. The selector indicates what is going to be styled. In this case, any element designated with the class "highlight" will follow this rule.
  • background-color:yellow; is a declaration. A declaration is the actual rule that the selector will follow. A rule can have more than one declaration, but they must be separated with semicolons (;). You should note that this declaration has a semicolon on the end. If we wanted to add another declaration, we would add it after the semicolon. Every declaration has two parts:
    • background-color: is a property. A property is the specific part that will be styled for the selector.
    • yellow; is the value of the property. This is the style for the property of the selector.
  • Note that the declarations are surrounded by curly braces ({…}). The braces indicate that a certain set of declarations belong to a certain selector.

So, let us say we have a beautiful <span> tag by the name of Miss Highlight. She stands out among the crowd of other words since she has her own <span> declaration, as indicated below.

Unlike us, the beautiful [[span class="highlight"]]Miss Highlight[[/span]] has her own HTML tag.

To stand out, though, Miss Highlight needs to understand the rules of her <span> element. To do this, she will need to read our handy CSS sheet from above. She finds that she is of the class "highlight". Therefore, she will look for the class selector of .highlight.

When she finds it, she will read what it says. There is only one declaration, and it says background-color:yellow;. So, she needs to make her background-color property have a value of yellow. Miss Highlight immediately does this. Since that was the last declaration in her rule set, she stops. The result is below:

Unlike us, the beautiful Miss Highlight has her own HTML tag.

This is how the CSS syntax works. Further sections will go in detail about the code and how to use it.

Finally, it is convention to add new lines and spaces to the code so that it is more readable. The below is a generally how this may look:

/* This is a Comment, as indicated by the slash-star in the beginning and star-slash at the end */
.highlight{
    background-color: yellow;
    border: none;
}
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License