You-fic.net - Read it. Write it. It´s Your Story.

CSS Crash Course

If you're not already familiar with HTML, CSS can be very intimidating. Much like moving up from MS Paint to Photoshop; HTML is fairly simple, while CSS has tons of new options and a slightly different way of doing things. This guide can only cover the most basic of information about CSS as a result, but hopefully it can give you enough information to start with.

What is CSS?

CSS is shorthand for "Cascading Style Sheets", and it functions as an expansion on basic HTML. If you consider HTML to be a power tool that comes with a few basic attachments to handle basic tasks, you can think of CSS as the accessory pack with all the fancy add-ons to make that tool do a lot of other stuff. What CSS does is modifies the way an HTML tag displays; for example the bold tag could be modified with CSS to be a different color, or display a background highlight. There are literally tons of different things CSS can do, so it is strongly recommended that you look up such resources for more information.

CSS as it applies to your work on this site

While there are three forms of CSS (inline, embedded, and external), only two of them can be used with works on the site; inline and embedded. External stylesheets can't be used because they involve linking to a separate file and could present a security risk. However for the purposes of your work on the site, inline and embedded are all you need anyway.

Embedded styles are a style applied to a single page (for instance a single story entry, or your homepage). They can be made to apply to every instance of a particular HTML tag, or you can create a "class" of style that you can apply to any HTML tag. Both the story and quiz editors have a section for entering an embedded stylesheet.

Inline styles are a style applied within a given tag, and will only apply to that single tag. If you have both an embedded style and an inline style applied to the same tag (for example, an embedded style that makes the text red, and an inline style that makes it blue,) the inline style will take priority.

How to apply an inline style

An inline style is applied to a tag by adding the attribute style="style stuff here". For example, entering "<div style="color:red; text-decoration:underline;">This is red and underlined.</div> will display in the browser like this:

This is red and underlined.

Of particular importance in CSS are the colons and semi-colons. Each style has a property such as color, font-family, font-size, background-color, and so on. After the property is named, you have to use a colon (:) to separate it from whatever the setting will be, and then it has to be closed with a semi-colon (;), such as color:red; or background-color:#FFFFFF; or text-align:center; and so on.

How to write and apply an embedded style

There are two different types of embedded styles you can write; styles that apply to all instances of a specific type of tag, and style classes that can be applied to any tag. The only real difference between the two is how they're written in the stylesheet box in the story/quiz editors.

To modify the way a particular HTML tag works, you write it in the stylesheet box like this:
b { font-family: Arial;
color:red;
}

Note that in addition to the colons and semi-colons, an embedded style also has curly brackets. They're similiar in function to the < and > brackets in HTML. The sample style above will modify all instances of the bold text tag to display in the font Arial, and in the color red. Useful if you're doing a layout where you want all bolded text to display the same way. You can make a style like this for any HTML tag; bold, italic, underline, the link tag, image tag, and so on. All you have to do is put the HTML tag in front of the { bracket.

To create an embedded style class that can be applied to any tag, you write it in the stylesheet box like this:
.style1 { text-align:center;
font-weight:bold;
}

Make sure you begin the names of any style classes with a period! Other than that, you can name a style class pretty much anything you want so long as it is one word. Typically you want to use short and relevant names such as ".title" or ".answertext".

Once you have the style class written, applying it to a tag is as simple as adding class="style1" to it. For example, <div class="style1" > will apply the style1 class defined above to all the text contained within that div tag. Even better, any time you want to make something display centered on the page and with bolded text, you can add the class to any tag. <a href="etc" class="style1">, <span class="style1">, <img src="etc" class="style1">, <i class="style1">, and so on.

What are all my options with CSS?

Too many to list them all here, there are many, MANY options you can utilize using CSS. You can change fonts, font sizes, colors, background colors or images, alignment on the page... the list of all possible CSS attributes is extensive. As with basic HTML, there are a number of resources online with lists of CSS options and tutorials on using them.