CSS

Directions

Follow the directions in the video tutorial and refer to the slideshow below and fulfill the following requirements:

Step 1

Open TextWrangler and create a new CSS file named YourFirstName.css. To create a CSS file instead of an HTML file, just save it as a .css file instead of a .html file but make sure you save it in your HTML folder next to your other HTML files.

Copy the code below and paste it into your CSS file:

{style type="text/css"}

h2 {

color: #FF69B4; font-family: monotype corsiva; font-size: 30px

}

p {

color: #FF69B4;

}

.customstyle {

font-weight: bold; color: #FF69B4; font-family: monotype corsiva

}

Use CSS attributes to format <h1> & <h2> on all your pages with the font of your choice by using http://www.cssfontstack.com (choose a font with a high Mac percentage) to get the CSS code of the font and set the text color (example) of <h2> and <p>. Do not use monotype corsiva font or the #FF69B4 color; you will need to change these to your own preference (color code reference).

Your CSS code will not work until you link your CSS file in the next step.

Step 2

Link

Link the CSS file (e.g. john.css) to all of your .html webpages.

The purple code below is an example of what you would enter after the <head> tag in all of your pages in order to link your CSS file.

.html Files

All of your html pages should have the purple text inserted below the head. If you have other CSS <style> code (e.g. list format for your links) in your .html pages, cut it out and paste it into your .CSS file instead and it will still work:

<html>

<head>

</head>

<title> Inspire </title>

<body>

Custom

Use a custom CSS style for the font color for Created by Your First & Last Name and style that is different than all of your other font styles. This style will be applied to the Web Master info at the bottom of each page.
<span class="customstyle">
WEB MASTER
<br>
YOUR FIRST & LAST NAME
</span>

Trouble

If you encounter trouble and are not able to link your CSS file to your other pages to get the CSS formatting to work, then just try to insert the CSS formatting into each .html webpage below the <head> tag.

CSS Background in .html Pages

Go to transparenttextures.com and choose your pattern and color. Make sure the background is a contrasting color with your font colors and is easily readable. If it is difficult to read then points will be taken off. For example, use a light color texture background and dark text or vice versa.

Copy the CSS code from the texture website and insert it into each of your .html webpages (e.g. index, develop, etc) below the code

<html>

<head>

<style type="text/css">

body {

background-color: #b34800;

background-image: url("http://www.transparenttextures.com/patterns /absurdity.png");and paste

</style>

<title> Develop </title>

</head>

Step 3

Post

When you are finished, take a screenshot of your index page & show your CSS file next to it to post to Schoology. Then go to your HTML Hobby website folder and select all of the files, right click on the selected files and choose "Compress # Items" and upload the file to Schoology. In the comment section of Schoology write the title of your Hobby Website. This is the final submission of your HTML website and it may carry more weight.

Done.

Do not do:

If you do get the CSS linked formatting to work, you will get extra bonus points but if you cannot get it to work but still have all the CSS correct in the head of each page, you will not get CSS points taken off for the CSS link not working.If you embed the h2, p, and custom CSS styles on your .html pages after <head> and

cannot get it to work, that is fine as long as they are there but make sure you at least have the custom background texture and custom font style (http://www.cssfontstack.com) for your <h1> and <h2> tags.

Helpful CSS Resource.

All of your html pages:

<html>

<head>

<link rel="stylesheet" type="text/css" href="format.css"/>

<style>

body {background:#990000; margin:200px 100px}

</style>

</title>

</head>

<body>

content

your background color and/or background image but do not spend a lot of time on this and make sure you can see all the text and headings clearly.

(The first margin in the distance from the top and bottom, while the second number is the margin width. Margins are similar in Microsoft Word, they control how close the text and images are to the border)

Add what you would like to your index.html file to make it nice and customize it. Then

Optional Formatting

Use http://cooltext.com to create custom buttons and replace your links page links (e.g. inspire) with button links.

CSS

Watch this one minute video intro to learn about CSS.

Optional: If you would like to create formatted horizontal links with the colors of your choice, view the sample code and see if you can figure it out.

and compress them with your CSS & Homepage webpages and send to Posterous & the link to the spreadsheet.

-------------

<style>

ul#menu {

padding: 0;

}

ul#menu li {

display: inline;

}

ul#menu li a {

background-color: black;

color: white;

padding: 10px 20px;

text-decoration: none;

border-radius: 4px 4px 0 0;

}

ul#menu li a:hover {

background-color: orange;

}

</style>

</head>

<body>

<h2>Horizontal List</h2>

<li><a href="/js/default.asp">JavaScript</a></li>

</ul>

</body>

</html>

Add the text Created by Your First & Last Name at the bottom right of your index.html page and use a custom style for one of your words in your website's index.html H1 title "Inspired By Photography"

After this checkpoint you will be finished with the HTML Hobby page and later it will be checked to see if each of the pages works correctly and will be graded with a weight of 5 in the checkpoint category (e.g. this checkpoint is equivalent to 5 checkpoint grades).