Emily Kauffman

Back to teaching

CIS 275 Lecture 18: CSS Tricks

Goals

  1. New CSS
  2. Work on the project

Welcome

Today was originally supposed to be the day of your exam and so instead, I'm going to cover a few advanced things in CSS that you might find useful for either of the upcoming projects. There's no way to memorize all of this (nor should you try), but you should at least know that they are options. This lets you make more advanced web design designs. We're going to work through a number of the examples in the W3schools tutorials.

For each section, read the associated article and then watch the demo video.

CSS Overflow

  1. Read CSS Overflow
  2. Watch the video.

CSS Combinators

CSS combinators were already covered in the book on the chapter on selectors, but it's good to have a refresher! Remember that you can target your elements in a multiude of ways.

Read https://www.w3schools.com/css/css_combinators.asp

Pseudo-classes

  1. Read https://www.w3schools.com/css/css_pseudo_classes.asp
  2. Watch the video.

CSS Units

I'm including this because someone asked about different CSS units. We are going to cover some of these in the next few weeks with responsive web design, but if you're curious, read these two (short) articles.

  1. Read https://www.w3schools.com/css/css_units.asp
  2. Read https://andy-carter.com/blog/using-scalable-css-units-for-font-sizes

Opacity and Transparency

This article deals with changing the opacity of elements on your page. This one could be helpful for your photo gallery project, if you wanted to add an effect like this on your photos.

Read https://www.w3schools.com/css/css_image_transparency.asp

In Class Exercises

Work on your project. I'll be online to answer questions. Before you come to me though - make sure you've done your due diligence on trying to solve the issue. It's the best way to find good internet resources as well as troubleshooting skills.

Remember, the layout project is due 4/12 at 11:59 PM. Zip it and email it! Also, you still have access to the PAL tutors via email!

Next Class

  • Reading: Duckett, Chapter 18 on Process and Design
  • Extra credit: Email a PAL tutor. Screenshot the communication/email. Forward it to me for a bonus point toward something.