2020 note: Now I don't agree with some details in this topic (and how it was written in general), but this isn't a professional markup lesson, and is still 'edible' for simple styling.
- Foreword -
Nearly everything, what you have seen in my guides - can be repeated in your clan-news. I'm not a pro web-designer 80 lvl, but already know something and can share my knowledge with you. Here is tutorial about how it works. I've tried to gather here everything most useful exactly for drago forum formatting. It may seem too complex, but it isn't, if you are really interested. You just need time, experimental topic in clan-news and a cup of coffee (codes don't work without coffee!).

You also can experiment here: JsFiddle, Liveweave or Codepen

If you have made a mistake in the topic and broke everything - it always can be fixed from the outside. And don't expect, that you will understand and remember everything from the first 'run'. Let the experience to do his work)

You are already familiar with base codes on this forum:

b (bold) =>

u (underline) =>

i (italic) =>

Combined =>

These are basic codes of the language, named HTML - HyperText Markup Language. With codes of this language you can place images, change the text size, color, make tables, etc. It's only about styling, no mouse over / click effects or animation.




Src means source. There can be adress of .png / .jpg / .svg / .gif / etc images.

→

To get an image link faster, you can right-click on image and in the opened menu, choose "Copy image address" or "Copy image url". It doesn't work everywhere, but mostly does.

(i) gyazo.com - a comfortable program for making screens (when you get a link, just add .png to it).

If you already have a saved image, it can be uploaded to imgur.com/upload

So, we have a displayed image, but it looks bad in the text, with huge spaces.




To display our image in the text, we need to add some style, like this:

          oppa gangnam style, op, op... gangnam style. oppa gangnam style, op, op, op... gangnam style. oppa gangnam style, op, op... gangnam style. oppa gangnam style, op, op... gangnam style.

Another problem. Text is sticking to the image. We need to add some free field. Margin will help.

Here could be another text, but... Suffer, oppa gangnam style, op, op... gangnam style. oppa gangnam style, op, op, op... gangnam style. oppa gangnam style, op, op... gangnam style. oppa gangnam style, op, op... gangnam style.

(px = pixel)
Multiple margins can be combined:



OR



Remember, by the direction of clock-arrows, margin: top right bottom left;

If you have a constant margin in all directions, just write


All item-images have 60 pixel width and height, but you can change them, if necessary:

→

height: 50px; also could be set, but usually it adjusts to the width, saving proportions.

If you want to center the image, remove everything and put it inside the <center> tag (deprecated, but works):

<center> <img src="..." > </center>

Correct ways to center the image:
• style="margin: auto; display: block;"
• <div style="text-align: center"> <img src="..."> </div>




a = anchor

href = hypertext reference

