HTML: Style Sheet – Miss Koppejan

Instructions:

[show]

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:

Peralta

Original Surfer

Ribeye

Henny Penny

Graduate

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 property
font-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 the link in the navbar to open the page with the tiling backgrounds.

Scroll through the page to find one you would like to try – click on the picture to open it in a pop-up window. Right-click on it and “Open image in new tab”

Click in the URL and copy it (CTRL+C).

If you don’t click on the image to get the pop-up and right-click on the thumbnail on the main page, you will need to copy only the image link without the “?resize…” after “…png”

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

Default Grey

If your background picture does not have a dark color…

Copy this code for dark grey: #2E2E2E
On your style sheet, go inside the div style and replace the word “white” and with the color code…

Get Colors from Image

If your background picture has a nice dark color you’d like to use…

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…

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 should be purple (visited). We need to change the colors so they stand out nicely against the background color.

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.

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.

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.