CSS CLASS & ID FILES

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

2. Before We Begin… • 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; } CSS Class & ID Files by Professor Al Fichera http://profal2.com

3. Overview Class • Using CSS Styles, you can apply a Class or ID attribute to HTML elements on the page. 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. 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 <p> element rule that's working. 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 blockquotetag 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; } CSS Class & ID Files by Professor Al Fichera http://profal2.com

7. Used in thisfashion. 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; } <div class="pagetop"> CSS Class & ID Files by Professor Al Fichera http://profal2.com

8. Used in thisfashion. 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; } <div class="pageheading"> 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.pagetopdiv.pageheadingp.quote CSS Class & ID Files by Professor Al Fichera http://profal2.com

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". CSS Class & ID Files by Professor Al Fichera http://profal2.com

11. Used in thisfashion. 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; } <p class="firstparagraph"> 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. 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. 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 Classselector. • You can apply the ID name to the appropriate element in the document, in most examples that would be the <p>element. 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; } CSS Class & ID Files by Professor Al Fichera http://profal2.com

16. Used in thisfashion. 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; } <div id="box" class="bolder">Text here… </div> CSS Class & ID Files by Professor Al Fichera http://profal2.com

17. Firefox and MSIE on the Pulled Box • 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. 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; } 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: <span class="it">consectetuer</span> <span class="highlight">Vestibulumodio.</span> • 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.) CSS Class & ID Files by Professor Al Fichera http://profal2.com

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