A simple link (don't click):

→ Game guides

When you click such links, the current page reloads to the linked page. It's not so comfortable, if there is another information in the current page, that will be useful. When user clicks the link with pressed 'CTRL' key, it always opens in a new tab. But everyone don't know this. If you are creator of the link, it's good to make it open in a new tab:



It will make this link → Game guides (try to click). Target attribute helps to tell the link where to open.

The link text can be modified, for example, with b or u tags:

→ Game guides

It also can be colored (will see below).




Let's open info of a random item → http://dragoneternity.com/entity/item/28696.html

Now we have his image link and can make an image:





But all items in our forum have a golden border. We could figure out his colors and make a border, but it has own 'name' in the forum, which can be added to a code. His name is gold-frame. It's not a unique code and works only in our forum.

→

Now we have an image, which can be used with link:



To add a pop-up description, we also have a code, that works only in the drago forum. It's a JavaScript function and you don't need to understand it, just remember: onmouseover="itemHint(this, 28696);"



This code already gives a complete item with link and description:



If you need to display some quantity, remember this classes:



150



Also, you can replace his image with the text, if you need to link an item with changed title:



Many-many Plums.

Here I used a ready color code of our forum, but there are another ways to change the color.







To learn, how to change a color of something, at first we must figure out, how do colors work here.
There are many key words as color: red; or color: green; or color: black; etc., but all this names give an exact colors, which are not so useful. More often you have to pick an exact shade, that seems to look better.

At W3schools site you can find this color picker (don't panic!):



At first, attention to the central text rgb(255, 0, 0)

RGB means Red Green Blue, and the thing is - that all colors can be presented by the combination of Red, Green and Blue colors. Each pixel on your display consists from the mini-RGB lights.

If they dont glow (0, 0, 0) - you see the black color.
If all of them glow with their maximum (255, 255, 255) - you will see the white color.
RGB(255, 0, 0) - maximum red and none green and blue. This code will give this color.
RGB(0, 255, 0) - This green (bad... bad green!)
RGB(0, 0, 255) - This blue (Not so good blue!)

So, we can play with this numbers (for example, Here) and get a huge choise of colors.

RGB(128, 0, 0), RGB(240, 120, 0), RGB(20, 60, 120), RGB(0, 100, 0), RGB(200, 0, 160)

If you wonder, how it works... I can't explain it better, than Vsauce - Michael here.


If you met a cool color somewhere, press Print Screen (PrntScr) button on your keyboard, open the 'Paint' program ant press [CTRL + V]. And usually I use the Paint edit-color tool, to choose a good color, but W3-colors also will be helpful for understanding, how it works,



As you can see, forum's usual color is rgb(255, 222, 159);

Besides the RGB colors, also exist another color systems.

Hexadecimal numeral system uses 16 symbols to count, instead of usual 10 of the decimal (don't panic!).

Usually we count like this:

0,	1,	2,	3,	4,	5,	6,	7,	8,	9,
10,	11,	12,	13,	14,	15,	16,	17,	18,	19,	etc...

But in Hex system, it looks like...

0,	1,	2,	3,	4,	5,	6,	7,	8,	9,	a,	b,	c,	d,	e,	f,
10,	11,	12,	13,	14,	15	16,	17,	18,	19,	1a,	1b,	1c,	1d,	1e,	1f,
20,	21,	22,	23,	24,	25	26,	27,	28,	29,	2a,	2b,	twenty-c etc.

As you can see, in Hex system, 15th number is f /// 16 = Hex 10 /// 17 = Hex 11 /// 18 = Hex 12 /// ...
.../// 26 = Hex 1a /// 27 = Hex 1b etc. If you keep counting, 255 will be equal to Hex FF

We don't have to operate with numbers, higher than 255, so you don't need to remember a complex formula of Dec → Hex numbers transformation. Just take any number from RGB and divide it by 16.

255 / 16 = 15 integer + 15 residual number. As you remember, dec 15 equals to hex F

So, Dec 255 = Hex FF

Why am I writing this?

Because RGB(255,255,255) and #FFFFFF is the same thing. And sometimes it's easier to remember (and write) a Hex-number, than RGB.

Second thing, if you have a Hex color like #FF55DD, it can be abbreviated to #F5D

So, if you need a white color, it's faster to type color: #fff; than color: rgb(255, 255, 255);

Other examples:

RGB(200,100,0)

200 / 16 = 12 integer + 8 residual = C8
100 / 16 = 6 int + 4 res = 64
0 = 00

RGB(200,100,0) = #C86400
____________________

#045ACF (it's our game item's blue)

04 = 0x16 + 4 = 4
5A = 5x16 + 10 = 90
CF = 12x16 + 15 = 207

#045ACF = RGB(4, 90, 207)

(!) Letter cases doesn't matter. #FFF = #fff //// RGB(0,0,0) = rgb(0,0,0) = rgb(0, 0, 0)





Let's return to the links and add colors to them.





First link: Game guides, second link: Game guides

Color and Background-color can be applied not only to links, but everywhere, where color can be changed.




Span is inline element and used to change the text's color, background or something else.

→ Text

→ Text

Also you can change fonts:

→ Text

→ Text

→ Text

→ Text

→ Text

→ Text





div = division

For example, orange bordered boxes in this topic were made with divs.



Let's write it in another way...



And try to explain each '?'.





Not only div can have a border, but many other elements.

Instead of

I just used combined version

You can't make different double borders with border. Here I used shadows for double border (see later).

Border-style also can be:



Double border must have at least 3px width, otherwise it will not work.

Also you can set own border for each side:







Look at examples:
    1. div style="width: 80px; height: 80px; border: 2px solid red;"
    2. div style="width: 80px; height: 80px; border: 2px solid red; border-radius: 50%"
    3. div style="width: 80px; height: 80px; border: 20px solid red; border-radius: 50%"
    4. div style="width: 0px; height: 0px; border: 40px solid red; border-radius: 50%"

1 234

If you have a square, radius: 50% gives a circle each time. You could also write border-radius: 40px;

Circle divs are not so useful, but if you have some image and need to make a transparent circle image - it's easier to set 50% radius, than to cut it in an image editor.

→ →

Another divs:

      







Usually div element is transferring to a new line and occupy his 100% width, like this:


It has a display: block; property by default. When you add display: inline-block; it helps to put div in the text and match his borders to the inner-text width:

Some text, and property, without exact width. It depends from the inner text.

Also we have display: none; which makes any element invisible. Now we don't need it, but sometimes it's extremely useful. Also, exists another similar thing - visibility: hidden;

Demo of the difference:









At first, some simple examples, and then explanations:












As you can see,
• First number tells, where to put the shadow in the directions left-right, depending from his positive or negative value,
• Second number = top-bottom,
• First and second numbers must participate, even if their value is 0, otherwise the shadow won't work.
• Third number adds a blur effect,
• Fourth number tells the width of the shape-shadow. If your div is circle, it will be circle too.
• And set any color.

You can remember it by this image:


If you need to add multiple shadows, separate them with commas like box-shadow: shadow-1, shadow-2;
In this case, if shadows are falling to the same direction, the priority has the first one.

So, you can take any shadowed border; pick his colors in the Paint, with x8 magnifier and reproduce it in your code. But let's make a multiple shadowed border at first.


Here we have:



1. border: 3px solid #fff1ba; => it's the main thick and light colored border
2. inset 1px 1px #333, => Top and left inner borders
3. inset -1px -1px #999, => Bottom and right inner borders, a little bit lighter
4. 0 0 0 1px #555, => Outer thin dark-grey border
5. 2px 2px 5px #333; => Bottom and right blurred outer shadow.

If you copy this code, it will repeat all borders and shadows, but inner text won't be centered.
This will be discussed in the next point, but now, let's recreate our gold-frame border.

Make somewhere an image with gold-frame >> Print Screen >> Paint >> CTRL + V >> Max-Magnify:



I've got RGB(172, 145, 94) for the outer border;
RGB(255, 243, 179) for central light top+left and RGB(232, 197, 91) for central bottom+right;
RGB(71, 61, 26) for the inner dark border.

So, we can make the inner dark border with

And add a 1) central top-left, 2) central bottom-right, 3) outer shadows:



