Watching:

What is CSS?


show more What is CSS? provides you with in-depth training on Web. Taught by Garrick Chow as part of the Dreamweaver CS3 Essential Training show less
please wait ...

What is CSS?

Now let's get a quick overview of another common term and increasingly important topic of web design: CSS or Cascading Style Sheets. CSS is used for many things, but its primary function is essentially to provide an easy way to control the appearance of a page, or more commonly, multiple pages in your website. Instead of formatting the appearance of text, links, tables, images, and so on, on each individual page, Cascading Style Sheets let you create a collection of appearances or styles for each of these types or elements that can than be quickly applied to as many pages in your site as you like.

If you later change you mind about he appearance of these elements, all you have to do is go in and change your style sheet, and your changes will instantly ripple, or cascade across all the pages using that sheet. For example, say you create a style sheet that says all regular text in your site should be in the Ariel font at a size of 12 pixels and in blue. Once that style sheet has been linked to your pages, all of the regular text on those pages will conform to that appearance. If you change the style sheet to say that all text should be red instead of blue, and that the font should be Verdana, those pages will instantly conform to those changes as soon as their opened. CSS is an extremely powerful tool that can be used to control not just the appearance of text and images, but can also be used to layout your entire page.

In fact, it's primary purpose has always been to separate the presentation of the page from its structure. The word presentation, in terms of web design, has to do with the way the page looks. And the word structure has to do with the meaning of the page's content. For example, in XHTML an h1 tag means that the text within it is a header. That's its structure. It's meant to stand out as a heading. Whether that heading is red, blue, bold, italicized, or underlined, has to do with it's presentation. So, it's important to separate presentation and structure for many reasons, but probably the most important reason is to make it much easier for you to update the look and feel of your pages later on. For example: You might have a page with a lot of text and images, and the content is all fine but you just want to change it's look.

With CSS properly implemented, it's a snap to go in and change your styles to give your page a whole new look without changing its structure or content. A great example of CSS in action can be found at csszengarden.com. This is a website dedicated to promoting the use of CSS for page design and layout. What they ask people to do is to use the content of the main page you see here, and they provide the HTML for this page. You see "Download the sample html file" right here. And, they ask visitors of this page to write their own CSS styles to reformat it. You can see the results by clicking the links over here on the right-hand side.

Now, this is the exact same page, only laid out with CSS. The content is exactly the same, but you can see, this is a pretty far cry from the page we were just looking at. He's set up some more links here. There's another version of the exact same page. Here's another one. Here's another one. Again, this is all the same content, just with different CSS styles applied to them. So, you don't have to click many times to see that there are endless possibilities with CSS.

So, what does this mean in terms of {italic}Dreamweaver?{plain} Well, {italic}Dreamweaver{plain} has always had great CSS support in the past, and in this latest version of CS3 it's only gotten better. CSS is also {italic}Dreamweaver's{plain} default method of setting up page properties like background colors or images, and it also uses CSS for formatting text. So, even if you just type a few lines and make the text bold or italicized, {italic}Dreamweaver{plain} automatically creates a style sheet for you. We'll be talking a lot more about this in the chapters on document basics and typography, and in the CSS chapter. For now, I just need you to understand the basics of what CSS is, and that it's something you're going to have to learn about if you're serious about getting into web design.

What is CSS?
Video duration: 3m 48s 10h 21m Beginner

Viewers:

What is CSS? provides you with in-depth training on Web. Taught by Garrick Chow as part of the Dreamweaver CS3 Essential Training

Subject:
Web
Software:
Dreamweaver
Author:
please wait ...