Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So in this chapter, we are going to talk about color and background colors. Setting both the foreground and the background of various elements to have colors in the case of background images. In this first video, we're going to talk color, and we're just going to look very quickly at how to set color, the foreground color on elements. and, as you can see here, what we have is we have a basic document with all the colors taken out of it, the layouts there and everything but the colors have been taken away, except for, there actually are a few, cause you can't take out all the color. Text for example is black and the reason that happens is due to the browser. Here in the preferences for the web browser you can see that text has been configured to default the black, backgrounds have been configured to default white, unvisited links to blue, visited links to purple, so that's, those effectively create CSS rules that the browser applies to this document and that's why text is black by default. Now, you might not think of that as a style, and yet it is, because if the text had no color, you couldn't see it, it would be completely transparent. So what we see here is that there are unvisited links, like about us and brewing and drinking up near the top, those are blue.
The visited links are products, contact us, those are purple. There is a of a little bit of color and that's in the images, and that includes the Javaco across the top of the document. That's an image just like the picture of the tea kettle, or the picture of the tea, over to the side. Those just have the colors that are part of the images, I mean, that makes sense. So, with CSS, we can affect the foreground of elements, we can affect the foreground color. Now, what that really means is we can change the text color. So. as an example, we can say that all of our paragraphs are going to have a color of teal, which, I don't know why, that always makes me to think of a duck, but anyway teal.
We hit Reload on, in Firefox, and there you go, we have teal paragraphs, teal text on a tee site. So that just changes the foreground color, which as I say is equivalent to the text color. Now, we can also say for example, h2 color orange. Now I hit Reload. The h2 element there, turns orange, but notice something interesting.
The border turned orange too. Now, that doesn't always happen. Why that happened here is that if you go and look at the basic style sheet, there is an h2 here. There's a rule for h2s that says the bottom border should be one pixel and solid. It doesn't say anything about the color. You can, with orders, specify the color directly and we'll talk about that in a different chapter. But that wasn't done here, is just border bottom 1px solid.
So the way CSS is specified, what it says is, if there's a border, but there wasn't an explicit border color assigned to it, then the color of the border should be taken from the color that the value of color for the element. So when I said color orange, the web browser said, well, I've got this border here, and it doesn't have an explicit value, I'm going to copy that orange. You can override that. You could say border-color black and having done that, you set color orange to the color black.
There you go, a black border. Now, whether or not you want to do that is the only question, but you certainly can, if you want to have your border color be different than your text color, then you can have it that way or if you want the border color to automatically pick up the color the text is, you can do that too, and there are other ways to specify color, then just sort of these one force words like orange and black and teal. Well, we'll see what those are in the next video.
Get unlimited access to all courses for just $25/month.Become a member
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.