Subtitles of the Movie

So what exactly is CSS? CSS stands for Cascading Style Sheets, they're a very powerful tool for a website designers and developers because they give them the chance to be completely consistent with the look and feel of the pages that you develop and design, while giving you also at the same time more control over the layout and design then straight HTML ever did. For example, here's a prototype of my website, completely styled using CSS, notice that all of these headings here are consistent. The body text is consistent; if I go to another page on the site, because it's using these same style definitions, notice the heading is styled identically. The text here, the body text is the same in each of the articles here in this list will also look the same since their styled with the same style sheet. Perhaps the best advantage of CSS is for the first time you're separating out the content of the site with the styling of the site. So for example I can completely swap out using this cool little interface, the style sheet that I'm using so that it gives me a completely different look including different pictures here. But notice that the content, the menus and the text stays the same. In this case my titles are the same size but their now brown and I have 12 actually, different style definitions that are or can be applied to my content to give me a completely different look and feel of the site. So invented in 1997 Cascading Style Sheets are widely used among browsers and web developers are learning to be much more comfortable with them. In fact many tags that used to be the only way to define the look and feel of a page have been replaced by CSS such as the font tag. So in any of these examples here am I using the font tag. You can see how powerful styles can be in determining the formatting of your sites. Now there are three parts to CSS, I'll be going over each in detail in this tutorial. The Styles, their placement and the fact that they cascade. Now a CSS page layout uses the Cascading Style Sheets rather then traditional HTML tables or frames to organize the content on a webpage. The basic building block of the CSS Layout is the DIV Tag an HTML Tag that in most cases acts as a container for text, images and other page elements. So the previous design that I showed you was composed entirely of DIV Tags. Here's another one, this one's a little bit easier to see how these DIV Tags act as containers. When you create a CSS Layout you place DIV Tags on the page and then add content to them, position them in various places using the style definitions. In Dreamweaver you'll use the AP DIV Tag tool to create DIVs in the Visual Editor, to add content to them. Now notice that I have DIV Tags here but their not styled precisely the styles here are not attached to any existing style document. So let me show you quickly what happens if I attach an existing Style Sheet, 3callleftnav.css. Notice that as soon as I do that the DIV Tags now come to life, they've been sized and positioned and now I'm ready to add content to them by simply clicking here inside of them in Dreamweaver and now adding the content as I would a regular table. I can add text, insert images, Flash elements, movies, videos and anything else I would add to a standard HTML table. Now unlike table cells which are restricted to existing somewhere within the rows and columns of a table, DIV Tags can appear anywhere on a web page and you position these DIV Tags absolutely by specifying X and Y coordinates or relatively by specifying their distance from other page elements. To demonstrate this I can also just simply move these DIV Elements. What's happening here is that the positioning is being automatically updated in my style sheets that controls the placement as well as the width and size of these AP DIV Elements. Now creating CSS Layouts from scratch can be quite difficult at first because there is just so many ways to do it. You can create simple 2 columns, CSS Layouts by setting floats, margins, padding and other CSS Properties in a nearly infinite number of combinations. Additionally the problem across browser rendering causes certain CSS Layouts to display poorly on some browsers or to display improperly in others. That's why mostly you'll be using templates which I'll also cover towards the end of this tutorial. This is an example of a template, this is being in my case, Purchase template, that has everything laid out for me and I can always go in and modify the CSS to customize the template layouts to get just the appearance that I want. We don't need to purchase templates, CSS Templates, you can find many free ones on the web, Dreamweaver also makes it easy for you to build pages with CSS Layouts by providing over 30 pre-designed layouts that work across different browsers. For example here's a one column elastic centered, two column elastic left sidebar, two column hybrid left sidebar and on and on and on. So I'll be reviewing what these layouts mean, Centered, Elastic, Left Sidebar as well as reviewing many of the preloaded CSS Templates that come with Dreamweaver during the various movies of this tutorial. Now one limitation of the Dreamweaver AP elements however is that since their absolutely positioned, their positions never adjust on the page according to the size of the browser window. So I'll be showing you additional types of techniques and templates that will allow you to get this resizing of the DIV Elements when the browser window changes. You can also insert DIV Tags manually and apply CSS positioning Styles to them to create your own page layout. So in this tutorial I'll be teaching you how to create layouts using both methods. Let me now move onto the next movie and review in more detail exactly why you would want to use CSS to layout your pages and websites instead of using traditional HTML tables.