Homework 2: CSS Practice

In this homework you'll practice styling shape, color, and typography using CSS. You'll also practice citing content according to the course citation policy.

info

The course material needed to complete this assignment was covered in classes 2 and 3.

Learning Objectives

• Use the reference documentation to style CSS properties.
• Cross-check generative AI outputs using reference documentation.
• Analyze an existing website's design and identify shape, color, and typography CSS properties used in the design.
• Practice coding shape, color, and typography CSS properties.
• Cascade CSS properties to reduce redundancy in your CSS.
• Use the descendant combinator selector to style elements that are inside other elements.
• Validate CSS to ensure it conforms to the CSS standard.

Help & Support Resources

We want you to get the help and support you need. Use the course's support resources for help with this assignment.

Git Repository & Codespace

1. Create your assignment repository.

   Visit https://landrace.infosci.cornell.edu/courses/info1300-2026fa/repos/hw2 in your browser to create your assignment repository.

2. Open your assignment repository in GitHub.

   After creating your repository, visit https://landrace.infosci.cornell.edu/courses/info1300-2026fa/repos/hw2 in your browser and follow the link to open the repository on github.com

3. Open your assignment repository as a codespace.

Submission Requirements

Professionalism

Professionalism means meeting the client's requirements. Not doing less and not doing more.

Your submission should meet the requirements specified for this assignment and no more (or less). If you do more than the requirements, you will receive a 0 for the assignment. If you do less than the requirements, you will receive a 0 for the assignment.

Your assignment should meet the following requirements for credit:

• Submit your own original work (design and code) for this assignment.

  No credit is provided for submitting design and/or code that is taken from the course-provided examples.

• Your code should be original. However, the structure of the code will mirror the class examples.

  The structure of your code will align with the class examples. This is to be expected. We are learning web programming and there's only so many ways to structure code to solve its problems.

• You are required to use the methods and techniques covered in class.

  No credit is provided for using methods that are not covered in this class.

  You may not use any methods that have not been covered in class prior to the release of this assignment.

• Your assignment's website should be visible in the browser and functional upon launching the development web server using Go Live.

  If your assignment's website does not launch using this method or is not visible in the browser after launching the development web server, we are unable to provide any credit.

• All files should be in the location specified in this document for credit.

  Professionalism is important. Incorrectly placed files will not be graded; no partial credit is provided either.

• Follow the submission instructions below.

  Submit all materials to your GitHub repository's main branch for this assignment. When you're finished stage, commit, and push your submission to GitHub. Then fill-out the submission form to complete your submission.

  Failure to complete the submission form will result in 0 credit; no submission form = no submission. No leniency. No exceptions.

Instructions

Part I: Structuring Content with HTML Review

Credit: 5 points. Completion credit for reasonably structured contact information and reasonable GitHub Copilot evaluation.

In homework 1 (and in class) you witnessed how generative AI is pretty good at generating boilerplate because it is almost always the same in HTML. However, sometimes it can mislead us. This is sometimes true when using it to structure HTML content.

1. Review the contents of content.txt at the root of your repository.

2. Using only GitHub Copilot generate the HTML structure for the contact information (phone number, email address, mailing address) for the Ithaca Zoo.

3. Before you merge the result to your HTML markup, visit the Mozilla reference page and look at the various HTML elements available. Answer this question in Part I of README.md.

   Replace the TODO: with your answer.

4. Choose the best element for this task and add it below the other sections of content in your index.html page.

Part II: CSS Reference Documentation

Credit: 5 points. Completion credit for reasonable answers.

When styling (or structuring) content, make extensive use of Mozilla's reference documentation. It's what the pros do!

Take a moment and review the Mozilla's CSS reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

Because ChatGPT/Claude/Gemini can sometimes provide incorrect information, you should get in the habit of checking its answers, use this reference documentation. Though other sources of CSS reference documentation do exist, Mozilla's is the most comprehensive and reliable.

1. Answer the Part II questions in README.md.

2. Replace all TODO: lines with your answer.

   Your submitted work should have no TODO: lines remaining.

Part III: Example Website CSS Design Inspiration

Credit: 5 points. Completion credit for headings that are styled reasonably close to the example website.

It's often a good idea to use existing websites as inspiration for your own designs. By analyzing the CSS properties used in other websites, you can discover new techniques and styles to incorporate into your own work.

In this part, you'll study the design and CSS properties of another website.

1. Only identify CSS properties for Shape, Color, and Typography.

   Review your class notes if you need a refresher on these properties.

   Important! Ignore spacing and layout in the example website. (We will learn spacing and layout shortly.) For now, only identify the CSS properties for Shape, Color, and Typography.

