Class 6: Additional CSS
Tasks to complete for this class
- Make sure that you read and review the contents provided below, where we explore additional characteristics related to CSS.
- It is recommended that you use Firefox Developer Edition (opens in a new tab) or a Chromium-based browser (Brave, Chrome, Edge) for web development. Each of these has a developer tools menu that will be very helpful.
- Start looking over the design report that is worth 50 points and due soon!
CSS IDs and Selectors
CSS IDs
There may be times in the future where you'll want to apply a style to a particular HTML element, or perhaps to multiple different HTML elements. To do this, we need to introduce the idea of an ID and a class. An ID is an attribute that you can add to any HTML element to help you identify it. Think of it as a unique name that you can assign to any and all HTML elements. Each HTML element that contains an ID must ensure that its ID is in fact unique.
<h1 id="main-heading">Welcome to my page</h1>In this case, the ID main-heading cannot appear as the ID of the body tag,
though the body tag could have its own ID.
Once we specify an ID, we can then style that particular element any way we like in CSS
by using the # before the id name, such as this:
#main-heading {
color: red;
}CSS Classes
Classes is slightly different in that we can specificy multiple HTML elements to have the same value for a class.
Instead of using a # prefix, we would use a . prefix.
From the HTML standpoint, classes would have a similar syntax
<ul>
<li class="pacifican">Dave Brubeck</li>
<li class="pacifican">Debbi Fields</li>
<li>Drake</li>
<li class="pacifican">Me</li>
<li class="pacifican">You</li>
</ul>.pacifican {
color: orange;
background-color: black;
}In this case, everyone here would get the background color of black and the text color orange. Except for Drake, Drake here would be...err...umm...not like us?
See this video (opens in a new tab) to see a recap of how CSS classes and IDs work.
CSS Pseudo Classes
In addition to regular classes, CSS has support for Pseudo Classes as well, which are built in and generally refer to mouse interactions that you would have over HTML elements.
See this short video (opens in a new tab) to see how I used our celebrity helper to recreate an old meme.
Lists in CSS
There are a variety of different lists that you can provide, though to me the styling on lists is not as important as some of the other parts in this course, so I encourage you just to watch the short 4 min video (opens in a new tab).
Background Images and Styling
You've all come across those webpages that have some type of background image. Some of those background images are tiled, while others show up once or even stay fixed as you scroll through the contents of the page.
The video here (opens in a new tab) goes through how we can use CSS and its different properties to get the look that we want.
Caution: Use this sparingly. This is one of those features that I've often seen get overused. And while sometimes we have some overconfidence in that our image will look cool, many of the times there are issues with contrast between the image and text that ends up being placed on top of it, which makes our websites less accessible. If you'd like more guidance on best practices, look at the Nielsen Norman Group's article (opens in a new tab) for guidelines on how use images as backgrounds.
Styling Tables
There are many different ways to try to style tables. This video (opens in a new tab) will go through some of the different properties that allow you to style tables in a way that you see fit.
It also includes me fumbling around a little bit so that you can understand how the table styling is being provided.
Caution: Do not use tables to try to organize your webpage! In later classes we'll talk more about how to best organize your pages so that different elements can appear in different locations. However, we do not want to use tables with CSS to try to style or organize a webpage visually. Here is a separate 3 min video (opens in a new tab) where I explain this warning in more detail.
Additional CSS Features
I have one last embed for today, which is an 11 min video (opens in a new tab) that details how to use animations and other features that were not part of the original CSS specification. (though by now they have been around for some time)
By now, you should realize that we will not cover every single CSS feature. CSS is vast, so much so that I would say that folks at times want to try to actively avoid CSS. However, I think that CSS is mostly just misunderstood. If you remember how CSS handles conflicts and learn a few more things around CSS which we'll discuss next week, CSS can be an effective tool in your arsenal to be able to tweak any type of webpage in the future.
Q: Can you actively avoid it?
A: Possibly?
I tried for the longest time to avoid learning CSS and would instead try to use many of the pre-built solutions to try to do anything with CSS. This would get me 80% of what I wanted, but I realized that if I wanted to finish that last 20%, I typically had to go back and learn some CSS to customize it to my needs.
Because of this, I encourage you all to not try to memorize every CSS detail, but instead to understand how CSS works and to leverage Mozilla's CSS documentation (opens in a new tab) to get a better handle on what is and isn't possible with CSS.