CSS 101

CSS is super easy. Don't be intimidated by how it may look at first. It's just a matter of getting familiar with using it. Once you get used to it, it's so much faster and easier than using forms or wizards to change the style of a page.

The style of your MindSky websites are previewed in real-time as you update the "Styler" (the hidden button in the top-right of your website - reveals when moused over).

The easiest way to learn is to just start doing it. You can use existing templates (in the Styler) and start changing them and see what happens.


To change the background of a website you would do something like this:

body {
background: black;

body refers to the element we're changing.
background refers to the property we're changing on that element.
black is the value. All values are closed with a semi-colon.


To change the style of the website's title you would do something like this:

#pagetitle {
color: red;

#pagetitle refers to the element we're changing. This time by ID. The number sign # refers to an ID. All IDs should be unique. They will always only reference one thing.
And we're changing the color to red.


To change the color of a link you would do something like this:

a { color: purple; }
a:hover { color: aqua; }
a:active { color: red; }
a:visited { color: grey; }

a refers to links.
a:hover refers to links when we're hovering over them.
a:active refers to links when they're being clicked.
a:visited refers to links that have been visited.


Some elements have a class assigned to them. That's so we can style any element with that class together. Classes are called like this: .someclass { color: blue; } 

Elements can also be called in this way: body #pagetitle a { color: red; }
That tells us to look for a link (a) within the #pagetitle within the body.


For MindSky websites

The body tag of all pages have a unique class, .n1234, where "1234" is the node id. The homepage will also have class .h. These can be used to assign unique style to:
the homepage with body.h { mystyle },
any non-homepages with body:not(.h) { mystyle },
and specific pages with body.n1234 { mystyle }.



Further CSS resources: