What is basic css coding??

Discussion in 'CSS' started by tptnyc, Jun 25, 2007.

0
  1. #1
    From Newbie, Where can I find basic css coding for menu items and how do I create the css page? I have made simple Home Page with html and would like to add css to menu items and other texts.
     
    tptnyc, Jun 25, 2007 IP
  2. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #2
    http://css.maxdesign.com.au/listamatic/

    The above link is a very good resource, you should start from there.

    Here's a page I created for you to test out how menus work.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>My First CSS Page</title>
    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
    </head>

    <body>

    <ul id="menu">
    <li class="active"><a href="#">home</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">thoughts</a></li>
    </ul>

    </body>
    </html>

    The CSS is external, meaning its a seperate file and the way we get the styles is by using the <link> element in the <HEAD> section.

    <link rel="stylesheet" type="text/css" href="main.css" media="screen">

    The relationship is a stylesheet, the (mime) type is TEXT/CSS, the CSS file is located in the same directory under the filename "main.css" and the MEDIA type is SCREEN.

    Your stylesheet contains all the rules for your website/webpage.

    Here's the one I made:

    * { margin:0; padding:0; font-size:100%; }

    body {
    font:1em Arial, Helvetica, sans-serif;
    }

    a:link, a:visited { text-decoration:none; }

    ul#menu {
    list-style:none;
    width:200px;
    border:1px solid black;
    margin:10px;
    }

    ul li {
    background:#c00;
    background:#900;
    padding:2px 0;
    }

    ul li a {
    display:block;
    color:white;
    padding:0 0 0 1em;
    }

    ul li.active {
    background:#720000;
    }

    ul li.active a {
    font-weight:bold;
    }

    It's pretty simple, the selectors (body, ul li, *, a) specify what elements you're applying the styles to, and a declaration is the property (such as color) and corresponding value (such as black).

    body { background:black; color:white; }

    In the rule above, the BODY is the selector, background is a property, black is a predefined value.. color is also a property and white is a predefined value.
     
    soulscratch, Jun 25, 2007 IP
  3. tptnyc

    tptnyc Peon

    Messages:
    764
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Excellent and thank you very much soulscratch
    Its a great help indeed for newbie/starter.
    God bless you.
     
    tptnyc, Jun 25, 2007 IP