howCSS

Getting Started – Cascade what?!

What CSS Is

Cascading Style Sheets (CSS) is a style sheet language. This is separate from a markup language (XML, HTML, etc.), a scripting language (PHP, Javascript, ASP, JSP etc.), or a low/high level programming language (MIPS, C, Java, etc.).

Each type of language has a particular purpose and set of skills. Understanding that purpose can help you understand what you can and can not do with each type of language.

When it comes to CSS – the purpose is “presentation semantics”. In non-stupidly-geeky language this means – it controls the “look and feel” or “the prettiness” of any document written using a markup language (XML, HTML).

So as an example – we generally, in this day and age understand what the term “bold” means. When we want to “bold” something in a webpage we use the markup/html tag:

<b>Some text that we want bolded</b>

OR (using textile in OP):

*Some text that we want bolded*

But let’s say we want to change how the bold looks. Perhaps everytime we “bold” something we want that text to also be in all capitals for emphasis, but we don’t want to have to remember to always type with the caps lock key on. We can control this “look and feel” aspect of the standard “bold” using CSS.

For example we could use the following bit of CSS code:


b {
  font-variant:small-caps;
}

And this would automatically make all text enclosed in normal HTML bold tags appear in all caps. We haven’t changed the actual HTML tag that we would normally use. We’ve simply “overridden” the way the tag would normally be interpreted.

What CSS Isn’t

CSS is NOT a markup/scripting/programming language. This means:

  • It can not be used by itself. All CSS has to be associated with HTML code. This can be standard HTML markup tags (elements such as links (a), bold (b), body etc.), or by using the id, class and style attributes of certain tags. For a list of ALL current HTML5 tags, please reference here: HTML5 Tags
  • It can not access a Database
  • It can not perform “functions” – it does not calculate, or manipulate data – it only controls how data is displayed
  • It is not a parser – aside from the :first-letter pseudo-element you cannot target ranges of characters, only complete elements. Targeting specific ranges and or characters requires markup and requires that you have control of the code generating the markup.
  • It does not allow expressions – values need to stated implicitly using the units provided, you can not use math equations (ex. You can not use “margin-left: 10% – 3em + 4px;”)

Why are they called Cascading Style Sheets

The simple answer? Because they Cascade. Styles are applied in the order they are given. This means if you attach 3 stylesheets to a page – they will be applied in top down order. The first one will be called, and then anything in the second that uses the same tags will override similar calls in the first one, and then anything in the 3rd will override the first two.

Likewise – anything LOWER on a given stylesheet will override anything above it. So for example:


body {color:black;}
body {color:red;}

Will result in the webpage text being red.

Ok Ok…what the hell is a tag/id/class

Tags are standard HTML markup. They are part of the HTML “standard”, which most browsers will recognize and render as part of their programming (though they may not always render the same way across all browsers).

This is one of the downsides of HTML. While W3C attempts to create standards for the markup, their standard is actually only recommendations. It is up to each individual browser which tags they will implement and how close to the “standards” they will remain.

Again all recommended tags are listed here: HTML5 Tags as well as whether they are deprecated.

To ensure that your HTML and CSS are as compatible with multiple browsers as you can, you can try to validate your HTML and CSS using the W3C tools here:
Validate HTML/XML
Validate CSS

However please note – the current reforge of Obsidian Portal does not validate even in default as HTML5 (which is what they will automatically detect for OP because OP is using the <!DOCTYPE html> tag). So unless you can tell which are your errors and which are theirs – these tools may not be useful to you. Likewise, the default CSS for OP will not validate to CSS Level 3.

To assign a CSS rule to a tag, simply type the tag with curly brackets “{” “}” and the rule inside.

Ex.

body {color:white;}

Attributes are additional information that can be provided for certain HTML tags. In regards to CSS, the important attributes to remember are “id”, “class”, and “style”.

An “id” and “class” are similar – in that they allow you to apply styles only to certain instances of elements rather than EVERY case of that element the way tags do.

Let’s take the “bold” example above. Let’s say I only want to make SOME bold tags all capital, and I want to make SOME italic tags all capitals. I could write the following css:


.all-caps{ font-variant:small-caps; }

The “.” at the beginning of the CSS rule identifies this rule as a “class”. I can now say:

<b class="all-caps">This text is bold all caps</b>

The result will be a bold piece of text in all caps. OR I could say:

<i class="all-caps">This text is italic all capps</i>

An “id” works exactly the same way – however an id is unique. It can only be applied once. Where as a class can be used over and over.

#all-caps{ font-variant:small-caps; }

The “#” identifies this CSS rule as an “id”.

If you want to make a class or id specific to a particular type of tag. You can append the class or id code to the specific tag. This allows you to use the same NAME for a CSS rule, but apply different effects.

ex.


b.somecolor{color:red;}
i.somecolor{color:maroon;}

Now if I use the HTML code:


<b class="somecolor">This is bold red text</b>
<i class="somecolor">This is italic maroon text</i>

I will end up with two different colors, even though both rules use the same name.

When in doubt – use CLASSES, not IDs unless you want to ensure that a style is unique, or if you are overriding an ID put in by OP.

The Style attribute allows you to create what we call “inline styles”. These are styles that you only want to apply once as a complete override of everything else. Let’s say you have the following style:


b{color:red;}

This makes all of your “bold” text red. But let’s say in ONE place, maybe in a particular adventure log you want your “bold” text to be green. Maybe it’s Christmas. You can type:

<b style="color:green;">My Text</b>

This will make ONLY “My Text” in the one place you typed it green. Everything else stays red, and if you ever want to make something else Green again, you will have recreate the “inline” style elsewhere.

Inline styles will ALWAYS override anything in a Stylesheet.

Styles, classes and ids can all be used together. Continuing with the bold example.

Let’s say I have a class that makes my text red on a black background. So wherever I use this class I get red text on a black block (Why I would do this? No clue, but it makes a good example). Now, let’s say I want one particular bold to be Green, but I still want the black background.

My CSS class in my stylesheet would look like this:


.weird-coloration { color:red;background-color:black;}

My html tag with class and inline style might look like this:

<b class="weird-coloration" style="color:green;">My Text</b>

My bold tag now maintains the black background specified by the class, and only the Text Color gets overridden by the style attribute. Even if my class rule had 16 different things applied in it, they would ALL get applied by the class call, and only the text color would get overridden.

howCSS

Post Reforge CSS dawnhawk dawnhawk