Styling

Generic styles

You can create styles which will apply to any page. Let's try editing and changing the text color of the watch.

1. Open client/src/main.css

2. Let's look at the following piece of code.

#watch {
  color: #fff;
}

To give all pages a red text by default, change the following code color: #fff; to color: red;

3. #watch is a CSS ID that applies to all pages in our watch. Making these kind of global changes in the main.css file helps us keep track of all changes that will affect our watch globally. Feel free to play around, but make sure to revert back to the original code.

Page specific styles

Existing example page

1. You can find an example of this in client/src/js/pages/homePage/homePage.css

#home {
  font-style: italic;
}

2. Let's try editing and changing the text color ONLY this page in the watch. In the #home block, add the line color: blue;.

3. Take a look to see if any other page has been affected or not. #home is a CSS ID that applies to only to the home page in our watch. Making these kind of global changes in the homePage.css file helps us keep track of all changes that will affect our watch's home page. Feel free to play around, but make sure to revert back to the original code.

Creating a new style page

1. Create a new CSS file client/src/js/pages/contactsPage/contactsPage.css

2. Include the CSS file in client/src/app.css with the following code @import './js/pages/contactsPage/contactsPage.css';

3. Add your custom styles using the selector #contacts to limit the scope.