Upload
henry-benson
View
215
Download
0
Embed Size (px)
Citation preview
C I S 6 7F o u n d a ti o n s f o r C r e a ti n g W e 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;
}
CSS Class & ID Files by Professor Al Fichera http://profal2.com
Overview ClassUsing CSS Styles, you can apply a Class or ID attribute to
HTML elements on the page.
September 14, 20103
CSS Class & ID Files by Professor Al Fichera http://profal2.com
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
CSS Class & ID Files by Professor Al Fichera http://profal2.com
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
CSS Class & ID Files by Professor Al Fichera http://profal2.com
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
CSS Class & ID Files by Professor Al Fichera http://profal2.com
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">
Used in thisfashion.
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
CSS Class & ID Files by Professor Al Fichera http://profal2.com
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
CSS Class & ID Files by Professor Al Fichera http://profal2.com
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">
Used in thisfashion.
September 14, 201011
CSS Class & ID Files by Professor Al Fichera http://profal2.com
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.
September 14, 201012
CSS Class & ID Files by Professor Al Fichera http://profal2.com
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.
September 14, 201013
CSS Class & ID Files by Professor Al Fichera http://profal2.com
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.
September 14, 201014
CSS Class & ID Files by Professor Al Fichera http://profal2.com
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;
}
September 14, 201015
CSS Class & ID Files by Professor Al Fichera http://profal2.com
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>
Used in thisfashion.
September 14, 201016
CSS Class & ID Files by Professor Al Fichera http://profal2.com
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, 201017
CSS Class & ID Files by Professor Al Fichera http://profal2.com
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;
}
September 14, 201018
CSS Class & ID Files by Professor Al Fichera http://profal2.com
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.)
September 14, 201019
CSS Class & ID Files by Professor Al Fichera http://profal2.com
Results of a Few Class and ID Rules
September 14, 201020