Open Style Sheet
Start by closing the other pages/tabs using the Close All button…
Then go to File>Open …
Open the myStyles style sheet file.
It will look something like this. You’ll see a list of font links for Google Fonts at the top of your style sheet.
Default Font
Copy the line of code for the font type you want to use. Here are your 4 choices:
Roboto Slab
Inconsolata
Special Elite
Crafty Girls
On your style sheet, go down to the section “FONT STYLES”.
Click inside the body style…
Copy the code for the font you like:
font-family: 'Roboto Slab';
font-family: 'Inconsolata';
font-family: 'Special Elite';
font-family: 'Crafty Girls';
… and paste the font type code.
Save your style sheet and see how it looks. Go to one of your topic pages to see…
Headings
Heading Font Type
Here are the font type choices for your headings:
Copy the font type code below that you want to try…
font-family: 'Peralta';
font-family: 'Original Surfer';
font-family: 'Ribeye';
font-family: 'Henny Penny';
Inside the h1, h2 style, on the next empty line, paste the font type code…
Save your style sheet and take a look at your page. You can try other ones by changing just the font type inside the quotation marks or pasting another line of code to replace it.
Heading Font Sizes
- Inside the h1 style, add
font-size: 3em;
- Inside the h2 style, add
font-size: 2em;
Take a look at your page now. Your headings should be bigger…
Center Website Heading & Navbar
Go inside the h1, nav style and add this to make it centered:text-align: center;
Link Styles
Links Not Underlined
On an empty line inside the a style add the property so the links are not underlined:text-decoration: none;
When you look at any of your topic pages, the navbar links are not underlined…
Bold When Hover
In the style for a:hover, add the following propertyfont-weight: bold;
If you hover over your links, the text should become bold. It will be easiest to see over the link to the page you’re on.
Page Background
Find Tiling Image
Click on this link: http://background-tiles.com and look for an image with a few colors – at least one dark color and 2-3 lighter/brighter colors. Under Patterns / Textures / Colors, click on “Show Me More” …
- When you find one you might like, first Preview the large or small tile.
- If you like it, click on the Download button to download a copy of the image file.
- Then right-click on the Download button and choose “Open link in new tab”.
In the new tab, select the URL and copy (CTRL+C).
Set Background Image
Go into your style sheet, to the PAGE STYLES section.
In the body style. Click between the quotation marks for the background-image: url(“”)
Paste the image link (CTRL+V).
Save your style sheet and take a look at your home page.
Background Color
Get Colors from Image
- Click on this link: Image Color Picker.
- Click in the box below the color squares.
- Paste the same image URL (CTRL+V).
- [Enter] to apply.
If it worked, you will see your background picture at the top-left area like this…
Background Color Code
If your background pic doesn’t have dark colors, use this grey code: #2E2E2E or go to one of these sites to choose another dark color
- Select a dark color from the image.
- Then copy the HEX color code/numbers at the bottom.
On your style sheet, go inside the div style and replace the word “white” and with the color code.
Save and look at your page. You will see a white border for your content box to start.
Link Colors
If you’ve clicked on all your links/pages today, they’ll be purple (visited). We need to change the colors so they stand out nicely against the background color.
If your picture doesn’t have bright/different colors that will stand out against your background, go to one of these sits. Choose a color and copy the code.
On your style sheet, scroll down to LINK COLORS section. You will be adding color #s before the semicolor ;
- Select the brightest color, what will stand out the most against your dark background. Copy the html color # and paste the color # into the a:link, a:active style.
- Select another light color, one that is easy to see but not as bright as the link color, and paste the color number inside the a:visited style.
Check one of your topic pages to see how it looks, if the visited color is readable. Then click and press on any link to see the link/active color.
Text Color
In your body style, add color: white;
so the text is easier to read against the dark background.
You should see the page heading and all the topic text be white now.
Border
Scroll down the page to the BORDERS section…
Border Radius
First change the border-radius amount from “0” to either “20” or “30” or “40” (this is the amount of roundedness for the corners.
Border Color
Replace the word “white” with an HTML color # – make sure it’s a brighter color. You can choose a new one or copy one of the link/visited colors).
Border Style
Change the border style from solid to one of the following:
- dotted
- dashed
- double
Get your project checked off.