CSS Tutorial, how to make a visually appealing post

[Nakazawa Meian]

Welcome to my CSS Tutorial!

CSS Tutorial

What is CSS?

CSS is a type of coding language normally used in web design, so as to make every aspects of a website looks like what the web designer expects them to be. Basically, it makes the site looks like what it's meant to be. Every website is using CSS at its core, even this forum.

Recently, and thanks to Kalanijasmine using it in her application, it came to my attention that CSS was actually compatible with BBCode tags, which therefore meant many more options were available for post design than I first thought.

What can it do for me?

Look at this post. Enough said.

What is your level of experience in the subject?

Although I'm clearly not an expert, I've had many web design classes meant to teach me how to properly use things like HTML, CSS and Javascript. At my current level, I'd probably be able to design a fairly good-looking website.

Why should I bother?

Of course, using such CSS skills in common posts would likely be useless (although it may help sometimes, there's a few interesting features). However, for designing your applications, your point banks or any other static thread of the same kind, such knowledge could prove to be invaluable for making things far more pretty and easier to read.
W3School, the most reliable web reference for CSS and HTML usage.

What will be talked about in the following posts:

• Creating different sections within a post.
• Positioning elements as we want within a post.
• Use of tables and lists, what can be done with them.
• Colors, backgrounds and complex gradients.
• A web designer's best friend, element inspection.
• Much more coming soon!

[Nakazawa Meian]

Alright, so let's start. First and foremost, before I teach you how to create CSS within your post, I'll teach you where to do it. In fact, CSS can be added to almost any of the BBCode tags you've been using commonly on this forum. Everything: images, links, lists, ... There is no limit to what you can apply CSS to, and that's what makes it so interesting; everything can be EXACTLY as you want it to be. If you're doubting what CSS can actually do, I hope my introduction post was enough to quench those doubts.

Now, to the core of the question: where can I add my CSS to a post? Truth be told, adding CSS can be done within any of the BBCode tags you're using in your post, through the use of an attribute. What is an "attribute" ? By definition, an attribute is a complimentary information to an already-existing tag. For example, surely you've already used the "font" tag, and maybe you actually added attributes to it, like "color" or "size"; those are attributes. Well, adding CSS to a tag is as simple as that; you just need to add a similar attribute. Which one ? The "style" attribute.

---

Example:

[img style="The CSS you'd want to apply"]

---

By adding the style attribute, you're actually allowing yourself to overwrite the default CSS that the website gives to that tag, and apply your own instead. As a result, this gives you almost as much power over your post's appearance as a web designer have over his websites; the only exception I've noticed so far, the only thing the style attribute seems to prevent, is the use of conditional CSS. Since you've got complete control over the CSS behind those tags, a lot of things can be done, including: changing backgrounds and colors freely, create an animation with images, create any required alignment, control pictures and videos entirely, choose how your elements are displayed on-screen, and so much more.

Since this post is mainly an introduction to the very basics of CSS and how to even use it, I won't go very deep with my examples, but I'll at least provide you with a fairly simple one, to get accustomed to how CSS is written. So, for my example, I'll use a Saturn picture I found on the web, which is far too big for any post use; through CSS, we'll reduce its height and width to appropriate ranges, without cutting the image directly through an image editor (like GIMP or Photoshop).

So, to do so, the task is simple; you need to add a "width" and a "height" CSS modifiers within your style attribute, inside of the => " <= . As for the syntax, you need to write the CSS modifiers within your style attribute, then place a => : <= and put the changed value afterward. If you want to put more than one CSS modifier within the same style attribute (like with our example), you'll have to separate them with a => ; <= . Taking back our example, if we say we want a height of 100 pixels and a width of 200 pixels, your style attribute should look like this => style="height:100px; width:200px;" .

---

Example - End result:



Example - Code:

[img src="http://www.dharmasanctuary.org/wp-content/uploads/2012/07/saturn.jpg" style="width:200px; height:100px;"]

P.S. For those who wonder, the "src" attribute is used to define the source of the image, basically which image it is. The advantage of using the "src" attribute over the conventional BBCode method is to have access to the website's resources, for example the forum's background (this'll be explained more in another post, when I'll talk about element inspection).

---

Now, that explains how you can create CSS within a post. However, before I end this part of the tutorial, there's one more thing I'd like to explain, one which should be fairly simple for everyone, but since I'll use it in almost every other one of my posts, I'd better make it clear from the start; the "div" BBCode tag. This is a tag which I'll use a lot in my following posts, and one you'll learn to like a lot if you start using CSS in your posts. Why ? Because the "div" tag doesn't change ANYTHING about your post's appearance in itself, it's used to create different sections for which CSS can be applied to. It's what'll allow you to make just about any kind of format and alignment to your posts, with smaller variations left for your other tags.

This ends the "CSS Basics" part of my tutorial, next one shall be "Post Alignment"! Be sure to come back for it!

[Nakazawa Meian]

Second part of this tutorial! So, now I'll teach you how to create alignment for your texts, pictures and divisions. After reading this, you should be capable of aligning what you want exactly where you want, no matter where that is. Want it on the left? Done. Want it on the right? Done. Want it in the middle? Done. Want it somewhere in-between? Also done.

To begin with, I'll teach you how the "float" CSS Modifier works. By default, everything you create is set with a float modifier set to "none", and it's up to you to decide whether to change it or not. The two main options you can set the float to, aside from "none", is either "left" or "right". The main advantage of float is what it allows to do; position many different things next to each-other. For example, if you go take a look back at my first post, you'll see those two yellow boxes full of text. If I hadn't set a float to those, they'd be one under the other, not next to each other. That's what float mainly allow you to do; create many different things on the same level.

Let's start with the first float, the "float:left;". That float will keep the "float:none;" basic behavior of keeping you on the left, while still allowing you to place different things next to it. With this, you'll be able to put different divisions, images and videos next to each other, and they won't go under one another unless they are too big to fit on the same line. I'll take back the example from my previous post to illustrate this.

---

Example - End result:



Example - Code:

[img src="http://www.dharmasanctuary.org/wp-content/uploads/2012/07/saturn.jpg" style="width:200px; height:100px; float:left;"][img src="http://www.dharmasanctuary.org/wp-content/uploads/2012/07/saturn.jpg" style="width:200px;height:100px;"]

---

Now, as for the other float, "float:right;", it gives you the possibility to place something on the other side of your post, at its right border. Of course, you -could- align that same thing using an alignment to the right in your post, but that would once again prevent you from placing anything next to it, it would go underneath. A float to the right allow things like this.

---

Example - End result:



Example - Code:

[img src="http://www.dharmasanctuary.org/wp-content/uploads/2012/07/saturn.jpg" style="width:200px; height:100px; float:right;"][img src="http://www.dharmasanctuary.org/wp-content/uploads/2012/07/saturn.jpg" style="width:200px;height:100px;"]

---

Knowing these things about floats, as well as the width and height modifiers and the "div" tag I talked about in my previous post, you should already be able to see quite some potential for positioning things the way you want; you can already, just with this, create divisions to hold your text, set them next to each other and decide of the width and height they'll take. However, a web designer still needs to have far more power over his alignment than this, he needs to be able to decide of everything, even the spacing between those divisions, or how far the last division is from the right side of their website (or, in our case, post). How do they achieve such power? Through the use of the "margin" and "padding" CSS Modifiers.

The first thing to know about these CSS Modifiers is that they are divided in four different modifiers, one for each direction. For example, setting the margin at the top of you division would be done with the "margin-top" modifier, while setting a padding to the left would be done with "padding-left". Now, what's the difference between a margin and a padding? Each of them allow you to set a distance, but the distance which is set is different. The margin allow you to set a distance between the element you're currently in (for example, your section), and what is containing it (most of the time, it'll be the post itself, except if you're using a margin within a smaller division). Padding, on the other hand, sets a distance between your current element, and what it contains (for example, text).

To make this perfectly clear, I'll make an example.

---

Example - End results:

This first box has no paddings, and no margins.

This second box has margins of 10 pixels, and paddings of 10 pixels.

This third box has margins of 50 pixels, and paddings of 50 pixels.

Example - Codes:


[color="black]
[div style="background-color:yellow;"]This first box has no paddings, and no margins.[/div]

[div style="background-color:yellow;margin-left:10px;margin-right:10px;margin-top:10px;margin-bottom:10px;padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:10px;"]This second box has margins of 10 pixels, and paddings of 10 pixels.[/div]

[div style="background-color:yellow;margin-left:50px;margin-right:50px;margin-top:50px;margin-bottom:50px;padding-left:50px;padding-right:50px;padding-top:50px;padding-bottom:50px;"]This third box has margins of 50 pixels, and paddings of 50 pixels.[/div]
[/color]


---

However, unlike what I've been doing so far, you're not forced to use a pixel amount as your distance from something. As I've said, web designers need to be able to rely on this perfectly, and so there's one more thing they needed to be able to do with their alignment; adaptation. That is, their alignment needed to be able to adapt to whichever size the screen of their guest is, and to do so automatically. For that, you've got two different things you can use; instead of setting your margins and paddings to a definite pixel count, you can make them variable by setting a percentage, for example "margin-right:10%;". You can also set your modifiers to their "auto" mode, which basically means "take whatever space is left that I haven't specified in my other paddings/margins". For example, by setting both "margin-left:auto;" and "margin-right:auto;", you'd have centered your element.

To show you what can be done with this, I'll make a smaller version of the alignment I used in my first post, while separating each different parts of the code with a visually-distinctive color to make sure that you understand what everything is. Bear in mind that my code won't be exactly the same, since I'll set what would've been the margins as new divisions in order to have the possibility to color them (I can't set a color to a margin, unfortunately, so I've got to use divisions instead).

---

Example - End result:

The blue parts are the margins set to "auto".

The red part is the header.

The green parts are the margins set to definite values, between the divisions.

The yellow parts are the divisions used for text.

Example - Code:


[div style="background-color:blue;width:400px;height:320px;"]
[div style="background-color:red;width:300px;height:100px;margin-right:auto;margin-left:auto;"][/div][div style="background-color:green;width:300px;height:10px;margin-right:auto;margin-left:auto;"][/div][div style="background-color:yellow;width:200px;height:180px;float:left;margin-left:50px;margin-bottom:auto;"][/div][div style="background-color:green;width:20px;height:180px;float:left;margin-bottom:auto;"][/div][div style="background-color:yellow;width:80px;height:180px;float:left;margin-bottom:auto;margin-right:50px;"][/div][/div]

[font color="blue"]The blue parts are the margins set to "auto".[/font]

[font color="red"]The red part is the header.[/font]

[font color="green"]The green parts are the margins set to definite values, between the divisions.[/font]

[font color="yellow"]The yellow parts are the divisions used for text.[/font]


---

With this knowledge now known, aligning your posts exactly as you want them should become child's play to you. You should now have complete control over the location your post's elements are taking, and you have sufficient knowledge to make your elements adaptative to their context to the best of their capabilities. Basically, this gives you the ability to align your posts as you want. Pretty awesome, huh?

This ends the "Post Alignment" part of my tutorial, next one shall be "Colors, Backgrounds and Gradients"! Be sure to come back for it!

[Nakazawa Meian]

Back for colors & stuff! After this part of the tutorial, using colors should become child's play to you, no matter how simple or advanced you want it. You'll be able to manipulate basic colors, but also gradients (simple ones and advanced ones alike) and backgrounds (colors, gradients and images). Decorating your posts shall have no secrets anymore!

Let's begin with the very basics (which some of you may like to skip), the use of colors in the most basic way. In fact, any text within a post, no matter whether it is in a "div" tag or otherwise, can have a color applied to it, like this, this or this. Basically, any text can receive a color, and this color can take two different forms; you can use either a predesigned keyword or the color's hexadecimal code. For the predesigned keywords, a list can be found here, which show in detail each color keyword and what the color looks like. On the other hand, for hexadecimal codes, I advise visiting here, another resource which can become handy for your designing tasks. Either way, how to apply it within a post remains the same; through the use of the "font" tag, with the use of a "color" attribute. Alternatively, it could also be done by adding the "color" CSS Modifier within the "style" attribute.

Now, onto more interesting matters. With the use of CSS, it becomes possible not only to change a text's color, but also to change various backgrounds within the post. The first type of background which can be set is obviously a plain color background which, as you have probably noticed, I've used extensively thus far. Setting a color to a background, in fact, is fairly simple; all you have to do is add a "style" attribute to the tag you want your background on, and to set a "background-color" CSS Modifier with the color you want to use.

---

Example - End result:

This is just normal text. However, whenever I want, I can put emphasis on what I want.

Example - Code:

This is just normal text. However, whenever I want, I can put [span style="background-color:Darkgoldenrod;"]emphasis[/span] on what I want.

---

Example - End result:

It is also possible to design sections as blocks of text.

Example - Code:

[div style="background-color:blue; width:200px; height:150px; margin-left:100px; padding-left:20px; padding-top:20px;"]It is also possible to design sections as blocks of text.[/div]

---

This already opens a lot of doors for setting a good appearance to a post, but of course, after a while, only seeing plain colors would become boring. What about patterns, and images? Well, that's exactly what we'll now see. Instead of setting a basic color as a background to something, it is indeed possible to use an image instead, just by tweaking a bit with our current CSS Modifier. Instead of the "background-color" Modifier, we'll simply use the "background-image" CSS Modifier. Inside this new Modifier, though, is one difference to the color one; in a similar way to how hexadecimal color codes require the "#" before it, setting a background image require the url to be within the parentheses of "url()". Otherwise, the server will search for the specified image within the website's local resources, instead of the internet. With all these details in mind, it should be easy to set an image as a background to whatever you want.

---

Example - End result:

Isn't that cool? You can set any image or pattern as the background of your texts now. Enjoy!

Example - Code:

[div style="background-image:url(http://i213.photobucket.com/albums/cc234/Corrupted-Sasuke/OnlineWorld-6-1.png);width:800px;height:180px;padding-left:30px;padding-top:30px;padding-right:30px;padding-bottom:30px;"][font color="yellow" size="4"]Isn't that cool? You can set any image or pattern as the background of your texts now. Enjoy![/font][/div]

---

As for a repeating pattern, images are already set that way; if the width or height of your background is superior to the width or height of the image you're using, it'll repeat itself; that's how you can create a pattern using your images. If you wonder what I mean by "pattern", look back at the background of my introduction post; it's a single 40px X 40px image, which repeats itself over the whole post and therefore creates a pattern. Although I doubt it, if you ever need to remove this repeating functionality for some reason, you can do it by adding the "background-repeat" CSS Modifier, and setting it to "no-repeat". Also, in case some of you didn't notice yet... this background image option now allow us to bypass Proboard's inherent image resize! To do so, simply create a division using your image as background, and set that division's width and height to the image's width and height (otherwise your other divisions will go above your image). The only problem with this method is that resizing the image through coding is impossible, which therefore means that to resize it, you'll have to do so manually with a tool like Gimp or Photoshop. The following example show an image under proboard's auto-resize, and one which bypasses it:

---

Example - End result:

SPOILER: Click to show

{auto-resized image}

SPOILER: Click to show

{Bypassing image}

Example - Code:

[spoiler]{auto-resized image}[img src="http://www.wall321.com/thumbnails/detail/20120929/bleach%20zaraki%20kenpachi%201024x768%20wallpaper_www.wall321.com_48.jpg" style="max-width:100%;"]
[/spoiler]

[spoiler]{Bypassing image}[div style="background-image:url(http://www.wall321.com/thumbnails/detail/20120929/bleach%20zaraki%20kenpachi%201024x768%20wallpaper_www.wall321.com_48.jpg);width:800px;height:600px;"][/div]
[/spoiler]

---

As a final lesson of this part of the tutorial come the gradients. [smear:#FFFFFF]A gradient is basically this;[/smear:#FF0000][smear:#FF0000] a progressive change of color.[/smear:#FFFFFF] Let's start with how to do this with text; in order to create a basic gradient, you need to use the "smear" tag. This tag, however, is a bit different from any of the other ones on the forum. In order to set a value to to your "smear" tag, instead of using the "=" symbol like with most tags, the symbol used for a "smear" tag is the same as within a CSS style, ":". Furthermore, since you're creating a gradient from one color to another, your closing "smear" tag will also require an hexadecimal color code associated to it in order to work. [smear:#FFFFFF]If you understand this,[/smear:#0000FF][smear:#0000FF] it'll allow you to do crazy things[/smear:#FFFFFF]. Unfortunately, for my following example, the "code" tag of BBCode doesn't break the tags of a smear, simply because "smear" is a tag specific to this forum. As such, keep in mind that you need to change the "< >" within the code sample to the usual tag brackets to make it work in your posts:

---

Example - End result:

[smear:#FFF000]This is a smear, which allow you to do crazy text gradients.[/smear:#000FFF][smear:#00FFFF]You can even switch from one color to an other at any time![/smear:#FFFF00]

Example - Code:

The following code isn't an exact replica of what I did, since the "code" tag doesn't break the "smear" tag. Replace the "< >" with normal brackets to make it work properly.
<smear:#FFF000>This is a smear, which allow you to do crazy text gradients.</smear:#000FFF><smear:#00FFFF>You can even switch from one color to an other at any time!</smear:#FFFF00>

---

However, although this show us how to create gradients within text, it is still impossible, using the "smear" tag, to create a background gradient. In fact, background gradients are insanely complex to create using CSS, far too complex for someone with no experience in CSS usage to create by themselves. Honestly, even I wouldn't be able to create a proper CSS gradient by myself, at least not without consuming a large amount of my time. However, this doesn't mean that it's impossible; simply that I won't explain how to do it manually. Instead, I will advise you to click here, which will bring you on an automatic CSS gradient creation tool. With this, you simply need to move and change the cursors around the gradient on the left side of the page, and once you're done, use the CSS code generated on the right. This code represents the gradient you just made.

Now that we've got this code, what to do with it? The answer is simple; you need to paste it within the "style" attribute of the tag you're trying to put this gradient in. However, there's still one step we need to do for it to work, after that; you need to remove the spacing within this large code, so that all the lines follow each other. Since I want to make sure that what I said is clear, I'll show you two CSS gradient codes one after the other, the first will not work, while the second will. You should see the difference immediately;

---

Example - End result:

This one doesn't work =>
[div style="width:200px; height:100px; margin-bottom:50px; background: rgb(30,87,153);
background: -moz-linear-gradient(left, rgba(30,87,153,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to right, rgba(30,87,153,1) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#ffffff',GradientType=1 );]Awh... didn't work.[/div]

This one works =>

You see? It worked.

Example - Code:

[b]This one doesn't work =>[/b]
[div style="width:200px; height:100px; margin-bottom:50px; background: rgb(30,87,153);
background: -moz-linear-gradient(left, rgba(30,87,153,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to right, rgba(30,87,153,1) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#ffffff',GradientType=1 );]Awh... didn't work.[/div]

[b]This one works =>[/b]
[div style="width:200px; height:100px; margin-bottom:50px; background: rgb(30,87,153);background: -moz-linear-gradient(left, rgba(30,87,153,1) 0%, rgba(255,255,255,1) 100%);background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(255,255,255,1)));background: -webkit-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(255,255,255,1) 100%);background: -o-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(255,255,255,1) 100%);background: -ms-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(255,255,255,1) 100%);background: linear-gradient(to right, rgba(30,87,153,1) 0%,rgba(255,255,255,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#ffffff',GradientType=1 );]You see? It worked.[/div]

---

This ends the "Colors, Backgrounds and Gradients" part of my tutorial, next one shall be "Lists and Tables"! Be sure to come back for it!

[Kamikawa Hibiki]

The following are supported tags for inline CSS.

background
background-attachment
background-color
background-image
background-position
background-repeat
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
caption-side
clear
color
direction
empty-cells
float
font
font-family
font-size
font-style
font-variant
font-weight
height
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
opacity
outline
outline-color
outline-style
overflow
padding
padding-bottom
padding-left
padding-right
padding-top
table-layout
text-align
text-decoration
text-indent
text-shadow
text-transform
transition
-webkit-transition
vertical-align
white-space
width
word-spacing

[Celos]

Is there even the vaguest chance that your forum would allow me to use the same theme CSS? I am trying to make my own rp forum for a couple of friends from a roleplay all called Amino, where my friends are worried the all will not last. I was hoping to create a cool looking place for them to store what all they have made and in a worst case scenario, a website that they could turn to if it did indeed go down. I've been trying to understand CSS and it seems self explanatory yet still difficult to make it look as I need it to and comfortable for the members. Then I stumbled upon this proboards and I loved the look and it is similar to the layout I was hoping to get out of this. I could send a link to our amino community to an admin here if that's preferred. You could see the differences between us and any similarities. Would there be even a possibility of knowing your CSS theme codes or not a chance at all?