Hey There.

This is a web experiment, along with a simple tutorial on CSS. The Next and Previous buttons do just what they say, navigating slides. The Go to button can be used to go to a specfic slide number.

Have fun, and I hope you learn something.

Anyone can use the code contained within this application for anything they like, provided you give me credit and you distrubute your modifications (if you distribute them) with the same license. It's a "do-whatever-the-heck-you-want-with-credit-sharing-similarly" license. What was that again? CC-BY-SA I believe? Yeah, this thing.

Creative Commons License
This work by TCGM is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.


What is CSS?

The acronym CSS stands for Cascading Style Sheet. It refers to a document, or set of documents, which contain rules used to change the appearance of HTML. CSS has an absolutely massive number of things it can control, not the least of which are color and size. Due to the intertwined nature of CSS and HTML, we'll be looking at both a decent amount.

Here is a small example of what CSS can do. In this sentence, some words are a different color. All these words have this around them in the HTML document: <strong class="green"></strong>. The CSS rule that causes this change is as follows: .green { color:#3bbf26; }

Notice the period before the word green. In HTML, there are 3 main ways of matching an element to a CSS rule. This is the first of them: Element Class. Since the class attribute of the strong element above is "green", the CSS rule to match that element requires a period before the name. So, .green.

If you've done programming before, you might notice this looks a bit like a function, with the brackets {} enclosing what is contained in the rule, and semicolons ending a line.

CSS Colors

Colors in CSS, although technically the same everywhere across the Internet and not just in CSS, are chosen using a 6 digit Hexadecimal number. Hexadecimal numbers are base 16, while the normal human number system is base 10, called Decimal numbers. While Decimal numbers use 0-9 as digits, Hexadecimal numbers use 0-9 AND A-F. The Hex Color system is a bit complicated, so there's no need to understand the inner workings just yet. There are plenty of websites you can use to translate real-world colors (or even imaginary ones) into Hex Color that CSS can use. I personally use ColorHexa.

Here's a list of some common colors and their accompanying Hex Color Codes. Note that all HCCs must be prefixed with the # symbol.

Color Hex Color Code
Black #000000
Green #008000
Red #b30000

What Else can CSS Do?

I mentioned size, did I not? The CSS rules which control size are named width and height, respectively. Distance in CSS is usually determined by pixel or percent; px or %, respectively. Below this sentence are two elements. One has width:100px, and the other has width:200px. Both have height:50px.

I'm 100px!

I'm 200px!

You may notice that there is some spacing between the two elements. This is due to a rule called margin, which dictates to the browser that there must be a space around the element of a certain amount; in this case, it is 5px. There is a similar rule called padding. The two rules are different, and some new CSS writers confuse them. Padding dictates that there must be a space INSIDE the element, around anything the element might contain. The text in the above elements is kissing the sides of the elements because padding is not defined.


Taking the example from the previous slide, here are two elements. Both the same size, but the second one has padding:15px. Notice how there is now a space between the left side of the element and the text within? There's actually a space on all the sides, but the text doesn't extend far enough to make that apparent.

I'm not padded!

I'm padded!

The element below has another element nested inside it. It's background rule is set to #000. There is an even amount of space between each side of the parent element and the child element.


In CSS and HTML, every element is basically a "block" of pixels on the page. css-tricks.com said it the best way, I think: "An important concept to understand first is that every single element on a web page is a block. Literally a rectangle of pixels."

Position is a rule which affects the "flow" of the document. There are 3 possible values for this; relative, absolute, and fixed (technically a fourth, static, but it's never used, and is in place by default).

Relative positioning applies the movement rules (left,right,top,bottom,margin) against where the element would normally be on the page.

Absolute positioning ignores where the element says it is and applies the movement rules relative to the element's parent element. Whether this is the <body> element or something else is the HTML writer's decision. Any rules applied to the parent will move the child element accordingly.

Fixed positioning is an extremely powerful setting. Used inccorectly, the entire webpage can be malformed. This positioning is relative to the browser itself; it ignores every other element. It's useful for making floating elements which follow the browser down a page, or for sidebars or notifications. Use with care.

Positioning Example: Relative

The element on this slide, a simple blue square (50x50px) is position:relative, and has left:0px and top:0px.

Positioning Example: Absolute

The element on this slide, a simple blue square (50x50px) is position:absolute, and has left:0px and top:0px.

Positioning Example: Fixed

The element on this slide, a simple blue square (50x50px) is position:fixed, and has left:0px and top:0px.