Custom CSS Classes

Custom CSS Classes


This tutorial will give an introduction on how to make custom CSS classes. We’ll be making a simple sub-title class, that when used will automatically insert stylized subtitles, as seen below:

Custom Sub-Titles:

A class is defined in CSS by a preceding “.”. For instance, this wiki page is in a “.wiki-page” class (along with many other classes.)

To define a class in your CSS section, all we need is a . followed by the class name. For our subtitles, we use tsubTitle. The “t” is for Tyellador! …also, we threw a “t” in because when I first made a custom “Titles” class, that interfered with a class Obsidian Portal was already using for other things. So make sure that you give your class a unique name that you’re pretty sure isn’t being used somewhere else. A class name of “.wiki-page” would be a very bad choice for a custom class name, as we know Obsidian Portal is already using that name. “.TyelladorWikiPage” Would probably be a safe class name to choose, or simply “TWikiPage”.

So, in your CSS, throw this in:


.tsubTitle


Now your class is defined. Now we make the class do things! This is how I stylized my sub title class:


.tsubTitle {position:relative; font-size:150%; color:darkgreen; display:block; font-family:georgia, serif ;}


position:relative; means that wherever you put the code for your subtitle, that’s where it will appear.

display:block; makes your title appear on its own line, by itself.

font-family: georgia, serif; This makes Georgia the default font. If for some reason the browser can’t load Georgia, it defaults to a serif font.

If you want, you could throw a text-align:center; in there to center the text on the page.

Now that you have your class all sorted out, how do we use it in your website? Just put in the following:

<div class="tsubTitle">Your Title Here</div>

And that’s all it takes!

…but let’s say, you have your custom title class, but sometimes you want it to look a little different? My sub title class doesn’t center, but what if this time, I want it to look like this:

Your Title Here:

And red!

Your Title Here:

And underlined!

Your Title Here:

We gotta get some style. More specifically, style=" Your styles here ". Like the following:

<div class="tsubTitle" style="text-align:center; color:red;
text-decoration:underline">Your Title Here:</div>

Anything you put in the style area will override what’s in your class. And that’s the basics of creating a custom CSS class.

Back to Tutorials

Custom CSS Classes

Tyellador Thorvaldr Thorvaldr