Included page "component:language-theme" does not exist (create it now)
What are Divs?
Div's are standard web containers that define a thing that holds other things. Those things can be text, other divs, spans, and other web objects. You can style them literally however you want, using properties.
Generally this is done through what's called CSS, or cascading style sheets.
Using Divs allows you to create boxes and various other shapes to fit the needs of your article.
An example Div:
Code:
[[div style="background: BlueViolet; border: 1px solid white;"]]
This is a div!
[[/div]]
Result:
This is a div!
Creating a Div step by step
[[div]]
Text
[[/div]]
This is the basic, blank template of a div box. This one doesn't actually do anything yet because we didn't tell it to; let's choose what we want it to look like then.
[[div style=" "]]
Text
[[/div]]
There, we're going to put a series of CSS declarations which are bits of code specifying each property like the background color, the border etc. Let's say I want a blue background.
[[div style="background-color: SlateBlue;"]]
Text
[[/div]]
Text
A CSS declaration is always made in the same way: a CSS argument, here background-color which targets the background to say that what comes after will be about it, followed by a colon and a value which tells exactly how it should be, here a color name in English. It could also have been an hexadecimal code (or RGB, or any other less common code that also specifies colors) or even the link of an image you want to display in the background. Then the declaration ends with a semicolon and can or not be followed by other declarations.
The single difficulty in this process is to know the right names for the different arguments and values: you will learn more and more by heart with time and practice, but you should probably use a reference list to start with all the useful info and details at hand.
I can quickly make my div block look better using other such values!
[[div style="background-color: SlateBlue; border: 1px solid white;"]]
Text
[[/div]]
Text
Here, we're using several values in a row to define distinct aspects of the desired element: I want a border, so I specify its width (1 pixel), its appearance (solid, because it could also be a dashed one) and its color (white). But you may also have noticed a most ungainly spacing inside and outside of this box.
[[div style="background-color: SlateBlue; border: 1px solid white; margin: 1em; padding: 1em;"]]
Text
[[/div]]
Text
The margin and padding arguments respectively target the space between the outer border and the content above, under and on the sides of the box and the space between its inner border and the other elements it contains. They both are almost compulsory, especially the padding, if you want your box to be easy on the eye.
The measure used here, the em, adapts its size to that of the font used with it. If your box contains very big text, these spaces will adapt themselves to provide a more accurate display. However, you can also use pixels (px) or any other fixed measure.
[[div style="background-color: SlateBlue; border: 1px solid white; margin: 1em; padding: 1em; font-size: 300%;"]]
Text
[[/div]]
Text
But let's polish this box a bit to make it more stylish.
[[div style="background-color: SlateBlue; border: 1px solid white; margin: 1em; padding: 1em; border-radius: 0.5em; box-shadow: 5px 5px;"]]
Text
[[/div]]
Text
I have rounded the corners up and added a shadow, but it's a bit too aggressive on the eye and I'd like it to be on the top part. The first two numbers in px stand for the horizontal and vertical shadows (x and y axis). Let's invert the vertical one and add a third measure which indicates a blur on the shadow to make it smoother.
[[div style="background-color: SlateBlue; border: 1px solid white; margin: 1em; padding: 1em; border-radius: 0.5em; box-shadow: 2px 2px 6px;"]]
Text
[[/div]]
Text
And why not add a color to this shadow while we're at it.
[[div style="background-color: SlateBlue; border: 1px solid white; margin: 1em; padding: 1em; border-radius: 0.5em; box-shadow: 2px 2px 6px #da94ff;"]]
Text
[[/div]]
Text
And here you are, you just created a div box! It may seem complicated because we referred several times to arguments you probably have never heard of before but that's where the real work is; understanding and learning the utility and use of these codes. For this, there's only one way: trying. If you want to try your hand with the most common arguments, you can use several online tools like this one and you will soon be able to stand on your own two feet!