|
| |||
MAIN MENUCascade Style Sheets (CSS) IntroductionCSS Selectors Where CSS definitions are embed in HTML page CSS attributes CSS & MySpace CSS TEXTCSS has several options for defining the styles of text.These options can entirely replace the <font> tag, but there's even more. CSS allows you to define these styles much more powerfully than you could ever do with plain HTML. FONT PROPERTIES
4P:problems, 4M:Mac only, 4W:Windows only ASSIGNING ALL FONT ATTRIBUTES AT ONCE An example of a typical font definition would be:
But since all font attributes can actually be expressed with the font property we could actually write it this way:
The above is obviously a shorter way to specify font settings - but in reality it is less useful than one might think. The reason is that you'd be assigning the same font face to all your styles, for example, while you'd want different font weights and sizes for headers and content areas etc. TEXT PROPERTIES Despite the font properties listed above there are some options for defining text properties such as alignments, underlines, etc.
4P:problems, 4M:Mac only, 4W:Windows only
The official CSS standard provided by W3C also includes properties for word spacing, letter spacing and vertical align, but these aren't supported by today's browsers. COLORS As you can see, the above CSS properties can replace all text formatting that can be done with plain HTML with one exception: the color. The color is not part of the font collection in CSS - rather it has its own definition. If you want to add a color to the text in the above example you'd do it this way:
The color property is explained in detail below. CSS COLORSCSS has several options for defining colors of both text and background areas on your pages.These options can entirely replace the color attributes in plain HTML. In addition, you get new options that you just didn't have in plain HTML. For example, in plain HTML, when you wanted to create an area with a specific color you were forced to include a table. With CSS, you can define an area to have a specific color without that area being part of a table. Or even more useful, in plain HTML when working with tables, you had to specify font attributes and colors etc. for each and every table cell. With CSS you can simply refer to a certain class in your <TD> tags. COLOR PROPERTIES
4P:problems, 4M:Mac only, 4W:Windows only Setting colors Basically you have three color options with CSS: 1: Setting the foreground color for contents 2: Setting the background color for an area 3: Setting a background image to fill out an area In the next section we will list the different properties that let you do that. In plain HTML, colors can either be entered by name (red, blue etc.) or by a hexadecimal color code (for example: #FF9900). With CSS you have these options:
Setting background colors Background colors are defined similar to the colors mentioned above. For example you can set the background color of the entire page using the BODY selector:
Setting a background image CSS lets you set a background image for both the page and single elements on the page. In addition, CSS offers several positioning methods for background images. You can define the background image for the page like this:
You can control the repetition of the image with the background-repeat property.
Positioning a background Background positioning is done by entering a value for the left position and top position separated by a space. In this example the image is positioned 75 pixels from the upper left corner of the page:
Note: Background positioning is not supported by Netscape 4 browsers. Fixing a background You can fixate an image at a certain position so that it doesn't move when scrolling occurs.
Note: Background fixation is not supported by Netscape 4 browsers. Setting multiple background values Rather than defining each background property with its own property you can assign them all with the use of the background property. Look at this example:
CSS LINKSCSS has several options for redefining the style of links.LINK PROPERTIES
DEFINING STYLES FOR LINKS As mentioned in the above table, there are four different selectors with respect to links. You can specify whatever style you'd like to each of these selectors, just like you'd do with normal text. The four selectors are:
PRACTICAL EXAMPLES Here you can see a few examples on how CSS can be used to replace the traditional image based mouseover effects for links. The hover style is not supported by Netscape browsers prior to version 6, but since it does no harm, you can still use it for the benefit of the +90% of visitors that arrive using MSIE). One of the most common uses of CSS with links is to remove the underline. Typically it's done so that the underline appears only when a hover occurs. In the example below, we did just that. In addition we added a red color for hovered links. Example: Hover
The link from the above example would look like this:
Another example would be to create links that are both underlined and overlined. Example: Underline/Overline
The link from the above example would look like this:
A third example would be to create links that change in size when hovered. Example: Size changing links
The link from the above example would look like this:
A final example would be to create links that have a permanent background color, obviously standing out from the rest. Example: Background colored links
The link from the above example would look like this:
MULTIPLE LINKSTYLES ON SAME PAGE The final topic deals with how to add multiple link styles that can be used on the same page. In the above examples we addressed the HTML selector - A:link etc - and thus redefined the overall link style. How do we define a link style that is only active in a certain area of the page? The answer is: context dependent selectors. Rather than addressing the A:link selector we will address it while being dependant on a certain outer class that surrounds the area where we'd like our link style to be effective. For example:
Note how we use the <span> to define the context. This is smart for two reasons: 1) The obvious, that it allows us to use different link styles on the same page, rather than being limited to using a single overall link style. 2) We can define entire areas where a certain link style works for all links within that area. Thus, we don't have to add a style definition to each and every link in that area. CSS LISTSCSS allows you to customize the lists that can be madewith HTML. The good news is that there are many powerful properties for doing so. The bad news is that Netscape and Internet Explorer often support these properties in different ways. Both browsers have limitations in their support of list styles. Netscape browsers only let you add the list CSS to <LI> tags - not just any tag. Internet Explorer's support of CSS with relation to lists is only fully supported for browsers on the Windows platform. In any case, be careful about using CSS for lists since it might not show the way you want it to on all browsers. However, most things won't ruin anything if the browser doesn't support it - it just shows as a normal list - so it will be okay to define lists that only work for the most widely used browser. LIST PROPERTIES
4+: Browser version 4 or newer. 4W: Browser version 4 or newer, windows only. DEFINING STYLES FOR LINKS As mentioned in the above table, we have four unique selectors with respect to lists. The fourth selector, list-style is an overall selector that let you define all list related styles at once. The three basic selectors are:
Assigning several properties at once Instead of using different selectors for each list-style you can specify them all at once using the list-style property. For example:
The lists from the above example would look like this:
CSS LAYERSWith CSS, it is possible to work with layers: pieces of HTML that are placed on top of the regular page with pixel precision.The advantages of this are obvious - but once again Netscape has very limited support of CSS layers - and to top it off: the limited support it offers is quite often executed with failures. So the real challenge when working with layers is to make them work on Netscape browsers as well. LAYER BASICS First look at this example:
Second look at the code:
To create a layer all you need to do is assign the position attribute to your style. The position can be either absolute or relative. The position itself is defined with the top and left properties. Finally, which layer is on top is defined with the z-index attribute. RELATIVE VERSUS ABSOLUTE POSITIONING You can either position your layer calculated from the upper left corner(absolute) or calculated from the position where the layer itself is inserted (relative).
DEFINING THE POSITION While the position property indicates the out spring of our coordinate system, the left and top properties defines the exact position of our layer. You can enter both positive and negative values for these properties - thus it is possible to place content higher up and further to the left on the page than the logical position in the HTML code where the layer itself is defined. In other words: at the bottom of your HTML code you can enter the code for a layer that is positioned at the top of the resulting page. Both left and top properties can be dynamically changed with JavaScript. This means that it is possible to move things around on the screen even after the page has finished loading. In fact this technique can be (and has been) used to create entire games. Other uses might be menus that pop out when a mouse-over is detected on a link. The possibilities are endless - but in order to keep things simple, we will not dig into details about these dynamic HTML effects here. POSITION IN THE STACK - THE Z-INDEX Picture a game of 52 cards. If the ace of spades was at the bottom we'd say it had z-index:1;. If the queen of hearts was at the top we'd say she had z-index:52;. Try looking at the code example at the top of this page again, and see how we used the z-index to put LAYER 1 on top in the first example, while we had LAYER 2 on top in the second example. Very interesting possibilities arise from the fact that the z-index can be dynamically changed with JavaScript. You could create several "pages" on top of each other - all on the same page. When the user clicks a link it will simply move the layer with the desired info on top rather than load a new page. The techniques to create effects like that goes beyond the scope of pure CSS however, so for now we will just refer to DHTML (Dynamic HTML - a mix between JavaScript and CSS) for further explorations into that area. VISIBILE VERSUS HIDDEN LAYERS A final property is the visibility property that will allow you to create invisible layers. Why would anyone want to create an invisible layer? Well, imagine the possibilities it gives for adding pop-up menus and other cool effects on your pages. With dynamic HTML it is possible to change the visibility of a layer according to certain events. The most common use of this is to create menus that pop out (like the sub menus in the START menu on Windows). The trick behind these menus is to create all submenus as invisible layers. Then, when a mouse-over is detected on a link the according layer becomes visible. (Sounds pretty easy - actually is pretty easy - except when tried on Netscape browsers that seem to have only a vague idea of the logic behind CSS layers). Valid values for the visibility property are: visible and hidden. This example shows how to create an invisible layer:
PRACTICAL USE OF LAYERS It's obvious that layers offer certain possibilities for precise positioning of static elements on your pages. In reality layers are often used in more dynamic ways:
While all of these effects might seem pretty cool and useful - the fact is that the web is filled with dynamic effects that are much more cool than the average visitor really likes. The more you create a unique interface for your site the more you force the visitor to forget about what she is used to. Do not underestimate the power of sticking to the elements that the average visitor is accustomed to. What's cool about creating an effect that makes 90% of all web designers clap their hands while leaving 90% of non-web designers confused or disappointed? In any case, judge for yourself if a certain effect is really needed - and if so: do not hesitate to use it. CSS CURSORSMicrosoft Internet Explorer 4+ and Netscape 6+ supports customized cursors defined with CSS.Although the cursors will not have the customized look in other browsers it usually doesn't ruin anything. These browsers will simply show the normal arrow-cursor which would be same case as if you refrained from customizing cursors at all. So unless the page really doesn't work without the customized cursor there shouldn't be technical reasons for choosing not to. However there might be other reasons for thinking twice before adding custom cursor to your pages. Many users are easily confused or irritated when a site breaks the standard user interface. CURSOR PROPERTIES
4P:problems, 4M:Mac only, 4W:Windows only ADDING A CUSTOMIZED CURSOR The syntax for a customized cursor is this: (Position the mouse over each link to see the effect) Selector {cursor:value} For example:
The links from the above example would look like this:
REDEFINING THE CURSOR FOR ENTIRE PAGES If you want to redefine the cursor so that it's not only showing up when moved over a link, you simply specify the desired cursor using the body-selector. For example:
Click here to open a window that shows the result of the above example. REDEFINING THE CURSOR FOR AREAS ON A PAGE If you want one look of the cursor in one area of the page and another look of the cursor in another area you can do it with context dependant selectors. This way, you create different styles for links, that are dependant on the context. Now if the context is set with a dummy tag, such as <span> you don't have to specify the desired style each and every time there is a link in the section. For example:
The links from the above example would look like this:
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| go home Contact tables graphics Profile videos Extended network graphics Animated icons | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
