ccs editing

CCS EDITING

CSS has several options for defining the styles of text.

These options can entirely replace thetag, but there's even more. CSS allows you to define these styles much more powerfully than you could ever do with plain HTML.

FONT PROPERTIESPropertyValuesNSIEExample

font-familyfont namegeneric font4+4+4+4+font-family:arialfont-family:arial, helvetica

font-style

normalitalicoblique4+4+4+4+4+font-style:normalfont-style:italicfont-style:oblique

font-variantnormalsmall-caps4+4+font-variant:normalfont-variant:small-caps

font-weight

normalboldbolderlighter100-9004+4+4W4W4+4+4+4+4+4+font-weight:normalfont-weight:boldfont-weight:bolderfont-weight:lighterfont-weight:250

font-size

normallengthlengthabsoluteabsoluteabsoluteabsoluteabsoluteabsoluteabsoluterelativerelativepercentage4+4+4+4+4+4+4+4+4+4+4+4+4+4+4+4+4+4+4+4+4+4+4+4+4+4+font-size:normalfont-size:14pxfont-size:14ptfont-size:xx-smallfont-size:x-smallfont-size:smallfont-size:mediumfont-size:largefont-size:x-largefont-size:xx-largefont-size:smallerfont-size:largerfont-size:75%

4P:problems, 4M:Mac only, 4W:Windows only

ASSIGNING ALL FONT ATTRIBUTES AT ONCE

An example of a typical font definition would be:B {font-family:arial, helvetica;font-size:12px;font-weight:bold;}

But since all font attributes can actually be expressed with thefontpropertywe could actually write it this way:B {font:arial, helvetica 12px bold}

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 thefontpropertieslisted above there are some options for defining text properties such as alignments, underlines, etc.PropertyValuesNSIEExample

line-height

normalnumberlengthpercentage4W4+4+4+4+4P4+4Pline-height:normalline-height:1.5line-height:22pxline-height:150%

text-decoration

noneunderlineoverlineline-throughblink4+4+

4+4+4M4+4W4+text-decoration:nonetext-decoration:underlinetext-decoration:overlinetext-decoration:line-throughtext-decoration:blink

text-transform

nonecapitalizeuppercaselowercase4+4+4+4+4W4W4W4Wtext-transform:nonetext-transform:capitalizetext-transform:uppercasetext-transform:lowercase

text-align

leftrightcenterjustify4+4+4+4+4+4+4+4Wtext-align:lefttext-align:righttext-align:centertext-align:justify

text-indentlengthpercentage4+4+4+4+text-indent:20px;text-indent:10%

white-spacenormalpre4+4+white-space:normalwhite-space:pre

4P:problems, 4M:Mac only, 4W:Windows onlyNote:

line-height:When using a number (such as 1.5) the number refers to the font size, where 1.5 would mean that a 1.5 lines spacing (using the current font size) will be inserted between the lines.

text-transform:Capitalize sets the first letter of each word in uppercase.Uppercase forces all letters to uppercase.Lowercase forces all letters to lowercase.

text-indent:Use this to indent the first word of a paragraph.

white-space:If white-space is set toprethe browser will show all spaces in the text, rather than ignoring all occurrences of more than one space. This is similar to thetag in plain HTML. Since the white-space is only supported by NS you should use thetag instead.

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:B {font:arial, helvetica 12px bold;color:red}

The color property is explained in detail on the next page.

CCS 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 yourtags.

COLOR PROPERTIESPropertyValuesNSIE

color4+4+

background-colortransparent

4+4+4+4+

background-imagenoneurl()4+4+4+4+

background-repeatrepeatrepeat-xrepeat-yno-repeat4+4+4+4+4+4+4+4+

background-attachmentscrollfixed4+4+

background-position

topcenterbottomleftright

4+4+4+4+4+4+4+

background

4+4+4+4+4+4+4+4+

Setting colors

Basically you have three color options with CSS:

1: Setting the foreground color for contents2: Setting the background color for an area3: Setting a background image to fill out an area

In the next section we will list the different properties that let youdo 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:Common nameYou can define colors with the use of common names, by simply enter the name of the desired color.

For example:.myclass {color:red; background-color:blue;}

Hexadecimal valueYou can define colors with the use of hexadecimal values, similar to how it's done in plain HTML.