The original gold-frame code is a bit different, but let's compare what we have:



The left one is original <img src="..." class="gold-frame>
From the right side is our code:



_____________________________

The last thing about shadows. When you add a shadow color, it will be solid. But sometimes you need a transparent shadow, which will not cover the text. Here will help RGBA colors.

It's the same RGB color, with adding the fourth, Alpha channel (Wiki ), which can set the transparency of the color. It works like this:


Some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text

If the 'a' value equals 1 - it's exactly the same as RGB color, if it equals to 0 => color will be invisible.





Text-align tells, where to put the text (or image or smth else) in the element:



If the margin sets a free field to the outside of element, padding does the same thing from the inside, by the same rules (Padding: top right bottom left;).




If you have a

It will give this T E X T, but add padding: 0 15px 0 15px; and it will turn to T E X T

Or if you have some text in the...

p = paragraph

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

This is a <p style="padding-left: 50px;"> but it also could be a span instead of p and some inner text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.</p>

And another text.






It's simple, you just have to know values (move your mouse over):

          

        





tr = Table Row

td = Table Data

The structure of a simplest table:

<table>
      <tr>
            <td>Row-1, Cell-1</td>
            <td>Row-1, Cell-2</td>
      </tr>

      <tr>
            <td>Row-2, Cell-1</td>
            <td>Row-2, Cell-2</td>
      </tr>
</table>

I wrote like this for better understanding. When you have a ready table, you must remove all spaces and write it in one line (in our forum).

But this code will not make a cool table. It will be without borders and background. So, we must add a style: background-color; border; padding; to each <td> but it will make our table too complex. It's time to level-up our styling. But before, some important structural things.

Colspan and Rowspan allow to combine together two or more table cells. Example:

