Summer 2007 week 8: 07/06

Hi class, As you will probably notice, the posting down below only covers a portion of what we did in class. Below, you will not see anything regarding framesets. All I mention down below is the issue of CSS that we covered in the second half of last week's class. This is because this was the beginning of the 2nd part of the term, and during this part of the term we will be focusing on CSS. Therefore, I emphasize its importance by devoting this entire posting to it.     But don't worry, I will spend some time during next week's posting discussing framesets. By then, we'll have already spent two weeks on that topic, so when you see my posting on it, it will be a simple review.     Believe it or not, our next class will be our ninth. That means there will only be five more weeks until the last class. So, catch a brief rest here and there when you can. There will be plenty of work to do over the next several weeks in this class, and I've no doubt in your other classes as well. Don't put things off.     Next week, I will be assigning the final project, so you should start working as soon as I assign it if you want to do well and complete it sufficiently. Carter-

1. TOPICS:
   1. LINK   CSS: What?
   2. LINK   CSS: Where?
   3. LINK   CSS: How?
   4. LINK   CSS: Why?
2. HOMEWORK—
       —QUESTIONS: answer the questions below as your homework.
           Type the questions and answers in an HTML document for the next class.
       —QUIZ over CSS a week from next Wednesday (a week from the next class);
3. QUESTIONS—Here are some questions to help guide you through this weeks' material:
   • What does the abbreviation CSS stand for?
   • What does CSS do?
   • What is a style definition?
   • What are the three parts of a style definition?
   • Which two parts of the style definition fall between the curly brackets?
   • What does a selector do?
   • May there be more than one property defined in a style definition? If so, what is the limit on how many properties may be defined in any given style definition?
   • What attributes must be used with the <style> tags in order to place a CSS Stylesheet into a web page?
   • In which section must the <style> be typed into a web page?
   • What is one advantage to an embedded stylesheet and therefore typing all the styles at the top of the page together in the head section?
   • What are the types of CSS styles?
   • Where are the various types of CSS styles typed?
   • What are the four link states as they are defined by CSS, what do they refer to, and what order must they be typed?
