css tutorial 2012

2012

Mr.D.S.Kiran

D.S.Technologies

CSS TUTORIAL

CSS TUTORIAL 2012

2 Contact the Author At: [email protected]

D.S.Kiran is the founder of D.S.Technologies.

He is maintaining a web site called eBookDust (www.ebookdust.com) over the last several years providing eBooks and Materials.

And He is a self-taught web designer and SEO expert. He is an entrepreneur, designer, developer, and overall thinker. Your comments and suggestions are always welcome!

CSS TUTORIAL 2012


Topic Name Page No Introduction 4

Advantages 5

Using this Tutorial 6

Selectors 7

Tag Selectors 8

Class Selectors 9

ID Selectors 10

Grouped Selectors 11

Context Dependant Selectors 12

Where to Place It 13

Single Tags 14

Single Pages 15

Entire Sites 16

CSS Text 18

CSS Colors 20

CSS Links 23

CSS Lists 26

CSS Layers 28

CSS TUTORIAL 2012


INTRODUCTION CSS stands for Cascading Style Sheets. It is a way to divide the content from the layout on web pages.

How it works: A style is a definition of fonts, colors, etc. Each style has a unique name: a selector. The selectors and their styles are defined in one place. In your HTML contents you simply refer to the selectors whenever you want to activate a certain style.

For example: Instead of defining fonts and colors each time you start a new table cell, you can define a style and then, simply refer to that style in your table cells. Compare the following examples of a simple table: Classic HTML

<table> <tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2" color="red"><b>this is line 1</b></font></td></tr> <tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2" color="red"><b>this is line 2</b></font></td></tr> <tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2" color="red"><b>this is line 3</b></font></td></tr> </table>

With CSS (assuming that a selector called subtext is defined)

<table> <tr><td class="subtext">this is line 1</td></tr> <tr><td class="subtext">this is line 2</td></tr> <tr><td class="subtext">this is line 3</td></tr> </table>

While CSS lets you separate the layout from the content, it also lets you define the layout much more powerfully than you could with classic HTML.

CSS TUTORIAL 2012


ADVANTAGES

With CSS, you will be able to: - define the look of your pages in one place rather than repeating yourself over and over again throughout your site. (Ever get tired of defining colors and fonts each time you start a new cell in a table? Those days are over with CSS!) - easily change the look of your pages even after they're created. Since the styles are defined in one place you can change the look of the entire site at once. (Ever get tired of replacing tags throughout your site when you want to change the look of a certain element? Those days are over with CSS!) - define font sizes and similar attributes with the same accuracy as you have with a word processor - not being limited to just the seven different font sizes defined in HTML. - position the content of your pages with pixel precision. - redefine entire HTML tags. Say for example, if you wanted the bold tag to be red using a special font - this can be done easily with CSS. - define customized styles for links - such as getting rid of the underline. - define layers that can be positioned on top of each other (often used for menus that pop up).

Your pages will load faster, since they aren't filled with tags that define the look. The style definitions are kept in a single CSS document that is only loaded once when a visitor enters your site.

The one disadvantage is: - these will only work on version 4 browsers or newer. However, more than 95% of all browsers live up to that.

CSS TUTORIAL 2012


USING THIS TUTORIAL This tutorial has been laid out so that it can be used both as a future reference and as an ongoing tutorial starting at page 1. The tutorial has been divided into 6 logical sections.

Explain the different types of selectors. Practical uses of selectors, easy ways to define styles, etc. How to define CSS at different levels: Tags, Pages and Sites. A listing of the attributes that can be set for inline tags, block tags and links. How to add layers to your pages. Problems related to cross browser compatibility.

And that is all you need to know about CSS to become an expert!

Proceed to start learning about selectors...

CSS TUTORIAL 2012


SELECTORS

Selectors are the names that you give to your different styles. In the style definition you define how each selector should work (font, color etc.). Then, in the body of your pages, you refer to these selectors to activate the styles. For example:

<HTML> <HEAD> <style type="text/css"> B.headline {color:red; font-size:22px; font-family:arial; text-decoration:underline} </style> </HEAD> <BODY> <b>This is normal bold</b><br> <b class="headline">This is headline style bold</b> </BODY> </HTML>

In this case B.headline is the selector. The above example would result in this output:

This is normal bold

This is headline style bold

There are three types of selectors:

HTML selectors Used to define styles associated to HTML tags. (A way to redefine the look of tags) Class selectors Used to define styles that can be used without redefining plain HTML tags. ID selectors Used to define styles relating to objects with a unique ID (most often layers)

Proceed to learn about each of these types...

CSS TUTORIAL 2012


TAG SELECTORS

The general syntax for an HTML selector is: HTMLSelector {Property:Value;} For example:

<HTML> <HEAD> <style type="text/css"> B {font-family:arial; font-size:14px; color:red} </style> </HEAD> <BODY> <b>This is a customized headline style bold</b> </BODY> </HTML>

HTML selectors are used when you want to redefine the general look for an entire HTML tag.

CSS TUTORIAL 2012


CLASS SELECTORS The general syntax for a Class selector is: .ClassSelector {Property:Value;} For example:

<HTML> <HEAD> <style type="text/css"> .headline {font-family:arial; font-size:14px; color:red} </style> </HEAD> <BODY> <b class="headline">This is a bold tag carrying the headline class</b> <br> <i class="headline">This is an italics tag carrying the headline class</i> </BODY> </HTML>

Class selectors are used when you want to define a style that does not redefine an HTML tag entirely. When referring to a Class selector you simply add the class to an HTML tag like in the above example (class="headline").

SPAN and DIV as carriers Two tags are particularly useful in combination with class selectors: <SPAN> and<DIV>. Both are "dummy" tags that don't do anything in themselves. Therefore, they are excellent for carrying CSS styles.

<SPAN> is an "inline-tag" in HTML, meaning that no line breaks are inserted before or after the use of it. <DIV> is a "block tag", meaning that line breaks are automatically inserted to distance the block from the surrounding content (like <P> or <TABLE> tags).

<DIV> has a particular importance for layers. Since layers are separate blocks of information. <DIV> is an obvious choice when defining layers on your pages.

CSS TUTORIAL 2012


ID SELECTORS The general syntax for an ID selector is: #IDSelector {Property:Value;} For example:

<HTML> <HEAD> <style type="text/css"> #layer1 {position:absolute; left:100;top:100; z-Index:0} #layer2 {position:absolute; left:140;top:140; z-Index:1} </style> </HEAD> <BODY> <div ID="layer1"> <table border="1" bgcolor="#FFCC00"><tr><td>THIS IS LAYER 1<br>POSITIONED AT 100,100</td></tr></table> </div> <div ID="layer2"> <table border="1" bgcolor="#00CCFF"><tr><td>THIS IS LAYER 2<br>POSITIONED AT 140,140</td></tr></table> </div> </BODY> </HTML>

ID selectors are used when you want to define a style relating to an object with a unique ID. This selector is most widely used with layers (as in the above example), since layers are always defined with a unique ID.

CSS TUTORIAL 2012


GROUPED SELECTORS Most often selectors will share some of the same styles, for example, being based on the same font. In these cases, rather than defining the font for each and every selector, one by one, you can group them, and thus assign the font to all the selectors at once. Look at this example, made without grouping:

.headlines{ font-family:arial; color:black; background:yellow; font-size:14pt; } .sublines { font-family:arial; color:black; background:yellow; font-size:12pt; } .infotext { font-family:arial; color:black; background:yellow; font-size:10pt; }

As you can see, the only style that varies is the font-size. In the next example we have grouped the selectors, and defined the common styles at once.

.headlines, .sublines, .infotext { font-family:arial; color:black; background:yellow; } .headlines {font-size:14pt;} .sublines {font-size:12pt;} .infotext {font-size: 10pt;}

