@@ -12,21 +12,21 @@ |
|
For example
|
|
-~~red:<HTML>
|
-<HEAD>
|
-<style type="text/css">
|
-B.headline (color:red; font-size:22px; font-family:arial; text-decoration:underline)
|
-</style>
|
+{code ()} |
+<HTML> |
+ <HEAD> |
+ <style type="text/css"> |
+ B.headline {color:red; font-size:22px; font-family:arial; text-decoration:underline} |
+ </style> |
+ </HEAD> |
|
-</HEAD>
|
+ <BODY> |
+ <b>this is normal bold</b><br> |
+ <b class="headline">This is headline style bold</b> |
+ </BODY> |
+</HTML> |
+{code} |
|
-<BODY>
|
-<b>this is normal bold</b><br>
|
-<b class="headline">This is headline style bold</b>
|
-</BOLD>
|
-
|
-</HTML>
|
-~~
|
In the example above, the selector is B.headline
|
B as in the HTML tag <b><b/>
|
.headline is the class associated with the B HTML tag
|
|
|
@@ -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} |
|
---
|
|
|
|