Coding Help Wikia
in: Disambiguations

Attributes

Sign in to edit
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): 

|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[]

  • width: Sets the width of an element. Example: width: 300px;
  • height: Sets the height of an element. Example: height: 200px;
  • margin: Sets the margin space around an element. Example: margin: 10px;
  • padding: Sets the padding space inside an element. Example: padding: 20px;
  • border: Sets the border properties of an element. Example: border: 1px solid black;
  • box-sizing: Specifies how the total width and height of an element are calculated. Example: box-sizing: border-box;
  • overflow: Specifies what should happen if content overflows an element's box. Example: overflow: hidden;

Positioning[]

  • position: Sets the positioning method of an element. Example: position: relative;
  • top, right, bottom, left: Sets the position of a positioned element. Example: top: 50px;
  • z-index: Sets the stack order of a positioned element. Example: z-index: 999;
  • float: Specifies whether an element should float. Example: float: left;
  • clear: Specifies what elements can float beside the cleared element and on which side. Example: clear: both;

Typography[]

  • font-family: Specifies the font family for text. Example: font-family: Arial, sans-serif;
  • font-size: Sets the size of the font. Example: font-size: 16px;
  • font-weight: Sets the boldness of the font. Example: font-weight: bold;
  • font-style: Sets the font style (normal, italic, or oblique). Example: font-style: italic;
  • text-align: Sets the horizontal alignment of text. Example: text-align: center;
  • text-decoration: Sets the decoration of text. Example: text-decoration: underline;
  • line-height: Sets the height of a line of text. Example: line-height: 1.5;
  • letter-spacing: Sets the spacing between characters. Example: letter-spacing: 2px;
  • word-spacing: Sets the spacing between words. Example: word-spacing: 4px;

Color and Background[]

  • color: Sets the color of text. Example: color: red;
  • background-color: Sets the background color of an element. Example: background-color: #f0f0f0;
  • background-image: Sets the background image for an element. Example: background-image: url('example.jpg');
  • background-repeat: Specifies how background images should be repeated. Example: background-repeat: no-repeat;
  • background-position: Sets the starting position of a background image. Example: background-position: center;
  • background-size: Sets the size of the background image. Example: background-size: cover;
  • opacity: Sets the opacity level for an element. Example: opacity: 0.5;

Display[]

  • display: Specifies the display behavior of an element. Example: display: block;
  • visibility: Specifies whether an element is visible or hidden. Example: visibility: visible;
  • flex-direction: Specifies the direction of the flexible items. Example: flex-direction: row;
  • flex-wrap: Specifies whether the flexible items should wrap or not. Example: flex-wrap: wrap;
  • justify-content: Specifies the alignment of flexible items along the main axis. Example: justify-content: center;
  • align-items: Specifies the alignment of flexible items along the cross axis. Example: align-items: center;
  • align-content: Specifies the alignment of flexible items when the items do not use all available space. Example: align-content: center;
  • flex: Specifies the length of the item, relative to the rest of the flexible items inside the same container. Example: flex: 1;
  • grid-template-columns: Specifies the number and size of the columns in a grid layout. Example: grid-template-columns: 1fr 1fr;
  • grid-template-rows: Specifies the number and size of the rows in a grid layout. Example: grid-template-rows: auto;
  • grid-gap: Specifies the size of the gap between rows and columns in a grid layout. Example: grid-gap: 10px;

Transforms and Animations[]

  • transform: Applies a 2D or 3D transformation to an element. Example: transform: translateX(50px);
  • transition: Specifies the transition effect for an element. Example: transition: background-color 1s ease;
  • animation: Specifies a keyframe-based animation. Example: animation: slide 2s infinite;
  • perspective: Specifies the perspective on 3D elements. Example: perspective: 100px;
  • backface-visibility: Defines whether or not an element should be visible when not facing the screen. Example: backface-visibility: hidden;
  • transform-origin: Sets the origin for the transformation of an element. Example: transform-origin: top left;

Effects[]

  • box-shadow: Adds a shadow effect to an element's box. Example: box-shadow: 2px 2px 5px #888888;
  • text-shadow: Adds a shadow effect to text. Example: text-shadow: 1px 1px 1px #000000;
  • filter: Applies visual effects to an element. Example: filter: grayscale(50%);
  • clip-path: Clips an element to a specific shape. Example: clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);

Lists and Tables[]

  • list-style-type: Specifies the type of list-item marker. Example: list-style-type: circle;
  • list-style-image: Specifies an image as the list-item marker. Example: list-style-image: url('marker.png');
  • table-layout: Specifies the algorithm to be used to layout a table. Example: table-layout: fixed;
  • border-collapse: Sets whether table borders should collapse into a single border or not. Example: border-collapse: collapse;
  • border-spacing: Specifies the distance between the borders of adjacent cells. Example: border-spacing: 5px;
  • caption-side: Specifies the placement of a table caption. Example: caption-side: bottom;

Miscellaneous[]

  • cursor: Specifies the type of cursor to be displayed. Example: cursor: pointer;
  • outline: Sets the outline of an element. Example: outline: 2px solid blue;
  • resize: Specifies whether or not an element is resizable. Example: resize: both;
  • pointer-events: Specifies whether an element can be the target for pointer events. Example: pointer-events: none;
  • user-select: Specifies whether the text can be selected. Example: user-select: none;
  • touch-action: Specifies whether touch input should trigger default browser behavior. Example: touch-action: manipulation;

Pseudo-classes and Pseudo-elements[]

  • :hover: Selects an element when the mouse hovers over it. Example: a:hover { color: red; }
  • :active: Selects an element when it is being activated by the user. Example: a:active { color: blue; }
  • :focus: Selects an element when it has focus. Example: input:focus { background-color: yellow; }
  • :visited: Selects links that have been visited by the user. Example: a:visited { color: purple; }
  • :nth-child(): Selects elements based on their position in a group of siblings. Example: li:nth-child(odd) { background-color: #f0f0f0; }
  • ::before: Inserts content before the content of an element. Example: p::before { content: "Before text"; }
  • ::after: Inserts content after the content of an element. Example: p::after { content: "After text"; }

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[]

  • 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.
Community content is available under CC-BY-SA unless otherwise noted.