Adobe Dreamweaver CS6 What is CSS?

In this lecture, our instructor, Candyce Mairs, explains what CSS is and what it does. She shows how several webpages use CSS to give them unique looks and demonstrates how to disable CSS styles in order to view the raw HTML look of a website.

What is CSS?

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.

Transcription: What is CSS?

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

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

Educator.com recommends the Adobe Dreamweaver CS6 Digital Classroom to go with our Dreamweaver course. In this book-and-DVD package, expert instructors provide a complete course in basic Dreamweaver that you can access at your own speed. Step-by-step instructions in the book are supported by lesson files and video tutorials on the DVD, presenting the newest version of Dreamweaver in 16 self-paced lessons. You'll learn to use style sheets, dynamic HTML, multimedia, databases, and much more to design, develop, and maintain your website.