Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In this hands-on course, James Williamson demonstrates the concepts that form the foundation of Cascading Style Sheets (CSS), including styling text, adding margins and padding, and controlling how images display. The course also explores the tools needed to work with CSS, the differences between embedded and external styles, how to use selectors to target elements, and what to do when styles conflict.
Welcome to our final lab, working with color. In this lab we are going to return to dissolve.org site and focus on the site's color. Let's take a look at our objectives. I am going to do that by opening up the main.css in the 06_09_css folder and you'll notice that I also have the index in philadelphia page open as well so if you want to check through the source code of those pages to look at the structure, you can do that as well. Now I am also going to preview the finished version of these files in the browser so you can kind of see what I am refereeing to when we go in and talk about our Lab Objectives.
Okay now, the Lab Objectives are once again listed right here at the top of our CSS as comments. The first thing I want you to do is using a tool like Kuler, kuler.adobe.com or one of the Desktop Graphic Design Programs, or your Html Editor, I want you to find the corresponding hexadecimal value to the last three RGB values in the color palette above. Add them to the existing palette. I am just going to scroll up here. You will notice that we are missing the hexadecimal notation for these three values. So what I want you to do is find out what the corresponding hexadecimal notation value is for these three RGB colors, and then type it in here.
If you can use shorthand notation for them, go ahead and do that. But one thing that I haven't done a lot is talk about this color palette. This is actually something I do very, very early on in the design process. I'll go ahead and choose a color theme, if you will for my site. I will then work with the colors, make sure I understand what their notation values are, I put that as a reference in the top of my CSS code, and then I really start planning through my site in terms of how I want to use these colors and what I think these colors are going to be able to communicate to the viewers of the site. So this is a very important part of the design process and we will talk a little bit more about it in the Solutions movie in just a moment.
Okay, the next thing I want you to do, the second one here is to create a default background color for the entire page by defining the background of the html element as Pewter Blue, and again, you are going to use these values from the color palette right up here. I am just going to switch over to my browser. Most of the time your user will never see the background of the HTML pages, because this page is designed to be so wide. But on a higher resolution monitor, they are going to see maybe some of the edges of the pages, or maybe even lot more of that, so I want a nice background color that sort of goes with all the other colors on the page.
So you are going to apply that to the HTML tag and you can find that down in the global styles, or if the rule isn't there you are going to have to create it with in the global styles. Okay next, I want you to find the banner p rule in the banner style section, so by now you should be familiar with how the styles are organized, so you are going to go down to the Banner section and find the paragraph rule inside that banner class, and you are going to use the background property to give it a background color of pewter blue that is also 80% transparent. Now make sure that the transparency only affects the background and not the remainder of the content.
To show you what this is going to look like, I'm going to go out to the finished file here and this is what you are going to be styling. You can see that we have sort of this Pewter Blue color, but it's also semi-transparent, so we can see the image behind it. So I want you to go ahead and write the syntax that's going to allow us to do that on that element. And then finally, your last objective is going to be: define the gallery h1 selector and apply a color white to the foreground color that is 60% transparent and then apply a text shadow to the content that is offset by two pixels, both horizontal and vertical uses no blur whatsoever, so 0 Blur, and it uses the Pewter Blue color at 60% Opacity as well.
What is that going to look like? Let me go over to the Philadelphia page, and this is what that's going to look like. So this is white at 60% and then the text shadow as well is 60%. Notice that the text shadow has no blur on it whatsoever, and hopefully this will sort of illuminate to you that not text shadows are bad. Now I am sure that you are going to be able to complete the majority of the tasks here with very little effort. Now for Transparency, I want you to concentrate on the two methods of defining transparency that we learned. Use the method that is going to best suit our needs.
I also want you to take some time to think about the colors being used within the color palette that I just showed you and how adhering to these colors from a color strategy for this site. One of the first things I always do as I mentioned, when designing a site is I come up with a color palette. It helps inform design decisions for the rest of the planning phase and it is gives me a focus for my design very early in the process. Okay, so have fun with the lab.
There are currently no FAQs about CSS: Core Concepts.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.