Instructables are an awesome way to share your knowledge and learn from others. Sometimes, a lot of text in an Instructable can be intimidating, or an Instructable just doesn't look very interesting. To solve this, you can use HTML and CSS.

HTML is useful for organizing your instructable into sections (read more on Wikipedia).
This includes things like: lists, simple text formatting, links, tables, and much more.

CSS is used to make the HTML look appealing and easier to read (more info on Wikipedia).
This includes things like: spacing, color, font, alignment, backgrounds, and much more.

Thanks to theedisoneffect for suggesting the creation of this Instructable.

NOTE: Sorry mobile users, most of this stuff only works on a computer :-(

There is only one requirement for this instructable: an Instructables account.

There are a few ways to get a pro account:

• Getting it gifted to you. Send someone else a pro membership!
• Earning one through a featured Instructable: Get started

Use this as encouragement to make an Instructable if you haven't already! =)

The code box with the Arduino blink example sketch:

/*
  Blink
  Turns on an LED on for one second, then off for one second, repeatedly.
 
  This example code is in the public domain.
 */
 
// Pin 13 has an LED connected on most Arduino boards.
// give it a name:
int led = 13;

// the setup routine runs once when you press reset:
void setup() {                
  // initialize the digital pin as an output.
  pinMode(led, OUTPUT);     
}

// the loop routine runs over and over again forever:
void loop() {
  digitalWrite(led, HIGH);   // turn the LED on (HIGH is the voltage level)
  delay(1000);               // wait for a second
  digitalWrite(led, LOW);    // turn the LED off by making the voltage LOW
  delay(1000);               // wait for a second
}

This box is formatted using the pre tag to: keep whitespace as is, use the same font Arduino does, set the width to 600px, set the height to 300px, make the font size 11px, create a grey border, and create a light grey fill.

<pre style="font-family:Monaco; width:600px; height:300px; font-size:11.0px; border:1.0px solid #6E6E6E; overflow-y:auto; background-color:#F2F2F2;">
PUT CODE HERE
NOTE: Remove the space between the "/" and the "pre" below
</ pre>

Tables are super useful as a materials organizer or to display data. HTML organizes tables using a variety of tags:

<table>

<tbody>

<tr>

<th>

<td>

Example (with a bit of CSS to spice things up):

~~ = This common part can be salvaged from almost anything

~~ = You can salvage this, or if it's bought, there will be leftovers

<table border="1" style="border-color: rgb(189,189,189);border: 1.0px solid rgb(189,189,189);">
         <tbody>
            <tr>
               <th>Part</th>
               <th>Source</th>
            </tr>
            <tr>
               <td style="background-color: rgb(212,255,215);">2x 10KΩ resistors</td>
               <td><a href="https://www.sparkfun.com/products/10969" rel="nofollow">Sparkfun</a>, <a href="http://www.radioshack.com/product/index.jsp?productId=2062330" rel="nofollow">RadioShack</a></td>
            </tr>
            <tr>
               <td style="background-color: rgb(212,255,215);">2x 220Ω resistors</td>
               <td>
                  <p><a href="https://www.sparkfun.com/products/10969" rel="nofollow">Sparkfun</a>, <a href="http://www.radioshack.com/product/index.jsp?productId=2062317" rel="nofollow">RadioShack</a></p>
               </td>
            </tr>
            <tr>
               <td style="background-color: rgb(231,222,255);">2x 10-47µF capacitors</td>
               <td>
                  <p><a href="https://www.sparkfun.com/products/523" rel="nofollow">Sparkfun</a>, <a href="http://www.radioshack.com/product/index.jsp?productId=12448323" rel="nofollow">RadioShack</a></p>
               </td>
            </tr>
            <tr>
               <td style="background-color: rgb(231,222,255);">2x LEDs</td>
               <td>
                  <p><a href="https://www.sparkfun.com/products/10969" rel="nofollow">Sparkfun</a>, <a href="http://www.radioshack.com/product/index.jsp?productId=12611319" rel="nofollow">RadioShack</a></p>
               </td>
            </tr>
            <tr>
               <td>2x PNP transistors</td>
               <td>
                  <p><a href="https://www.sparkfun.com/products/522" rel="nofollow">Sparkfun</a>, <a href="http://www.radioshack.com/product/index.jsp?productId=2062585" rel="nofollow">RadioShack</a></p>
               </td>
            </tr>
         </tbody>
      </table>

Surprisingly, Instructables lets you integrate a form into your Instructable. If you know a server scripting language like PHP or ASP, you can make a form to get information back from your readers (besides comments of course!).

This is a form made by w3schools that returns the input:

<form action="http://www.w3schools.com/tags/demo_form.asp" id="Do_you_like_the_Instructables">Do you like Instructables.com?         
<select name="Do_you_like_Instructables">    
<option value="Oh_Yeah">I love it!       
<option value="Yes">Yes    
<option value="Maybe">Maybe    
<option value="How_can_you_not_like_Instructables">No</select>
<p><button type="submit">Submit</button></p></form>

In HTML, there is something called an anchor, which is a link that scrolls to a certain element on the screen. It searches the document for the ID you are looking for and scrolls to it for you!

<p id="hello">This is a paragraph with the id "hello."</p>

<a href="#hello" rel="nofollow">This link sends you to "#hello"</a>

Note: Instructables' menu bar cuts off the top 100px of the page.

The most practical use for an anchor is to reference other steps within your (or someone else's) Instructable:

This scrolls to "#comment-list"

This scrolls to "#step10" of my Fingerprint Scanning Garage Door Opener Instructable

The fieldset tag is a great way to organize anything from materials to creating a code section at the bottom of a step.

For example:

//Code by Nodcah

void setup(){
    Serial.begin(9600);
}
void loop(){
    Serial.println("Code");
    delay(100);
}
< /pre><fieldset>                
<legend>Code</legend><pre style="font-size: 11.0px;width: 600.0px;height: 300.0px;border: 1.0px dotted black;"><fieldset>
	<legend><strong>Materials</strong></legend>
	<ul class="curly">
	<li>Arduino</li><li>Resistors</li><li>LEDs</li><li>Etc.</li></ul>
</fieldset>
<fieldset>
	<legend><strong>Tools</strong></legend>
	<ul class="curly">
	<li>Pliers</li><li>Duct tape</li><li>Soldering iron</li><li>Etc.</li></ul>
</fieldset>
<fieldset>
	<legend><strong>Code</strong></legend>
	<pre style="font-size: 11.0px;width: 600.0px;border: 1.0px dotted black;">//Code by Nodcah

void setup(){
    Serial.begin(9600);
}
void loop(){
    Serial.println("Code");
    delay(100);
}
< /pre></fieldset>

There are many preformatted classes you are allowed to use on Instructables.com's stylesheets (here) or anything from Bootstrap v2.3.2 (documentation here).

Some of the useful classes:

Class Name	Use	Example
btn	Style text as a button	Button
img-polaroid	Polaroid image
callout	To comment on something. I can't think of another use for this, but there are definitely more	Text More text

How to define a class in HTML:

<p class="CLASSNAME">Styled text goes here</p>

Additionally, there is an added font for you to use:

<p style="font-family:CompleteInHimPro;">Complete In Him Pro</p>

If you've ever needed a gauge to show difficulty, cost, some sort of data, etc., this is what you're looking for!

Difficulty: e a s y ..

<p>Difficulty:  
<b style="background-color: grey;color: grey;border: 1.0px solid black;">e</b> 
<b style="background-color: grey;color: grey;border: 1.0px solid black;">a</b> 
<b style="background-color: white;color: white;border: 1.0px solid black;">s</b> 
<b style="background-color: white;color: white;border: 1.0px solid black;">y</b> 
<b style="background-color: white;color: white;border: 1.0px solid black;">..</b></p>

HTML has many tags, but only a few are allowed to be used in an Instructable. I have done my best to show all of the useful supported tags below, but if I missed any, be sure to let me know!

Input Tag	Output
<button>	I do nothing!
<img>
<samp>	Sample computer output
<font>	Warning: "Font" is an outdated tag But, this is the only way to color text on mobile
<fieldset>	See step 6
<form>,<select>,<option>	See step 4
<pre>	See step 2 for a possible use
<a href="URL">	A link to my last Instructable See step 5 for another use
<sup>	Normal text This text is superscripted
<sub>	Normal text This text is subscripted
<strong> or <b>	Normal text This text is strong (bolded)
<em> or <i>	Normal text This text is emphasized (italicized)
<u>	Normal text This text is underlined
<blockquote>	Normal text This text is in a blockquote
<h1>, <h2>, ..., <h6>	h1 h6
<code>	This can be used to show code (see step 2 for another way)
<ul>	Unordered list item 1 Unordered list item 2
<ol>	Ordered list item 1 Ordered list item 2
<table>, <tr>, <th>, <td>	See step 3
<hr>	Some text above the horizontal rule Some text below the horizontal rule
<span>	This can be used to style something or apply a class to text. But, a class must be defined (it can be one that doesn't exist yet)

For more information about the tags you should check out w3schools. This gives information about all of the HTML tags and how to use them.

CSS is where stuff gets cool! You can do A LOT of different things with CSS, with only a very few being listed here.

cursor:move;

color:red;

font-size:1.2em;

font-family:Lucida Console;

height:120px; width:120px;

padding:5px;

overflow:auto; height: 10px;

border:2px solid grey;

background-color:#C6D7DE;

text-align:center;

text-decoration:underline;

text-shadow:2px 2px 1px red;

font-variant: small-caps;

Using inline CSS:

<p style="CSS_CODE_HERE">Styled text here</p>

This mini Instructable uses a few of the items you have learned. The steps are separated using multiple fieldset tags. The pictures are inserted using the img tag.

Make a Blinky Circuit

This simple circuit blinks two LEDs.

Difficulty: e a s y .. You need to be able to read a schematic

Step 1: Materials

To make this circuit, you'll need a few components:

Part	Source (pictures are clickable!)
2x 10KΩ resistors
2x 220Ω resistors
2x 10-47µF capacitors
2x LEDs
2x PNP transistors

~~ = This common part can be salvaged from almost anything

~~ = You can salvage this, or if it's bought, there will be leftovers

Tools:

• Breadboard
• 3.5-5.5V power supply
• Jumper wires

Step 2: The Circuit

The circuit consists of resistors, capacitors, and LEDs. The 10KΩ resistors and the capacitors do the job of keeping a steady pace, while the transistors are responsible for turning the LED on/off.

See step 1 for a list of materials required for this circuit.

Step 3: Hooking it Up

Connect all of the components as seen in the schematic and watch it blink away! =)

Learning everything in this Instructable at once is almost impossible. This was created to inspire the use of HTML/CSS in your Instructable, and as a reference if you do use them.

Because there is so much to cover, I may have missed something or didn't explain something very well, so please ask questions or leave feedback!

References:

• W3schools HTML tag reference
• W3schools CSS property reference
• W3schools TryIt editor (try your code before putting it in an Instructable)
• Instructable.com's stylesheet
• Another stylesheet

Thanks for reading! =D