User:Ryan Schmidt/CSS

Cascading Style Sheets (CSS) can make your experience on StrategyWiki much more personalized. With personalized CSS, you can add and remove items on a page without affecting anyone else's view of that page. Every registered StrategyWiki user has their own personal CSS page, usually User:Your user name/bluecloud.css.

Classes
CSS works by looking at a value of some HTML tag and applying special characteristics if it finds that value. Normally, it looks at the class of the tag. For example, the class in is called plainlinks. This particular class hides the external image icon from external links (Internet Explorer users are unable to see the external image anyway). Enclosing a link like so: external link would yield external link instead of external link (again, Internet Explorer users will not be able to tell the difference between those two).

Let's say that you wanted to be able to enclose some text in a and make it turn green. On your bluecloud.css page, put down .green { color: green } and save the page. When you go back to this page, this sentence should be green (Note: you may have to clear your cache in order to see the changes. Click here to do so).

You can apply multiple classes in one single span as well, so lets try that. Back on your css page (it might help to have it open in a new window/tab for the remainder of this tutorial), put the following on a new line under the .green line: .underline { text-decoration: underline } Now, when you clear your cache, this should be green and underlined. This is done by putting two classes in the class= part, green and underline, separated by a space (like so: ).

Of course, it could save typing by condensing those two into a single class. By putting the following into your css page, .grund { color: green; text-decoration: underline } one single class will accomplish what two did before. After clearing your cache, this sentence should be both green and underlined.

IDs
An element's ID is another thing that can be styled by CSS. As you've noticed above, all the class CSS started each class with a period (.). IDs are different in the fact that they start with a number sign (#). So, this sentence, enclosed in a, will turn green once you add the following CSS (and clear your cache):
 * 1) green { color: green }

Advanced Techniques
You can do some very advanced things with CSS, like making something different when it is hovered over. To do this, you use pseudo-classes. These are actions prefixed with a colon that activate under certain events. For example, look at the following code (and add it to your CSS). .grhbl { color: green } .grhbl:hover { color: blue !important } This has introduced some new CSS terms, so let's dissect the code bit by bit. The first line said that anything with a class of "grhbl" is going to be green. The second line, however, says that anything with a class of "grhbl" that is being hovered over with the mouse will turn blue instead. The !important means that that bit of CSS overrides any other CSS that was already in place. So, when you hover over this green bit of text, you will find that it turns blue. However, the moment you move the mouse elsewhere, it turns green again.

You can do even better things with hovering, like hiding entire blocks of text! The following CSS can do just that. .hoverhide { display: none } .hoverbox:hover .hoverhide { display: inline !important } So, let's dissect this, shall we? The first line tells anything enclosed in the class "hoverhide" not to display at all. The second line, however, says that whenever something enclosed in the class "hoverbox", when hovered over, will make the hidden "hoverhide" stuff show in-line. Try it out with the image and text below.

This text should be hidden until you hover your mouse over the image. Since this text is also in the "hoverbox" class, you can hover over the text without fear of it going away. Line breaks, however, seem to pose a problem.

The previous example can be achieved by nesting two elements like so: visible stuff to be hovered over invisible stuff.

As you can guess, you can use one class to influence what another class does. However, this works with elements as well. Normally, enclosing something in three single quotes would produce bold text. However, the following CSS changes that: .nobold b { font-weight: normal !important; text-decoration: underline } Now, whenever you make bolded text inside of the "nobold" class (like the previous text), it will underline it instead! Check the wiki source of this page (go into editing) to see that I'm not kidding!

Practical Usage
The above examples weren't exactly practical when it comes to actually going through StrategyWiki and customizing it to your liking. Generally, you'll be modifying pre-existing classes and ID's to change how it looks instead of creating brand new ones. Some examples of practical reskins are below, as well as a few links to get you started on making some of your own.

For example, let's say that you like having your links underlined when you mouse over them, and appear in a different color after you've visited them. The following code will do just that: a:hover { text-decoration: underline; } a.visited { color: #8976B4; } If you put that into your bluecloud.css, links such as this one will underline when you mouse over them, and turn a light purple color after you visit them. Link of reference: User:Ryan Schmidt/CSS Pak 1.

Sometimes, you might want to change almost everything about StrategyWiki, down to the background! This is called a "reskin." Currently, there are a couple of reskins available, found here. A nearly-complete one, called AutumnLeaf, changes many things about the appearance of StrategyWiki. Try looking at the code and deciphering what each of those lines do. Some helpful links in determining this:

As you can see, CSS allows you to personalize your browsing experience just for yourself! If you don't like the way something appears, you can make it appear differently. Now, you can go ahead and remove all of that stuff from your CSS page (or keep it, it just isn't used outside of this page so it's not really useful). So, good luck making your own CSS!

''Rate this tutorial on the talk page! Did you find it helpful? unhelpful? On a scale of 0 to 10, with 10 being the best, what would you give this page? Rate it now''