Thread:Hackey5/@comment-25407271-20150825055059/@comment-5645428-20150825101424

The basis looks good to me. And you appear to have figured out pseudo selectors! Took me a while to find out how to manipulate those properly!

Every (experienced) coder has their little set of rules that they u

Here's some finer details that I would consider looking into:


 * On Wikia, after over a year of styling the Oasis skin, I have found no practical reason to use 'inherit' as a value. You cannot know what in fact is being inherited unless the parent is specified. Why not just use the actual value you want?


 * Where you can, use attribute shortcuts like 'margin' and 'border-radius' instead of specifying each targeted side. Remember, the order is always clockwise, starting top/top-left. You can specify one to four values:
 * One will apply to all sides.
 * Two will apply to top-bottom and right-left.
 * Three will apply to top, right-left and bottom.
 * Four will apply to each individual side.
 * Border-radius behaves differently since it works on corners and not sides. Specfiying adjacent corners will require all four values to be specified. (check out the profile avatar on the test wiki to see why)


 * It is a lot simpler to specify three hex values instead of six. The difference in colouring is very slight otherwise, and it is easy to produce your own colours knowing the basic order, red, green and blue.


 * If you are using a gradient colour, you will need to use a single tone colour as a backup since gradients aren't always recognised (on my iPhone 4 it isn't on any browser). However, rgba by today's standards is well recognised, meaning you shouldn't need to specify an rgb backup


 * The more coding you do, the better you will come to understand the intended use of different attributes. Remember that padding is considered a part of an element, and will be contained by any borders and will be filled with any background colours. Margins are not part of an element and should be used for spacing. Margins may overlap if those elements are not in separate divisions, which can come in handy sometimes. As you guessed, padding does not share this characteristic.


 * Consider using line-height instead of padding or height when working with single lines of text. The paragraph default on Oasis is 22px.


 * Spend the time learning when it is appropriate to use block, inline and inline-block displays.


 * For width and height, 'auto' means that the element will take up the minimum amount of space within its base constraints, while '100%' will make the element take up as much room as its container (be careful of the unwanted effects of using margins and padding in combination with this).

That's all for today's lesson!