Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

CSS Rule Locations

  • View CSS Style Rule Locations.ppt located in the extras/ppt folder
  • When you create css rules, the browser has to be able to find them in order to display your page correctly
  • You need to choose a location to store your rules so the browser can find them & apply them as the page loads
  • There are 3 locations where you can place your rules for CSS
    • external, internal & embedded

CSS Rule Locations

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Three Locations for Placing Style Rules 0:31
    • Inline Rule
    • Internal or Embedded Rule
    • External Rule
  • Inline Style Rule 2:08
  • Internal or Embedded Style Rule 3:35
    • Examples of Internal/Embedded Style Rule
  • External Style Rule 5:59
    • Example of Linking a Style Sheet
  • Summary 8:40

Transcription: CSS Rule Locations

We are going to take a look at where we can place our CSS style information.0000

We need to make sure that the browser can access it, so we want to determine where exactly we are going to be placing it.0006

Let's take a look at that, because when you go to create a style rule (whether you are typing it out yourself or you are having Dreamweaver do it), even Dreamweaver needs to know where we put this rule.0014

So, let's take a look at the options: there are three locations for placing your style rules, and the reason for that is: the browser must be able to locate your rules.0028

What happens is: the browser is reading your page, and if it goes to display the content and can't find your rules, it is as if your rules don't even exist; so the browser must be able to locate them.0041

Now, what are the three locations?--well, the first one is an in-line rule; and that is located in line with the tag; so it is within the tag itself--literally within the angle brackets for the tag.0055

The problem is: we have so many tags on a page, that would get really complicated really quickly if we needed to change things.0074

The next option places it within the head tag of our document, but only a single page has access to that one; that is known as an internal or embedded rule.0082

And that type of rule, a single page has access to.0096

The last type of rule is more common--it is probably the most common rule location--and that is on a separate file with a .css extension.0101

You put all of your rules on a separate file, and it is not a .htm or .html; it is a .css extension.0113

Let's take a look at each one of these a little bit further.0122

An in-line style rule--they are placed within a tag, so we know it's placed within the angle brackets of a tag; and the style attribute is added.0129

Here is our tag; here is the attribute for the tag; and notice, that is the word style, and it has an equal sign.0142

We don't really care what is after the equal sign, but if you ever see a tag with a style equals, that is an in-line style.0151

The problem is: only this p tag right here has access to those particular styles; so we would have to put it inside every p tag on the page if we wanted to use those particular styles.0160

You can see, there is a font family; there is Verdana font; the size is 14 pixels, and we have added a color here, as well.0175

It is difficult to maintain using this type of method, and it is very easy to add a style here and a style there, and all of a sudden they are a little bit different; so, in-line styles are not the preferred method unless you are working in something such as an email or e-news file.0184

Then, you may have to use in-line style rules for your e-news piece, because not all emails can understand that.0205

Let's take a look at an internal or embedded style rule.0215

These are placed within a style tag block; and the style tag block goes in the head of the document, so it goes between our head tags.0221

Remember, an HTML tag has an angle bracket on each side; there is an opening one; there is also a closing one; and this closing head tag has a forward slash, so your style would go inside of that.0232

You can put as many rules as you want within this style tag, and only a single page has access to it.0248

Because we are putting it right inside this area, only that particular page with that head content has access to it.0257

When a rule changes for a page, and you have 100 pages in your website, and you have it set up as internal or embedded, you have to change every page; and that can become a bit of a maintenance issue.0266

So, internal or embedded--these are also good for e-news, depending upon the e-news system.0282

If you have a marketing page that is going to go on your website, and you know only that single page is going to use those rules, that is a good example of using an internal or embedded: why clog up the file for all the rest of our site if only this page needs those rules?0290

Let's take a look at some examples of this.0310

Here is our style tag: notice, here is our opening tag; here is our closing tag; here is our selector; this is the property; here is a value; here is another property and value; and color is another property and value.0315

So, we actually have three properties on this page: here is a property; here is a value; here is a property, value; property, value; so there are three properties on the page.0333

And you can see, you can put multiple things within a single rule, but it all goes inside the style tag.0345

That is an example of an internal or embedded style rule.0354

Now, what about the last option?--let's take a look at an external style rule.0359

These are placed on a separate file; so, you are going to create a brand-new file; this separate file cannot have HTML on it--no HTML tags at all.0365

You link to the CSS file from the HTML page; what that does is tell the browser (as the page is loading, as soon as it gets to that information, it tells the browser), "Go out and find that CSS file and bring it in; use those styles for our page."0383

You can use more than one CSS file for your page; there are some caveats to that, and we are going to take a look at that in this course.0402

When might you want to do that, and how can you use them to your advantage?0414

Every page on the site has access to the same styles, so maintenance is much easier; we have a single file--we just maintain that, and all the other pages in our site will be consistent.0419

Here is an example: notice, it has a link tag; now, I said you link to the CSS file from the HTML page; so, this is literally the link tag that you are using.0433

And right here, it tells the browser where that file is located--the .css file.0449

The rest of it is just letting the browser know it is going to be receiving some style rules.0457

So, you can use the link tag to link your style sheet to the HTML file, and then the browser knows to use that particular file in order to display the content on the page.0463

This is the most common method for working with your external styles.0479

Your CSS styles are put externally...I could even use them across as many pages as I wanted, as long as I create that link between the HTML page and the CSS file.0485

The external style rule is the big method (big, big, big method!) we want to use for most of our web pages.0499

There are some good instances where you may want to use otherwise; but this is the method we are going to be using across our website for Wanderlust Travel.0509

That is where you can place the rules for your CSS and the various locations (three of them), so your browser can actually find those rules when it goes to display the content for your web page.0520

That is an overview of the three locations to place your CSS style rules.0537