Less to type, easier to change and guaranteed to be the same for all styles.

CSS TUTORIAL 2012


CONTEXT DEPENDANT SELECTORS

It is possible to make selectors that will only work in certain contexts. For example, you can define a style for the <B> tag that is only triggered if the text is not only bold but also written in italics. For example, the style should be in effect here:

<i><b>example</b></i>

but not here :

<b>example</b>.

THE SYNTAX Simply adding a normal style to the <B> tag is done like this:

B {font-size:16px}

Adding a context dependent style, like the one described above is done like this:

I B {font-size:16px;}

We simply separated the contextual <I> tag from the <B> tag with a space.

USING GROUPED AND CONTEXT DEPENDENT SELECTORS AT THE SAME TIME: It is possible to use context dependent and grouped selectors at the same time. For example, like this:

I B, .headlines, B .sublines {font-size:16px;}

In the example the font-size of 16 pixels is in effect on: 1) All <B> tags enclosed by <I> tags 2) All headlines classes. 3) sublines classes enclosed by <B> tags.

CSS TUTORIAL 2012


WHERE TO PLACE IT

CSS can be added to your pages at 3 different levels. It is possible to create CSS styles that only work for the single tag it is defined for. Single tag CSS is used when the style is used in a single place on the entire site. Usually a certain style appears more than once on your pages, and thus you should use the second technique: adding styles that are defined once for the entire page. If, however, that certain style is used on more than a single page, you should use the third - and most powerful - technique described: adding styles that are defined once for the entire site. The following pages will explain each of these techniques....

CSS TUTORIAL 2012


SINGLE TAGS

CSS can be defined for single tags by simply addingstyle="styledefinition:styleattribute;" to the tags. Look at this example:

It is <b style="font-size:16px;">NOT</b> me.

You should limit your use of single tag CSS. If you define your styles for each and every tag they're used on, you will lose much of the power associated with CSS. For example, you will have to define the style over and over again whenever it's used, rather than just defining it once and then referring to that one definition whenever it's used. Furthermore, if you wanted to change a certain style, you'd have to change it all over in your document, rather than in one place.

CSS TUTORIAL 2012


SINGLE PAGES CSS can be defined for entire pages by simply adding a style definition to the head section. Look at this example:

<html> <head> <title>MY CSS PAGE</title> <style type="text/css"> .headlines, .sublines, infotext {font-face:arial; color:black; background:yellow; font-weight:bold;} .headlines {font-size:14pt;} .sublines {font-size:12pt;} .infotext {font-size: 10pt;} </style> </head> <body> <span class="headlines">Welcome</span><br> <div class="sublines"> This is an example page using CSS.<br> The example is really simple,<br> and doesn't even look good,<br> but it shows the technique. </div> <table border="2"><tr><td class="sublines"> As you can see:<br> The styles even work on tables. </td></tr></table> <hr> <div class="infotext"> Example from EchoEcho.Com. </div> <hr> </body> </html>

In the above example, although we used the sublines style twice, we only had to define it once: in the <head>section.

By defining styles for entire pages, you will gain the freedom to easily change the styles even after the entire page has been made. This is an obvious advantage for you as a designer. But the advantage is on the visitors side as well. Since the styles are only defined in one place, the page size will be smaller, and thus faster to load.

There is a way to emphasize these advantages even more: using external CSS styles that work for entire sites.

CSS TUTORIAL 2012


ENTIRE SITES CSS can be defined for entire sites by simply writing the CSS definitions in a plain text file that is referred to from each of the pages in the site. Rather than writing the entire CSS definition on each page, as in the previous examples, you can write it to a text file that is only loaded on the first page that a visitor sees at your site. When the visitor jumps to other pages, the CSS text file will be cached and thus doesn't have to be transferred via the internet for subsequent pages. This means that your pages will load faster while at the same time you will have extreme flexibility to change the style for your entire site even after it has been made. Look at this example: File: example.html

<html> <head> <title>MY CSS PAGE</title> <link rel=stylesheet href="whatever.css" type="text/css"> </head> <body> <span class="headlines">Welcome</span><br> <div class="sublines"> This is an example of a page using CSS.<br> The example is really simple,<br> and doesn't even look good,<br> but it shows the technique. </div> <table border="2"><tr><td class="sublines"> As you can see:<br> The styles even work on tables. </td></tr></table> <hr> <div class="infotext">Example from EchoEcho.Com.</div> <hr> </body> </html>

The above example is the exact same as we used for CSS defined for entire pages, with one important exception: There is no style definition on the page. Instead we added a reference to an external style sheet:

<link rel=stylesheet href="whatever.css" type="text/css">

This means that the browser will look for a file called whatever.css and insert it at the place where the reference was found in the html document. So in order to complete our example we need to have a file called whatever.css that looks like this: File: whatever.css

.headlines, .sublines, infotext {font-face:arial; color:black; background:yellow; font-weight:bold;} .headlines {font-size:14pt;} .sublines {font-size:12pt;} .infotext {font-size: 10pt;}

CSS TUTORIAL 2012


Now if you just add the line <link rel=stylesheet href="whatever.css" type="text/css"> to the <head> of all your pages, then the one style definition will be in effect for your entire site. Imagine the power and flexibility this gives you to make changes to the layout even after the site is done. But also realize how using an external style sheet will guarantee that all pages are following the same thread. There won't be single pages that you forgot to update when you decided to change the style for your headers.

At this point of the tutorial you should know:

1: how to define styles for tags, classes and objects with ID's. 2: how to group styles and make them context dependent 3: how to add styles to single tags, single pages and entire sites

All we need now is a walkthrough of the various style attributes that can be assigned. We will divide them into three categories:

1: Inline attributes. (Works on tags like: <SPAN>, <B> and <I>). 2: Block attributes. (Works on block tags: <DIV>, <TD> and <P>). 3: Link attributes. (Works on links and use a special syntax).

CSS TUTORIAL 2012


CSS TEXT

CSS 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

Property Values NS IE Example font-family font name

generic font 4+ 4+

4+ 4+

font-family:arial font-family:arial, helvetica

font-style

normal italic oblique

4+ 4+

4+ 4+ 4+

font-style:normal font-style:italic font-style:oblique

font-variant normal small-caps

4+ 4+

font-variant:normal font-variant:small-caps

font-weight

normal bold bolder lighter 100-900

4+ 4+ 4W 4W 4+

4+ 4+ 4+ 4+ 4+

font-weight:normal font-weight:bold font-weight:bolder font-weight:lighter font-weight:250

font-size

normal length length absolute absolute absolute absolute absolute absolute absolute relative relative percentage

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+ 4+

font-size:normal font-size:14px font-size:14pt font-size:xx-small font-size:x-small font-size:small font-size:medium font-size:large font-size:x-large font-size:xx-large font-size:smaller font-size:larger font-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 the font property we 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.

CSS TUTORIAL 2012


TEXT PROPERTIES

Despite the font properties listed above there are some options for defining text properties such as alignments, underlines, etc.

Property Values NS IE Example line-height

normal number length percentage

4W 4+ 4+ 4+

4+ 4P 4+ 4P

line-height:normal line-height:1.5 line-height:22px line-height:150%

text-decoration

none underline overline line-through blink

4+ 4+ 4+ 4+

4M 4+ 4W 4+

text-decoration:none text-decoration:underline text-decoration:overline text-decoration:line-through text-decoration:blink

text-transform

none capitalize uppercase lowercase

4+ 4+ 4+ 4+

4W 4W 4W 4W

text-transform:none text-transform:capitalize text-transform:uppercase text-transform:lowercase

text-align

left right center justify

4+ 4+ 4+ 4+

4+ 4+ 4+ 4W

text-align:left text-align:right text-align:center text-align:justify

text-indent length percentage

4+ 4+

4+ 4+

text-indent:20px; text-indent:10%

white-space normal pre