4. INTRODUCE:
   1. Cascading Style Sheets (CSS)—in this week’s class we saw the introduction of the issue Cascading Style Sheets used together with HTML in order to style the text and colors of a page. CSS works often in much the same way that the in-line HTML tags (<b>, <i>, <u>, <font>, etc.) do to bring some styling onto an otherwise dull page of text. For this reason and from this point on, CSS will completely supplant those in-line tags for our uses in this class. In-line tags are not considered proper when following strict XHTML guidelines (and as a result will not pass the test when the code is validated); therefore, our job is to determine how to best configure our pages without them. In other words, from this point on, we will no longer be using many of those inline tags, and heretofore use only CSS; thereby, at last adherely completely to XHTML Strict standards.
   2. What is CSS? To begin with, CSS is another type of code used only to style a page of content (mostly text and images). It is used for two reasons.
      • First, it is vastly more extensive and, thereby, flexible. There are many more aspects of style that you can control with CSS than without it, as you will find out in the weeks to come. You can therefore control the look of your pages much more thoroughly. As a result, you will have many more options of how to style a page, using your own design sense of how to emphasize various elements in the site.
      • Second, as it considers a web-site as a living, changing object rather than 100% complete and fully-formed when it is uploaded onto a server, it is much more efficient to use and, therefore, allows you to update your pages much more quickly and completely.
   3. Where is CSS placed? depending on what kind of CSS you are typing (yes, there is more than one kind), you will type it in different places. Up to this point, we have been typing our code in the <head> section of our document. When typed here, it is known as an embedded stylesheet.
   4. How is CSS used? As we have been using it up to know, as mentioned above, we have been typing what is known as embedded stylesheets, but all types of CSS follow the same basic format.     In the past, we have styled our pages by using the in-line tags throughout our document to change the way the text looks. With an embedded stylesheet, we put all the styles into a central location embedded in the <head> section. That way, if ever we need to change something or update the page, all we must do is go to the <head> section at the very top of the document rather than go searching around all the code of the page to make the change. This is especially useful, if, like the mid-term project, we must type a long and complicated web-page filled with much text and a complex set of tables that we do not want to accidentally mess up.     As mentioned, the styles are embedded directly into the code in the <head> section of a document, and they are placed between a pair of <style> tags. This is the type of stylesheet that we looked at in last week’s class.
      1. In the first part of the class demonstration, we constructed a basic web-page with text only using only block tags, <h1>, <h2>, <p>. In some cases, we used these tags more than once each. We used the <h2> tag twice.
      2. In the second part of the demonstration, we created and applied the styles in an embedded stylesheet and applied them to the various block tags we used in the page. Where we used a tag more than once, such as the styles we attached to the <h2> tag, the styles were applied to each instance automatically by only typing them once.
         1. To create an embedded stylesheet we use the <style> tag pair.
         2. The <style> tag requires the <type> attribute with the value "text/css" applied.
         3. Inside the <style> tag pair, it is necessary to place a series of characters to convince the browsers to hide the code. While not strictly required anymore, in some old browsers, CSS code is not recognized and neither is the <style> tag. For this reason, when the code is read by these old browsers, it is mistaken for plain text and therefore displayed in the page, displacing all the actual content. Therefore, in order to prevent the browsers from doing this, it is necessary to disguise the code as HTML notes, notes that the writer of the code composes to himself or others who read the code when he wishes to identify it without having it appear in the page itself. To do this, you must type the following to open the notes: <!— — ; and the following to close the notes: //— —>.
         4. When typing CSS code, there are three (3) parts that makes up what is known as a style definition.
            1. the selector refers to the term that determines to which block of text or element the style will be applied, such as a heading or a paragraph;
            2. the property refers to the term that identifies which aspect will be styled, such as the size or color or typeface;
            3. the value refers to the term that supplies a particular quantity for a property, as the background-color property might have the value of red, or the width property might have a value of 500px;
            4. example:  selector         property               value  body   { background-color : #aa0000 ;}
   5. And, finally, why is CSS called Cascading Style Sheets? Where does the Cascading fit in? It is because CSS is implemented on three (3) levels. This is why it is called cascading, as it begins by adding style to the widest, most general location, and ends by adding it in the narrowest, most specific location. All three may be used together to style your pages in the most efficient and effective way possible.
      • linked/attached/external styles—First, for those styles that will be applied throughout your site—not only on a single page—such as a common background color, or a common set of margins, or link colors for all of the pages on your site, it is best to apply them to all pages at the same time, rather than on one page at a time. This is better because, for one thing, it is more efficient as all the styles are applied at once and centralized in one location; but by catching things in a single instance, it also prevents you from making more mistakes.     The more you have to type the more opportunities you will have for making errors. Therefore, since you will only have to type these styles in one place for the entire site rather than on every single page, your chances for making errors are greatly reduced. For such styles as these, the most general to be applied to all, or most, pages of your web-site, you will type on a single separate document. This document will only have CSS code in it, and it will be attached, or linked, to each of the pages that will receive the stylings that it dictates. This is called a linked or attached or external stylesheet, and the document gets the extension .css.
      • embedded styles—Second, for those styles that will be applied to only a single page—you will use what’s called an embedded stylesheet. If you have a single page in a multi-page web-site that is something of an anomaly in that it must be somehow and for some reason different from the other pages (must have a different background color, or have different stylings than other pages in your web-site, for example) then you will use this type of stylesheet for those styles that must be different. These are called embedded styles because rather than being typed in a separate .css document, they are typed, embedded, directly into the HTML & centralized in the head section. This type of stylesheet is meant to style a single page, which is what makes it ideal for a page that has a number of styles that are markedly different from the general styles placed on all the pages. It is also very efficient, as it places all the styles together in the head section.
      • in-line styles—Third, for those styles that occur only one time in one particular location in one page, we tend to use what are called in-line styles. These styles are applied directly into a particular HTML tag via the style attribute. They work very much the same as in-line tags do, but are much more versatile and thorough in what types of styling you may apply in that you can do much more with them. These styles are normally used for one-time styling. If you plan on using the same styles in more than one location, then in-line styles are probably not the right CSS to use.