Bedrocss

A solid foundation of HTML styles.

Text: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>

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.

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 aligned: 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 aligned: 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.

This content is 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.

Media: <img>, <figure>, <figcaption>, <svg>, <iframe>

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

SVG 400x200

SVG 1200x600

SVG viewbox

iframe: <iframe>

Data: <ul>, <ol>, <li>, <dl>, <dt>, <dd>, <table>, <th>, <tr>, <td>

Unordered List: <ul>

Ordered List: <ol>

  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 List: <dl>

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>

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…

Interactive: <button>, <form>, <label>, <input>, <select>, <textarea>, <fieldset>, <legend>



Input (Don't forget to test focus state)


Input (disabled)


Input (valid)


Input (invalid)


Input (readonly)


Input (type="button")


Input (type="checkbox")


Input (type="color")


Input (type="date")


Input (type="datetime-local")


Input (type="email")


Input (type="file")


Input (type="hidden")


Input (type="image")


Input (type="month")


Input (type="number")


Input (type="password")


Input (type="checkbox")


Input (type="range")


Input (type="reset")


Input (type="search")


Input (type="submit")


Input (type="tel")


Input (type="text")


Input (type="time")


Input (type="url")


Input (type="week")


Select


Textarea


Fieldset with Legend:

Details/Summary

Details Something small enough to escape casual notice.

Miscellaneous Content

ToTestWhiteSpaceWrappingThisIsAVeryLongWordThatIsLongerThanItsAvailableWidth

Progress: <progress>

Meter: <meter>

(default/optimal)

(not optimal)

(very not optimal)

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”.

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

Cite Tag: <cite>

“Code is poetry.” – Automattic

Pre Tag: <pre> 

{
	"json": "example"
}

Code Tag: <code>

Example text that looks like code: 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

Small Tag: <small>

Want to see some small text? Here you go!

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 denotevariables.

</> with ❤ by Austin Gil