Test 001: Hello World (Caption)

Description: in this test we just write hello world
Hello World

Test 002: Centered Purple Div

Description: In this test, we create a purple div that is centered inside the table cell using old CSS techniques (without flexbox). The div is positioned using CSS properties: position: absolute;, top: 50%;, left: 50%;, and transform: translate(-50%, -50%); to center it both vertically and horizontally. The text inside the div is made white using color: white;.
Hello World

Test 003: Font Families, Font Size, Line Height

Description: In this test, we apply different font families, sizes, and line heights to see how they render.

This is Arial, 16px, line height 1.5

This is Courier New, 18px, line height 2

Test 004: Font Weight and Italics

Description: In this test, we apply different font weights and styles (italic).

This text is bold

This text is italic

This text is bold and italic

Test 005: Text Alignment

Description: In this test, we apply different text alignments to separate lines to test left, right, and center alignment.

This line is left aligned

This line is center aligned

This line is right aligned

Test 006: Table Border Styles

Description: In this test, we experiment with different table border styles to observe their consistency.
Solid Border Table
Dashed Border Table
Dotted Border Table
Double Border Table

Test 007: List Styles

Description: In this test, we create an unordered list and an ordered list, experimenting with different list styles and bullet types.
  • Unordered List Item 1 (Square)
  • Unordered List Item 2 (Square)
  1. Ordered List Item 1 (Upper Roman)
  2. Ordered List Item 2 (Upper Roman)

Test 008: Fixed and Relative Positioning

Description: In this test, we demonstrate relative and fixed positioning. The light blue box is relatively positioned within its container, while the light coral box is fixed to the top-left corner of the viewport.
Relative Box
Fixed Box

Test 009: Float Left and Float Right

Description: In this test, we demonstrate floating elements to the left and right. The light green box is floated to the left, and the light yellow box is floated to the right.
Float Left Box
Float Right Box

Test 010: Display Flex

Description: In this test, we demonstrate flexbox layout. The container has a border, and the items are evenly distributed within it.
Flex Item 1
Flex Item 2
Flex Item 3

Test 011: Display Grid

Description: In this test, we demonstrate a grid layout. The container is divided into three columns, and the grid items are evenly distributed.
Grid Item 1
Grid Item 2
Grid Item 3