4+ 4+

white-space:normal white-space:pre


Note: 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 to pre the browser will show all spaces in the text, rather than ignoring all occurrences of more than one space. This is similar to the<pre> tag in plain HTML. Since the white-space is only supported by NS you should use the <pre> tag 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}

CSS TUTORIAL 2012


CSS Colors

CSS 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

Property Values NS IE color <color> 4+ 4+

background-color transparent <color>

4+ 4+

4+ 4+

background-image none url(<URL>)

4+ 4+

4+ 4+

background-repeat

repeat repeat-x repeat-y no-repeat

4+ 4+ 4+ 4+

4+ 4+ 4+ 4+

background-attachment scroll fixed

4+ 4+

background-position

<percentage> <length> top center bottom left right

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

background

<background-color> <background-image> <background-repeat> <background-attachment> <background-position>

4+ 4+ 4+

4+ 4+ 4+ 4+ 4+


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).

CSS TUTORIAL 2012


With CSS you have these options:

Common name You 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 value You 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 value You 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 the BODYselector:

BODY {background-color:#FF6666;}

CSS TUTORIAL 2012


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:

BODY {background-image:url(myimage.gif);}

You can control the repetition of the image with the background-repeatproperty.

background-repeat:repeat Tiles the image until the entire page is filled, just like an ordinary background image in plain HTML. background-repeat:repeat-x Repeats the image horizontally - but not vertically. background-repeat:repeat-y Repeats the image vertically - but not horizontally. background-repeat:no-repeat Does not tile the image at all.

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:

BODY {background-image:url(myimage.gif); background-position: 75px 75px;}

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.

BODY {background-image:url(myimage.gif); background-attachment: fixed;}

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:

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

CSS TUTORIAL 2012


CSS Links

CSS has several options for redefining the style of links.

LINK PROPERTIES

Property Values NS IE

A:link A:visited A:active A:hover

<style> <style> <style> <style>

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:link Defines the style for normal unvisited links. A:visited Defines the style for visited links. A:active Defines the style for active links. A link becomes active once you click on it. A:hover Defines 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. 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

<style type="text/css"> A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {text-decoration: underline; color: red;} </style>

CSS TUTORIAL 2012


Another example would be to create links that are both underlined andoverlined. Example: Underline/Overline

<style type="text/css"> A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {text-decoration: underline overline; color: red;} </style>

A third example would be to create links that change in size when hovered. Example: Size changing links

<style type="text/css"> A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {font-size:24; font-weight:bold; color: red;} </style>

A final example would be to create links that have a permanent background color, obviously standing out from the rest. Example: Background colored links

<style type="text/css"> A: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;} </style>

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.

CSS TUTORIAL 2012


For example:

<html> <head> <style type="text/css"> .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;} </style> </head> <body> ONE TYPE OF LINKS <br> <span class="class1"> <a href="http://www.yahoo.com">YAHOO</a> <br> <a href="http://www.google.com">GOOGLE</a> </span> <br> <br> ANOTHER TYPE OF LINKS <br> <span class="class2"> <a href="http://www.yahoo.com">YAHOO</a> <br> <a href="http://www.google.com">GOOGLE</a> </span> </body> </html>

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 TUTORIAL 2012


CSS Lists

CSS allows you to customize the lists that can be made with 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

Property Values NS IE

list-style type

disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none

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

4W 4W 4W 4W 4W 4W 4W 4W 4W

list-style image none url(<url>)

4W 4W

list-style position outside inside

4W 4W

list-style <list-style type> <list style position> <list-style image>

4W 4W 4w

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:

list-style type Defines the look of the bullets used in your list. list-style image Let's you use a custom graphic for bullets. list-style position Often the text in a list is longer than one line. list-style position:outer lets the second line align with the first line. That is: the bullet is to the left of both lines. list-style position:inner lets the second line align with the bullet.

CSS TUTORIAL 2012


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:

