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

Look at the font choices below and decide which one you like…

Roboto Slab

Inconsolata

Special Elite

Crafty Girls

Select the line for the font you like and copy it (CTRL+C)…

font-family: 'Roboto Slab';
font-family: 'Inconsolata';
font-family: 'Special Elite';
font-family: 'Crafty Girls';

On your style sheet, go down to the section “FONT STYLES”. Click inside the body style…

… 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';
font-family: 'Graduate';

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 Styles

Go to the PAGE STYLES section:

body: change the text color to “white”
div: change the background color to “grey”

Border Style

Scroll down the page to the BORDERS section…

First change the border-radius amount from “0” to either “20” or “30” or “40” (this is the amount of roundedness for the corners.

Also change the border style from solid to one of the following:

dotted
dashed
double

Tiling Background

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 the picture and Copy image address…

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.

Colors from Image

Click on this link: ImageColorPicker.com

It should take you to the “Pick color from image” tab. Click on the Use your image button on the bottom-right area.

Go to the Image URL tab and paste in the URL in the box…

Select the bit at the end, whatever is after “…png” and delete it so you will get a full-size image. Then click on OK.

background color

Click on the image to select a dark color, or click on a color in the color palette which has chosen colors from the image at the bottom.
Then copy the HEX color # on the right.

If you want to get a color from the strip below the photo, click on it, then click on one of the circles on the picture to change the top-left color rectangle. Then you can copy the code.