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 :-(
Step 1: What You'll Need
There is only one requirement for this instructable: an Instructables
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 TagOutputI do nothing!
But, this is the only way to color text on mobileSee step 6,,See step 4See step 2 for a possible useA link to my last Instructable See step 5 for another useNormal text This text is superscriptedNormal text This text is subscripted or Normal text This text is strong (bolded) or Normal text This text is emphasized (italicized)Normal text This text is underlinedNormal textThis text is in a blockquoteh6This can be used to show code (see step 2 for another way)
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.
Step 10: Styling With CSS
CSS is where stuff gets cool! You can do A LOT of different things with CSS, with only a very few being listed here.CSS Code Example Description and Notes cursor:move;
This text is styledChanges the cursor's look color:red;
This text is styledChanges the color of text
Check out this page for predefined color names font-size:1.2em;
This text is styledSets the size of text
Can be used in these formats font-family:Lucida Console;
This text is styledDetermines the font of text
Click here for more fonts height:120px; width:120px;
This text is styledDefines the dimensions of the element
(background is outlined in black) padding:5px;
This text is styledLeaves space around an element
(background is outlined in black) overflow:auto; height: 10px;
This text is styledCreates a scrollbar if the text extends beyond the defined height and/or width border:2px solid grey;
This text is styledCreates a border
More info about the border property here background-color:#C6D7DE;
This text is styledChanges the background color text-align:center;
This text is styledAligns the text to the right, center, or left text-decoration:underline;
This text is styledUnderlines or overlines text text-shadow:2px 2px 1px red;
This text is styledCreates a shadow based on the text
More info on the text-shadow property here font-variant: small-caps;
This text is styledMakes every character uppercase, but smaller.
Using inline CSS:
Styled text here
Step 11: Example Instructable
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 schematicStep 1: Materials
To make this circuit, you'll need a few components:PartSource (pictures are clickable!)2x 10KΩ resistors
~~ = This common part can be salvaged from almost anything
~~ = You can salvage this, or if it's bought, there will be leftovers
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! =)
Step 12: Conclusion and References
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!
Thanks for reading! =D