rules of coding

<chapter three>

In this chapter i'd like to attempt and explain what containers are and how they are used. Container are formally known as attributes. I personally think attributes form the basic of every code so it's quite important that you grasp the meaning of what i'll be explaining in this chapter. I really hope I'll explain the different containers you can use on wattpad clear enough for you to understand them perfectly. Though I probably won't, so do not hesitate to ask any questions on the subject. 

As I said I prefer to call attributes containers as they 'contain' all the elements. There are 4 different containers that are off any use on wattpad. All containers come in pairs of two, meaning they have a start and an end tag. I'll be discussing every containers advantages and disadvantages below.

---------------------------------------------------------------------------------------------------------------------------

terms

you will need those additional terms to understand my explanations in this chapter:

» Inline is the situation where the text written directly before or after the container is on the same line as the container itself starts/ends.

» Block is the opposite of inline really, when the text written before or after the container will be on the line before or after the container has started or ended.

» Default settings is the automatic formatting your container uses if you don't have any tags

---------------------------------------------------------------------------------------------------------------------------

theory

<blockquote style="attributes here"> text here </blockquote>

history: The blockquote container was originally meant to highlight chunks of text -or actually quotes- which is indeed the best use for it. It's also nice to experiment with when you reach an more advanced level of coding. the blocquote container is a block element and is the only container that has another code for a default code with a yellow background that makes it look like a sticky note on wattpad:

<blockquote> text here </blockquote>

default settings: A blockquote has a yellow color when using the default container, it's transparent when using the other version and it has slightly rounded corners. a blockquote container has a preset padding of ± 10px on all sides. (lesson on padding will follow)

---------------------------------------------------------------------------------------------------------------------------

<p style="attributes here"> text here </p>

history: The p stands for paragraph and that's exactly what you're meant to use it for. the p container isn't used very often due to some annoying default settings on wattpad but it is very useful when writing html on other websites i suppose.

default settings: The p container is an block element. (like the blockquote).The preset background-color of a p container is transparent and the p container has an preset margin and line-height. 

---------------------------------------------------------------------------------------------------------------------------

 <div style="attributes here"> text here  </div>

history: Div stands for division and this container is the most commonly used container on wattpad (and as far as i know on other sites as well) because the div container is very variable in many ways. 

default settings: A div container is a block element and has square corners (90˚). The preset background-color of a div container is transparent.

---------------------------------------------------------------------------------------------------------------------------             

<span style="attributes here"> text here  </span>

history: The span container is used to style small amounts of text. The span container is most commonly used to change the font size, color, and font-family for a specific word or a phrase.

default settings: The span container is the only container that is an inline container and has a transparent background-color, the edges of the background adjust to the lenght of the text or phrase. Do note that the span container does not allow you to set height, width or margins (which tends to be really frustrating).