Attributes

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

**This article is a disambiguation page for all Attributes pages.**
Please look at the list of links at the bottom of this page for more specific Attributes pages.

Quick Code

Copy to clipboard <div style="\*attribute name\*:\*specification\*;\*repeat\*">Content</div>

## What is an Attribute?

**Attributes** make up the basis of most WikiText, tables, div and the span style tags. They define things about coded elements like borders, backgrounds, and colors. It is an essential to learn them. Attributes can also be used in CSS (Cascading Style Sheets) and HTML (HyperText Markup Language). This guide will teach you how to format attributes and what they are.

**Note: All coding shown here is FTU/F2U (Free To Use), though this is not always the case in personal badges/templates/projects.**

## Attribute Format

Attribute format is very important, otherwise your code may not function correctly.

### <div></div> Style Format

Attributes can be added into div style tags like this:

```
<div style="*attribute name*:*specification*;*repeat*">Content</div>
```

In div tags, quotations (") must be put around the attributes, semicolons (;) must separate attributes, and a closing tag (</div>) must be placed after your string of code. An example would be this:

```
<div style="background: green; color: white">CONTENT</div>
```

This code creates the following:

CONTENT
Notice how the word 'Green' is used as the specification for the background color.

**Note: Although div style is VERY similar to span style, some attributes are not supported in div style that are supported in span style, and vice versa.**

### <span></span> Style Format

Attributes can be added into span style tags like so:

```
<span style="*attribute name*:*specification*;*repeat*">Content</span>
```

Similar to div style tags, in span style tags, quotations (") must be put around the attributes, semicolons (;) must separate each attribute, and a closing tag (</span>) must be placed after. An example would be:

```
<span style="background:green; color: white">CONTENT</span>
```

This code creates the following:

CONTENT

Span style tags are pretty similar to div style tags, as shown in the example. The only difference is that span style are based more on text, so the background does not continue all the way across the page.

Notice how the word "green" is used as the specification for the background and "white" for the text color.

**Note: Although span style is very similar to div style, some attributes are not supported in span style that are supported in div style, and vice versa.**

### Difference Between <div></div> and <span></span>

The HTML elements **div** and **span** are very similar, except that **div** has a default attribute of '`display: block;`, and **span** has a default attribute of `display: inline;`. Block means that it breaks the surrounding elements and starts its new line, and also adds a line after it. Inline means that the elements wraps with the surrounding elements creating no new lines.

Example for span:

This is a line of text. This is a second line of text.

Code:

```
<span style="background: green; color: white;">This is a line of text.</span> <span style="background: green; color: white;">This is a second line of text.</span>

```

Example for div:

This is a line of text. This is a second line of text.
Code:

```
<div style="background: green; color: white;">This is a line of text.</div> <div style="background: green; color: white;">This is a second line of text.</div>

```

Notice that in the first example both lines of highlighted text are on the *same line*, while in the second example for divs they are on *separate lines*.

### Table Format

Table formatting is a little different and it makes up only a part of tables. For the rest of the code for tables this, visit our tables page. Attributes can be added into tables like so:

```
{|style="*attribute*: *specification*; *repeat*"
```

Or a certain square in the table, like so (if you wish to add both, simply copy and paste the below format right below the above format and repeat):

```
```

Continue the table after that code as seen on the tables page.

An example would be this:

```
{|style="background: green"

```

This results in:

Although similar to both the div style and span style methods, tables are different because their base code is different and the coding is more limited.

Notice how I used the word 'Green' as the specification for the background, and '1px solid white' as the specification for the border.

**Note: A border is added to this example only to show that this is a table, not plain text.**

## Links

Below you will find a list of links to attribute pages that talk about a certain attribute and usually have examples. Some of these pages will have names similar to the attribute name, like Border Radius, which is on the border-radius attribute. Others may just be titled as what the attribute creates, like Scrolling Boxes (Scrolling boxes are created using the 'overflow' attribute). **Editors, please feel free to add to the list as you see fit, in *alphabetical order* for ease of use.**

* Backgrounds
* Background Size
* Beginner's Guide (not an attribute, but useful for learning more about formatting and style)
* Blend Modes
* Borders
* Border Radius
* Box Shadow
* Columns
* Float
* Floating Boxes
* Fonts
* Imagemaps
* Letter Spacing
* Line Height
* Opacity
* Overflow
* Padding
* Scrolling Boxes
* Text Align
* Text Color
* Text Decoration
* Text Shadow
* Text Size
* Text Modification
* Tooltips (similar to an attribute, formatted the same)
* Transform

## Notes/Review

* Make sure to add an end tag to your coding (this would be a </span> or </div> tag).

* On UCP-updated wikis, you can tell if you have enough end tags when the last typed end tag turns red. But be cautious; this can also be if you do not have closing tags in the order that your tags appeared in! For example, in **<1><2>CONTENT</1>**, the </2> tag will turn red. But that's because you have to put the </2> tag first! You've still closed off part of your coding, but <2> must be closed off.

* Span style is better for **highlighting** words, while div style is better for actual **backgrounds**. There are many more style tags, such as **<p style="CONTENT">**, which modifies text attributes only.

* Attributes make up most of the div style and span style tags, Along with classes, ID's, and titles.

* Attributes **must** be formatted correctly if they are to work.