CSS Tutorial v1 [New commers]

Discussion in 'CSS' started by Ratchet, Aug 1, 2008.

0
  1. #1
    Please REP me if you like..

    Hey, I am writing a tutorial on the language CSS. CSS is an awesome Add-on to xHTML as it improves and makes the designs look more stylish.

    There are two types of CSS, Internal and External. I will be focusing on External as it communicates to your xHTML document from another Sheet.

    To assign CSS to xHTML is recommended that you know one of the most important codes in your arsenal. The DIV code. In your document it looks like this.

      <div id= “div1”>        Info to be used in External Sheet Here         </div>
    Code (markup):
    That code calls forth a <div> on some text and it has assigned it an ID of “div1”.

    Its very simple to understand the concept. Now open two text documents. Name the first one, index.html and the second one, style.css.

    Now simply start your normal xHTML document like this:

     <?xml version = "1.0" encoding = "UTF-8"?>
    Code (markup):
    
<!DOCTYPE html public "//WSC//DTD xhtml 1.0 transition //EN"
http://www.w3.org/1999/xhtml">
<html xmls = "http://www.w3.org/1999/xhtml">
<head>
<meta name = "Keywords" content = "vehq, xhtml, css"/>
<meta http-equiv = "content-type" content = "test/html:charset = "HTF-81"/>
<meta name = "author" content = "Vinny"/>
<link rel="stylesheet" type="text/css" href="style.css" />
<title> Virtual Engines CSS </title>
    Code (markup):
    Now add anything you want to…. When you are done, after the <body> tag add this, add the following code.

     <div id= “hi”>
    Code (markup):
    and after the text add this [/code]</div>

    Now open your style.css and add this.

    

#hi {
Color:red;
font-family: Georgia, "Times New Roman", Times, serif;

Now Save and watch the differences!

That’s Tutorial one of CSS written by Ratchet...
    Code (markup):
     
    Ratchet, Aug 1, 2008 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    One 'problem' I see here : XML prolog throws IE back into quirks mode - at which point you might as well not even BOTHER with a doctype.

    Apart from that - If you're going to talk CSS, first up you should talk media types. Usually you're better off feeding no stylesheet to other devices than you are the one meant for screen.

    Before you wade into setting things discussing the difference between an ID and a CLASS would be a good start - and discussing the PROPER use of classnames (in other words non-cryptic and non-presentational) and separation of presentation from content would avoid people doing stupid things like class="left clearfix bigfonts" which defeat the point of CSS in the first place.
     
    deathshadow, Aug 2, 2008 IP