CS 1100: Web Development: Client-Side Coding

Session 13: Winding Down on CSS

Today

Today we practice for the first midterm exam. We also learn one new tool, one new technique, and two new CSS properties. At the end of the session, you'll give the instructor some feedback.

Download this starter code to use for the exercises and for the rest of the session.

A Layout Exercise

Over the last two weeks we've learned about several ways to use CSS to lay out a web page, including floats and flexbox. Can we use them to layout content in a way that we desire? When do we need the more complex techniques in order to achieve our goals?

Your Task

Your task: Re-create the layout for the top of the course homepage using two techniques available in CSS.

To get you started, I provide a starter kit containing two identical folders. Each folder contains:

Float

Go to the exercise-code/v1 folder. Open the CSS file in VS Code. Search for 'content header' to find the code to edit.

Use the float: property to make the image float left and the aside float right.

Look at the rendered page. Does this achieve our goal? If not, how might we fix it?

Flex

Go to the exercise-code/v2 folder. Open the CSS file in VS Code. Search for 'content header' to find the code to edit.

Lay out article as a flex container.
Use the flex: property to allow the div in the middle to grow and shrink, and to ensure that the image and aside do not.

Look at the rendered page. Does this achieve our goal? If not, how might we fix it?

Solutions

float [ HTML | CSS ]

To make this solution work, we have to modify the HTML code on our page. The two floating items must appear in the file before the div so that its text can flow around them. Even so, the text flows all around the floated elements, including below them (why?), so we have to use the margin property to "squeeze" the div into the center of the page.

CSS gives us better tools for laying out a page than this.

flex [ HTML | CSS ]

This solution works out of the box, almost. We still need to add some margin to the div, to approach the look of the course page.

The only real issue is how the browser stretches the image to fill the space in the component. We can fix this by using the property align-self:.

A Practice Exam Problem

Given the following HTML code for an unordered list, write two CSS rules to style alternating lines with a light blue background color and a reddish background color. Specify the reddish color using the rgb method. 

<ul>
  <li class="odd">one</li>
  <li class="even">two</li>
  <li class="odd">three</li>
  <li class="even">four</li>
  <li class="odd">five</li>
  <li class="even">six</li>
</ul>

Each rule needs exactly one property/value pair.

Learning from the Practice Problem

Styling the list can be done with one rule for the odd class and one for the even class. 

.odd  { background-color: lightblue; }
.even { background-color: rgb(220,100,100); }

We don't need two classes here, though. We can take advantage of CSS's specificity rules. If two rules apply to the same HTML element, the browser uses the rule with the more specific selector rather than the one with the more general selector. That is, it chooses the rule that most closely targets the element.

In this case, we can style all list items as lightblue. Then, we style the elements with the even class as reddish. The class selector is more specific than the HTML element selector, so the browser applies the class rule instead of the more general rule. 

li  { background-color: lightblue; }
.even { background-color: rgb(220,100,100); }

Second, we don't even need one class here! Recall that CSS has an extensive set of selectors, some of which give us laser focus onto specific HTML elements. The :nth-child pseudo-class enables us to target specific elements of a particular list in several different ways, including just the even elements: li:nth-child(even). 

li  { background-color: lightblue; }
li:nth-child(even) { background-color: rgb(220,100,100); }

There is so much to learn. Don't be discouraged! Be excited that CSS gives us so much power. Learn new things when you have a chance.

Here is a finished version with no classes and the CSS rules targeting specific rows.

A Tool for Evaluating Color Contrast

Is this color combination attractive? Perhaps not. It's just a practice problem, so maybe we can live with it.

I'm also concerned that black text on my red background doesn't offer enough contrast. How does this color scheme affect the readability of my page?

Working with colors lends it self nicely to online tools. Earlier in the course, we saw the MDN Color Picker tool when we first started specifying colors by their RGB and hex values. There are also many useful tools on the web that let you convert colors from rgb format to hex format and vice versa.

The web accessibility research group WebAIM provides a handy Contrast Checker for examining the contrast between two colors in three settings: small text, large text, and UI components. It takes numbers in hexadecimal form, or from a color-picking widget.

How well do my colors perform in terms of contrast? First, let's use the color converter to get the hex values for the colors:

According to this tool, black-on-rgb(220,100,100) has a contrast of 6.05:1, which enables it pass five of six accessibility tests. The contrast between that shade of red and CSS's builtin light blue is much smaller, only 2.27:1. Using these colors for alternating rows may not be a good choice after all.

How about UNI's official colors, Panther Purple (hex #500778) and Goldenrod (hex #ffb500)? What we think of as "Purple and Old Gold" scores very high, 7.22:1, making them excellent colors for a website.

Use the contrast checker, or a similar tool, whenever you are creating the color scheme for a webpage, especially when writing text of one color on a field of a different color.

A Technique for Collapsible Tree Views of a List

Finally, let's learn a fun little bit of HTML and CSS for working with long nested lists.

Consider this web page. It contains a partial list of the ten bundles that are available in UNI's Interactive Digital Studies program. The full list scrolls off the page. This would dominate the screen and diminish the user's experience.

In the old days, we would have shown only "IDS bundles" as, say, a button, and then used JavaScript to expand it into a longer list if the user clicked the button. These days we can turn this list into a tree view, also known as a collapsible list, using only HTML and CSS! Even better, the HTML tags enable screen readers and other accessibility software to see the tree view as expandable and allow standard keyboard interaction.

To do this, we use a new pair of HTML elements: details and summary. They create a disclosure widget. Here's a simple example:

I have keys but no doors. I have space but no room. You can enter but can't leave. What am I? A keyboard.

First, we add summary tags to all the items we would like to collapse: the list items that contain lists.

Then we wrap each of those items and its sublist in a details element.

Wrap IDS bundles first and observe the effect. Then wrap the nested sublists.

Not too bad... Having both list bullets and detail arrows is unnecessary and perhaps confusing for the user. We can turn off the list bullets using the list-style-type: property.

Nice! Now the only problem is that the innermost lists do not have bullets. If they are going to be links to, say, the UNI catalog, that is probably okay. If not, how might we ensure that the innermost lists do have bullets? Perhaps we could define a CSS class to apply to the innermost li elements, which we could then style with the desired list-style-type?

Here is the final version of our page, with a before-and-after view of the list.

If you would like to read more about how to style tree views in a more lovely way, check out this post by Kate Morley. It uses more advanced CSS than we have learned at this point, including variables (custom properties), so read with care. However, the result is quite nice.

A Midterm Survey

You may recall that we opened the course with a survey, to help me get a sense of who you are and what your goals for the course are.

Today, help me take stock of the first half of the course and make sure I'm doing what helps you most in the second half of the course.

The survey:

If you have extra time and any thoughts on JavaScript, flip the page over and list one or two things would you like to learn most about using JavaScript on web pages.

If you are a person who prefers not to attend class in person, please email me your answers to the survey.

Closing

Homework 6 is available. It is a small assignment with no detailed requirements. Use it to practice for the exam.

The first midterm exam is next session. This week's reading is a study guide. We've been HTML and CSS for five weeks now, so perhaps only the section about the architecture of the web will require detailed review. Let me know if you have any questions as you study.

Also next session, we will look ahead to the next unit of the course, on using the JavaScript programming language to customize our web pages and to do some light text processing.