SELFIE-SITE EXERCISE 3

INTRODUCTION

This exercise is intended help you practice adding basic CSS (Cascading Style Sheet) styling rules to your web pages. It will have you create and link an external CSS file, select and apply styles to existing page elements, add id and class attributes to HTML elements, and select and apply styles to these elements.

EXERCISE INSTRUCTIONS

1. PREPARE THE ASSIGNMENT

As with Selfie-Site Exercise 2, you should begin by importing your prior assignment submission. If you did not submit SS2, you may import any work you did complete by importing your SS2 workspace. Regardless, in this new assignment workspace, you will need to finish SS2 (and fix any errors you receive in your grade feedback), as this assignment will build on the work you did in all prior assignments.

2. ADD A LINK A CSS FILE

2. index.html Now open up index.html in the Auger editor. Adding a link to the CSS file is very straightforward. Simply add a blank line to the section of the file and add the appropriate tag. For all stylesheet links, the rel attribute should be set to "stylesheet". In this case, you are linking to a stylesheet called selfie.css, so set the href attribute to "selfie.css". Finally save the file and then select the line containing your tag and copy it to the clipboard. Altogether, this is:

.

2. education.html Open up your education.html file. Move to the same place in the section of this file and paste the tag. Now both pages will reference the same (soon to be created) CSS file. You will need to make sure that all of the pages you create for your site reference this CSS file. Save the file.

3. ADD A NEW EXTERNAL CSS FILE

2 selfie.css Now you need to add a new CSS file. In Auger, click the Add button and select CSS File. Name the file selfie.css. Yep, that was it.

NOTE: In the following sections you will be swapping back and forth between multiple HTML and CSS files. First, be very aware of which file you are editing. Obviously it matters quite a bit. The correct file to edit will always be clearly indicated by a marker that looks like 2 file.name . Second, if you are using an editor that supports multiple tabs (any of the ones that were recommended for this course do), then learn to use them to allow you to switch quickly between open files. It will save you a lot of time.

4. ADD STYLE TO YOUR PAGE

Here you will start by adding some basic color to your page. But first, you must pick a color scheme. Open an internet browser and navigate to: http://spots.augusta.edu/pyork1/SelfieSiteColors.html

Site Exercise 3

Pick a color schemes that appeals to you. If you dont find one of these to your liking, pick the one that you like the most and use it for now. You can click on each on to see how it will look when applied to elements on your pages.

NOTE: Moving forward, these assignments will use a specific vocabulary with regard to the color scheme.

Each scheme is made up of five separate color swatches. Each swatch is named: Primary, Secondary, Tertiary, Highlight, and Body. Each swatch has two different colors associated with it. The color value is the foreground (text) color and the background-color is the actual color of the swatch.

2 selfie.css Once you have selected a scheme, please add a CSS comment to the top of your external CSS file indicating the name of the scheme that you have chosen. It should look as follows:

/* COLOR SCHEME: Granny Smith Apple */

Obviously replace Granny Smith Apple with the name of the scheme that you have chosen.

A. ADD STYLE TO YOUR HEADER, NAV AND FOOTER

Element selectors are the easiest and highest level method of adding style to your web page. They are quite limited as the styles will apply to all instances of that element on a page, but they have their place. Here you will simply be adding some basic color rules to your

,

,

and

elements.

2 selfie.css Add an element selector for your header to your external CSS file. Recall that an element selector is simply the name of the element that you are selecting followed by opening and closing curly braces which denote the start and end of a declaration block. Add two declarations (often referred to as rules) to this selector that correspond to the Secondary color swatch in your chosen palette. In other words, a color property declaration with the value set to the color value of the Secondary swatch and a background-color property declaration with a value set to the background-color of the Secondary swatch. Done correctly, that should look as follows:

header { color: #493F0B;

background-color: #85DB18;

}

Obviously the declaration values above represent the Granny Smith Apple colors. Yours likely will be different.

Now add similar element selectors and declaration blocks for nav, main and footer. Use the following color swatches for each section to apply both color and background-color declarations:

header	Secondary
nav	Tertiary
main	Primary
footer	Secondary

Save your CSS file and open the page in the preview pane. Both pages should now have some color in the header, nav, main and footer sections.

Site Exercise 3

NOTE: Above you have been shown nearly complete blocks of code corresponding to the instructions given. In the future, this will not be the case. Moving forward, you will need to be able to translate instructions such as add a ____ selector or add a ____ declaration and be able to translate these into correct CSS code without it being explicitly translated for you. So insure that you understand exactly what you are doing with the above instructions; do not just blindly type it in.

B. ADD HIGHLIGHTING WITH A CLASS SELECTOR

The final task for this exercise will demonstrate how to apply style rules to an entire class of selectors. In this case, you will giving an existing

element a class and then creating style rules that apply to elements with that class.

Recall that in the previous exercise, you enclosed the details (degree, major, etc.) for each of the schools inside of a

element. Because you had at least two schools, there will be at least two of these

elements. If you wish to apply styles to these

elements, you need to be able to select them. But because there is more than one on a page, you cannot apply a single id to each as by definition an id attribute value must be unique on a page. Thus, you must instead apply a class to these

elements.

2. education.html Open education.html and locate the existing opening
   tag preceding the details of your first school (after the

   and preceding the Location). attribute Add a class to this

   and give it the value of "details". Apply the same class name to the details

   for every school on your education page. You have now applied a specific class to these elements which will now allow you to select only these elements and apply styles to them in your CSS file.

2. selfie.css Open selfie.css in your text editor. At the bottom of this file add a new selector and declaration block that applies styles to elements with a class of details. Recall that to select an element that has been given a specific class, the name of the class is prefixed by a period. So your selector will look like .details { }. In the declaration block for this selector, apply color and background-color declarations corresponding to the Highlight color swatch from your chosen scheme.

Site Exercise 3

C. MAKE SURE THIS WORKS IN INTERNET EXPLORER

We are using the

element in our HTML. This is a relatively new element type and as such it is not supported correctly in all browsers. Specifically, Internet Explorer doesnt recognize it at all, and thus your colors (and other future declarations) are not properly applied.

2 selfie.css To fix this, add the following selector and declaration to your CSS. In essence, it is telling the browser to treat a few potentially unrecognized elements as block elements instead of the default of inline (i.e., phrase) elements.

header, section, footer, aside, nav, main, article, figure { display: block;

}

Again, save all files and view your education page in the preview pane. You should see that the two school details blocks on the education page have been highlighted. It will look similar to the following.

Dont worry too much that the site currently looks, well, ugly. Well be working towards fixing that in the next few assignments.

4. TEST AND SUBMIT YOUR SITE

When done, submit your site. Make sure that the HTML is valid on all pages. Importantly, you now must also make sure the CSS is valid, as well. The same rules apply here: CSS validation errors also mean an automatic additional 10-point (20%) deduction! Fix errors and resubmit as needed. As always, your final submission is the one that I will evaluate for a grade.

Site Exercise 3