Subtitles of the Movie

In our last movie in this section we will see our three options when it comes to using URLs in CSS documents. Now, actually these three values are similar to the three different ways you can write URLs in other web documents; however, there is a small difference in that you have to put URL and then parentheses around the specific URL. So what are these three ways that we can write our URLs? Well, first we have the absolute. Now, the absolute method is going to have us use the CSS property value of URL and then parentheses and then the exact location using the HTTP protocol to designate location, close parentheses semicolon. So what you'll be using your absolute URL method for most commonly will be pointing to external resources that are located on other websites. The next method is the root relative method and as you can see here, you have the URL and then the parentheses around it and it's just the different way to write the URL. So this time you started off with a /and the forward /indicates that you are pointing to the base level or the root of the site. So here it's locating a picture that's inside of the Sandbox Folder and then inside of that there's the Images Folder and inside of that is the actual image. And then the last method is the document relative method and probably this is the most commonly used type of URL reference. So you end up having URL open parentheses and at the end close parentheses semicolon and the URL that is written is /images/coolpicture.png. Now, the /is indicating that we need to move up one directory. So if you can imagine that this property value is written on an external style sheet and that external style sheet is located in the Styles Folder on our website and it's pointing to this image. It's saying go up out of the Styles Folder to whatever folder is above that and then once you're in that folder, look for another folder called Images inside of that folder. Once you find that folder, go into it and you'll see the Cool Picture. That's the one that we want. So what we're seeing here is we're seeing that we are able to point to images that are relative to the document containing this property value. Now, this is a very important thing to consider and to understand because we're talking about where the resource is in relation to this external CSS document and not the HTML document. So if later on, whenever you're using your URLs, just make sure that you consider where this property value URL is located because if it's in an external CSS document, you need to make sure that the URL is relative to where that CSS document is located. However, if it's inside of an embedded style sheet, well, then you're going to use the relative location to where the HTML document is. There's been a couple of times that in the past I've been tripped up by that but it's just something to look out for as you're working with your different URLs. So to summarize all that, in the case of external CSS documents, the location of the file is based on where the CSS file is located and not the HTML document. So you might want to take that down as a note just for future reference. Now, the last thing about our URLs here is that quotations around our locations are not necessary. However, they will be fine in most browsers. But to play it safe, don't worry about adding them in. Now, we will see these URL values come into play in an upcoming movie. However, we will not be using them at this current time because it will require us to get a little bit more into our properties than we need to be at this time. But now that we've taken a look at the most commonly used property values, a brief peak at properties and an in-depth look at selectors, we are ready to leave this section. Now, there's one more section left in this part of our course before we can get into our second part and start working with all of the different properties that are available to us and start working on our Open Sparks website.