---

All those tags can make text formatted nicely but those basic text formatting tags are used on very simple pieces of coding. DIVs and SPANs are used to select an area on the webpage which can conclude text, images, and other elements such as tables. DIVs are very good to bulk format and it helps keeps text from having too many individual tags.

---

You can think of DIVs and SPANs as boxes that until told to, are the same height of the elements inside them but stretch the width of the page. Here's two examples of when you use a DIV element around text:
Note that I have changed the background color so you can see where the DIV is.



Here's the outcome of that coding:



The DIV in my example is contained within the silver background of my page because it lies between my silver background's beginning and ending tags (which is also a DIV). When using the end DIV tag, you do not need need to do </div style>, </div> is all you need, no matter how many attributes are inside the beginning <div> tag.

So how about SPAN? What's the difference? The differences: SPAN can be horizontally next to each other and are the same height and width of the element inside them
Here's the same coding from above but with SPAN replacing DIV:



Here's the outcome of that coding:

I'm text I'm even more text

A quick note on colors. You can use words to identify color such as "black", "blue", "purple" for simple and quick uses. However, to get an exact color, you have the choice of using HEX format, RGB format, and HSL format. The color "lightgreen" is #90ee90 in HEX, rgb(145, 238, 145) in RGB, and hsl(120, 73%, 75%) in HSL. Personally, I use HEX colors however I do believe that RGB can be a very quick way of getting a color once you understand the format and how color blending works.

You can find HEX color pickers online. For those who are using a coding software, Visual Studio Code, and I'm assuming most other coding softwares will have a build-in color picker to easy access. Visual Studio Code allows a user to hover over the color and not only choose the color from a color wheel/box but also change between the HEX, RGB, and HSL format.

---

What else can you do with DIV styles? You can do the majority of the formatting that was shown in Unit 2!

Name	Coding	Result
Bold	<div style="font-weight: bold;">Words</div>	Words
Italic	<div style="font-style: italic;">Words</div>	Words
Underlined	<div style="text-decoration: underline;">Words</div>	Words
Strikethrough	<div style="text-decoration: line-through;">Words</div>	Words
Size	<div style="font-size: 10px;">Words</div>	Words
Font	<div style="font-family: 'Times New Roman', Times, serif;">Words</div>	Words
Color	<div style="color: red;">Words</div>	Words
Align	<div style="text-align: right;">Words</div>	Words

What you can't do is have multiple font-weight, text-decoration, etc. However you can have a DIV have font-style, text-decoration, font-size, etc as shown below:



Outcome:

---

DIVs can also be used on images to help position them. It is possible to position images without a DIV but I suggest using a DIV. Let's first learn how to get an image to show up.

The tag you use to tell the webpage that you want an imagine linked is <img> and src is the link to the imagine. The image tag is one of the few tags that doesn't need an end tag!

In this example, I linked Google's logo from another site therefore I used an external link. If you have an image on your computer you want to use (this only works if you use files within a coding software), please refer to file paths as I will not go over them. I also used the width and height attribute to adjust the size. Similar to DIV style, I also have to put style within the img tag. Instead of putting the width and height in the style attribute, you could put <img width="300px" src="image link"> and have no need for style, however even though that is an option, it is much more practical to put the width and height within the style attribute. Since most likely you'll add even more things after width to customize the image such as padding, margin, etc (we'll get to that very soon), there's no eason to have a width outside of the style attribute.



Outcome:


You must put a unit for width, height, padding, and margin. I suggest using px and sticking to that as you will learn generally know how big certain pixel sizes become. It also is the same unit that images normally use.

---

Margins and padding position text, images, DIV, SPAN, etc. They can act similar but are used a bit differently.
Margins add a margin that often will move the element. If we add a margin to the image from the left, it will move right since its left margin is too close to the border of the silver background. If only set as margin, all sides of the element will be effected. In this example, I will change it to margin-left, which will specify that I want only the left margin to be 300px.



Outcome:


Padding is different, for DIV with text in it, it is used to restrict how close the text gets to the edge of the DIV. For images, it forces the image smaller since the image's sides are too close to the DIV's larger padding. I will add color to show how the padding works.



Outcome:

---

DIVs are often used as boxes or containers of other elements. So DIVs often have a background color and border. To change the background color of a DIV or SPAN element, use the background-color attribute. If left blank, the default background-color will be transparent. You can also set the background color as transparent instead of a color.



Outcome:

To change a DIV's border, we often will use 2 attributes: border-style and border-radius. Border-style will change the color, thickness, and whether the line is solid, dotted, etc while border-radius will change how round a border's corners are.



Outcome:

For border, red equals the color of the border, 2px equals the thickness of the border, and solid means the border is solid and not dotted, dashed, or another style. You can use percents with border-radius with 100% making the box into a circle.

---

Similar to DIV background colors being able to be changed, their backgrounds can also be changed into images. There are quite a few attributes soley for the background of an element.

Below is a DIV with the background as the Google Logo:



Outcome:

The background image doesn't look too great because by default, the background image will span its original width and height but the DIV's width and height restrict it to the top left portion of the background image. To improve the background-image, we'll add some size and positioning attributes.

First, let's see what happens when we move the position of the background image to center the image.



Outcome:

Now we can see the center of the Google Logo. But this still doesn't make it look nice within the DIV so we must re-size the background-image as well.



Outcome:

Sadly, it doesn't fix the problem still. However the background-size: cover attribute will make the width or height (whichever comes first) fit its container which is the DIV. Since this Google logo is wider than it is taller, the height fit the DIV box and then the width kept the aspect ratio but is still too long for the DIV.

With the background-repeat: repeat attribute, if the background is small enough, it will repeat itself to fill its container.

With the attribute background-attachment, several different options are available. By default it would be background-attachment: scroll which means if the background image is the same as the website's background, the image will scroll with the entire webpage. This is the most common attachment. The next is background-attachment: fixed which will make it so that when the page's content scrolls, the background doesn't move. This can give a cool effect and isn't a bad choice to ensure the background image never runs out when the webpage is scrolled down. The last one I will mention is background-attachment: local which works well with background-images within DIVs and SPANs.

However, having a background-image on a DIV or SPAN isn't the best choice to go by. Simply having an image inside a DIV is better. Background-image is most used for the body tag of the webpage.

Not using the background-image attribute and using the img tag instead within DIV is in my opinion, much more efficient and easier to customize. When coding more complex aspects, coding often has more than one way of achieving your goal. And once you have a deeper understanding of coding's structure and methods, you can decide what coding tag, elements, and structure are best for the situation. I will speak more about this in Unit 6 where I will give examples of coding choices I had to make within my own websites.

---

Phew! That was a lot of information! Believe or not there are many other tags and attributes that I did not mention because they either are not as common or not needed for this tutorial which is meant to set you up to be able to start a complete website. Learning about the other tags and attributes is up to you but unless you dive deeper into coding, the contents in these units will wrap up the most important things to learn first.

Wait...? You're telling me there's another way to style DIVs and other tags on a completely seperate file??? Don't worry, you've already learned the attributes needed, now you have to learn how stylesheets from a seperate file or even website can be used to format your website. Oh did I mention...because you already know these attributes, you've learned the vocab per say of Casscading Style Sheets (CSS). Now you only need to learn the structure of CSS!