Part 1

These or some advanced CSS stuff. Please read the basic CSS topic before you start this one.


CSS Dimension Properties

The CSS dimension properties allow you to control the height and width of an element. It also allows you to increase the space between two lines.

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Code:

Property      Description      Values      IE      F      N      W3C
height    Sets the height of an element    auto
length
%    4    1    6    1
line-height    Sets the distance between lines    normal
number
length
%    4    1    4    1
max-height    Sets the maximum height of an element    none
length
%    -    1    6    2
max-width    Sets the maximum width of an element    none
length
%    -    1    6    2
min-height    Sets the minimum height of an element    length
%    -    1    6    2
min-width    Sets the minimum width of an element    length
%    -    1    6    2
width    Sets the width of an element    auto
%
length      4    1    4    1

Part 2


SS Classification Properties

The CSS classification properties allow you to control how to display an element, set where an image will appear in another element, position an element relative to its normal position, position an element using an absolute value, and how to control the visibility of an element.

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Code:

Property      Description      Values      IE      F      N      W3C
clear    Sets the sides of an element where other floating elements are not allowed    left
right
both
none    4    1    4    1
cursor    Specifies the type of cursor to be displayed    url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help    4    1    6    2
display    Sets how/if an element is displayed    none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption    4    1    4    1
float    Sets where an image or a text will appear in another element    left
right
none    4    1    4    1
position    Places an element in a static, relative, absolute or fixed position    static
relative
absolute
fixed    4    1    4    2
visibility    Sets if an element should be visible or invisible    visible
hidden
collapse    4    1    6    2

Part 3


CSS Positioning Properties

The CSS positioning properties allow you to specify the left, right, top, and bottom position of an element. It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element's content is too big to fit in a specified area.

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Code:

Property      Description      Values      IE      F      N      W3C
bottom    Sets how far the bottom edge of an element is above/below the bottom edge of the parent element    auto
%
length    5    1    6    2
clip    Sets the shape of an element. The element is clipped into this shape, and displayed    shape
auto    4    1    6    2
left    Sets how far the left edge of an element is to the right/left of the left edge of the parent element    auto
%
length    4    1    4    2
overflow
    Sets what happens if the content of an element overflow its area    visible
hidden
scroll
auto    4    1    6    2
position    Places an element in a static, relative, absolute or fixed position    static
relative
absolute
fixed    4    1    4    2
right    Sets how far the right edge of an element is to the left/right of the right edge of the parent element    auto
%
length    5    1    6    2
top    Sets how far the top edge of an element is above/below the top edge of the parent element    auto
%
length    4    1    4    2
vertical-align    Sets the vertical alignment of an element    baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%    4    1    4    1
z-index    Sets the stack order of an element    auto
number    4    1    6    2

Part 4


Syntax

The syntax of pseudo-classes:

Code:

selector:pseudo-class {property: value}

CSS classes can also be used with pseudo-classes:

Code:

selector.class:pseudo-class {property: value}

Anchor Pseudo-classes

A link that is active, visited, unvisited, or when you mouse over a link can all be displayed in different ways in a CSS-supporting browser:

Code:

