I should really really really update this
DIV Tags & CSS Properties: A Guide to Understanding Them
* under construction *
( I feel like I'm writing a thesis paper )
See those tables I have down there? Yea. I'm not using an actual table. I'm making them. Out of divs. Why? Cause I don't like using tables.
todo (for me): change the values; you forgot that auto / inherit / initial / etc. was a thing
PRELIMINARY INFO:
* What is CSS? What is it used for?
CSS stands for Cascading Style Sheet. Basically, it's used to make fancy shit.
* What are div tags?
A div tag is basically a customisable container. It starts out plain, like it's not even there, but when you add CSS into the mix then it has the potential to be something bootiful. CSS + div = <3
* Can I use CSS for every tag on Iwaku?
No, I don't think you can. As far as I know (and tried), these only work when appended to the glorious div tag.
* What can I do with these?
Make fancy cses, posts and whatnot? :'D Here's some examples of what I've made [1] [2] [3].
* TEACH ME PLS
Well, I'm not good at teaching, which is why I'm making this instead. Now, whenever someone wants my help with coding, I'll just dump this thread at them :'D I'm just kidding. Not really. If anyone has any questions regarding div codes on Iwaku (just divs, I'm no expert on accordions and tabs just yet) feel free to message me and I'll try to help as much as I can <3
A NOTE ON IWAKU AND CODES:
Iwaku is rather ... fragile? when it comes to codes. I've found that for the code to work properly and not fck everything up, the opening tag (ex: [div]) and the closing tag (ex: [/div]) must be of the same formatting style. For example, if the opening tag is in italics, the closing tag must be in italics as well. If they don't match, there's a tendency for everything to explode and break.
Personally, to make things easier for me and my soul, I usually just select my tags and remove any formatting done to them using the handy little button on the top left corner of Iwaku's text editor. I recommend that people do the same as well. Save yourselves the heartbreak and frustration of potentially ruining everything.
ABOUT THIS GUIDE:
This guide assumes that the person reading it already knows how to use a div tag on Iwaku. If you are currently reading this and do not know how, please head on to Iwaku's bbcode list page and familiarise yourself with how to use a div tag before proceeding with this guide.
THE BASICS
* Units
There are two kinds of units: absolute and relative. Absolute units are, as the name states, absolute--it is fixed. Under no circumstances would they change. Relative on the other hand, changes depending on the device / browser size you are viewing the page containing the element from. Here's an example to illustrate what I mean.
The purple box below has a width of 500px (pixel) and the green box has a width of 80% (percent). Pixel (px) is an absolute unit, percent (%) is relative.
If you're on a pc, try resizing your browser size. You'll see that while the green box adjusts, the purple one doesn't.
Here are some of the commonly used units (or at least, those that I mostly use--and some others):
unit
name
type
notes
px
pixel
absolute
1px = 1/96 of 1in
%
percent
relative
Makes object occupy __% of the screen.
pt
point
absolute
Personally, I mainly use it for font sizing.
cm
centimetre
absolute
--
mm
milimetre
absolute
--
in
inch
absolute
--
em
element
relative
Relative to the font-size of the element; w3schools provides a good example of this in action so I'm just going to link it here
[link]
There are other units, but like I said before, these are the ones I commonly use (well, except for the cm mm and in. I don't really use those). If you want to know what the other units are, you may head on over to w3schools. Just keep in mind that not all browsers / browser versions support all of these units. Pick one that is supported by majority of the popular browsers. w3schools included a table on which browser supports which and from which version of the browser onward.
* Values - WIP
Not all properties can be set with the same type of value. For example, a the width property cannot contain a value that you would normally use for a color; saying width:red; does not make any sense whatsoever and the browser will agree with me.
→ auto
→ inherit
→ initial
→ length
* Width & Height; Max & Min
As the property name implies, width and height allow for you to set the respective width and height of your div.
Max and min (max-height, min-height, etc.), on the other hand--as their name implies--set's the maximum / minimum height / width that your div can be. This is mostly done such that they adjust to the viewport size that you are on. To show you what I mean, here's an example:
The purple box you see below has a width of 500px.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget dictum nisl. Ut sollicitudin lacus nisl, eu vestibulum velit bibendum vitae. Integer ac risus vitae elit viverra sodales ornare nec risus. Nullam lobortis et lacus id tempus. Ut fermentum consequat mi eget bibendum. Ut vel arcu vel orci auctor luctus. Aliquam malesuada hendrerit risus ac commodo. Maecenas commodo libero sit amet lacus luctus, vel laoreet tortor aliquet. Praesent vel elit id turpis cursus mollis. Curabitur nulla mi, pulvinar eu ligula dictum, laoreet convallis ligula. Suspendisse elementum hendrerit nisi, nec consectetur nisl tincidunt elementum.
Integer fermentum nibh ac risus ultricies tristique. Vivamus vestibulum egestas tempor. Curabitur efficitur, purus sit amet feugiat egestas, lacus lacus tristique lectus, vitae vulputate justo orci aliquet felis. Suspendisse ligula lectus, tempus eu orci id, mattis volutpat lacus. In malesuada vitae dui eget facilisis. Ut ac luctus ex. Quisque magna metus, malesuada at massa quis, egestas porttitor nunc. Vestibulum tempus rhoncus interdum. Mauris ligula tortor, tincidunt non consequat eget, elementum sollicitudin eros. In hac habitasse platea dictumst. Praesent aliquet egestas lacus non vehicula.
Try shrinking your browser's width to about 1/4 of your screen's width. do you see what happens? The box adjusts it's width to fit the space. This is what max-width does. It's like telling it to, as much as possible, occupy up to 500 pixels. This is very useful for when you want make sure that what you made looks alright on both the desktop and mobile version.
Min-width / min-height works in a similar fashion, except it defines the minimum width/height that your container can have. To illustrate, check out the box below. I've set it to have a min-width of 500px.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget dictum nisl. Ut sollicitudin lacus nisl, eu vestibulum velit bibendum vitae. Integer ac risus vitae elit viverra sodales ornare nec risus. Nullam lobortis et lacus id tempus. Ut fermentum consequat mi eget bibendum. Ut vel arcu vel orci auctor luctus. Aliquam malesuada hendrerit risus ac commodo. Maecenas commodo libero sit amet lacus luctus, vel laoreet tortor aliquet. Praesent vel elit id turpis cursus mollis. Curabitur nulla mi, pulvinar eu ligula dictum, laoreet convallis ligula. Suspendisse elementum hendrerit nisi, nec consectetur nisl tincidunt elementum.
Integer fermentum nibh ac risus ultricies tristique. Vivamus vestibulum egestas tempor. Curabitur efficitur, purus sit amet feugiat egestas, lacus lacus tristique lectus, vitae vulputate justo orci aliquet felis. Suspendisse ligula lectus, tempus eu orci id, mattis volutpat lacus. In malesuada vitae dui eget facilisis. Ut ac luctus ex. Quisque magna metus, malesuada at massa quis, egestas porttitor nunc. Vestibulum tempus rhoncus interdum. Mauris ligula tortor, tincidunt non consequat eget, elementum sollicitudin eros. In hac habitasse platea dictumst. Praesent aliquet egestas lacus non vehicula.
Try shrinking your browser's width again. At some point, you'll begin to see that the box will stop getting smaller and kinda go past the post itself. Here's a screenshot to illustrate what I mean [spoili]
[/spoili]
property
description
usage
example
width
Sets the width
width: <number + unit>;
width: 300px;
height
Sets the height
height: <number + unit>;
width: 300px;
max-width
Sets the maximum width the div can have
max-width: <number + unit>;
max-width: 300px;
max-height
Sets the maximum height the div can have
max-height: <number + unit>;
max-height: 300px;
min-width
Sets the minimum width the div can have
min-width: <number + unit>;
min-width: 300px;
min-height
Sets the minimum height the div can have
min-height: <number + unit>;
min-height: 300px;
Before I end this section, there is something else I have to tell you guys about the max-width. With the way Iwaku parses the div tag, it automatically adds in a
max-width:100%; and a position:relative!important; I'll explain more on positioning in a later section. This means that no matter what you do if you go [div=max-width:100px;], it will not work due to the
max-width:100%; that's also there. Don't fret, there is a way to override that max-width of 100% with our own defined max-width (if it weren't possible, then how would I have created that example above). To do this, we're going to have to use !important which I will explain more about in the next section.
* I am !important
The use of !important is something that's not recommended among the dev community due to a lot of reasons, but but BUT! We're not exactly devs here--well, I am, but we're not exactly developing a website or something; we're simply making our posts fancy.
Anyway, !important is used to make a defined css property be unchangeable. In the case wherein you define a div to have... let's say,
width:300px; If you add !important to it like so:
width:300px!important; even if you add in a width of:400px later on, the width of 300px will be the one applied rather than the width of 400px. !important is essentially for overriding.
You may be wondering, why in God's name would I set two different values for the same property? And my answer to that is, you wont--doing that would be silly. Why am I explaining this then? It's cause of the max-width and positiong. As I've mentioned previously, here on iwaku, any div you made automatically has a
max-width:100%; and a
positioning:relative !important; Don't ask me why, that's just how it parses the div bbcode. As you can see, the max-width doesn't have the !important so you can still change that to whatever you want by defining your own max-width and appending !important to it. As you can see as well, the positioning has a !important attached to it. This means that no matter what you do, you cannot alter it.
property
description
usage
example
!important
Signals importance / priority
Append at the end of property (before the semi-colon) to be given priority
max-width:100px !important;
* Margins, borders, and paddings; what's the difference?
Imagine a square. This square is going to be your div container.
Now, imagine the square having a black solid outline. That outline is what is known as the border. The border is basically the edges of the square. Margin is the space outside the square; not the entire area of course. It's the gap between the border and the rest of the elements inside the div. Padding is similar to the margin, except it's found inside the div. The space between the border and the rest of the elements inside the div.
You know what, I think it'd be better if I show you guys an illustration.
The blue box in the middle is your div container (please ignore the number inside it for now, I screenshotted this from the box-model representation of this page I'm on). The rest are labelled as they are; dark grey is the border area, yellow is the margin area and purple is the padding area. As you can see from the numbers, there's no margin and border for container, but there is a padding of 39 for the top of it.
Note on padding: It should be noted that adding a padding will not lessen the size of your container. For example, if your div container has a size of 500px x 300px, the space you have inside will remain the same, however, your overall div will grow. This is pretty confusing so here's an example of what I mean:
As you can see from the box model, the red rectangle has a width of 500, a height of 300, and a padding of 3 on all sides. However, when you hover an inspection tool over the red rectangle ...
It says that the red box has a dimension of 506 in width and 306 in height. This is because of the padding. Since there is a padding of three on all sides, both the width and the height of the element is affected. The width is computed as such: displayed width = defined box width + right padding + left padding; and the height is computed in a similar fashion: displayed height = defined box height + top padding + bottom padding.
You may be wondering why I'm going through such lengths to explain this. That's because sometimes you want to be precise about things, and knowing this would help with achieving this precision.
* Using shorthand - Margin & Padding
It's possible to set different margins / paddings for all the sides in one go--sorry guys, you can't really do this with borders. This allows lesser code and makes shit easier for all of us. It's called shorthand. There are four cases when it comes to margin and padding: one value, two values, three values and four values.
In the case of
one value (e.g.
padding: 20px; margin: 20px;), it'll set the margin/padding for
all sides of the box.
If it's two values, it'll set the padding for the top / bottom and right / left accordingly; first value is will be the margin / padding for the top and bottom, and the second will be the value for the right and left. For example, when we say
"padding: 20px 30px;" we are essentially setting the box to have a top padding of 20px, a right padding of 30px, a bottom padding of 20px and left padding of 30px.
For three values, it'll set the padding for the top, right / left and bottom accordingly; first value will be for the top, second value for the right and left and the third value for the bottom. With that said, having
"padding: 30px 20px 10px;" will result into a top padding of 30px, a right padding of 20px, a bottom padding of 10px, and a left padding of 20px.
Lastly, in the case of four values, the padding will a clockwise fashion. This means the first value is for the top, the second value is for the right, the third value is for the bottom, and the last value is for the left. I believe you get it by now, but just in case here's an example:
"padding: 5px 3px 4px 6px;" will result in a padding of 5px for the top, 3px for the right, 4px for the bottom and 6px for the left.
If you ever find yourself confused with which value is which in the shorthand, just remember that it's set clockwise.
// Note: T = top; R = right; B = bottom; L = left
property
description
usage
example
padding
Sets the padding for all sides in one go
padding: <value + unit>;
padding: 20px;
Sets individual padding for top, right/left, and bottom in one go
padding: <value for T + unit> <value for R&L + unit> <value for R;
padding: 20px 10px;
Sets individual padding for top/bottom and right/left in one go
padding: <value for T&B + unit> <value for R&L + unit>;
padding: 20px 10px;
Sets individual padding for the sides in one go
padding: <value for T + unit> <value for R + unit> <value for B + unit> <value for L + unit>;
padding: 20px 15px 10px 5px;
padding-top
Sets padding for the top only
padding-top: <value + unit>;
padding-top: 20px;
padding-right
Sets padding for the right only
padding-right: <value + unit>;
padding-right: 20px;
padding-bottom
Sets padding for the bottom only
padding-bottom: <value + unit>;
padding-bottom: 20px;
padding-left
Sets padding for the left only
padding-left: <value + unit>;
padding-left: 20px;
margin
Sets the margin for all sides in one go
margin: <value + unit>;
margin: 20px;
Sets individual margin for top, right/left, and bottom in one go
margin: <value for T + unit> <value for R&L + unit> <value for R;
margin: 20px 10px;
Sets individual margin for top/bottom and right/left in one go
margin: <value for T&B + unit> <value for R&L + unit>;
margin: 20px 10px;
Sets individual margin for the sides in one go
margin: <value for T + unit> <value for R + unit> <value for B + unit> <value for L + unit>;
margin: 20px 15px 10px 5px;
margin-top
Sets margin for the top only
margin-top: <value + unit>;
margin-top: 20px;
margin-right
Sets margin for the right only
margin-right: <value + unit>;
margin-right: 20px;
margin-bottom
Sets margin for the bottom only
margin-bottom: <value + unit>;
margin-bottom: 20px;
margin-left
Sets margin for the left only
margin-left: <value + unit>;
margin-left: 20px;
* More on borders
→ thickness? I forgot the exact property
→ style: solid, dotted, groove? I can't remember rn
→ colour
→ shorthand for borders
→ radius
//this is gonna be a lot
* Setting the background
→ colour
→ image
→ repeat
wip
* Fonts: size, colour and family
→ size
→ colour
→ family
wip
* More on text
→ letter-spacing
→ word-wrap
→ font-variant
wip
* Making it scrollable: the overflow property
→ overflow
→ overflow-x
→ overflow-y
wip
font-family - sets font family
usage: font-family: fontName;
ex: font-family: Century Gothic;
font-size - sets font size; em and px both work
usage: font-size: number px/%;
ex: font-size: 12px;
font-size: 2em;
background - sets background colour / image (use url)
usage: background: colourName/colourHexCode/url
ex: background: red;
background: url(something.png);
background: #000000;
border - bounding edge of the box
usage: border: size/thickness style colourName/colourHexCode
ex: border: 1px solid black;
border: 1px solid;
border: 1px;
styles: solid, dashed, dotted, double, groove, ridge, inset, outset
border-right / border-left / border-top / border-bottom - side specific border
usage: //same as border
border-radius - how rounded the border's corner should be
usage: border-radius: number px;
ex: border-radius: 10px;
* Altering the opacity
wip
INTERMEDIATE?
→ Layouting : Columns, rows, etc.
//Bootstrap
//explain wth that and why it makes things easier
//Mention the golden rule: never layout using tables
//explain why it is bad practice
//mention that unfortunately Iwaku doesn't have rows columns thing
//but, there's still a way to layout without having to resort to using tables: divs
//introduce
→ Layers : How to make things overlap
→ Masking : TBA (I'm not really sure if it's possible here) //update: possible, but it's very finicky + I learned that it's not compatible with all browsers *cough*firefox*cough*
→ Positioning : Getting shit in the exact place you want them to be
wip
ADVANCED
→ Inspect Element
→ Using calc() ?? Maybe. Idk yet.
wip
TIPS & TRICKS ?
wip. maybe. idk.
→ Using unicode characters / symbols
→ Commenting
I don't know about you guys, but sometimes (a lot of times) when I'm coding I go, "What if I remove this properly? Would that be better?" and so I proceed to remove it to find out and then continue on working. Then later on, I find that it was better when that property was there, but now it's such a pain to retype it. Sometimes I've completely forgotten what value I placed on the property and have to make an educated guess and go back to trial and error. Maybe I'm just a lazy butt, but I find that to be so tedious. Thankfully, I discovered that you can actually comment out certain properties. Simply surround the property in /* and */ and viola! The next time you run the code, it'll act as if the property wasn't there. Like I mentioned before, this can be very usefull when you're simply testing out what properly will make your work look good.
FINAL NOTE
Please please pleaseee for the love of all that is good, please do not forget that not everyone is on the same screen resolution as you. Try to keep in mind the mobile users and how your code would look on their end. As much as possible, it is ideal that at the very least, the content of your post is readable on mobile. Even if it doesn't look as good as it does on desktop, the important part is that people can read it. ALSO, please don't forget about the bigger screens as well. My laptop's screen resolution is higher than most? I'm not sure what the norm is these days tbh, but it certainly feels like mine isn't the norm. I've seen a lot of posts here on Iwaku that I'm certain would look great on a slightly smaller screen, but unfortunately looks weird on screens such as mine. Like, there'd be a lot of white space that I feel isn't intentional (I know cause when I resize my browser width by just a bit it looks good).
tl;dr: Take into consideration ho your code would look like across different screen sizes.
RESOURCES
* Unicode symbols: unicode-table.com
* Lorem ipsum generator: lipsum.com
* For your fancy text banner needs: fontmeme.com
* Online photo editors (with layers): sumopaint , pixlr
//verdict: sumopaint runs slower for me (cause I'm on a shitty desktop whenever I use it) but I feel like I can do more with it. It's closer to what I'm used to which is photoshop. pixlr on the other hand, runs smoother for me in comparison to sumopaint, but I find myself scratching my head on how to do this and that since it's quite different than what I normally use. They're both good get the job done tho. Both of them get fonts that are installed in your system which is pretty nice. Here's a sample of what I've made on sumopaint and on pixlr. They're both pretty simple. For the second one I had to change the eye colour and hair colour a bit to match my character. I'll make a pro con table for the two later on (if and when I feel like doing so).
WHAT I USE
* Browser : Firefox Developer Edition & Chrome
It depends on what pc I'm on. When I'm on my laptop or using a pc at school, I use Google chrome. When I'm on the desktop in my mom's office, I use Firefox's developer edition because direct downloads on chrome causes a bsod (blue screen of death)--IDK why, probably going to reformat this thing one day after my mum backs up all their files onto a cloud service or something. Oh wait. There's another one. There's this one labat our school where I use regular firefox (cause of proxies that can't be set on chrome cause admin privileges needed and all that shizz). But anyway, as for which of the two I really prefer I would have to say--well, old me would've said chrome without a doubt, but I'm now that I've been using Firefox dev for a while now I'm in conflict between the two. So yeah, I like chrome cause it's... chrome; it's what I've grown used to. I like Firefox dev cause of the tools I have at my disposal when I press F12. My favourite is the built in colour picker that allows me to pick off a colour out of any pixel on the page I'm viewing. I feel like chrome has something like that as well, but I'm too lazy to find out how to make it available for use... or something like that. Words. Help. Blargh.
* Photo Editing Software : Photoshop CS6 & Sumopaint
I use sumopaint when I'm being a lazy butt to open photoshop. PS eats up quite a lot of memory when running, and the desktop in my mom's office isn't that powerful so it has the tendency to lag when photoshop is open (there's a certain zoom level where it lags like crazy). Photoshop is what I'm accustomed to. I prefer using either CS6 or CS4, I do not like CS5 for some reason, even back when it was new. In fact, I believe I preferred CS3 over CS5 :'D Sumopaint is an online tool, it's a bit similar to photoshop. It's not as powerful, of course, but it has layers and really that's super duper helpful.
* Iwaku Theme : Thunder Grey Dusk
Ever since I first joined Iwaku, I've always liked Thunder grey the most. I find it to be just the right level of dark. The only thing that made me steer clear of it at first was this [spoili][/spoili]. I didn't like how it was grey as well so I switched to the dark / black theme. But now I'm back on the dark grey theme and I've learned to live with it. My codes cater to all themes though, I don't discriminate :'D pfft. But seriously though, I make stuff that can be viewed and read through properly on all themes available on the site. If you ever see one of my works which isn't friendly on a certain theme, please let me know--I'm only human, I make mistakes as well. c:
edit: Post Iwaku update that added the 'ad styler', Dusk is now my choice of theme. It's the closest to what Thunder Grey was--actually, I can't tell if they're actually the same just with a different name. //shrug.