2. Study the styling of this webpage with a peer: https://docs.github.com/en/codespaces/developing-in-a-codespace/using-source-control-in-your-codespace

   Study the color choices, the shape defined for some elements, and the fonts used for different elements:

   

   The objective here is to study the existing design and try and create something similar.

3. Change the page color of the Ithaca Zoo web page to match the example GitHub design.

4. Identify the CSS properties needed to style the Ithaca Zoo headings using a similar style inspired from the GitHub documentation design.

   1. Study the headings in the GitHub design for shape, color, and typography.
   2. What CSS properties would you use to add a thin gray line under the headings?
   3. What CSS properties would you use to change the color of the headings?
   4. What CSS properties would you need to create a similar font style for the headings?

5. Edit the CSS for the Ithaca Zoo <h1> and <h2> elements to create a similar style to the GitHub design.

   • Only change shape, color, and typography CSS properties. Do not change spacing and layout.
   • Only edit the site.css file; You may not edit the HTML file.
   • Hint: While you should always use a generic font family fallback, if you want a named font, I used "Noto Sans".
   info

   Your styling need not match exactly for credit; try to get close, but don't worry if you can't get it perfect. Perfection isn't the point of this exercise. The point is to practice identifying CSS properties that you can use to style elements while using other websites as inspiration.

   For example, here's how your headings might look after you've styled them:

   

Part IV: Cascading Properties Practice

Credit: 5 points; Completion credit for setting the generic font family for the entire document and removing all redundant font-family declarations.

You may have noticed that while your headings now align with the example design's, the rest of the page doesn't quite look the same. Most notably, the font doesn't quite look like it's the same style.

If you change some CSS properties for an element, all of that element's child elements will inherit the same style. For example, if you change the font-family of the <body> element, all text on the page will inherit that font. However, not all CSS properties cascade. For example, background-color or border does not cascade.

Let's experiment with cascading properties.

1. First, ask GitHub Copilot to generate a list of common CSS properties that cascade.

   While the reference documentation always has the correct answers, sometimes it's not organized in the most useful way. Unfortunately, finding a list of CSS properties that cascade is difficult.

2. Identify the style of font (serif, sans serif, monospace, etc.) used for the majority of the text for the Ithaca Zoo page.

3. Now identify the style of font used for the majority of the text for the GitHub documentation page.

4. Change the font-family of the <body> element to match the GitHub font family.

   tip

   Use the font family from your <h2> CSS rule.

5. Observe that all text elements (i.e. <p>, <h3>, <dl>, etc.) all now use the same font!

6. Clean up your CSS to remove redundant CSS rules, like setting the font for <h2> elements.

Part V: More CSS Practice

Credit: 5 points; Completion credit for similar styling the <blockquote> elements to match the GitHub design.

There are several blockquote elements on the Ithaca Zoo page. Let's style these elements using some inspiration from the GitHub documentation page.

1. Identify the CSS properties you might use to create a similar style to this GitHub design.

   Observe the color, the border, and the rounded corners:

   

2. Style the <blockquote> elements to use a similar style.

   • Only change shape, color, and typography CSS properties. Do not change spacing and layout.
   • Only edit the site.css file; You may not edit the HTML file.

   Your styling need not match exactly for credit; try to get close, but don't worry if you can't get it perfect. Perfection isn't the point of this exercise. The point is to practice identifying CSS properties that you can use to style elements while using other websites as inspiration.

   For example, here's how your quotes might look after you've styled them. Observed that the spacing isn't quite right. We haven't learned spacing, so this is okay for now:

   

Part VI: Overriding Default Styling Practice

Credit: 5 points; Completion credit for overriding the default styling of the <em> elements to match the GitHub design.

The browser styles all elements by default. But sometimes that styling doesn't work with the design you want for your website. If the default styling doesn't work for your design, you may use CSS to override the default styling.

1. Identify the shape, color, and typography CSS properties of the "read" and "write" text below:

   

2. By default <em> text is italicized. Override the styling for <em> elements to match the design above.

   • Only change shape, color, and typography CSS properties. Do not change spacing and layout.
   • Only edit the site.css file; You may not edit the HTML file.
   • Hint: You will need to use the font-style property to remove the italic styling. Remember to leverage the reference documentation.
   info

   Your styling need not match exactly for credit; try to get close, but don't worry if you can't get it perfect. Perfection isn't the point of this exercise. The point is to practice identifying CSS properties that you can use to style elements while using other websites as inspiration.

   For example, here's how "Red" and "Fluffy" might look after you've styled them:

   

Part VII: Descendant Combinator Selector Practice

Credit: 5 points; Completion credit for styling all <strong> elements inside a <p> element using the descendant combinator selector.

