Css tutorial 2012

2012
CSS TUTORIAL

Mr.D.S.Kiran
D.S.Technologies

CSS TUTORIAL 2012

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!

2 Contact the Author At: informtods@gmail.com

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>



</table>

With CSS (assuming that a selector called subtext is defined)
<table>
<tr><td class="subtext">this is line 1</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>
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>
.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>
#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 {
}

.infotext {
}

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.

<html>
<head>
<title>MY CSS PAGE</title>
.headlines, .sublines, infotext {font-face:arial; color:black; background:yellow;
font-weight:bold;}
</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.

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;}


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 4+ 4+ font-family:arial
generic font 4+ 4+ font-family:arial, helvetica

font-style normal 4+ 4+ font-style:normal
italic 4+ 4+ font-style:italic
oblique 4+ font-style:oblique

font-variant normal 4+ font-variant:normal
small-caps 4+ font-variant:small-caps

font-weight normal 4+ 4+ font-weight:normal
bold 4+ 4+ font-weight:bold
bolder 4W 4+ font-weight:bolder
lighter 4W 4+ font-weight:lighter
100-900 4+ 4+ font-weight:250

font-size normal 4+ 4+
font-size:normal
length 4+ 4+ font-size:14px
length 4+ 4+ font-size:14pt
absolute 4+ 4+ font-size:xx-small
absolute 4+ 4+ font-size:x-small
absolute 4+ 4+ font-size:small
absolute 4+ 4+ font-size:medium
absolute 4+ 4+ font-size:large
absolute 4+ 4+ font-size:x-large
absolute 4+ 4+ font-size:xx-large
font-size:smaller
relative 4+ 4+
font-size:larger
relative 4+ 4+ font-size:75%
percentage 4+ 4+

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 4W 4+ line-height:normal
number 4+ 4P line-height:1.5
length 4+ 4+ line-height:22px
percentage 4+ 4P line-height:150%

text-decoration none 4+ 4M
text-decoration:none
underline 4+ 4+ text-decoration:underline
overline 4W text-decoration:overline
line-through 4+ 4+ text-decoration:line-through
text-decoration:blink
blink 4+
text-transform none 4+ 4W text-transform:none
capitalize 4+ 4W text-transform:capitalize
uppercase 4+ 4W text-transform:uppercase
text-transform:lowercase
lowercase 4+ 4W
text-align left 4+ 4+ text-align:left
right 4+ 4+ text-align:right
center 4+ 4+ text-align:center
justify 4+ 4W text-align:justify

text-indent length 4+ 4+ text-indent:20px;
percentage 4+ 4+ text-indent:10%

white-space normal 4+ white-space:normal
pre 4+ 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 4+ 4+
<color> 4+ 4+
none 4+ 4+
background-image
url(<URL>) 4+ 4+
repeat 4+ 4+
repeat-x 4+ 4+
background-repeat
repeat-y 4+ 4+
no-repeat 4+ 4+
scroll 4+
background-attachment
fixed 4+
<percentage> 4+
<length> 4+
top 4+
background-position center 4+
bottom 4+
left 4+
right 4+
<background-color> 4+ 4+
<background-image> 4+ 4+
background <background-repeat> 4+ 4+
<background-attachment> 4+
<background-position> 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.


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

A:link <style> 4+ 4+
A:visited <style> 4+ 4+
A:active <style> 4+ 4+
A:hover <style> 6+ 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
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
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
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

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>
.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
disc 4+ 4W
circle 4+ 4W
square 4+ 4W
decimal 4+ 4W
list-style type lower-roman 4+ 4W
upper-roman 4+ 4W
lower-alpha 4+ 4W
upper-alpha 4+ 4W
none 4W

list-style image
none 4W
url(<url>) 4W
outside 4W
list-style position
inside 4W
<list-style type> 4W
list-style <list style position> 4W
<list-style image> 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>
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>
.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>
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>
.xlink A{cursor:crosshair}
.hlink A{cursor:help}
</style>
</head>

<body>
<b>
<span class="xlink">
<a href="mypage.htm">CROSS LINK 1</a><br>
</span>
<br>
<span class="hlink">
<a href="mypage.htm">HELP LINK 1</a><br>
</span>
</b>
</body>
</html>


CSS TUTORIAL 2012


Css tutorial 2012

Recommended

More Related Content

What's hot (18)

Viewers also liked (20)

Similar to Css tutorial 2012 (20)

Recently uploaded (20)

Css tutorial 2012