BasiCSS

An opinionated starting point for styling base HTML elements.

Headers: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

This is an <h1> tag. Here it is bold. Here it is italic. Here it is with both. Here is a link.
Here's another line to test line height.

This line shows the margin between the previous heading and the next paragraph.

This is an <h2> tag. Here it is bold. Here it is italic. Here it is with both. Here is a link
Here's another line to test line height.

This line shows the margin between the previous heading and the next paragraph.

This is an <h3> tag. Here it is bold. Here it is italic. Here it is with both. Here is a link
Here's another line to test line height.

This line shows the margin between the previous heading and the next paragraph.

This is an <h4> tag. Here it is bold. Here it is italic. Here it is with both. Here is a link
Here's another line to test line height.

This line shows the margin between the previous heading and the next paragraph.

This is an <h5> tag. Here it is bold. Here it is italic. Here it is with both. Here is a link
Here's another line to test line height.

This line shows the margin between the previous heading and the next paragraph.

This is an <h6> tag. Here it is bold. Here it is italic. Here it is with both. Here is a link
Here's another line to test line height.

This line shows the margin between the previous heading and the next paragraph.

Paragraphs: <p>

This is the standard <p> tag. Here it is bold. Here it is italic. Here it is with both. Here is a link.

This content is left justified: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.

This content is right justified: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.

This content is centered: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.

Images: <img>, <figure>, <figcaption>

Image example Wide Image example
Figure with caption example
This is the caption text

Unordered Lists: <ul>, <li>

Ordered List: <ol>, <li>

  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four

Definition Lists: <dl>, <dt>, <dd>

Definition list division.
Startup
A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
#dowork
Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.
Do It Live
I’ll let Bill O’Reilly explain this one.

Tables: <table>, <th>, <tr>, <td>

Employee Salary
Jane $1 Because that’s all Steve Job’ needed for a salary.
John $100K For all the blogging he does.
Jane $100M Pictures are worth a thousand words, right? So Tom x 1,000.
Jane $100B With hair like that?! Enough said…

Blockquotes: <blockquote>

This is a single line blockquote.

This is a multi-line blockquote that includes a citation at the ed. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things. Steve Jobs – Apple Worldwide Developers’ Conference, 1997

Buttons & Forms: <button>, <form>, <label>, <input>, <select>, <textarea>, <fieldset>, <legend>

Buttons

Input (type="button")

Input (type="checkbox")

Input (type="color")

Input (type="date")

Input (type="email")

Input (type="file")

Input (type="hidden")
Input (type="number")

Input (type="password")

Input (type="radio")

Input (type="range")

Input (type="reset")

Input (type="search")

Input (type="submit")

Input (type="tel")

Input (type="text")

Input (type="time")

Input (type="url")

Disabled Input

Select
Textarea

Fieldset with Legend:

Miscellaneous Content

Address Tag: <address>

1 Infinite Loop
Cupertino, CA 95014
United States

Abbreviation Tag: <abbr>

The abbreviation srsly stands for “seriously”.

Acronym Tag: <acronym>

The acronym ftw stands for “for the win”.

Cite Tag: <cite>

“Code is poetry.” – Automattic

Code Tag: <code>

This is great for developers to display test that is intended for code such as word-wrap: break-word;.

Strike or Delete Tag: <strike>, <del>

This tag will let you strikeout text. Note that the <del> tag is no longer supported in HTML5 so use the <strike> instead.

Insert Tag: <ins>

This tag should denote inserted text.

Keyboard Tag: <kbd>

This scarcely known tag emulates keyboard text, which is usually styled like the <code> tag.

Quote Tag: <q>

Developers, developers, developers… –Steve Ballmer

Subscript Tag: <sub>

Getting our science styling on with H 2O, which should push the “2″ down.

Superscript Tag: <sup>

Still sticking with science and Albert Einstein’s E=mc 2, which should lift the 2 up.

Teletype Tag: <tt>

This rarely used tag emulates teletype text, which is usually styled like the <code> tag.

Variable Tag: <var>

This allows you to denote variables.

</> with ❤ by Stegosource