Backgrounds/Tutorial

Backgrounds: Tutorial

## Div Tags

To use backgrounds, div tags are used. There are a few other types of tags that can be used for this same function, but div tags are the simplest. We'll be learning four functions of div tags in order to make cool backgrounds.

## Single Color Backgrounds

To make a page or section of a page a certain color, one will use a div tag. <div style="background:yellow;">This is yellow</div> will do This is yellow Backgrounds are kinda like highlighting. The background color can be anything that the computer recognizes, but, once again, it doesn't know all colors. The website htmlcolorcodes.com is recommended.
## Gradient Backgrounds

### Linear Gradients

This is an example of a linear gradient!
Linear gradients are backgrounds with multiple colors that blend together, in a gradient. They can go up and down, left and right, and from corner to corner. <div style="background:linear-gradient(to top, orange, pink, aqua);">hello</div> will do hello In the "to top" section, it can be replaced with any direction. For example, it can be to right, to left, to bottom, to top left, to bottom right, et cetera. After the direction command comes any colors that you wish to use.
### Radial Gradients

This is an example of a radial gradient!
Radial graients are backgrounds with multiple colors that blend together, in a gradient. They go from the center of the shape (rectangles in our case. Other shapes are extremely challenging to code) to the outside, in circular color changes. <div style="background:radial-gradient(orange, pink, aqua);">hello</div> will do hello No directions needed, because it always goes from the center out. If there is a direction, the computer won't understand because you specified a radial-gradient, and there will be no color.
## Padding

Padding gives room from the edges and/or border of the shape to the text. For example, (see "Putting It All Together" for more on using commands together) <div style="background:chartreuse;padding:20px;">hi</div> or <div style="background:chartreuse;"><div style="padding:20px;">hi</div></div> will do hi It makes code much easier to read.
## Borders

Borders give people a concrete look at where the text box/shape is. It's usually pretty easy to tell, but it can get confusing with more complicated code. They're also used for aesthetics. A border is used in a div tag like so: <div style="border:<size>px <bordertype> <color>;">. The size indicates how many pixels wide the border is, the bordertype indicates what it looks like, and the color indicates the color. Again, there are limited colors so htmlcolorcodes.com is highly reccommended. There are four simple bordertypes that you will learn today: solid, double, dashed, and ridge.

### Solid

This is the type of border that is the easiest and used the most. It simply creates a line around the text box that is the width that is specified. This one is 5 pixels thick and the color of #CFFFFF. The code for this is <div style="border:5px solid #CFFFFF;">this text here</div>.

### Double

This is the type of border that is not used very often, but I find very pretty. It creates two lines around the text box where each is (Disclaimer: I (Charlotte) have not measured this. This is just an estimation) about third of the specified width, and the space in between the two lines is about a third of the specified width. This one is 5 pixels thick and the color of #00DEDE. The code for this is <div style="border:5px double #00DEDE;">this text here</div>.

### Dashed

This is the type of border that is not used very often. It simply creates a line around the text box that is the width that is specified, but cuts part of it away in small segments. This one is 5 pixels thick and the color of #50B2A7. The code for this is <div style="border:5px dashed #50B2A7;">this text here</div>.

### Ridge

This is the type of border that is not used very often, but I (Charlotte) use a lot. It creates a line halfway around the text box that is half of the width that is specified and one width of itself as distance from the text, and another halfway around the text box but closer to the text. It then fills the rest of the border space with a color slightly darker than the one specified. This one is 5 pixels thick and the color of #182EB5. The code for this is <div style="border:5px ridge #182EB5;">this text here</div>. Note: When the border is thinner, it's harder to see because it doesn't split the line in half, but in uneven, small parts.

## Putting It All Together

You can put div tags together kinda like how you can put font tags together. The types of div tags that we learned today are all style type, so you use semicolons to separate the commands. For example, if you wanted an aqua background with 20px of padding, instead of coding <div style="background:aqua;"><div style="padding:20px;">text</div></div> which would take a while you would code: <div style="background:aqua;padding:20px;">text</div> and it does the same thing. You can add infinite commands to a div tag, but if you add two of the same tag, the computer gets very confused.