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 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.