Introduction / Why Use CSS?
Subtitles of the Movie
Let me review a little bit more now about why you'd want to learn and use CSS. The advantages following the three categories, CSS solves a common problem. CSS saves work and multiple styles can be cascaded to one. Let me review the first benefit since that solves a common problem. HTML Tags were originally designed to define the content of a document, the layout of the document was supposed to be taken care of by the browser without using any formatting tags. However as the two major browsers, Netscape and Internet Explorer continue to add new HTML tags and attributes like the font tag and the color attribute to the original HTML specification. It became more and more difficult to create websites where the content of the HTML document was clearly separated from the documents presentation layout. To solve this problem the World Wide Web Consortium or the W3C, the nonprofit standards setting consortium responsible for standardizing HTML created styles in addition to HTML 4.0. All the major browsers now support this style which is referred to as CSS. Second, style sheets can save a lot of work, style sheets define how an HTML element is to be displayed just like the font tag and the color attribute. However styles are normally saved in external dot CSS files. External style sheets enable you to change the appearance and layout of all the pages in your web just by editing the one single CSS document. I had a lot of examples of that In the previous movie, where I changed the entire appearance of my page without changing the content. CSS is a break through in web design because it allows developers to control the style and layout of multiple web pages all at once. As a web developer you can define a style for each HTML element and apply it to as many web pages as you want. To make a global change simply change the style and all the elements in the web page that are attached to that style will be updated automatically. And the third advantage, multiple styles will cascade into one. Style sheets allow style information to be specified in many ways, styles can be specified inside a single HTML element, you would do this inside the Head Element of an HTML page or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document. Cascading style sheets commonly abbreviated as simply CSS is just a collection of formatting rules that control the appearance of the content in a web page. Using CSS styles to format a page separates the content from the presentation. I have a page here that was entirely formatted using Cascading Style Sheets and the rules or the Cascading Styles that were used to format this page are not actually on the page, they're in a separate document. If we go to the folder containing this file, the index file, you'll notice that there is a Cascading Style Sheet Document right here called 3ColumnLeftNav. Notice the type here it says Cascading Style Sheet Document. So the content of the page, the HTML resides in the HTML file and the CSS Rules defining the presentation of the code reside in another file called an External Style Sheet, In fact if we open this up, double click on it, it'll open it up in Dreamweaver and you can see that there are these Style Rules, just a text file. So I've got my definition of how I want the browser to layout my page here and I have the actual HTML in this document here. Separating content from presentation, like I've done here, results in simpler and cleaner HTML code, shorter browser loading times and makes it much easier to maintain the appearance of your site. In addition, CSS gives you greater flexibility and control over the exact appearance of your pages. With CSS you can control many text properties including the specific fonts and font sizes, bold, italics, underlining and text shadows as well as text color and background color, link color, link underlining and just much, much more. By using CSS to control your fonts you can also ensure a more consistent treatment of your page layout and appearance in multiple browsers. This becomes a critical advantage once you start creating sites that are larger then about a dozen pages or so.
Tutorial Information
| Course: | Adobe Dreamweaver: Creating CSS Layouts |
| Author: | James Gonzalez |
| SKU: | 33914 |
| ISBN: | 1-934743-99-2 |
| Release Date: | 2008-09-21 |
| Duration: | 8 hrs / 92 lessons |
| Work Files: |
Yes |
| Captions: | Available on CD and Online University |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (20,800 free)
- Video Available as Flash or QuickTime
- Over 782 Courses
- $30 for One Month Access
- Multi-User Discounts Available
United States 