@@ -12,11 +12,11 @@ |
|
For example
|
|
-{code source=Html4Strict}
|
+{code ()} |
<HTML>
|
<HEAD>
|
<style type="text/css">
|
- B.headline (color:red; font-size:22px; font-family:arial; text-decoration:underline)
|
+ B.headline {color:red; font-size:22px; font-family:arial; text-decoration:underline} |
</style>
|
</HEAD>
|
|
|
|
@@ -41,11 +41,13 @@ |
For CSS to work in one single page it must be placed in the correct place.
|
It must be placed in the <HEAD> area in between style tags as below.
|
|
-~~red:<HEAD>
|
-<STYLE type="text/css">
|
-CSS selectors
|
-</STYLE>
|
-</HEAD>~~
|
+{code ()} |
+<HEAD> |
+ <STYLE type="text/css"> |
+ CSS selectors |
+ </STYLE> |
+</HEAD> |
+{code} |
|
There are three types of selectors:
|
|
|
|
@@ -68,16 +70,18 @@ |
|
Example:
|
|
-~~red:<HTML>
|
-<HEAD>
|
-<style type="text/css">
|
-B {font-family:arial; font-size:14px; color:red}
|
-</style>
|
-</HEAD>
|
-<BODY>
|
-<b>This is our customised bold HTML tag style</b>
|
-</BODY>
|
-<HTML>~~
|
+{code ()} |
+<HTML> |
+ <HEAD> |
+ <style type="text/css"> |
+ B {font-family:arial; font-size:14px; color:red} |
+ </style> |
+ </HEAD> |
+ <BODY> |
+ <b>This is our customised bold HTML tag style</b> |
+ </BODY> |
+<HTML> |
+{code} |
|
We have essentially altered the BOLD HTML tag for this whole page.
|
|
|
|
@@ -91,18 +95,20 @@ |
|
Example:
|
|
-~~red:<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 HTML tag style with the headline style</b>
|
-<br>
|
-<i class="headline">This is an italics HTML tag style with the headline style</i>
|
-</BODY>
|
-<HTML>~~
|
+{code ()} |
+<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 HTML tag style with the headline style</b> |
+ <br> |
+ <i class="headline">This is an italics HTML tag style with the headline style</i> |
+ </BODY> |
+<HTML> |
+{code} |
|
This time we have created a "headline" class that can apply a certain style to any existing HTML tag.
|
|
|
|
@@ -140,25 +146,32 @@ |
|
Example:
|
|
-~~red:<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 layer1<br>positioned at 100,100</td></tr></table>
|
-</DIV>
|
-
|
-<DIV ID="layer2">
|
-<table border="1" bgcolor="#00CCFF"><tr><td>This is layer2<br>positioned at 140,140</td></tr></table>
|
-</DIV>
|
-
|
-</BODY>
|
-<HTML>~~
|
+{code ()} |
+<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 layer1<br>positioned at 100,100</td> |
+ </tr> |
+ </table> |
+ </DIV> |
+ <DIV ID="layer2"> |
+ <table border="1" bgcolor="#00CCFF"> |
+ <tr> |
+ <td>This is layer2<br>positioned at 140,140</td> |
+ </tr> |
+ </table> |
+ </DIV> |
+ </BODY> |
+<HTML> |
+{code} |
|
---
|
|
|
|