coding help
This article is a disambiguation page for all Attributes pages.
Check the list of links below 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): 

|style="*attribute*:*specification*;*repeat*"|Name

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

An example would be this: 

{|style="background: green"
|style="border: 1px solid white; color: white"|column 1
|style="border: 1px solid white; color: white"|column 2
|style="border: 1px solid white; color: white"|column 3
|style="border: 1px solid white; color: white"|column 4
|}

This results in:

column 1 column 2 column 3 column 4


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.


List of commonly used attributes

Box Model

Positioning

Typography

Color and Background

Display

Transforms and Animations

Effects

Lists and Tables

Miscellaneous

Pseudo-classes and Pseudo-elements

Disambiguation

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.

Notes/Review