TWSupport-Smooth,Clean Support


    CSS Quick Tutorial

    Share
    avatar
    Placehold
    TWS Manager
    TWS Manager

    Age : 33
    Number of posts : 730
    Registration date : 2008-04-15
    Computer Specs : Windows Vista home premium :: Intel(R) Core(TM) Duo CPU
    Additional Specs : T7250 @ 2.00GHz :: 4.00 GD RAM :: NVIDIA GeForce 8400M GT

    CSS Quick Tutorial

    Post by Placehold on Sat May 10, 2008 5:12 pm

    CSS stands for Cascading Style Sheets and is made up of style rules that tell a browser how to present a document.
    There are various ways of linking these style rules to your HTML documents, but the simplest method for starting out is to use HTML's STYLE element.
    This element is placed in the document HEAD, and it contains the style rules for the page.

    Each rule is made up of a selector--usually an HTML element such as BODY, P, or EM--and the style to be applied to the selector.
    There are numerous properties that may be defined for an element. Each property takes a value, which together with the property describes how the selector should be presented.
    Style rules are formed as follows:

    selector { property: value }

    Multiple style declarations for a single selector may be separated by a semicolon:

    selector { property1: value1; property2: value2 }

    As an example, the following code segment defines the color and font-size properties for H1 and H2 elements:

    <HEAD>
    <TITLE>CSS Example</TITLE>
    <STYLE TYPE="text/css">
    H1 { font-size: x-large; color: red }
    H2 { font-size: large; color: blue }
    </STYLE>
    </HEAD>


    The above style sheet tells the browser to show level-one headings in an extra-large, red font, and to show level-two headings in a large, blue font. The CSS1 Specification formally defines all properties and values available.

    This tutorial is intended as a very basic introduction to Cascading Style Sheets and should provide enough information to allow you to experiment with a few of your own styles.

    Here is an example of a live code using Markup and CSS

    Code:
    <!-- Put IE into quirks mode -->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> Placehold </title>
    <style type="text/css">
    html {
    height:100%;
    max-height:100%;
    padding:0;
    margin:0;
    border:0;
    background:#fff;
    font-size:85%;
    font-family:"times new roman", serif;
    /* hide overflow:hidden from IE5/Mac */
    /* \*/
    overflow: hidden;
    /* */
    }

    body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}


    #content {overflow:auto; position:absolute; z-index:3; top:100px; bottom:50px; left:200px; right:0; background:#eee;}

    * html #content {top:0; left:0; right:0; bottom:0; height:100%; max-height:100%; width:100%; overflow:auto; position:absolute; z-index:3; border-top:100px solid #fff; border-bottom:50px solid #fff; border-left:200px solid #fff;}


    #head {position:absolute; margin:0; top:0; left:0; display:block; width:100%; height:100px; background:url(http://i28.tinypic.com/2vkxgk3.gif) #53829d; border-bottom:4px solid #000000; background-position:0 0; background-repeat:no-repeat; font-size:4em; z-index:5; overflow:hidden; color:#fff;}

    #foot {position:absolute; margin:0; bottom:0; left:0; display:block; width:100%; height:50px; font-size:1em; z-index:5; overflow:hidden; background:#53829d; border-top:5px solid #000000; color:#fff;}


    #left {position:absolute; left:0; top:100px; bottom:50px; width:200px; background:url(http://i32.tinypic.com/2l9r5nl.jpg) #73a2bd; font-size:1.2em; z-index:4; overflow:auto; background-repeat:no-repeat;}

    * html #left {height:100%; top:0; bottom:0; border-top:100px solid #fff; border-bottom:50px solid #fff; color:#fff;}

    #content p {padding:10px;}
    .bold {font-size:1.2em; font-weight:bold;}

    dd {display:none;}
    a.nav, a.nav:visited {margin-left:50px; display:block; width:100px; height:25px; background:#aaa; color:#eee; border:1px solid #000; text-decoration:none; text-align:center; line-height:25px;}
    a.nav:hover {background:#000; color:#fff;}


    </style>
    </head>

    <body>
    <div id="head">&nbsp;</div>
    <div id="foot">&nbsp;&copy;2006/2007 Placehold Web Design

    <li>&nbsp;&nbsp;<a href="http://validator.w3.org/check?uri=referer"><img
            src="http://www.w3.org/Icons/valid-xhtml10"
            alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" /></a>

        <a href="http://validator.w3.org/check?uri=referer"><img
            src="http://www.w3.org/Icons/valid-xhtml10-blue"
            alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" /></a>


    </div>

      Current date/time is Wed Aug 22, 2018 12:09 am