Selection Techniques & Typography Assignment #2 Solution

Note that for this and future assignments, more of the new and exciting parts of CSS are going to be introduced. Because of this, it becomes increasingly important for you to have recent versions of your browsers in order to obtain the intended page displays when you test them out. So please update your testing browsers as needed.

Be aware that our textbook (like any book) does have a few errors. Fortunately, ours also has an "errata" page, where known errors are corrected and updated over time. For the most recent version, refer to this link to avoid problems in your work: http://oreilly.com/catalog/errata.csp?isbn=9781491918050

Part 1: Basic CSS Selection Techniques" YouTube Video
30 Points: Style a Given Resume' Page
For this part of the assignment, you are asked to watch, listen, and do the same steps as are done in the "CSS Selection" YouTube video. The links to this video itself, to the data files you'll need, and to the code editor that is used in the video appear below. You can use any code editor you like for this work, but in case you want to use the same one that is used in the video, a link for downloading and installing the code editor (Windows only) is provided.

Link to the CSS Selection YouTube video: Basic CSS Selection Techniques YouTube Video (30 min)

Link to the data files (.zip file): Data files for CSS Selection Video

Optional Link to the (old) editor (version 3.5) used in the video: CSE HTML Validator Lite

By doing what the video does, you will be styling an online resume page. A variety of selection techniques are demonstrated to style different pieces of the resume effectively.

After The Video:
Note that you should insert your own first and last name in place of "Joe Student" in all 3 places where they appear in the resume file used in the video. That means replacing it in the "title", in the main "h1" heading, and in the last "p" paragraph. In the "h1" heading, your first name initial (first letter) and your last name initial (first letter) should end up within the "span" tag in your code (and appear bigger in the browser) instead of "J" and "S" and "Joe Student".


After completing the video work and achieving an identical looking resume page (and code) to that shown in the video, be sure to validate your CSS. Do so by copying the CSS code that you have between the "style" tags (but not including the "style" tags) and pasting it into the W3C CSS validator and confirming that it is valid. You will find these "style" tags in the "head" section of your page. (Don't bother trying to validate the HTML because it is older code and is likely to trigger some issues.) When you have done this testing in the browser and in the CSS validator and are happy with the results, you are ready to prepare your work for submission.
What To Submit For This Assignment Part 1:
Open the "resume" page in a browser. Make sure your own full name shows up in all 3 places mentioned above instead of "Joe student". Then capture a screen shot of your page displaying in the browser and paste it into the appropriate part 1 location within the given Word file that you downloaded from Canvas. Note that if your page is too long to fit on a single screen shot, take and paste one screen shot of the top of the page and a second one of the bottom of the page.


From within your editor, copy all of the code for the "resume" page (from the top of the HTML file to the very bottom), which contains both HTML and CSS, and paste it into the code area for part 1 within your Word file). Be sure that all of the page's code shows up and is formatted appropriately (remove extra tabs if they are causing any code to right align.)
Part 2: More Selectors (Chapter 3 Tutorial)
30 Points
For this part, you'll be asked to do various tasks related to the tutorial towards the end of chapter 3 of the textbook.

First, read through and familiarize yourself with all of the various types of selectors outlined in the first part of the chapter on pages 41-70. Although it is pretty technical stuff, it is critically important to your future CSS success, so give it the time and effort that it requires. Make sure you understand each example given. The selection techniques discussed on pages 42-56 are the most commonly used and must be mastered for you to have success in this class. The others discussed on pages 57-70 are good to know but not as critical right now.


When you are done reviewing the material indicated above, continue on to do the "Tutorial: Selector Sampler", on pages 70-83.


When you complete the tutorial, there are a few more changes you need to make to produce the final result. The additional changes are marked with red arrows on the final screen shot that represents the goal of your work. Follow the instructions below to guide you through these changes.

The word "NOTE:" in the 2 darker green boxes are ok being either orange or white depending on the edition of the book you are using.


Additional Changes:

With the "selector_basics.html" file open in your editor of choice, locate the "h1" heading. Replace the words "The Amazing" with your own first and last name. (In the screen shot shown above, that h1 heading appears with "Joe Student" but yours should have your own name there.)


While you are still working with that "h1" heading, locate the last word of this heading, "CSS". Surround the text "CSS" with "span" tags (opening span tag before "CSS" and closing span tag after it). This will allow us to later write a rule to style that text uniquely, as you can see in the screen shot above.


Next locate the "h2" heading for "Who Knew CSS Had Such Power?". Then locate the word "CSS" in the text within that heading and surround it with "span" tags as you did for the "h1" heading above.


Now we are ready to make some changes to the CSS style rules that control the formatting for this page. Locate the "style" section of the code toward the top of the file. First we will add a new style to format the text "CSS" in the "h1" and "h2" headings. Since this Web page is all about glorifying the amazing world of CSS, let's emphasize this "CSS" text a little more. We would like to write just one single style rule that formats the "CSS" text within both headings at the same time. To do so, we will have to come up with a selector that can target the "span" tags inside these headings. To target the spanned text inside the h1, we could use the selector "h1 span". That selector targets any span that is inside an h1. Likewise, to target the spanned text inside the h2, we could use the selector "h2 span". But since we want to format the two areas identically (same styles), we need to combine these two selectors. Just like the existing selector "h1, h2, h3" combines 3 separate heading selectors into one using commas to apply a single set of formatting to all 3 headings, we can combine our two selectors into one like this: "h1 span, h2 span". So using that as our new selector, let's write a new rule into our style sheet to format those spans. Place the new style rule just below the existing "h1, h2, h3" style rule and just above the existing ".note" style rule. The first property we are going to set in order to emphasize this text is "color". To make the text stand out and to tie it in with the "pinkish" color at the top of the page, we will set its color to the same as the background of the logo, #rgb(191, 91, 116) as shown below.



Test your page in the browser. You should see that the formatting on the text "CSS" within both the "h1" and "h2" headings has its new intended pinkish color. If not, double check that you wrote the CSS rule properly and that you wrote the "span" tags properly. Try validating your HTML and your CSS if you have difficulty troubleshooting your problems. Once you have success, continue to the next step.


To finish off the changes to these heading spans, we will increase their font size, increase the spacing between the C-S-S letters, and add some silver colored text shading. These affects should combine to make the text really stand out nicely (as shown in the screen shot above). This sounds good, but one challenge we face with trying to do these changes to the h1 and h2 text all at once is the fact that the h1 text is bigger than the h2 text and the changes we make -- especially to the font-size -- have to respect that difference. To so, we will use "relative" units on all our property values such as "%" units or "em" units rather than "absolute" units such as "pt" for points. That way, the changes will be bigger on the bigger text and smaller on the smaller text, all based on the existing sizes. This will be true of the letter spacing and shadowing affects too, so that the amount of spacing we add between the letters and the size of the shadow is relative to how big the letters are to begin with. With that in mind, add the following declarations so that the overall rule looks like this:



The font-size declaration makes the "CSS" text 35% larger than its surrounding text (regardless of how big it currently is). The second new declaration adds one tenth (.1em) of the current font size in that area to the spacing between the "C", "S", and "S" (so the bigger the text is to begin with, the more space is put between the letters.) And, finally, the third new declaration adds the silver text shadowing to give the "CSS" letters a 3D affect. The negative first number (-.07em) puts the shadowing on the left (a positive number moves it to the right); the positive second number (.07em) puts the shadowing below the letters (a negative number moves it above the letters); the third number indicates the width or blur of the shadow; and the last property is for the color of the shadow (silver in this case.) Since "em" units are being used, the bigger the letters, the bigger the shadowing -- so the shadowing on our h2 will be smaller than the shadowing on our h1, thus keeping the look proportional and natural. Using pixels instead of ems might seem easier to deal with, but the results would not be pleasing to the eye because they would not be proportional. But don't worry too much about all of these property details -- try to keep your focus on what really matters here -- the selection techniques. Make sure you understand the "h1 span, h2 span" selector. You will have plenty of time in future chapters to obsess over these property settings!

Save your file and test it in the browser. You should see the same affects as in the screen shot if you wrote your CSS correctly and are using a recent browser (text shadowing in particular requires a recent browser.)


Next, we are going to lighten up the background color of the page. Unfortunately, we can't go too light or we will have to change several other color settings just to be able to read the text. With that in mind, locate the "body" selector rule and find the setting for the background color. Replace the exsiting background color, "rgb(50,122,167)", with the color "darkseagreen" (it isn't very dark, despite its misleading name), as shown below:



Keep all other existing declarations for the body intact below the background-color declaration, just change the background color value.
Lastly, it is time to apply some changes to the border surrounding the "notes" on the page. Find the ".note" style rule in the existing page's style sheet. We are going to add a little punch to the left hand side of the note box border and tie in the pinkish color at the top of the page at the same time.

At the bottom of this ".note" style rule (just below the "padding: 20px;" declaration) but above the closing "}", add the following declaration:



Save your changes and test your updated page in the browser. You should see the new thick pink left border on both of the note areas on the page (as shown in the sample screen shot above). Verify that your page is looking good in the browser. If not, double check your work against the code shown above. Validating your CSS code is recommended. Once you get things looking good, it is time to get your work ready to turn in.


Note that before you turn anything in, it would be a good idea to copy/paste your style rules (everything inside the "style" tags) into the W3C CSS Validator to ensure that all of your code is as good as can be.
After completing the tutorial work and the steps above, you are ready to create your screen shot and code pastings.
 

What To Submit For This Assignment Part 2:
Open the "chapter 3 tutorial" page in a browser. It should include all of the changes above which are shown in the sample screen shot above. Make sure your full name shows up in the heading toward the top of the page instead of "Joe Student". Capture a screen shot of your page displaying in the browser and paste it into the appropriate part 2 location within the given Word file that you downloaded from Canvas. Note that if your page is too long to fit on a single screen shot, take and paste one screen shot of the top of the page and a second one of the bottom of the page.


From within your editor, copy all of the code for the "chapter 3 tutorial" page (from the top of the HTML file to the very bottom), which contains both HTML and CSS, and paste it into the code area for part 2 within your Word file). Be sure that all of the page's code shows up and is formatted appropriately (if any of your code is aligning to the far right hand side of the page, remove any extra tabs to the left of that code that might be causing it.)
 

Part 3: CSS Typography -- Font & Text Properties Video
15 Points -- Questions and Answers from a YouTube Video
For this part of the assignment, you are asked only to watch and listen to the video. You do not need to do the same steps as are done in the video (unless you want to). The only requirement is for you to answer some questions in your Word submission file about the video. The video covers font and text properties. The link to this YouTube video "CSS Text Styling Tutorial" appears below.

Link to the YouTube video: https://www.youtube.com/watch?v=azZCW24XtT4

Keep in mind that you don't have to do what the video does -- just watch and maybe take a few notes about the font and text properties that you can refer to later.

After watching the video, the section below will indicate what to do next.

What To Submit For This Assignment Part 3:
Within the appropriate part 3 section of the given Word (submission) file that you downloaded from Canvas, answer each of the questions pertaining to the "YouTube" video you just watched. Indicate your answers by highlighting and bolding them as indicated in the Word file.
 
Part 4: Formatting Text (Chapter 6 Tutorial)
35 Points
For this part, you'll be asked to do various tasks related to the tutorial towards the end of chapter 6 of the textbook.

First, read through and familiarize yourself with the various properties and issues associated with styling text in the first part of the chapter on pages 121-172. Although it is pretty long, it is very useful material and worthy of some attention. I suggest browsing pages 121-147 more quickly, getting a feel for fonts and why Web fonts are helpful, and then focusing more attention on the properties described on pages 147-172. These pages cover more useful properties in less pages.


When you are done reviewing the material indicated above, continue on to do the "Tutorial: Text Formatting In Action", on pages 172-184. But before you follow the steps on those pages, note the following issues detailed in the next several steps:


When you reach page 174, and you are asked to type up all that font related code on step 6, it is recommended that you copy and paste the code as suggested in step 6.


At some point during the tutorial, replace the name "Rod Dibble" with your own full name in that 3rd line of the page.


If your page ends up with a yellow "The Missing Manual" heading instead of the orange one shown in the screen shot below that is fine. Other minor color differences are ok too.


If your main "PTSans" font doesn't look right in the browser (your font doesn't look at all like the screen shot below), then it is probably not your fault. Find the CSS rule that looks like this:
"html { font-family: PTSans,  ...}"
...and just rename that PTSans font to "PTSansBad" (or to something else) and the browser will ignore it and use the next font in your font list which will look much better.


After completing the tutorial, there are a few more changes you need to make to produce the final result. Follow the instructions below to guide you through these changes.


First, we are going to widen the layout a bit and allow the "CSS" and "The Missing Manual" parts of the "h1" to sit side by side instead of overlapping on top of one another. To do so, make the following adjustments:
Locate the ".main" style rule and modify the "width" property value from 740 to 800 pixels. (That extra 60 pixels width will create more room for the text to sit side by side.)


Locate the ".main h1 strong" style rule and delete the declaration inside that sets the negative margin-right (that setting was causing the overlapping that we no longer want.)


Save your work and test your results in the browser. Now you should see the entire "CSS The Missing Manual" heading stretch across a single line without any overlapping of these words, as shown in the sample screen shot below (see the top-most red arrow.)
Next we'll focus some more attention on the unordered (bulleted) list that was floated to the right hand side of the page. We'll increase the line-height of each list item (line) so that it takes up more vertical space and comes closer to matching the overall height of the paragraph to its left. Then we'll add a "blue diamond" image bullet to replace the current standard square bullet.
Locate the ".main li" style rule in your existing "style" section. Below the 3 existing declarations, add a 4th declaration to set the "line-height" to "1.75em". This should add the desired amount of vertical spacing to each list item as described above.


Save your work and test your results in the browser. The 6 bulleted list items should take up more vertical space now that they used to and more closely match the height of the paragraph to its left (as shown in the sample screen shot below and pointed to by the third arrow down the page.) Next we will add the graphical bullet.


Now that there is more room between each bulleted item, we also have more room to replace those little standard square bullets with our own bullet images. To do so, download the image linked to below and save it into the same folder as your Web page. Keep the file's name, "blue-arrow-bullet.gif", intact as you download/save it.

    blue-arrow-bullet.gif



With the image file in the same folder as the Web page you are editing, locate the style rule with the selector ".main ul". Below its 3 existing declarations, add this 4th declaration to bring our blue arrow bullet image into play:








Save your work and test your results in the browser. You should now see a little blue arrow next to each list item where the squares used to be (as shown in the sample screen shot below and pointed to by the third arrow down the page.) If not, double check the location of the file, its name on disk, its name in the style rule, etc. You can also try to validate your styles to find possible mistakes as needed.
After completing the tutorial work and the additional changes indicated above, your page should look very similar to the screen shot shown below (minus the red arrows and with yellow or gold colored text instead of orange). If so, you are ready to prepare your work for submission.





Lastly, we will spread out the characters and words that make up your own name (right next to the "november 30" on the 3rd line of the page). Before we begin, review the examples in the book on pages 159 and 160 for modifying the letter-spacing and word-spacing properties.
Your name (which originally was "Rod Dibble") is inside "strong" tags which itself is inside a paragraph ("p" tag) that has a class name of "byline" in the html. As such, to target this area, we might use the selector ".byline strong". But since in this tutorial it has already been targeted for other styles using the (more complicated) selector ".main .byline strong", we will use that existing rule. Locate this rule in your style section -- it has 3 existing declarations: one each for color, text-transform, and margin-left.

Add "letter-spacing" to this rule to further spread out the letters of your name by 5px

Add "word-spacing" to this rule to further spread out the words of your name by 10px).


Save your work and test your results in the browser. You should now see the letters and words of your name more spread out (as shown in the sample screen shot below and pointed to by the 2nd arrow down the page.)
See below for what to turn in for this part of the assignment.

What To Submit For This Assignment Part 4:
Open your completed "chapter 6 tutorial" page in a browser. It should look very similar to the screen shot shown above, but should include your name in place of Joe Student (which is pointed to by one of the red arrows above). Capture a screen shot of your page in the browser and paste it into the appropriate part 4 location within the given Word file that you downloaded from Canvas. If your whole page doesn't fit in one screen shot, feel free to use 2 screen shots.


From within your editor, open the HTML page and copy all of the HTML code for this chapter 6 tutorial page. Paste this HTML code into the HTML code area for part 4 within your Word file. Be sure that all of the page's code shows up and formats appropriately.


From within your editor, open the CSS style sheet for this tutorial page and copy all of the CSS code for this chapter 6 tutorial page. Paste this CSS code into the CSS code area for part 4 within your Word file. Be sure that all of the page's code shows up and formats appropriately.



Part 5: Final Project Theme
20 Points
For this part of the assignment, you must choose a theme for your eventual final project. The final project involves taking a given unstyled generic 6-page Hotel Web site and using CSS to format the site according to your own chosen theme. You should choose a visually rich theme that will give you a clear direction for your CSS styles (colors, background images, fonts, etc.). Once you decide on the theme of the hotel, make up a hotel name based on that. For example, if you choose a "Spiderman" theme, the hotel name could be "The Spider Manor", or "The Spiderman Motel". Be creative and choose a theme and hotel name that will be fun for you to style. It should not be a themed hotel that already exists in real life, but if it did exist, you should imagine it to be a fun, visual place to visit.

Check out the final project printscreen gallery. There you'll see several previously used themes by students in this class. Although you cannot use any of those specific themes, you can get some great ideas for your own theme. Also, at the very bottom of this screen shot theme gallery page, you will see some other suggested themes listed in case you are having trouble making up your mind.

After previewing the themes gallery, you'll notice that themes involving fantasy and rich imagery work very well. Choose a theme that has a lot of recognizable graphics that are available on the Web for you to "borrow" for use as photos, backgrounds, bullets, and/or buttons within the hotel site. Also be as specific as possible with your theme. For example, rather than choosing "The Candy Cottage", choose a more specific theme like "The M&Ms Motel" because then you'll have more specific M&M related images, colors, and fonts to use in your site to capture that specific theme and bring it to full life.

Here's what you need to think about, decide upon, and enter into the part 5 area of your Canvas submission file to get full credit for this part (see below):

CSS A2P5 Theme

Your full name
Your Hotel's name
Explanation of Theme (assume that I don't know anything about it)
Hotel Image
Color Scheme
Fonts
Bullet Images
For example, if you were going to do a Spiderman themed hotel, your entries could be similar to the following. If you don't have an image to insert into the Word file, you can describe the image in words, as was done for the Spiderman hotel below, but inserting an actual sample image is better:

1. Your full name: Joe Student

2. Your Hotel's name: The Spider Manor

3. Explanation of theme: Theme is based on "Spiderman", the main super hero character of the comic book and movie series.

4. Hotel Image: Hotel will be a red and gray brick multi-story building with Spiderman climbing up the side of it.

5. Color Scheme: red, blue, black, gray and white will be the dominant colors, something like this:

6. Fonts: "The Amazing Spiderman" and "Spiderman" fonts, shown below, are both available free at "www.fontspace.com/spiderman" and are shown below. They will be used for headings only. Main text will be general comic book style and basic sans-serif fonts:




7. Bullet Images: Small spiders will be used, something like these:

 

What To Submit For This Assignment Part 5:
Just fill out the part 5 area of the Word document using a format similar to what is shown above. You can paste images (into the Word file) that are copied from the internet or saved from the internet or from a graphics program such as Photoshop as needed. Google image searches can help you find images that might work as a hotel starting point, as bullet images, or whatever. Search font sites such as Google fonts, fontspace.com, dafont.com, myfonts.com, fontsquirrel.com, urbanfonts.com, etc., to find at least one font that is specific to your theme. Note that any missing (or unacceptable) entries in this list of 7 items will be cause for point deductions and may require changes to parts of your theme.



Part 6: Test Your Knowledge of Selectors
20 Points

For this last part, carefully answer some questions, based on chapter 3 of our textbook and parts 1 and 2 of this assignment (selectors). There are also several helpful advanced selector videos and web site resources listed in the Recommended Assignment 2 Resources page in Canvas. Check them out!

Selection techniques are very important – they are your key to future success in formatting your Web pages. Because of this, I have deliberately chosen some challenging questions to test your skills here.

Your answers should not be guesses nor should they be copied off another student -- you should try each of these in the given test page linked to below to determine what answers work and what answers don't and why. If you just guess, you'll likely miss a lot of points and learn very little.

So, use the specially prepared Web page (see the link below) to test out the given questions and answers so that you will know for sure which answers are correct and understand how and why they work. You may need to review your html for tables and/or forms for some of these questions too.

Note that the questions below also appear within your Word assignment submission file and should be answered there by bolding and highlighting as usual (don't try to copy these questions into that Word file). They appear below just for your reference and convenience.

Download and edit the "a2p6" test page here to help you answer the questions below: a2p6-test.html

If you want to create a style rule to format just the list items of bulleted lists (not of ordered lists), which selector would do the job?

.ul .li
ul, li
ul li
li ul
li, ul


If you are writing a style rule to format a copyright paragraph differently from all other paragraphs on your page, which selector makes the most sense to use?

p
.copyright
p .copyright
#copyright
p #copyright


If you use the selector "nav+a", what would you be selecting?

The nav area plus all links after the nav
The nav area plus the first link after the nav
Just the first link inside the nav area
Just the first link after the nav area only if it is the very next tag
Just the first link after the nav area regardless of where it is


In a form with 3 text boxes, 4 radio buttons, 2 text areas (that can hold multiple lines of text), and one submit button, how many elements would be affected by the selector "input"?

10
9
8
7
3


In a form with 3 text boxes, 4 radio buttons, 2 text areas (that can hold multiple lines of text), and one submit button, how many elements would be affected by the selector "input[type="text"], input[type="button"]"?

10
7
6
5
3


In a table with 5 rows, and 5 columns, which table cells would be affected by the selector "td:last-child"?

None of the cells would be affected
The 5 cells across the last row would be affected
The 5 cells down the last column would be affected
Just the last cell in the last column would be affected
All 25 cells would be affected


In a table with 5 rows, and 5 columns, how many of the 25 table cells would be affected by the selector "td + td"?

None of the cells would be affected
4 cells would be affected
5 cells would be affected
20 cells would be affected
All 25 cells would be affected


In a table with 5 rows, and 5 columns, how many of the 25 table cells would be affected by the selector "table td"?

None of the cells would be affected
4 cells would be affected
5 cells would be affected
20 cells would be affected
All 25 cells would be affected
 
What To Submit For This Assignment Part 6:
Answer these same above questions which appear inside the assignment's Word submission file that you download from Canvas. Inside that file, you will indicate your answers by bolding and highlighting your answers as instructed to do there.