For example:.myclass {color:#000000; background-color:#FFCC00;}

RGB valueYou can define colors with the use of RGB values, by simply entering the values for amounts of Red, Green and Blue.

For example:.myclass {color:rgb(255,255,204); background-color:rgb(51,51,102);}

You can also define RGB colors using percentage values for the amounts of Red, Green and Blue:

For example:.myclass {color:rgb(100%,100%,81%); background-color:rgb(81%,18%,100%);}

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 theBODYselector:BODY {background-color:#FF6666;}

Setting a background imageCSS 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:BODY {background-image:url(myimage.gif);}

You can control the repetition of the image with thebackground-repeatproperty.background-repeat:repeatTiles the image until the entire page is filled, just like an ordinary background image in plain HTML.

background-repeat:repeat-xRepeats the image horizontally - but not vertically.

background-repeat:repeat-yRepeats the image vertically - but not horizontally.

background-repeat:no-repeatDoes not tile the image at all.

Positioning a backgroundBackground 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:BODY {background-image:url(myimage.gif); background-position: 75px 75px;}

Note: Background positioning is not supported by Netscape 4 browsers.

Fixing a backgroundYou can fixate an image at a certain position so that it doesn't move when scrolling occurs.BODY {background-image:url(myimage.gif); background-attachment: fixed;}

Note: Background fixation is not supported by Netscape 4 browsers.

Setting multiple background valuesRather than defining eachbackgroundproperty with its own property you can assign them all with the use of thebackgroundproperty.

Look at this example:BODY {background:green url(myimage.gif) repeat-y fixed 75px 75px;}

CCS LINKSCSS has several options for redefining the style of links.

LINK PROPERTIESPropertyValuesNSIE

A:linkA:visitedA:activeA:hover

4+4+4+6+4+4+4+4+

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:A:linkDefines the style for normal unvisited links.

A:visitedDefines the style for visited links.

A:activeDefines the style for active links.A link becomes active once you click on it.

A:hoverDefines the style for hovered links.A link is hovered when the mouse moves over it.Note: Not supported by Netscape browsers prior to version 6.

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.

Thehoverstyle 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:HoverA:link {text-decoration: none}A:visited {text-decoration: none}A:active {text-decoration: none}A:hover {text-decoration: underline; color: red;}

The link from the above example would look like this:LOOK HERE

Another example would be to create links that are bothunderlinedandoverlined.

Example:Underline/OverlineA:link {text-decoration: none}A:visited {text-decoration: none}A:active {text-decoration: none}A:hover {text-decoration: underline overline; color: red;}

Athird example would be to create links that change in sizewhen hovered.

Example:Size changing linksA:link {text-decoration: none}A:visited {text-decoration: none}A:active {text-decoration: none}A:hover {font-size:24; font-weight:bold; color: red;}

Afinal example would be to create links that have a permanent background color, obviously standing out from the rest.

Example:Background colored linksA:link {background: #FFCC00; text-decoration: none}A:visited {background: #FFCC00; text-decoration: none}A:active {background: #FFCC00; text-decoration: none}A:hover {background: #FFCC00; font-weight:bold; color: red;}

The link from the above example would look like this:LOOK HERETO SEE

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 theA:linkselector 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:

.class1 A:link {text-decoration: none}.class1 A:visited {text-decoration: none}.class1 A:active {text-decoration: none}.class1 A:hover {text-decoration: underline; color: red;}

.class2 A:link {text-decoration: underline overline}.class2 A:visited {text-decoration: underline overline}.class2 A:active {text-decoration: underline overline}.class2 A:hover {text-decoration: underline; color: green;}

ONE TYPE OF LINKS

YAHOO
GOOGLE

ANOTHER TYPE OF LINKS

YAHOO
GOOGLE

Note how we use theto define the context.This is smart for two reasons:

1) The obvious, that it allows us to use different link styles onthe same page, rather than being limited to using a singleoverall 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.

CCS LISTCSS 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 totags - 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 PROPERTIESPropertyValuesNSIE

list-style typedisccirclesquaredecimallower-romanupper-romanlower-alphaupper-alphanone4+4+4+4+4+4+4+4+4W4W4W4W4W4W4W4W4W

list-style imagenoneurl()4W4W

list-style positionoutsideinside4W4W

list-style

4W4W4w

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-styleis an overall selector that let you define all list related styles at once.

The three basic selectors are:list-style typeDefines the look of the bullets used in your list.

list-style imageLet's you use a custom graphic for bullets.

list-style positionOften the text in a list is longer than one line.list-style position:outerlets the second line align with the first line. That is: the bullet is to the left of both lines.list-style position:innerlets the second line align with the bullet.

Assigning several properties at once

Instead of using different selectors for eachlist-styleyou can specify them all at once using thelist-styleproperty.

For example:

LI.list1 {list-style: circle outside; color:green;}LI.list2 {list-style: square inside; color:blue}.blacktext {color:black}

This is one black line

This is another line that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the list.

This is one black line

This is another line that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the list.

The lists from the above example would look like this: This is one black line This is another line that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the list.

This is one black line This is another line that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined forthe list.

CCS 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:LAYER 1 ON TOP:LAYER 1LAYER 2LAYER 2 ON TOP:LAYER 1LAYER 2

Second look at the code:LAYER 1 ON TOP:LAYER 1LAYER 2

LAYER 2 ON TOP:LAYER 1LAYER 2

To create a layer all you need to do is assign thepositionattribute to your style. The position can be eitherabsoluteorrelative.

The position itself is defined with thetopandleftproperties.

Finally, which layer is on top is defined with thez-indexattribute.

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).position:absoluteIf you define the position to be absolute it will be calculated from the upper left corner of the page - unless the layer is defined inside another layer, in which case it will be calculated from the upper left corner of the parent layer.

position:relativeIf you define the position to be relative it will be relative to the position of the tag that carries the style.That is, if you add a relatively positioned layer in the middle of the page, then the position will be calculated from that exact spot in the middle of your page where it was added.

DEFINING THE POSITION

While thepositionproperty indicates the out spring of our coordinate system, theleftandtopproperties 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.

Bothleftandtopproperties can be dynamically changedwith 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 hadz-index:1;. If the queen of hearts was at the top we'd say she hadz-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

Afinal property is thevisibilityproperty 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 thevisibilityproperty are:visibleandhidden.

This example shows how to create an invisible layer:HELLO!!!

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: Flying elements/banners on the page

Games where you move an object around

Menus that pop out when triggered

Menus that become visible when triggered

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.

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 PROPERTIESLookValuesLookNSIEExample

defaultTEST6+4+cursor:default

crosshairTEST6+4+cursor:crosshair

handTEST4+cursor:hand

pointerTEST6+cursor:pointer

Cross browserTEST4+cursor:pointer;cursor:hand

moveTEST6+4+cursor:move

textTEST6+4+cursor:text

waitTEST6+4+cursor:wait

helpTEST6+4+cursor:help

n-resizeTEST6+4+cursor:n-resize

ne-resizeTEST6+4+cursor:ne-resize

e-resizeTEST6+4+cursor:e-resize

se-resizeTEST6+4+cursor:se-resize

s-resizeTEST6+4+cursor:s-resize

sw-resizeTEST6+4+cursor:sw-resize

w-resizeTEST6+4+cursor:w-resize

nw-resizeTEST4+4+cursor:nw-resize

progressTEST6+cursor:progress

not-allowedTEST6+cursor:not-allowed

no-dropTEST6+cursor:no-drop

vertical-textTEST6+cursor:vertical-text

all-scrollTEST6+cursor:all-scroll

col-resizeTEST6+cursor:col-resize

row-resizeTEST6+cursor:row-resize

cursor:url(uri)TEST6+cursor:url(uri)

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:

.xlink {cursor:crosshair}.hlink{cursor:help}

CROSS LINK
HELP LINK

The links from the above example would look like this:CROSS LINK

HELP LINK

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:

body {cursor:crosshair}

SOME TEXT
ONE LINK
ANOTHER LINK

Clickhereto 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 you don't have to specify the desired style each and every time there is a link in the section.

For example:

.xlink A{cursor:crosshair}.hlink A{cursor:help}

CROSS LINK 1
CROSS LINK 2
CROSS LINK 3

HELP LINK 1
HELP LINK 2
HELP LINK 3

The links from the above example would look like this:CROSS LINK 1CROSS LINK 2CROSS LINK 3

HELP LINK 1HELP LINK 2HELP LINK 3