CSS CLASS & ID FILES

C I S 6 7F o u n d a ti o n s f o r C r e a ti n g We b P a g e s

Professor Al Fichera

CSS CLASS & ID FILES

Rev. September 14, 2010—All HTML code brought to XHTML standards.

Reference for CIS127 and CIS 137

CSS Class & ID Files by Professor Al Fichera http://profal2.com

Before We Begin…

September 14, 20102

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; }


Overview ClassUsing CSS Styles, you can apply a Class or ID attribute to

HTML elements on the page.

September 14, 20103


Overview Class FilesA 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, 20104


Applied ClassA 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.

September 14, 20105

Class Files = Multiple Use on a PageIn 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, 2010CSS Class & ID Files by Professor Al Fichera http://profal2.com6


Class Selectors for a Logo AreaHere'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">

Used in thisfashion.

September 14, 20107


Class Selectors for a Page HeadingIt 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">


September 14, 20108

Firefox and MSIE are SimilarHere is the results of the previous three class selectors.div.pagetop div.pageheading p.quote

September 14, 2010CSS Class & ID Files by Professor Al Fichera http://profal2.com9


Pseudo-Class for a Drop CapitalA 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, 201010


Pseudo-Class for a Drop CapitalHere'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">




Firefox and MSIE on Drop CapitalsFirefox, 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.



Overview IDAn ID attributes assigns a unique name to an element.ID values must be unique and should not be repeated in

the same document.



The ID SelectorThe 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 <p> element.



Combining Class and ID FilesHere 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;

}



Combining Class and ID FilesAdd 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>




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



Class File Good Ideas DepartmentPerhaps 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;

}



Apply the Class File to a Span TagUse them in your document in this fashion:<span class="it">consectetuer</span> <span class="highlight">Vestibulum odio.</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.)



Results of a Few Class and ID Rules


Documents

CSS CLASS & ID FILES