<html> <head> <style type="text/css"> LI.list1 {list-style: circle outside; color:green;} LI.list2 {list-style: square inside; color:blue} .blacktext {color:black} </style> </head> <body> <ul> <li class="list1"><span class="blacktext">This is one black line</span> <li class="list1">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. </ul> <br> <br> <ul> <li class="list2"><span class="blacktext">This is one black line</span> <li class="list2">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. </ul> </body> </html>

The lists from the above example would look like this:

o This is one black line o 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.

CSS TUTORIAL 2012


CSS LAYERS

With 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 1

LAYER 2 LAYER 2 ON TOP:

LAYER 1

LAYER 2 Second look at the code:

LAYER 1 ON TOP: <div style="position:relative; font-size:50px; z-index:2;">LAYER 1</div> <div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:1">LAYER 2</div> LAYER 2 ON TOP: <div style="position:relative; font-size:50px; z-index:3;">LAYER 1</div> <div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:4">LAYER 2</div>

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.

CSS TUTORIAL 2012


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:absolute If 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:relative If 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 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.

CSS TUTORIAL 2012


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:

<div style="position:relative; visibility:hidden;">HELLO!!!</div>

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.

CSS TUTORIAL 2012


CSS Cursors

Microsoft 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

Look Values Look NS IE Example

default TEST 6+ 4+ cursor:default

crosshair TEST 6+ 4+ cursor:crosshair

hand TEST 4+ cursor:hand

pointer TEST 6+ cursor:pointer

Cross browser TEST 4+ cursor:pointer;cursor:hand

move TEST 6+ 4+ cursor:move

text TEST 6+ 4+ cursor:text

wait TEST 6+ 4+ cursor:wait

help TEST 6+ 4+ cursor:help

n-resize TEST 6+ 4+ cursor:n-resize

ne-resize TEST 6+ 4+ cursor:ne-resize

e-resize TEST 6+ 4+ cursor:e-resize

se-resize TEST 6+ 4+ cursor:se-resize

s-resize TEST 6+ 4+ cursor:s-resize

sw-resize TEST 6+ 4+ cursor:sw-resize

w-resize TEST 6+ 4+ cursor:w-resize

nw-resize TEST 4+ 4+ cursor:nw-resize

progress TEST 6+ cursor:progress

CSS TUTORIAL 2012


not-allowed TEST 6+ cursor:not-allowed

no-drop TEST 6+ cursor:no-drop

vertical-text TEST 6+ cursor:vertical-text

all-scroll TEST 6+ cursor:all-scroll

col-resize TEST 6+ cursor:col-resize

row-resize TEST 6+ cursor:row-resize

cursor:url(uri) TEST 6+ 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:

<html> <head> <style type="text/css"> .xlink {cursor:crosshair} .hlink{cursor:help} </style> </head> <body> <b> <a href="mypage.htm" class="xlink">CROSS LINK</a> <br> <a href="mypage.htm" class="hlink">HELP LINK</a> </b> </body> </html>

The links from the above example would look like this:

CROSS LINK

HELP LINK

CSS TUTORIAL 2012


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:

<html> <head> <style type="text/css"> body {cursor:crosshair} </style> </head> <body> <b> SOME TEXT <br> <a href="mypage.htm">ONE LINK</a> <br> <a href="mypage.htm">ANOTHER LINK</a> </b> </body> </html>

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:

<html> <head> <style type="text/css"> .xlink A{cursor:crosshair} .hlink A{cursor:help} </style> </head> <body> <b> <span class="xlink"> <a href="mypage.htm">CROSS LINK 1</a><br> <a href="mypage.htm">CROSS LINK 2</a><br> <a href="mypage.htm">CROSS LINK 3</a><br> </span> <br> <span class="hlink"> <a href="mypage.htm">HELP LINK 1</a><br> <a href="mypage.htm">HELP LINK 2</a><br> <a href="mypage.htm">HELP LINK 3</a><br> </span> </b> </body> </html>

CSS TUTORIAL 2012


css tutorial 2012

Technology