HTML & CSS Cheat Sheet

This is Article 1 of Section 1.

Click this link to jump into Article 4. Test 4

This is Article 2 of Section 1.

This is a link to an interesting Youtube video New Link

This is Article 3 of Section 1.

This is an iframe link of a youtube video

This is Article 4 of Section 1.

This is an image source from Facebook. Try to hover over it.

This is a non-existent image source. Try to hover over it.

This is Article 5 of Section 1.

This is a local audio clip. To showcase all features and avoid repitition, It contains all modifiers (looped and automatically starts in startup)

This is Article 6 of Section 1.

This is a local video clip.

This is Article 1 of Section 2

Hover over this text to see another text.

This text is inside a paragraph element and also inside a span element. Due to the style of the span, it is colored blue and in white background. This text is still inside the same paragraph element, but now outside the span element.

These are Escape characters:   ™ & © < > ?

These are Bold, Strong, Underlined, Crossed, Italic, and Em texts caused by special font elements.

This is a _subtext and a ^supertext using sup elements

This is a textshadow

This is Article 2 of Section 2

This is an Unordered List. Lists typically are set as block display. Notice the different marker styles. First item on the list is the default marker

• List 1
• List 2
• List 3
• List 3

This is an Ordered List. Notice how unlike unordered, it counts the list in sequence

1. List 1
2. List 2
3. List 3
4. List 3

This is an Unordered List, but its list has inline display meaning it is now horizontal, list content is a clickable link with borders, and colored red-ish and no underline. Notice how it no longer has any markers. Inlined lists have no markers.

• Test Buttons
• Home
• About

This is Article 3 of Section 2

This is a Table by using the table element.

This is another Table by using table-row and table-cell style attribute in div and its content, respectively. Notice the gradient background color tho. This is done using linear-gradient attribute.

This is Article 4 of Section 2

This is a paragraph element with Pseudo Elements

As you can see, this paragraph element has a border, making it clear where the entire element is located. Notice the small red square on the top left of the box. That is caused by the "pseudo::before" element. As you can see, the red square is INSIDE the border, meaning that the red square is not "on top" of the paragraph element, but rather it is inside the paragraph element after all. When you hover over this entire box, you'll notice the text turns green. That is caused by the "pseudo:hover" element. Furthermore, you'll notice that a new text colored yellow will also appear as you hover over. This is caused by the "pseudo:hover::after" element.

This is Article 1 of Section 3

This is a Single-Line Textbox Form. Notice that it is stacked horizontally. That is because input elements are inline

This is a Multiple-Line Textbox Form

This is Article 2 of Section 3

This is a Radio Button Form. Notice that it is no longer inline. That is simply because there's a break element between elements

This is a Checkbox Form

This is a Number Box Form

This is Article 2 of Section 3

This is a Drop-down List Form

This is a Date Box Form

This is Article 1 of Section 4

These are the different layers of "boxes".

The area where this text is at is the Content box. The spacing between this text and the white border is the Padding box. The border itself is also called the Border box The spacing between the whole box and the article itself is the Margin box. Notice the exaggerated spacing of the Right Padding and the Left Margin.

These are the different forms of border

This text is surrounded by four essential types of borders. The left is solid, top is dashed, right is doubled, and the bottom is dotted. There is also a fifth one, transparent, but it just makes the border invisible. Notice the Round Borders, instead of edged ones, and that the the left border has a different color.

This is a background Image

Look how cool this background is my guy

This is a fieldset element

This is Article 2 of Section 4

These are images, stacked together horizontally with their standard inline properties.

These are images, stacked together vertically with block property using a display element. Notice the lack of borders

The red box on the right is floated or "pinned" to the right. This means that any other elements that go after rendering this floated element will first occupy the left side of the image until it bleeds out of the image.

The green box is an element with an absolute position attribute. Notice that it is transparent. It adjusts its position according to its adjacent NON-STATIC element. So far, all of the elements before this element are all elements with static positions. So, its position can be assigned to anywhere within the website. But, this element's position is only assigned to move 430 pixels horizontally from the right, so its vertical position is simply located below the preceding element by default. Also notice how this text is now bleeding out of the red box, occupying the free space below it.

In source code, this spot is where the div for the "Back to Top" icon on the left of the page. That div is an element with a fixed position attribute. It is permanently fixed in the position of the browser screen, even if you scroll up or down. Notice how it is transparent but turns into a solid form

The red box is a normal "static" positioned element. This text, as well as the blue box, is an element with relative position. Notice how it is similar to absolute positioned elements, it overlaps with other elements. Red box is overlapped, and blue box is overlapped with this text because this text i placed after it. The green box here is the same absolute positioned box from last time with the same properties. Notice however, that this green box's horizontal position is different from the previous one. It's because this green box is inside this text element, and since this text element is in relative position, it assigns horizontal position according to this text box, instead of the whole site. I hope to god that made sense

Article 3 of Section 4

This is a text with overflow:scrollbar attribute.

Usually, what happens when writing text is that it will occupy the left-to-right spaces of whatever element it is contained. However, when a text is specified to have restrained height and length, it will follow this specification instead. This causes some text to "overflow" when the text-specified conditions are larger than the element it is in. This particular element, however, is specified to only consume the a small portion of height of the element. Due to the text requiring more space than that, it will still try to continue the text vertically, which would create an overflow. In order to prevent this, there is an element called, well, ..overflow. One attribute for overflow is to simply create a scrollbar like the one you're seeing in this textbox, while the other is to simply hide and cut whatever text that overflowed, like the one you're seeing on the bottom part of this text.

This is a text with overflow:hidden attribute.

test(sike I won't do that my g) r

This is Article 2 of Section 4

Try hovering your cursor over these boxes. These elements have the cursor property with varied properties.

These are cursors with distinctive properties

I have no idea what the these are. They all just look like text cursors (????)

POGCHAMP CURSOR POGCHAMP CURSOR POGCHAMP CURSOR POGCHAMP CURSOR POGCHAMP CURSOR POGCHAMP CURSOR

This is Article 3 of Section 4

These two words are contained inside different divs, each having different id tags. However, their id's in css are both defined together, and therefore, they still have the same styling.