1. CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 14, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and CIS 137

2. Before We Begin… September 14, 2010 CSS Class & ID Files by Professor Al Fichera http://profal2.com 2 To establish the font face, size, and color to be used on this sample page I created the following Style Rule for p. p { font-family: Verdana, Geneva, sans-serif; font-size: 1.1em; line-height: 1.5em; color: #000000; }

3. Overview Class Using CSS Styles, you can apply a Class or ID attribute to HTML elements on the page. September 14, 2010 3 CSS Class & ID Files by Professor Al Fichera http://profal2.com

4. Overview Class Files A Class attribute assigns a class name to an element. So what do I have to do to make a "Class" file? Create a selector with a period (.) in front in the Style Block in the Head. Examples coming in the next few slides. September 14, 2010 4 CSS Class & ID Files by Professor Al Fichera http://profal2.com

5. Applied Class A Class selector lets you assign styles to elements that are included within a particular class. For instance, apply different style properties to P elements that contain a class="quote" attribute. So you can eliminate or change some of the properties from a element rule that's working. September 14, 2010 5 CSS Class & ID Files by Professor Al Fichera http://profal2.com

6. Class Files = Multiple Use on a Page In the following class file can be added to a blockquote tag or a p tag..quote { font-family: 'times new roman', times, serif; font-weight: normal; font-style: italic; color: #000000; background-color: #DDDDDD; padding: 5px; } September 14, 2010 CSS Class & ID Files by Professor Al Fichera http://profal2.com 6

7. Class Selectors for a Logo Area Here's another class selector idea that can add a special look to the top of any document, if inside a div : div.pagetop { font-family: Verdana, Geneva, sans-serif; font-size: 3em; font-weight: bold; line-height: 2.5em; color: #FFFFFF; background-image: url(denim.jpg); text-align: center; padding: 4px; margin: 2px; border: double 6px #000000; } Used in this fashion. September 14, 2010 7 CSS Class & ID Files by Professor Al Fichera http://profal2.com

8. Class Selectors for a Page Heading It might fit your design for the page by having a line of text introducing the content of the page right under the page top logo, if inside a div. Try this one for size: div.pageheading { font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; font-weight: bold; font-variant: small-caps; color: #000066; letter-spacing:.2em; margin-top: -3px; margin-left: 20px; } Used in this fashion. September 14, 2010 8 CSS Class & ID Files by Professor Al Fichera http://profal2.com

9. Firefox and MSIE are Similar Here is the results of the previous three class selectors. div.pagetop div.pageheading p.quote September 14, 2010 CSS Class & ID Files by Professor Al Fichera http://profal2.com 9

10. Pseudo-Class for a Drop Capital A pseudo-class rule can be used any time you wish to augment a CSS rule that you created or any HTML element you wish to change. The pseudo-class file adds the additional condition when and how the effect should take place. In the next slide we will build a " Drop Cap " using the pseudo-element called " first-letter". September 14, 2010 10 CSS Class & ID Files by Professor Al Fichera http://profal2.com

11. Pseudo-Class for a Drop Capital Here's a pseudo-class selector idea that adds a special Drop Capital to the first letter of the paragraph: p.firstparagraph:first-letter { font-size: 200%; font-weight: bold; line-height: 1.5em; color: #FF0000; width: 1em; float: left; padding: 4px; margin: 2px; border: solid thin #000000; } Used in this fashion. September 14, 2010 11 CSS Class & ID Files by Professor Al Fichera http://profal2.com

12. Firefox and MSIE on Drop Capitals Firefox, a little more refined text, MSIE, a bit of bang on the head text. Zoom level set the same on both Browsers. Personally speaking, MSIE lined up the Drop Cap Box better than Firefox, however, Firefox lined up the text better with the line. September 14, 2010 12 CSS Class & ID Files by Professor Al Fichera http://profal2.com

13. Overview ID An ID attributes assigns a unique name to an element. ID values must be unique and should not be repeated in the same document. September 14, 2010 13 CSS Class & ID Files by Professor Al Fichera http://profal2.com

14. The ID Selector The ID selector uses a pound sign ( # ) flag character instead of the period used in a Class selector. You can apply the ID name to the appropriate element in the document, in most examples that would be the element. September 14, 2010 14 CSS Class & ID Files by Professor Al Fichera http://profal2.com

15. Combining Class and ID Files Here is an idea that might be worth something, mix the two to create a third version that could be used in the site. Start with this simple Class element to create a really bold line of text that's easier on the eyes to read:.bolder { font-weight: bolder; letter-spacing:.1em; } September 14, 2010 15 CSS Class & ID Files by Professor Al Fichera http://profal2.com

16. Combining Class and ID Files Add this ID element selector for a pulled quote box: #box { font-family: Arial, Helvetica, sans-serif; font-size: 0.85em; line-height: 1.3em; color: #000000; background-color: #BCD1F0; width:1.25in; float: left; padding: 5px; margin: 10px; border: solid 2px red; } Text here… Used in this fashion. September 14, 2010 16 CSS Class & ID Files by Professor Al Fichera http://profal2.com

17. Again as you can see from these examples, Firefox again has a more refined look and feel, and more of what I had in mind. Knowing that, I'd have to adjust my code to get MSIE a little closer to what I expect the page to look like. Firefox and MSIE on the Pulled Box September 14, 2010 17 CSS Class & ID Files by Professor Al Fichera http://profal2.com

18. Class File Good Ideas Department Perhaps you might have an idea to make certain elements of your Web page take on a different look from time to time. Try something like these:.it { font-style: italic; color: #0000FF; }.highlight { color: #990000; background-color: #FFFF99; } September 14, 2010 18 CSS Class & ID Files by Professor Al Fichera http://profal2.com

19. Apply the Class File to a Span Tag Use them in your document in this fashion: consectetuer Vestibulum odio. The span tag was used because these snippets of code will be used inside a paragraph, however we don't wish to color the whole paragraph, just a small portion. The next slide is an example of all the Class and ID files used in this lecture. (And, obviously shown with Firefox.) September 14, 2010 19 CSS Class & ID Files by Professor Al Fichera http://profal2.com

20. Results of a Few Class and ID Rules September 14, 2010 20 CSS Class & ID Files by Professor Al Fichera http://profal2.com