JankCSS ⋅ Learn CSS

JankCSS ⋅ Learn CSS The Fun Way!

This page is unstyled, but you can make it look as beautiful as possible :o

To start styling, type your CSS in the box above, as you can see with the html tag example. Tags with IDs can be selected & styled like #tag_id, classes with .classname, or just target the tag itself! You can hover over an item to see it's potential selectors.

Section 1

Article Title

This is a paragraph inside an article. The article tag specifies independent, self-contained content. Perhaps you could give this section a border and a box shadow, and reduce the opacity.

Example Image — This is a caption for the image. Try changing the object fit style to cover, and reducing the width or max width properties.

Section 2

This section contains a list:

Item 1 - change the position to fixed or absolute or relative.
Item 2 - then try changing the display of the unordered list to grid or flex.
Item 3 - finally have a go at using the flex direction, align items, justify content and grid-template-columns parameters to change the displays.

And an ordered list:

First item
Second item
Third item

Section 3

Sample Table - try changing the text decoration, font weight & font style of the head of the table.
Header 1	Header 2
Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2

Section 1

Article Title

Section 2

Section 3

Form Example