#1: Color

CSS method: Inline Styling

Difficulty: Easy

Time: Tiny

Description: Type some text in a h1 tag, and give it a purple color.

#2: Font

CSS method: Inline Styling

Difficulty: Easy

Time: Tiny

Description: Type some text, and change its font to Arial.

#3: Custom Heading

CSS method: Style tag (use classes)

Difficulty: Moderate

Time: Small

Description: Modify a p tag to make your own h1 tag. (Replicate the size, weight)

#4: Sizing & Centering

CSS method: Inline Styling

Difficulty: Easy

Time: Small

Description: Give a div tag a width, height and any background color (so that it is visible on the screen), and center it horizontally.

#5: div customization

CSS method: Style tag (use classes)

Difficulty: Moderate

Time: Moderate

Description: Make a card, by customizing a div (give it a card class and apply CSS to that class). Use these properties:

• Shadow
• Border
• Padding
• Rounded Corners

#6: Page font

CSS method: No limitation

Difficulty: Moderate

Time: Tiny

Description: Add Some content to a page (headings and paragraphs, use lorem ipsum text, or quickly copy some of it by clicking me), and change the font of the whole page to Consolas.

#7: Spacing

CSS method: Inline Styling

Difficulty: Easy

Time: Tiny

Description: Create 3 divs, make them squares of considerable size (let's say, 100px). Give all of them three different colors.
Now, you will see something like this:

These all are packed together. Your task is to make them having spacing around each other, so that none touches any other. Like this:

Please don't even think to use the br tag to achieve spacing.

#8: Circle

CSS method: No limitation

Difficulty: Hard

Time: Moderate

Description: By using any CSS property, Modify any element to make it look like a circle outline, like this:

#9: Button customization

CSS method: External CSS

Difficulty: Moderate

Time: Long

Description: Mimic the behaviour (layout, and hover effect) of the button below. Customize the button tag directly, NOT using any class.

These are the properties to keep in mind:

• Background Color
• Text Color
• Shadow
• Padding
• Font weight (changed on hover)
• Corner Radius

If you are confused about how to customize button layout when the button is hovered, then read the doc again lol

#10: Mono class

CSS method: External CSS [Use the same style.css file as before, don't create a new one]

Difficulty: Moderate

Time: Long

Description: Mimic the behaviour of the text below. Use the mono class to target your CSS, not the tag directly.
Use the span tag to show your output.

These are the properties to keep in mind:

• Background Color
• Padding
• Font family
• Border
• Corner Radius