www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: help, is about background color.

  1. #1
    Join Date
    Mar 2004
    Location
    Maine
    Posts
    473

    help, is about background color.

    Hi--

    I just started learning CSS, seems easy...kinda...but i was wondering...do you need to use HTML at all when using CSS?

    EDIT: I figured out the background color thing but i still have above question

    thanks for all help!
    Last edited by Neczy; 04-12-2004 at 06:50 PM.

  2. #2
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    CSS is what you use to layout a page. You use HTML and CSS togther. You use HTML for the basic structure and content, and then use CSS to format the way everything looks - colors, background colors, background images (but not images, that's HTML), and where blocks of text appear.
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  3. #3
    Join Date
    Aug 2003
    Posts
    1,576
    absolutely, CSS is for styling, (x)HTML is for content/markup. CSS is absolutely worthless without (x)HTML

  4. #4
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    Glish may be a helpful resource.
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  5. #5
    Join Date
    Mar 2004
    Location
    Maine
    Posts
    473
    ok, so tables are CSS and the <body> tag is html? or is there a CSS alternative? i know of (thinks is right)

    body {background:#colorhere}

    so is there a normal body?

  6. #6
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    That specifies the background color of the <BODY> tag. Maybe a tutorial at the W3C will help you understand that better.
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  7. #7
    Join Date
    Mar 2004
    Location
    Maine
    Posts
    473
    lol...lemme rephrase.

    So the html <body> tag is still <body> if you are using CSS, correct?

  8. #8
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    Yes.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html lang="en" dir="ltr">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>CSS/HTML Test</title>
    <style type="text/css">
    body {
    color: #FFF;
    background: #07A;
    }
    p {
    text-indent: -15px;
    padding-left: 15px;
    }
    </style>

    </head>
    <body>
    <p>The background of this page is #0077AA, which is a dark blue, and the text color, #FFFFFF, is white. This paragraph is inverse-indented, meaning all lines of text, excluding the first line, will be indented by fifteen pixels. Normally text-indent indents the first line of a paragraph tag (<p> tag), but in this case it does not because it is set to a negative value. The CSS, then, in this case, is modifying the way the paragraph is displayed; yet we are still using HTML to display it.</p>
    </body>
    </html>
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  9. #9
    Join Date
    Mar 2004
    Location
    Maine
    Posts
    473
    YAY i get it! lol, man all this stuff is making me go to GT less often...oh no!!

  10. #10
    Join Date
    Mar 2004
    Location
    Maine
    Posts
    473
    Gragh, i have read all of the provided links Jona, yet i still do not understand how to convert tables to CSS ?_?

  11. #11
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    Okay here's what you do. I've outlined the DIVs so you can see what's going on. Basically the first div has the logo and is center-aligned, the second div has the content and is floated to the right, the third div has the navigation menu (notice it's an unordered list, and uses no <br> tags) and is floated to the left.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html lang="en" dir="ltr">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>AW2 Site</title>
    <style type="text/css">
    body {
    background: #000;
    color: #fff;
    font-family: arial, verdana, sans-serif;
    font-size: small;
    }

    img {
    border: none;
    }

    div {
    border: solid 1px yellow;
    }

    #container {
    width: 100%;
    padding: 0px;
    border: none;
    }

    #head {
    width: 100%;
    margin: auto;
    text-align: center;
    }

    #content {
    width: 65%;
    float: right;
    padding-left: 2%;
    }

    #nav {
    width: 30%;
    float: left;
    padding-left: 1%;
    }

    #nav ul {
    list-style-type: none;
    }

    #nav ul li a {
    color: #C00;
    text-decoration: underline;
    }

    #nav ul li a:hover {
    color: white;
    text-decoration: none;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="head">
    <h1><a href="index.html" title="Go to home page."><img src="logo.jpg" alt="The AW2 Site Logo."></a></h1>
    </div>
    <div id="content">
    <h1>Heading 1</h1>
    <p>This is the content of the site.</p>
    </div>
    <div id="nav">
    <h1>Navigation</h1>
    <ul>
    <li><a href="index.html" title="Go to site homepage.">Home</a></li>
    <li><a href="about.html" title="About this site.">About</a></li>
    <li><a href="links.html" title="Hyperlinks to different sites related to our own, in some way or another.">Links</a></li>
    </ul>
    </div>
    </div>
    </body>
    </html>
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  12. #12
    Join Date
    Mar 2004
    Location
    Maine
    Posts
    473
    okay got it, thanks jona.

  13. #13
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    You're welcome. Need anymore help? I'm anxious to see what your redesign will look like.
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  14. #14
    Join Date
    Mar 2004
    Location
    Maine
    Posts
    473
    LOL! i need so much help. I am just figuring out the div thing, but how do you decide on how big they are?

  15. #15
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    CSS determines their size, although it's not necessary to set a size for them - they'll stretch to the width necessary for whatever resolution they're on to hold the inputted content. This way, very small screens won't have horizontal scrollbars, and large screens won't either.

    Here's the basic run-down: instead of using tables, we're putting a few div's on the page. Then, we're using CSS to make them go into the places we want them to go. Whereas before we used tables to position things, we're now just floating blocks that hold text, images and/or links on different sides, or the center, of the page. If you disable CSS in my example, you'll see no formatting whatsoever; however, if you disabled CSS on one of your table-sites, you would still see formatting. This is good, except for the fact that the data is non-tabular, meaning it makes no sense when read in the format of a table.
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles