Intro to CSS

Objective

You will write the CSS code to style this page. You will not edit the HTML of this page. You will submit only the CSS code for grading.

Here is the rubric by which you will be graded:

• 1 point The CSS file is named correctly.
• 5 points All CSS code has proper line breaks and indentation.
• 4 points The 3 web fonts are properly imported and used.
• 4 points At least 4 different types of selectors are used.
• 3 points At least 3 different colors are used.
• 8 points At least 8 different text and font properties are used.
• 5 points Each CSS property used makes a cross-browser visual change to the style.
• 30 points total

Detailed Instructions

First, you need to create your CSS file. Look at the HTML on this page to find the LINK tag. The HREF attribute of the LINK tag shows what file name you should use for your CSS. Save the CSS file in the same folder as this HTML document. To test that you made the proper file and placed it in the proper location, add this CSS code to the file and refresh this page in your browser. If the CSS file is now linked, then the code will be formatted with line breaks and indentation.

Fix the line breaks and indentation in your CSS file. As you saw in the rubric above, there are 5 points designated for proper line breaks and indentationin your CSS file.

Next, you need to import and use web fonts. Visit Google fonts and select 3 fonts to use. They should include a font for headings, a monospace font for code, and another font for the rest of the body copy. After you have selected your 3 fonts, pull up the usage toolbar from the bottom of the screen.

Go to "Customize" and be sure to include the Bold 700 and the Normal 400 Italic options for your body copy font. If you font for headings has a Bold 700 option, you may want to include that too.

Since you cannot edit the HTML for this activity, you will need to use the @import option back in the "Embed" directions. The @import statement allows all of our font work to be done in the CSS file. Copy the @import statement (NOT the STYLE tag) into your CSS file.

To actually use your new fonts, you will have to apply the font-family property to the appropriate elements. Create a new selector for all CODE tags that will use your monospace font. Also apply your headings font to all H1 and H2 tags. The ordinary body copy font will apply to everything else if you add it to a selector for the BODY tag.

For the rest of the activity you have a lot of freedom in your creativity. Take a good look through all of the HTML on this page. You will need to plan out which selectors will choose the elements that you want to style. To gain all possible points, you will need at least 4 different types of selectors from this list:

• Tag Name
• Class Name
• ID
• Combined
• Grouping
• Descendent
• Direct Child
• Pseudoclass

Remember that you also need at least 3 different colors and 8 different text/font properties. You may apply the colors using any combination of color, background-color, border-color, or border (shorthand) properties. When choosing text and font properties, it may be helpful to keep the W3Schools reference open to double-check browser compatibility -- you never know exactly which browser your visitors (like the person grading your work) will use to see your site!

A good way to check your work is to find each of your CSS properties in the browser's element inspector, and then use the checkbox next to each property to turn it off and on again. This will show you exactly what the property does to your actual web page.