|
You don't need a Crystal Ball |
 |
|
to Search for Files |
| SearchWin Home |
| Article Home |
| Web Forms |
| Borderless Windows |
| Cookies-Part One |
| Cookies-Part Two |
| About Span and Div. |
| Using CSS-Part 1 |
| Using CSS-Part 2 |
| Using CSS-Part 3 |
| About DOCTYPE |
| Tables With XML |
 |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
Cascading Style Sheets - An Introduction Cascading Style Sheets (CSS) were introduced to html beginning with version 3.x. CSS use was (and still is) somewhat problematic to the extent that browser support and implementation varies greatly. Newer browsers - IE(4+) & Netscape(6+) - offer fairly consistent support. With older browsers, the appearance of pages using CSS is, at best unpredictable. See Web Links below for a Link to pages showing detailed information about which browsers support CSS. Cascading Style Sheets (CSS) is a mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. The html <style> tag is used to accomplish this by setting the attributes of other html tags. The attributes can be assigned to standard or named tags (classes). In CCS jargon, the 'thing' we assign the attribute to is called a Selector. The basic selectors are the html elements (tags). Classes and Pseudo Class can also be selectors. CCS can be part of an html document (internal) or an included file (global) that can be shared by html files. An internal CCS is placed between the web pages <head>..</head> tags. About HTML "style" The use of style can be a little confusing because there are three separate places it can be used. It can have global use as an external CSS, page wide use as an internal CSS and local use as an Inline Style. "STYLE" is used both as an html tag attribute and as an html tag. Used as a tag attribute (Inline Style), it effects the formatting and appearance of whatever is displayed within the tag it's placed in. Used as an html tag, it affects all uses of the tag that a style modifies. Styles are applied in the order of their scope. i.e., 1st global, then page, then Inline. This means a page CSS definition overrides a global definition and an Inline definition overrides a page definition. The same order applies to common attributes. For example, background is a tag attribute that is common to a number of tags. It is used to assign an image to a document object's background. Setting a pages <body background="SomeImage.gif"> paints the entire html document background with that image. Since the default background attribute is transparent, all other objects on the page having a background attribute will have the body's background. Setting a particular object background to a different image will override the body's background. It's useful to have a conceptual understanding of the html Document Object Model (DOM) when working with CSS. Understanding DOM provides good insight into what is happening when CSS are applied to web pages. Style Syntax Each style property starts with the property's name, then a colon and lastly the value for this property. When there is more than one style property in the list, a semicolon is used between each of them to delimit one property from the next. The style property must name a valid property for the tag or class being defined. Also be aware that not all tag properties can be styled (see this articles Web Links for a reference of which can and cannot be used with style). The current CCS standard, CSS2, defines around 120 properties. Style's General Format is: property: value; property: value Example: text-align: center ; color: blue When style is used as a tag attribute, it's format is: <TagName style="property: value ; property: value"> Example: <P style="align: center ; color: blue">Centered blue paragraph</P> This style affects only the paragraph the style occurs in. In this case, centering it on the page and having blue text. You can, of course, accomplish the same thing by setting the tags attributes without using style at all. When style is use as a html tag it must be used in the document head (or separate style sheet) and the format is: Selector { property: value; property: value; } (Selector is a Tag Name, a Class definition, or a pseudo-class definition) Example: <style type="text/css" > <!-- hide from old browsers body { font-family: times, serif; color: black; } p {align: center ; color: blue; } end hide --> </style> This style set the page default font & font color and will affect all uses of the "P" Tag. All occurrences of "P" will be page centered and have blue text. If used in an external style sheet, these rules would apply to all pages the style sheet was included in. If you wanted to assign the same property the same value for multiple Tags, you can do so with a single statement: Selector1,Selector2 { property: value; property: value; } Example: H1,H3 {color: red; } Having multiple rules for the same tag is also permitted. For example, if you wanted H1 & H3 to be red, but only H3 to be bold: H1,H3 {color: red; } H3 { font-style: bold; } To use an external CSS in a web page, use LINK in the head section of a page to which you want the CSS applied. Example: <head> <link rel=stylesheet href="MyStyleSheet.css"> </head> Doing Web Pages with Style One major benefit of using style is to reduce your work. CSS can simplify and reduce the html code needed to give your web pages a consistent look. Use of CSS can be very elaborate, but you can accomplish quite a lot without having to go that far. Suppose you want a group of web pages to have the same background image, use the same font, have H1 be red, H2 be white, and H3 be blue. A style sheet to accomplish this is: <style type="text/css" > <!-- hide from old browsers body { background: MyWaterMark.gif; font : 12 pt Arial; color : black; } H1 {color : red; } H2 {color : white; } H3 {color : blue; } end hide --> </style> Now by adding <link rel=stylesheet href="MyStyleSheet.css"> in each page's header, those page will have the attributes defined in the CSS. Remember local definitions override the global ones - so if you want a particular use of H1 to be, say green, you can still set it for that instance with an inline style or setting the html attribute in the usual manner. Earlier, I mentioned that a CSS selector could be a class. Class is a method to make up your very own private tags to use on web pages. Say you wanted, on your product pages, to have the product name & introductory paragraph of the description to always have a particular appearance. To accomplish this, we'll make up private H1 and P classes that have the attributes we want. This example will make the product name 24 point Arial, colored red, and centered. The intro paragraph will be bold italic. <style type="text/css" > body { font-family: times, serif; color: black; } /*set default font for the pages */ H1.product { color: red; font: 24pt Arial; text-align: center; } P.intro { font-style: italic; font-weight: bold; } </style> To use our new tags on a page we link the CSS and use the newly defined classes as follows: <h1 class="product" >My Red Product</h1> <p class="intro" >this is bold italic</p> I also mention pseudo-classes. The definition of Pseudo-class is a bit harder to pin down. The concept of pseudo-classes and pseudo-elements extend addressing in CSS to allow external information, i.e., information from the browser, to influence the formatting process. There are only a few pseudo-classes and pseudo-elements currently defined. The idea is that we can change the display of something depending on the state of some aspect of the browser. For example, the browser maintains some state information about links (the "A" tag elements of a page) such as what the active link is and which links have already been visited. We can include CSS definition about how we want links displayed depending on that information. Example: A:link { color: red } /* unvisited link */ A:visited { color: blue } /* visited links */ A:active { color: lime } /* active links */ A:hover { color: green; font-weight: bold; font: 18pt;} The above example defines the default link color as well as colors for the active link and links already visited. It also changes the appearance of the link when the mouse moves over the link. In addition, there are a couple typographical pseudo-classes, first-line and first-letter. The example below makes the first letter of the first line in each paragraph a capital & the first line in each paragraph is italic. Example: <Style> .LetterAndLine:first-line { font-style: italic; } .LetterAndLine:first-letter { text-transform: uppercase; } </Style> Usage: <p class="LetterAndLine">this should have the first line as italic and the first letter as a cap. </p> Authoring CSS CSS are plain text files and can be created with any text editor. This method requires a working knowledge of CSS and allows the greatest flexibility. It's also the most work. There are a number of CSS capable editors (including several by ASP members) on the market that can reduce that work. If you require functionality not included with a CSS editor, you can use a text editor to modify the CSS and add it.
*** Shameless PLUG ***
|