<table>
      <tr>
            <td colspan="5">Some Heading</td>
      </tr>

      <tr>
            <td colspan="1">One</td>
            <td colspan="1">One</td>
            <td colspan="1">One</td>
            <td colspan="2">Two</td>
      </tr>

      <tr>
            <td colspan="3">Third Row - First cell</td>
            <td colspan="2">The second cell</td>
      </tr>
</table>

Such structure (with added borders) will make this table:

Some Heading
One	One	One	Two
Third Row - First cell			The second cell

In other words, colspan is setting a 'worth' to the cell. Here we have maximum four horizontal cells, but because the sum of colspan-values in each row = 5, the header with colspan="5" takes all of them together. Another example:

<table>
      <tr>
            <td colspan="3">Some Heading</td>
      </tr>

      <tr>
            <td rowspan="4">BIG CELL</td>
            <td>cell-2-first-row</td>
            <td>cell-3-first-row</td>
      </tr>

      <tr>
            <td>cell-2-second-row</td>
            <td>cell-3-second-row</td>
      </tr>

      <tr>
            <td>cell-2-third-row</td>
            <td rowspan="2">cell-3-third-row</td>
      </tr>

      <tr>
            <td>cell-2-fourth-row</td>
      </tr>
</table>

The default value of colspan and rowspan = 1. So, you don't need to add span="1" each time. If you noticed, the first <tr> has 3 cells, but others have only 2. It's because the BIG CELL occupied four rows with rowspan="4". So, in the next row, cells check - and see, that the first row is also busy, and take the second and third places. The same thing in the last rowspan="2". That cell took two rows, that's why we need only one cell in the last row:

Some Heading
BIG CELL	cell-2-first-row	cell-3-first-row
	cell-2-second-row	cell-3-second-row
	cell-2-third-row	cell-3-third-row
	cell-2-fourth-row

CSS - Cascading Style Sheets

We used to write the style of each element in his own code like style="..."
But what, if you have 10, 100 elements with the same style? Or a huge table with the same cell-styles? CSS has a new feature, allowing to collect all complex styling in other place, to make your HTML code look more understandable.

We can give a class to each similar element and write a general style for that class.
Here's how it works. Instead of:



We can add a class and get the same thing:



Yes, so easy)) Don't forget to add a dot before your class. And that's how our class="gold-frame" works. Developers already wrote the .gold-frame {...} style somewhere, and his style works on each forum page.

*It's important to leave the style tag somewhere higher in the code, then your HTML elements.

And be extremely careful, to open your <style>, write something and close the </style>. Otherwise opened, but not closed style may destroy all your page. You can't break it permanently, but sometimes it's hard to figure out.




Let's take a simple table and add classes:

<table>
      <tr class="TR">
            <td class="TD"> 1-1-1 </td>
            <td class="TD"> 2-2-2 </td>
      </tr>

      <tr class="TR">
            <td class="TD"> 3-3-3 </td>
            <td class="TD"> 4-4-4 </td>
      </tr>

      <tr class="TR">
            <td class="TD"> 5-5-5 </td>
            <td class="TD"> 6-6-6 </td>
      </tr>

      <tr class="TR">
            <td class="TD"> 7-7-7 </td>
            <td class="TD"> 8-8-8 </td>
      </tr>
</table>

CSS:



And we have a table:

1-1-1	2-2-2
3-3-3	4-4-4
5-5-5	6-6-6
7-7-7	8-8-8

Here I've just selected even and odd TR-s, to add different backgrounds to them. It's a special CSS-selector code, that you have to remember or write somewhere.

If you want a one general background, you can select just all .TD {background-color: ...;} without complex selectors. And I'm writing separate styles for better-looking code. When wou already have a working code, all styles can be combined in one string <style> .class-1 {...} .class-2 {...} .class-3 {...}</style>





Button is an HTML element, but I don't accept buttons without hover effects!)