a:link {color: #FF0000}    /* unvisited link */
a:visited {color: #00FF00}  /* visited link */
a:hover {color: #FF00FF}  /* mouse over link */
a:active {color: #0000FF}  /* selected link *

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

Note: Pseudo-class names are not case-sensitive.


Pseudo-classes and CSS Classes

Pseudo-classes can be combined with CSS classes:

Code:

a.red:visited {color: #FF0000}

<a class="red" href="css_syntax.asp">CSS Syntax</a>

CSS2 - The :first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the first child of another element.

Code:

In this example, the selector matches  any p element that is the first child of a div element, and indents the first paragraph inside a div element:

div > p:first-child
{
text-indent:25px
}

This selector will match the first paragraph inside the div in the following HTML:

<div>
<p>
First paragraph in div.
This paragraph will be indented.
</p>
<p>
Second paragraph in div.
This paragraph will not be indented.
</p>
</div>

but it will not match the paragraph in this HTML:

<div>
<h1>Header</h1>
<p>
The first paragraph inside the div.
This paragraph will not be indented.
</p>
</div>

Code:

n this example, the selector matches  any em element that is the first child of a p element, and sets the font-weight to bold for the first em inside a p element:

p:first-child em
{
font-weight:bold
}

For example, the em in the HTML below is the first child of the paragraph:

<p>I am a <em>strong</em> man.</p>

Code:

In this example, the selector matches  any a element that is the first child of any element, and sets the text-decoration to none:

a:first-child
{
text-decoration:none
}

For example, the first a in the HTML below is the first child of the paragraph and will not be underlined. But the second a in the paragraph is not the first child of the paragraph and will be underlined:

<p>
Visit <a href="http://www.google.com">Google</a>
and learn CSS!
Visit <a href="http://www.google.com">Google</a>
and learn HTML!
</p>

CSS2 - The :lang Pseudo-class

The :lang pseudo-class allows you to define special rules for different languages. In the example below, the :lang class defines the type of quotation marks for q elements with a lang attribute with a value of "no":

Code:

<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>

</html>

Pseudo-classes

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Code:

Pseudo-class      Purpose      IE      F      N      W3C
:active    Adds special style to an activated element    4    1    8    1
:focus    Adds special style to an element while the element has focus    -    1.5    8    2
:hover    Adds special style to an element when you mouse over  it    4    1    7    1
:link    Adds special style to an unvisited link    3    1    4    1
:visited    Adds special style to a visited link    3    1    4    1
:first-child    Adds special style to an element that is the first child of some other element    7    1    7    2
:lang    Allows the author to specify a language to use in a specified element    -    1    8    2

Part 5


Syntax

The syntax of pseudo-elements:

Code:

selector:pseudo-element {property: value}

CSS classes can also be used with pseudo-elements:

Code:

selector.class:pseudo-element {property: value}

The :first-line Pseudo-element

The "first-line" pseudo-element is used to add special styles to the first line of the text in a selector:

Code:

p:first-line {color:#0000ff;font-variant:small-caps}

<p>Some text that ends up on two or more lines</p>

In the example above the browser displays the first line formatted according to the "first-line" pseudo element. Where the browser breaks the line depends on the size of the browser window.

Note: The "first-line" pseudo-element can only be used with block-level elements.

Note: The following properties apply to the "first-line" pseudo-element:

* font properties
* color properties
* background properties
* word-spacing
* letter-spacing
* text-decoration
* vertical-align
* text-transform
* line-height
* clear

The :first-letter Pseudo-element

The "first-letter" pseudo-element is used to add special style to the first letter of the text in a selector:

Code:

p:first-letter {color:#ff0000;font-size:xx-large}

<p>The first words of an article...</p>

Note: The "first-letter" pseudo-element can only be used with block-level elements.

Note: The following properties apply to the "first-letter" pseudo- element:

* font properties
* color properties
* background properties
* margin properties
* padding properties
* border properties
* text-decoration
* vertical-align (only if 'float' is 'none')
* text-transform
* line-height
* float
* clear



Pseudo-elements and CSS Classes

Pseudo-elements can be combined with CSS classes:

Code:

p.article:first-letter {color:#ff0000}

<p class="article">A paragraph in an article</p>

The example above will make the first letter of all paragraphs with class="article" red.
Multiple Pseudo-elements

Several pseudo-elements can be combined:

Code:

p:first-letter {color:#ff0000;font-size:xx-large}
p:first-line {color:#0000ff}

<p>The first words of an article...</p>

In the example above the first letter of the paragraph will be red with a font size of 24pt. The rest of the first line would be blue while the rest of the paragraph would be the default color.
CSS2 - The :before Pseudo-element

The ":before" pseudo-element can be used to insert some content before an element.

The style below will play a sound before each occurrence of an

element:

Code:

h1:before
{
content: url(beep.wav)
}

CSS2 - The :after Pseudo-element

The ":after" pseudo-element can be used to insert some content after an element.

The style below will play a sound after each occurrence of an

element:

Code:

h1:after
{
content: url(beep.wav)
}

Pseudo-elements

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Code:

Pseudo-element      Purpose      IE      F      N      W3C
:first-letter    Adds special style to the first letter of a text    5    1    8    1
:first-line    Adds special style to the first line of a text    5    1    8    1
:before    Inserts some content before an element          1.5    8    2
:after    Inserts some content after an element          1.5    8    2

Part 6

Image Gallery


The source code for an CSS image gallery looks like this:

Code:

<html>
<head>
<style type="text/css">
div.img
  {
  margin: 2px;
  border: 1px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
  }
div.img img
  {
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
  }
div.img a:hover img
  {
  border: 1px solid #0000ff;
  }
div.desc
  {
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
  }
</style>
</head>
<body>

<div class="img">
  <a target="_blank" href="klematis_big.htm">
  <img src="klematis_small.jpg" alt="Klematis" width="110"
  height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis2_big.htm">
  <img src="klematis2_small.jpg" alt="Klematis" width="110"
  height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis3_big.htm">
  <img src="klematis3_small.jpg" alt="Klematis" width="110"
  height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis4_big.htm">
  <img src="klematis4_small.jpg" alt="Klematis" width="110"
  height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

Part 7
Example 1 - Creating a Transparent Image


Look at the following source code:

Code:

<img src="klematis.jpg" width="150" height="113" alt="klematis"
style="-moz-opacity:0.4;filter:alpha(opacity=40) />

Mozilla uses the property -moz-opacity:x for transparency, while IE uses filter:alpha(opacity=x).

Tip: The CSS3 syntax for transparency is opacity:x. However, this syntax is currently only supported by the Safari browser.

In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower value makes the element more transparent.

In Mozilla (-moz-opacity:x) x can be a value from 0.0 - 1.0. A lower value makes the element more transparent (The same things goes for the CSS3-valid syntax opacity:x).
Example 2 - Image Transparency - Mouseover Effect


The source code looks like this:

Code:

<img src="klematis.jpg" width="150" height="113" alt="klematis"
style="-moz-opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40" />

<img src="klematis2.jpg" width="150" height="113" alt="klematis"
style="-moz-opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40" />

We see that the first two lines of the source code is similar to the source code in Example 1. In addition, we have added an onmouseover attribute and an onmouseout attribute. The onmouseover attribute defines what will happen when the mouse pointer moves over the image. In this case we want the image to NOT be transparent when we move the mouse pointer over it.

The syntax for this in Mozilla is: this.style.MozOpacity=1 and the syntax in IE is: this.filters.alpha.opacity=100.

When the mouse pointer moves away from the image, we want the image to be transparent again. This is done in the onmouseout attribute.
Example 3 - Text in Transparent Box

The source code looks like this:

Code:

<html>
<head>
<style type="text/css">
div.background
  {
  width: 500px;
  height: 250px;
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
  }
div.transbox
  {
  width: 400px;
  height: 180px;
  margin: 30px 50px;
  background-color: #ffffff;
  border: 1px solid black;
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
  /* for Mozilla */
  -moz-opacity:0.6;
  }
div.transbox p
  {
  margin: 30px 40px;
  font-weight: bold;
  color: #000000;
  }
</style>
</head>

<body>

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

</body>
</html>

First, we create a div element (class="background") with a fixed height and width, a background image, and a border. Then we create a smaller div (class="transbox") inside the first div element. This div also have a fixed width, a background image, and a border. In addition we make this div transparent. Notice that we have added three different syntaxes for the transparency.

Inside the transparent div, we add some text inside a p element.

Part 8

Media Types allow you to specify how documents will be presented in different media. The document can be displayed differently on the screen, on the paper, with an aural browser, etc.
Media Types

Some CSS properties are only designed for a certain media. For example the "voice-family" property is designed for aural user agents. Some other properties can be used for different media types. For example, the "font-size" property can be used for both screen and print media, but perhaps with different values. A document usually needs a larger font-size on a screen than on paper, and sans-serif fonts are easier to read on the screen, while serif fonts are easier to read on paper.
The @media Rule

The @media rule allows different style rules for different media in the same style sheet.

The style in the example below tells the browser to display a 14 pixels Verdana font on the screen. But if the page is printed, it will be in a 10 pixels Times font. Notice that the font-weight is set to bold, both on screen and on paper:

Code:

<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif; font-size:14px}
}

@media print
{
p.test {font-family:times,serif; font-size:10px}
}

@media screen,print
{
p.test {font-weight:bold}
}
</style>
</head>

<body>

....

</body>
</html>

Different Media Types

Note: The media type names are not case-sensitive.

Code:

Media Type      Description
all    Used for all media type devices
aural    Used for speech and sound synthesizers
braille    Used for braille tactile feedback devices
embossed    Used for paged braille printers
handheld    Used for small or handheld devices
print    Used for printers
projection    Used for projected presentations, like slides
screen    Used for computer screens
tty    Used for media using a fixed-pitch character grid, like teletypes and terminals
tv    Used for television-type devices

Part 9

CSS Summary

This tutorial has taught you how to create style sheets to control the style and layout of multiple web sites at once.

You have learned how to use CSS to add backgrounds, format text, add and format borders, and specify padding and margins of elements.

You have also learned how to position an element, control the visibility and size of an element, set the shape of an element, place an element behind another, and to add special effects to some selectors, like links.


Now You Know CSS, What's Next?

The next step is to learn JavaScript.

JavaScript

JavaScript can make your web site more dynamic.

A static web site is nice when you just want to show flat content, but a dynamic web site can react to events and allow user interaction.

JavaScript is the most popular scripting language on the internet and it works with all major browsers.