Exercise: Custom Styling Using Styled JSX

Use what you’ve learned in this chapter to complete this coding exercise.

We'll cover the following

Problem statement

You have a website built with Next.js, and you want to enhance the appearance of the main heading h1 on the index.js page. To achieve this, you’ll use Styled JSX, a styling solution provided by Next.js. Styled JSX allows you to customize the visual aspects of HTML elements, including color, size, and more, to make your website more visually appealing.

Styling properties

Here are some design considerations for you to follow:

  • Font size: You need to change the font size of the h1 element to 36 pixels. This means the text within the h1 tag will appear larger and more prominent on the page.

  • Text shadow: You must add a text shadow effect to the h1 element. The shadow should have properties of 2px horizontal offset, 2px for vertical offset, and the shadow color should be black.

  • Text color: You need to change the color of the text within the h1 element to red. This will give the text a bold and attention-grabbing appearance.

Use Styled JSX to implement the style requirements above.

If you’re unsure how to do this, click the “Show Hint” button.

Get hands-on with 1200+ tech skills courses.