Enter your Sign on user name and password.

Forgot password?
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

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!

What is CSS?

  • CSS stands for Cascading Style Sheets
  • CSS is a listing of stored rules for the browser
  • The rules tell the browser how to format & position the content on the page
  • Visit a couple of websites and turn off the CSS using the Web Developer toolbar in Firefoxso you can see what they would look like without it
    • Turn on the Web Developer toolbar installed in an earlier lesson
    • Click CSS->DisableStyles->Disable All Styles
  • Go to educator.com & turn off the styles
  • Go to adobe.com & turn off the styles
  • Go to csszengarden.com & show the various designs for the page
  • The word cascading is referencing the inheritance properties within CSS that can affect your styles
  • As you can see, CSS is very powerful but it does have a bit of a learning curve

What is CSS?

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
  • Cascading Style Sheets 0:05
  • Example CSS Layouts 0:59
    • Turning CSS Off Examples

Transcription: What is CSS?

Welcome back to Educator.com.0000

What I want to talk about now is CSS, which stands for Cascading Style Sheets; and I want to show you specifically the importance of using CSS within your website.0003

It is the standard for formatting and positioning for all web pages nowadays, and if you are going to use Dreamweaver, it gets very difficult to work in CSS if you don't understand any part of it.0018

What I have open is a pre-defined layout page that was created earlier; and every one of these items in the CSS Styles panel is a rule--and you can see, there are a lot of rules available right here.0033

So, when we are creating and working in our rules, that is what is actually positioning and formatting our page content.0049

I want to take you out into the browser and show you a couple of things.0059

Let's move out to...I'll use Firefox in this example, because Firefox has a feature that allows me to show this to you a little bit easier; and I am at csszengarden.0065

Now, CSS stands for Cascading Style Sheets, and there is a reason why the word "cascading" is added in front of style sheets; but when we are looking at what CSS gives, how do we figure that out?0077

Well, let's do a perfect example: this is a website that was created to create designs using the exact same HTML content; and people could come in and submit to this site and add their own CSS to it.0092

In other words, everybody can take the same content and make it look very different.0110

So take a look: this is the main page, but I could make that content look like this; and notice, when it looks like this, the lower part of the page is fixed--it doesn't change; that is a very interesting look.0115

Or, I could make it look like this--completely different layouts of these pages, based on the CSS style rules; and CSS is even pulling in the images and placing them on the page.0132

Now, there is another interesting one that is on this first page, and that is this one: it is similar to that other one we looked at, but this is a movie theater--and notice how only the content that looks like it is inside our stage, or the theater area, is scrolling.0147

There are some interesting effects you can create using CSS.0166

The idea is: the exact same page content is being used by all of these; now, it's a little bit difficult on this one to get to other content--but what I want to show you is: this is the HTML without CSS; this is the HTML with CSS.0172

Or, it can look any one of these different ways; and this is an interesting website to take a look at.0191

Now, this is a single-page website, so some of these designs are done a little bit differently than you would for an entire website; but let's go out to a couple of other websites and turn off the CSS and see what happens.0199

I am going to open up the Educator.com website; and within Firefox, I have this Web Developer toolbar extension I added; I can click this button, and I can go over to the CSS area and simply disable all the CSS on the page.0215

And watch what happens: we are back to basic HTML days--you can see, the entire page layout changes: that is how much of an impact CSS has on web pages nowadays.0235

If you are going to use this toolbar, if you turn something off, make sure you turn it back on; so, I will turn on the CSS; it instantly converts to a very nice web page.0250

If I go over to the Adobe website, I can do the same thing; so, you can explore websites and take a look at what they look like without CSS, and you will see: on every website, they are substantially different.0262

Here is our image for the Adobe website (at least as of today); but look at the rest of the page--pure HTML; it's lists, it's hyperlinks, and it's text--that is it.0277

That was actually what HTML was designed to do--display this way; and the Web took off--all of a sudden we had to do fancy things, and CSS came into play to assist us.0293

I put that page back together by turning on the CSS Interpreter; and we instantly have a much nicer-looking page.0307

That is the power of CSS on the Web; every web page you are looking at is using CSS at this point; so, if you are going to start working with web pages, you need to do the same.0316

And I am going to assist you in understanding CSS a little bit--even though we are using Dreamweaver, you still do need to have a basic understanding of the concept in order to know how to create your pages.0329

That is the power of CSS and a few examples of turning CSS on and off in your browser.0344

And you can see the huge difference it makes in a web page.0353

That is taking a look at CSS and its power within a browser.0357