CSS Testing Page

1. Make this page showing off all the styles
2. Update the styles to have better abstractions DRY!
3. Marvel in all its glory
4. Sleep it off.

This page is dedicated to me testing out all the features of this website. I despised html and css for a long time. So this is a helpful page for me to explore my hierarchies, abstractions, and implementations of style. This may be updated a lot. It's just a play page for me.

• Block Elements
  • Headers
  • Paragraphs and Line Breaks
  • Blockquotes
  • Horizontal Rules
  • Lists
  • Code Blocks
• Inline Elements
  • Links
  • Emphasis
  • Code
  • Images

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

This is paragraph text. It contains many words and many sentences. If it didn't, it wouldn't really be much of a paragraph. In this paragraph we may see things like bold text, italic text, anchor links, and even boops .

Bold text is used for many reasons. Like to emphasis a particular word or phrase within a paragraph. Sometimes it is used simply to add a thickness to to the text of titles, headers, or more stylistic uses of words outside of paragraphs. In HTML, bold is normally indicated with a <strong> tag.

Italic text is used less often nowadays. Maybe that's my own perception, however, it tends to not provide enough pop to be useful, unless used in an entire paragraph. I think it's odd that the HTML code is <em> standing for emphasis, where it should be spelt out completely. Why they short hand?

NOTE: This is a blockquote. These are awesome and I cannot wait to show you their other styles.

Finally, let's finish these off with Anchor links. Links are the foundation of the internets content! Without links we would load one page and run away. Harhar ugh. Really long links can sometimes be annoying, but it's worth looking at how they look. Since I use this a lot, let's look at my styles for my links.

Images

Lastly, it's time to show off images and the styles I have created for them.

DO THIS PART

BOXES

Boxes are the foundation of my style. Without them, the theme of this site is essentially just markdown. I recently went through and standardized the css for using them and I will explain their usage here.

.box {
    background-color: white;
    border: 1px solid #333;
    border-radius: 4px;
}

Inline Boxes

Inline boxes are not used often. Maybe ever, however they are implemented in case of emergency. All this effort is in part to learn this shit, and also avoid my life. So, we can have a span box which is created using <span>. And link boxes created using an <a> tag. I tried very hard to avoid excess assumptions in my css, such as nested styles. Extra sentence to ensure multiline after boxes to show inline nature.

span.box, a.box, .inline.box {
    padding: 0 .5em;
}

Block Boxes

The next example is a <div> box. Which is obviously a block element.

And an <a class="block box">

Box Button!

div.box, .block.box  {
    text-align: center;
    padding: 1em;
    margin-bottom: 1em;
}

Special Boxes

Notably, <a> get special styling. Here is the code for link boxes.

a.box {
    color: #e78d9f;
    text-decoration: none;
    border-color: #e78d9f;
}
a.box:hover, a.box:focus, a.box:active {
    text-decoration: none;
    background-color: #f7e8e8;
}

multi content boxes

Sometimes I need a special kind of box because of the content inside, where the outer is a div and the inner a <a> and padding needs to be swapped so I can get full link coverage. You'll see what I mean.

<div>
    <a class="category">
        <div class="category-count">(15)</div>
        <div class="box">category</div>
    </a>
</div>
<div>
    <a class="box category">
        <div class="category-count">(15)</div>
        <div>category</div>
    </a>
</div>

.category {
    display: inline-block;
}
.category-count {
    float:right;
    position: relative;
    top: .4em;
    right: .5em;
    pointer-events: none;
}
.box {
    padding: 2rem;
    margin: 0;
}

• Make <a> display:inline-block; so the count will sit inside.
• ensure no padding on outer elements so anchor can take it
• only padding and margins because everything is taken care of deeper

There is more than one way to make it look correct. But as you can see, if the padding exists on the <a> then it changes how the count positions during float.