If you have a .class with base styling, you can add another style to it, in case of hover, active (at the moment of click) and focus (which will keep the style after the click, until you don't click in another place).

Say, we have three buttons:







All of them have a similar base style .BUBU




.DEMO-1:hover.DEMO-2:active.DEMO-3:focus

Focus doesn't work with most of elements. So, sometimes button can be used instead of div, if focus required. Also you can set another color to your .Table-Row:hover, to highlight the hovered tr.





Opacity works like rgba color's a value.

Opacity: 1; - - Default displaying, Opacity: 0; - - Invisible.




Transition is setting the time of changes on hover.

.class {transition: 0.5s;}transition: 1s;3s;


Transform helps to reach button lift-press effects.

A button with .class:hover {transform: translateY(-1px);}
And .class:active {transform: translateY(1px);}
Hover and click:

Click me


More complex example:


Button




The code of this button:




It has default padding-bottom: 6px; which becomes to 2px, when active. This makes a pressing effect for letters, which could also have a gradient background and 3d effect, with monster code.

(!) In our forum "multiple-lined" CSS codes doesn't work. You must place them in one-line. So, if you met somewhere a huge CSS code and want to try it - don't spend time to remove all spaces, just use a CSS-Minifier.






Background-image must be after the background-color, cause everywhere in CSS, the last code has priority. So, at first will work background-image, but if user's browser doesn't support that code - it will display background-color.

By default, linear-gradient sets the colors from top to bottom and you can add as many colors, as you want or set the direction:





Also background-image can be an actual image:



It's useful, if you want to make a button with background image.

A button


background-size: cover; makes the image to adjust to 'parent' div or button size. In this case, you don't need to add background-repeat: no-repeat; But you also can set in pixels the background-size: 200px 30px;

Background-repeat: repeat is useful, if you have a seamless image/background.

For example, you can change the background of current forum-page, adding this codes:







Etc. Search in google for 'Seamless texture of something'






This property makes the element independent from the other elements and lets to play with positive or negative margins, to place it anywhere in the page.

If the margin-left: 100px; sets a free field of 100px at the left side (moves the element to the right by 100px), margin-left: -100px; will move in to the left. margin-top: -100px; - will move to the top. So you can place some buttons...


But you must account, that viewers from phone don't see the background of forum. Only his main content.

Also you can set a position: fixed, if the button must have a fixed position, independent from scroll. Example - SiteMap button.





You already know about class selector - dot before the class.
There are more exotic selectors, but they are rarely used. It's more important to know, how to combine multiple classes and selectors.

Multiple classes of the element must be just separated with spaces:



Here is a little bit harder part, but don't afraid this codes, you don't have to remember all of them. Just need to understand and know, that they exist.

1. If you need to change something only in that elements, which have both (or more) of exact classes, select them without spaces:



2. The same thing, with spaces, will select another classes:



3. If many classes have the same style, they can be written as:



4. If you have 100500 classes with similar key-word as BUBU-1, BUBU-2, BUBU-3, BUBU-1000, instead of writing their general style with commas, you can select them with the key-word:



5. If we have such structure:



The blue divs are called Child elements for 'ONE', because they are inside the 'ONE' without any other code. But the second 'TWO' has another div as Parent (the red one) and is not the child of 'ONE'. So, if you need to select all child elements, we have this code:



6. Sometimes you need to select all 'TWO' elements, which are placed immediately after the 'ONE':



So, this will select the blue 'TWO', but not the green:



7. And the last:



In this structure:



It will select blue divs, but not the 'TWO' inside the red one.

8. CSS doesn't have global independent selectors. JavaScript and jQuery have...



Now we can look at some practical usage.



So we have an in the text !) INVIS is invisible for default (display: none), but when user hovers the LINKY, code tells the INVIS to become into display: block; With margins you can put it anywhere.






You can add some content to the element, :before his inner text and :after. The main thing is, that they can get an absolute position and placed everywhere, if necessary. And it can be an image, with borders, shadows, etc. Before and After work only with elements like <element>...</element>. They will not work with self-closing <img> or similar codes.

Demo:



Here background-size is about the image, and width-height are about the 'before' and 'after' sizes themselves.
Content: 'Must be in the code'; even if it's empty, otherwise it will not work.











I know the forum comment's class... so, will add something there. Hover the comments))
Here is that code:



*If you have many elements, that are overlaying each other, z-index can set the priority. Here I have 100500, to be sure, that it will be on the top-layer.

**CSS doesn't have permanent click effects. It's work of JavaScript.
_________________

If you understood all of this and want more, check google for SVG (Scalable Vector Graphics)
And try this SVG-Editor.

---

View counter: