CS-081 Assignment 3

This assignment deals with CSS selectors, which are covered in pages 18 through 24 of the textbook. (Only six pages: how hard can this be?)

See the table of selectors in the W3C CSS specification for a list of all selectors. But pay attention to the “First defined in CSS Level” column on the right. CSS Level 3 has not actually been formally adopted yet, and not all browsers support all CSS 3 selectors. It’s all right to use Level 3 selectors, they just might not have any effect in certain browsers.

1. Prepare your web page.

   You need some marked-up content to work with for this assignment. Rather than work with distracting and meaningful content, this step adds some structured elements with meaningless content.

   • Go to the web site, lipsum.com, and get eleven paragraphs of Lorem Ipsum text as demonstrated in class. That is, go to the part of the page that has a “Generate Lorem Ipsum” button. Change the number of paragraphs to generate from 5 to 11, and click the button. A new page will appear; copy just the 11 paragraphs of Latin text into your site’s index page, between the h1 element and the div element containing the validation links.

     Unfortunately, lipsum.com does not supply the p tags you need around the paragraphs. This is easy to do using the built-in keyboard shortcut, Ctrl+Shift+A: Select a paragraph, press all three keys, and voila!, the text will be wrapped in <p> and </p> tags. (In class I wasn’t sure whether this is a built-in shortcut or one I added myself: it’s built-in.)

   • Wrap all eleven paragraphs (and nothing else) inside a div element.
   • Your name should appear in the h1 element on the page. Put a span element around it. Give this span a title attribute with the value, my-name. The title attribute causes its value to be shown in a yellow box when the user’s mouse hovers over the element.
   • Pick a word in the middle of the first paragraph of Latin text, and put it inside another span, and then nest the first letter of that word inside another span.
   • Pick two more words in the first paragraph—one somewhere before and one somewhere after the word you picked in the previous step—and wrap them in span elements too. But give both these elements a class attribute with the value example ( <span class="example"> ).
   • Create an ordered list (ol) between the first and second paragraphs. Put three list items (li) in the list. Put the text, “First item”, “Second item”, and “Third item” into the three list items, and then put an unordered list (ul) after the text inside the first list item of the ordered list. Put two list items inside the unordered list, with contents of “A bullet” and “Another bullet”.
   • Create a new file in your css directory, and name it assignmentment_03.css. Change the link in your index.xhtml file to point to this new stylesheet instead of the one you used for the previous assignment.

   • Without adding any rules to your new stylesheet, check your site in Firefox. It should be plain black text on a white background: a heading, a paragraph of Latin text, the nested list, ten more paragraphs, and finally two links to the W3C validators.

     Here is a screen shot of the top left corner, with the mouse hovering over the student’s name.

     

     Make sure both validation links give no errors and no warnings for the page.

2. Select elements by tag name.

   Make the backround color of all body elements MediumSeaGreen:

   body { background-color: MediumSeaGreen; }

   Hopefully, you still remember how to do this from Assignment 2 and didn’t need the sample code!

   Notice three things, here:

   1. The instructions say “all body elements” even though there is only one body element on a web page. We’re just being more accurate in our language.
   2. The color name is weird. Who ever heard of “MedumSeaGreen” as a color name? The fact is, this was not a W3C valid color name in CSS Level 2, but all browsers recognize this and many other color names, and the W3C decided to allow the full list in CSS 3. The list was established as part of the X Window System, developed at MIT in the 1980s. (The curent version of X is known as X11.) We will use color names from this list for this assignment, but you will learn to get more control over colors than these arbitrary names allow, later in the semester.
   3. Color names are case-insensitive, an unusual situation on the web. So the color name could have just as well been specified as “mediumseagreen.” But note that you cannot put spaces or hyphens in color names.

   Using three additional rules, provide three different light background colors for all h1, div, and p elements. Pick names from the X11 color list, such as LightSkyBlue, LightYellow, and LightGray.

   Check your page. Be sure the four colors are clearly different from each other and all (except the body) are light enough so the black text and the blue/purple validation links at the bottom of the page show up clearly.

3. Select multiple tag names.

   Write one rule that selects all span and all a elements, and makes their font-style italic. You use a comma-separated list of tag names as the selector to do this: span, a or a, span. Check you web page to be sure all four words inside spans and the two validation links at the bottom are all italic.

4. More to come… but not until Assignment 4!

When you are ready for me to look at your assignment, simply send me an email message to let me know. I’ll copy your entire web site to my computer (babbage) and check it out. The full pathname to your web site on babbage will be http://babbage.cs.qc.cuny.edu/Grading/cs081/ followed by your account name.

Send your email message to me at: vickeryatbabbage.cs.qc.cuny.edu by midnight of the due date.

The Subject line of your email message must be: “CS-081 Assignment 3.”

Don’t forget to put your name in your email message!