Difference between revisions of "CSS"

From Wikicliki
Jump to: navigation, search
Line 1: Line 1:
 
if your browser is strictly css compliant you will see the smiley face in the Acid 2 test: http://www.webstandards.org/files/acid2/test.html#top
 
if your browser is strictly css compliant you will see the smiley face in the Acid 2 test: http://www.webstandards.org/files/acid2/test.html#top
  
# link your css externally:
+
# link your css externally:<br>
#* <link rel="stylesheet" TYPE="text/css" href="file.css">
+
<code><link rel="stylesheet" TYPE="text/css" href="file.css"></code>
 
# html versions:
 
# html versions:
 
#* 4.01 strict - means that things like font and link attributes on body and old markup will be removed. use css as well:<br> <code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></code>
 
#* 4.01 strict - means that things like font and link attributes on body and old markup will be removed. use css as well:<br> <code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></code>
Line 14: Line 14:
 
#* class attribute - fullstop selector
 
#* class attribute - fullstop selector
 
#* id attribute - hash selector
 
#* id attribute - hash selector
#* can combine multiple class and id attributes - nospaces between them.
+
#* can combine multiple class and id attributes - no spaces between them. eg .thing.stuff {xx:xx} will select something with <code><div class=thing><p class=stuff>#</p></div></code>

Revision as of 15:05, 16 September 2008

if your browser is strictly css compliant you will see the smiley face in the Acid 2 test: http://www.webstandards.org/files/acid2/test.html#top

  1. link your css externally:

<link rel="stylesheet" TYPE="text/css" href="file.css">

  1. html versions:
    • 4.01 strict - means that things like font and link attributes on body and old markup will be removed. use css as well:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    • 4.01 transitional - means that some things like font will be deprecated but others wont. ie: its like saying you can use it now but in later html versions its totally gonna be depreciated. was created in period when css support was not so consistent for all and so had to accept some less strict html 4.01.
  2. validate your html after that:
  3. hide your code from older browsers by commenting it out cos ancient browsers display it as a html mess
  4. use external whereever possible, inline only for small impt bits
  5. class and ids
    • class attribute - fullstop selector
    • id attribute - hash selector
    • can combine multiple class and id attributes - no spaces between them. eg .thing.stuff {xx:xx} will select something with

      #