Your Glitch in Bio remix will include a few themes by default. You can edit these or add your own to create just the look and feel you want for your link site. 

 

Try it: Edit a style setting

 

1. In your project, open settings.json and change the theme value from glitch to custom-theme–the style in the preview will change to reflect the theme you've chosen.

 

 

2. Open public > styles > themes > custom-theme.css and change one of the color values, for example change violet to coral. Your preview will update to show the style change you made!

 

 

Editing your style rules

You can make any change you like to your CSS. Your site uses the base styles set out in style.css then the rules in your chosen theme are applied in addition to this.

 

In the custom-theme.css file you'll find initial settings for site-wide properties like colors that you can quickly change the values for, but you can add extra styles to the sheet too. Try adding this to the end of the file–it changes the header element font style:

 

 

 

 

To get to know the elements in your page, check out the files in the layout folder, or use your browser dev tools (right-click or control+click and choose Inspect). 

 

For inspiration, check out the other theme files included in the project: glitch, gallery, and menu. Apply them to see each one in action by changing the theme setting.

 

 

The CSS code in the other .css files is a great way to learn what you can do with style rules. You can change lots of properties affecting how your site displays, including colors, fonts, layouts, and much more.

 

To learn more about CSS, check out the MDN doc on Getting started with CSS.