Subtitles of the Movie

Before I get deeper into how to set up and apply Cascading Style Sheets in Dreamweaver let me provide some more background information about this very important web design technology. The term Cascading refers to the way that a browser ultimately displays styles for a specific element on a web page. Three different sources are actually responsible for the styles you see on a web page like this one here. The style sheet created by the author of the page that would be me. The users customize style selections if any here in the browser. For example here in Firefox you can choose view, text size and then you can increase or decrease the text size. So notice that this is having an affect on the styling and the way that this page is presented and thirdly the presentation will depend of the default styles of the browser itself. For example Internet Explorer has some default styles as does Firefox. The final appearance of a web page then is the result of the rules of all three of these sources coming together or cascading to render the web page in an optimal way. Let me take one of the most HTML Tags, the Paragraph Tag or P Tag to illustrate this concept. By default browsers come with style sheets that define the font and font size per paragraph text. That is text that falls between these P Tags in the HTML code that would be this text right in here. Let me go ahead and close Firefox and let's open up this page in Dreamweaver and notice that I have here a paragraph that defining this text block here. In Internet Explorer for example all Body text file including Paragraph text file displays in Times New Roman and medium font by default. However as a web designer you can create a style sheet that overrides the browsers default style for paragraph font and font size. For example you can create the style that I did here in this page for my paragraph, I have actually two of them, if we go into Split View here and move this down. Actually I think I have a better example of that here in this document. I have two paragraphs here, one without any styling down here in the Tag Selector and another one with the Body Style applied to it here in the paragraph tag. That's not resolving and not displaying the default way that Internet Explorer will do it because I have up here a style attached to my P Tag right there. So it's going to display in Arial, Helvetica or Sans Serif at a small font and not the default medium font. So when a user loads this page the paragraph font and font size settings I have here will override the default paragraphs settings of the browser. My users can also set browser Display Options for their use as I demonstrated previously and in Firefox for example the user can do what I did and select View, text file Size Increase or Decrease to expand or contract the page font to a more legible size if they think the font is too small or too big. The user selection overrides both the default browser styles for paragraph font size and the paragraph styles created by the author of the web page. Notice here I have another paragraph, this one, it has the body style attached to it and up here in the Head Section of my document, notice that I have a style here, that's a style class in this case with a different font family chosen and a different font style, so notice that this text here is italic, using the Courier. Notice it says Courier, the Courier type face, this one here which is just using the default paragraph style, I've defined that one as Arial, Helvetica, font size small, no italic. This also demonstrates another concept that I want to cover here and that is inheritance, inheritance is a very important concept of the cascade. Properties for most elements on a web page are inherited. For example Paragraph Tags inherit certain properties from Body Tags, Bullet List Tags inherit certain properties from Paragraph Tags and so on. Thus if you create a rule like I've done here for my Body Style right there, Courier and Italic all the paragraph text that styled with that class on your web page as well as text that inherits the properties from the Paragraph Tag will be Courier and Italic because the Paragraph Tag inherits these properties from the Body Tag. So notice that I have a paragraph right here, there's my paragraph, it's been styled with this class, Body Class and because I've defined up here that, that class will use Courier and be italicized. Notice that, that paragraph is Courier and it is Italicized because it inherits those properties, the Paragraph Tag inherits those properties from the Body Style. You can also however create styles that override the standard formula for inheritance. But this is getting a little bit deeper into the subject then I want to get. I've introduced a number of concepts and terminologies in this movie, such as Styles, Classes, Rules and Inheritance among others. I'll be covering each of these in much more detail as we progress through the tutorial but let me back up now and give you more details on some of the Core Concepts of CSS including the next movie. How to Create your First Styles in Dreamweaver followed up by moving about effective CSS Syntax, Setting up New Rules in Dreamweaver, the CSS Styles Panel, Styles Preferences, Creating your First Inline Style Sheets, Creating your first External Style Sheets and much, much more.