Up to this point you've only been using the element CSS selector. The element selector changes the styling of all elements of the same type on a page. But what if you only want to change the styling of an element if it is inside another element? This is where we use the descendant Combinator Selector.

1. Working with your peer, style all <strong> elements inside a <p> element using the descendant combinator selector.

   Use the "notes" in the GitHub design for inspiration:

   

   When you're finished, your <strong> elements inside a <p> element should look similar to this:

   

   • Only change shape, color, and typography CSS properties. Do not change spacing and layout.
   • Only edit the site.css file; You may not edit the HTML file.

   Your styling need not match exactly for credit; try to get close, but don't worry if you can't get it perfect.

2. Unfortunately, when styling all <strong> elements inside a <p> element, we also changed the "There will be a line" <strong> element.

   This looks a bit silly:

   

3. Write a new CSS rule using the descendant combinator selector to override the styling for the previous rule and simply return the "There will be a line" text to simply be bold.

   Hint: The "there will be a line" text is a <strong> element inside a <p> element. That <p> element is inside a <section> element. (The advisory above is not inside a <section> element.)

   • Only change shape, color, and typography CSS properties. Do not change spacing and layout.
   • Only edit the site.css file; You may not edit the HTML file.

   Your styling need not match exactly for credit; try to get close, but don't worry if you can't get it perfect:

   

4. The idea of this exercise was not to copy the design of GitHub. Rather it was to use the existing design as an example and to draw inspiration from it to help use practice identifying CSS properties.

   When your finished, your design might look something like this. It's not exactly the same, but you can see how we drew inspiration from the original design:

   

Part VIII: CSS Validation

Credit: 5 points; Completion credit for valid CSS.

Valid CSS helps ensure that your website is usable and accessible for as many users as possible.

Using the CSS validator built in to Codespaces, which you can run by clicking the "W3C Validation" button in the bottom-left corner of the screen.

Errors (red), are important, and you are required to fix them; all CSS files should always have 0 validation errors.

Part IX: HTML & CSS Comments

Credit: 5 points; Completion credit for valid HTML and CSS comments.

Comments do not display on the webpage, but are useful for keeping track of things as a developer, such as the source you used for content, why you put a piece of content in a certain place, or other notes that may be useful. We will start with HTML comments.

1. Visit the Mozilla reference page. What string denotes the start and end of a comment?

2. Add another blockquote to the Events section and write a review of the Ithaca Zoo.

3. In a comment, note the source of this quote (i.e. you).

   Noting your sources is a something that you will see throughout the semester and is a good habit to develop.

4. CSS uses a different syntax for creating comments. Add a comment in site.css for the h2 class. Change the color, but save the old hex value in the comment in case you need it later.

Comments are useful for added context for other developers. In this class, that's the course assistants and graders. However, you'll do the same in industry.

Part X: Citation Policy Practice

Credit: 5 points; Completion credit for correctly citing all content.

If you include other people's work in your website (i.e. work that you didn't create), you should cite that work. This includes both text and images.

While this may seem like busy work, it's not. Not citing other people's work is essentially stealing someone else's work and passing it off as your own. That's not right. (Please also note that this can also be a violation of the code of academic integrity.)

The course requires that you cite all content on your websites regardless of whether you created the content or used someone else's content. This includes both text and images. (You must cite your own work so that we know you didn't forget to cite work that you are using from someone else.)

1. Review the citation policy in the syllabus.

2. The data list of featured animals contains content from Wikipedia. (i.e. Content you did not create.)

   Cite https://www.wikipedia.org/ so that the citation is visible on the web page near the borrowed content.

3. All the remaining sections are original content. For this exercise, assume that you created this content yourself.

   Cite yourself as the source for each section of the webpage. Original content should be cited as an HTML comment in the code near the content. The citation need not be visible on in the browser.

   Note: You need not cite every sentence, every paragraph, etc. when you have a "block" content. That's not reasonable. Simply provide one citation at the beginning or end of each "block" of content. We are reasonable people and understand that a small grouping of content is likely to be from the same source. The key word here being "small". You may not cite your entire webpage once. That's not reasonable either.

Submission

Stage, commit and push all changed files in your Git repository to the GitHub server. (All commits should reside on the main branch.)

Complete the submission form for hw2 to submit the assignment.

Note: The submission form asks you to check your submission. Checking your work will ensure you receive credit for this assignment. We ask you to check your submission because this is where some students lose points. It's easy to forget something and checking your work prevents the heartache of getting a 0 because your submission wasn't submitted in a way that we can access and grade it.

Contributors

Copyright © 2017 - 2026:

• Axel Bax
• Kyle Harms