Announcement

Collapse
No announcement yet.

My First Web Page !!! Yeahhh

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • My First Web Page !!! Yeahhh

    Look what I did. (don't laugh). I am still learning...

    Quick question: how do i set css to define color of table-cell borders?

    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <style type="text/css">
    body 
    {
    background-color: #000000;
    }
    h1 
    {
    background-color: #000000; 
    color: #ffffff; 
    text-align: left; 
    text-decoration: underline; 
    font-family: verdana, geneva, arial; 
    font-size: 24pt;
    font-style: bold;
    }
    h2 
    {
    background-color: #000000; 
    color: #ffffff; 
    text-align: left; 
    text-decoration: underline; 
    font-family: verdana, geneva, arial; 
    font-size: 22pt; 
    font-style: bold;
    }
    h3 
    {
    background-color: #000000; 
    color: #ffffff; 
    text-align: left; 
    text-decoration: none; 
    font-family: verdana, geneva, arial; 
    font-size: 20pt; 
    font-style: normal; 
    }
    h4 
    {
    background-color: #000000; 
    color: #ffffff; 
    text-align: left; 
    text-decoration: none; 
    font-family: verdana, geneva, arial; 
    font-size: 18pt; 
    font-style: normal;
    }
    h5 
    {
    background-color: #000000; 
    color: #ffffff; 
    text-align: left; 
    text-decoration: none; 
    font-family: verdana, geneva, arial; 
    font-size: 16pt; 
    font-style: italic;
    }
    h6 
    {
    background-color: #000000; 
    color: #ffffff; 
    text-align: left; 
    text-decoration: none; 
    font-family: verdana, geneva, arial; 
    font-size: 14pt; 
    font-style: italic;
    }
    p 
    {
    background-color: #000000; 
    color: #ffffff; 
    text-align: left; 
    text-indent: 1cm; 
    text-decoration: none; 
    font-family: verdana, geneva, arial; 
    font-size: 12pt; 
    font-style: normal;
    }
    table 
    {
    background-color: #ffffff;
    color: #000000; 
    text-align: center; 
    text-decoration: none;
    font-family: verdana, geneva, arial; 
    font-size: 20pt; 
    font-style: italic; 
    border-style: groove; 
    border-color: #ff0000; 
    border-width: 12pt;
    }
    td 
    {
    padding: 12pt;
    }
    </style>
    <title>
    this is the title
    </title>
    </head>
    <body>
    <h1>
    h1 header goes here
    </h1>
    <p>
    first paragraph goes here
    </p>
    <h2>
    h2 header goes here
    </h2>
    <p>
    second paragraph goes here
    </p>
    <h3>
    h3 header goes here
    </h3>
    <p>
    third paragraph goes here
    </p>
    <h4>
    h4 header goes here
    </h4>
    <p>
    fourth paragraph goes here
    </p>
    <h5>
    h5 header goes here
    </h5>
    <p>
    fifth paragraph goes here
    </p>
    <h6>
    h6 goes here
    </h6>
    <p>
    sixth paragraph goes here
    </p>
    <table>
    <caption>
    this is a caption
    </caption>
    <tr>
    <td>
    cell 1
    </td>
    <td>
    cell 2
    </td>
    </tr>
    <tr>
    <td>
    cell 3
    </td>
    <td>
    cell 4
    </td>
    </tr>
    </table>
    </body>

  • #2
    You need to clean up your CSS code.

    you should use
    Code:
    font: bold 20px verdana, geneva, arial;
    instead of
    Code:
    font-style: ... font-family: ... font-weight: ....
    For borders you can do
    Code:
    border: 12pt groove #ff0000;
    you also forgot an </html> at the end.

    Comment


    • #3
      Thanks for the advice. The reason I used all the "repitition" in the style sheet was so I can start to learn what properties, selectors, and attributes can go where... I kind of robbed the layout from the W3C. But I really like your way of doing it too. I didn't know you can simplify like:

      font: bold 20px verdana, geneva, arial;

      Is there a new guide that shows a simpler way of setting up css?

      Comment


      • #4
        Try looking at alistapart.com ..

        You can also simplify certain colours (e.g. #000000 can become #000).. but I wouldnt recommend it.

        Comment

        Loading...
        Working...
        X