Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Aug 2002
    Location
    Jacksonville, NC
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS basic question

    Hi

    Had a very basic question. I have been learning about CSS, and how the instructions are written to do certain things like

    h1{background-color: "#003366"}

    I did notice that the behaviour that is caused by the <h1> tag is also rendered as the rest of the ss behavior is followed, that is the backgound is made the specified color. So, in other words, if I write <h1>Boo</h1>

    I end up with

    a blank line, the next line with the color and the word Boo in a larger size, then again a blank line.

    What if I jut want to change the appearance of the text and background but dont want the default behaviour of the tag to be included? Is that possible?

    Also, is it possible to create user defined tags that have behaviours that are defined by CSS so these tags can then be used in html documents? (Like say up{background-color: "red"})
    Genius has to have a starting point

  • #2
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i think that the headng tag h1 automatically spans across the page.
    try adding margin:0 to your style tag for h1

    as far as i know you cannot make user defined tags per say

    but you can do things like adding a dot before a name in your CSS, and that would make a type of user defined tag.

    .yellow {background-color:yellow}
    #green {background-color:green}


    the dot is used for defining a class in the "yellow"
    <span class="yellow">text background will be yellow</span>

    the pound sign is for say a div id
    <div id="green">background will be green</div>


    hope that helps
    and i hope i typed everything good, i didnt check any of it

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    185
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can override the default appearance of any tag with CSS, just set the appropriate style property. For example:

    h1 {
    background-color: "#003366"
    font-size: 200%;
    margin-top: 0px;
    margin-bottom: 1em;
    padding: 4px;
    border-bottom: 1px dotted black;
    }

    For any style property you don't specify, the browser will use it's default setting. Often, for beginners, just figuring out which property does what is the biggest challenge. Try http://www.w3.org/TR/CSS21/propidx.html for a full list. But note that not all browsers support all properties (unfortunately) or in some cases, handle them incorrectly (very unfortunate). So you may need to experiment.

    As for creating your own tags, you can't. But you can use style classes or ids as cg9com suggested. The DIV and SPAN tags have no default styling so they are perfect for that sort of thing.

  • #4
    New Coder
    Join Date
    Aug 2002
    Location
    Jacksonville, NC
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cool,

    That is what Im looking for. Tell me this, what is the difference between class and id i they seem to do the same thing? How are they different?
    Genius has to have a starting point

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Also, by default, except for the margin, headers also have some padding. Different in every browser. So you could also add: padding:0px;


    > > h1{background-color: "#003366"}
    And Shashgo, don't use quotes in your CSS.
    These are only used with inline style <h1 style="background-color:#003366;"></h1>

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by shashgo
    Cool,

    That is what Im looking for. Tell me this, what is the difference between class and id i they seem to do the same thing? How are they different?
    ID is used to give a single element a name (the same ID should not be used for muiltiple elements) which allows that element to be referenced by scripts and to inherit specific styles.

    A CLASS is used when multiple elements all need to share the same style. Also note that a single element can contain multiple classes (<span class="class1 class2 class3 ...">) and can also contain an ID. Please note that some older browsers don't handle multiple classes properly so you have to keep your target browsers in mind.

  • #7
    New Coder
    Join Date
    Aug 2002
    Location
    Jacksonville, NC
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi all,

    Got it. Thanks for your inputs. I am a little more clear on what to do with CSS and how to do it. I am still no too clear on

    Roy sinclairs

    ID is used to give a single element a name (the same ID should not be used for muiltiple elements) which allows that element to be referenced by scripts and to inherit specific styles.
    Im quite set for right now. Will post more as I have more questions
    Genius has to have a starting point

  • #8
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    okay if you are beginning to learn CSS
    just stick with the class and dont worry about the id just yet

  • #9
    New Coder
    Join Date
    Aug 2002
    Location
    Jacksonville, NC
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi all, Im back

    Im having some problem understanding

    1. the position property which can take on the values absolute, fixed, relative and static. I dont understand what effect the last two values have.

    2. the cursor property, I dont understand the example they gave:

    body {cursor: url("myPic.gif"), url("yourPic.gif")}

    Isnt there oly supposed to be one url to load the cursor image from?

    3. the display property and all its values: block | compact | inline | inline-table | list-item | marker | none | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row |
    Genius has to have a starting point

  • #10
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    1. the position property which can take on the values absolute, fixed, relative and static. I dont understand what effect the last two values have.
    Relative is a lot like absolute but the elements position is marked relative to the position of the block element which contains it instead of to the document as a whole.

    Static means the element's position is supposed to be fixed within the view window so when the view window is scrolled up or down the other content in the view window will scroll under or over that element (depending on relative z-index values) while that element doesn't move. Be aware that IE doesn't do "static" elements yet so you need the Mozilla browser to see it proper.

    2. the cursor property, I dont understand the example they gave:
    body {cursor: url("myPic.gif"), url("yourPic.gif")}
    Isnt there oly supposed to be one url to load the cursor image from?
    This arrangement allows for some redundancy, the cursor at the first URL will be used unless it fails to load for some reason, in that case the cursor at the second URL will be used.



    3. the display property and all its values: block | compact | inline | inline-table | list-item | marker | none | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row |
    Explaining all that is beyond the scope of the forum, it takes a reference manual to cover all of those.

  • #11
    Regular Coder
    Join Date
    Jun 2002
    Location
    Ames, IA, USA
    Posts
    373
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Looking at the CSS2 specs at W3C website can answer many questions.
    Need more emoticons?
    Visit Catman's Private Stock

  • #12
    New Coder
    Join Date
    Aug 2002
    Location
    Jacksonville, NC
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Roy,

    That explanation helps. Thanks.
    Genius has to have a starting point

  • #13
    New Coder
    Join Date
    Aug 2002
    Location
    Jacksonville, NC
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Catman,
    Thanks. I was alady looking a the W3C notes on CSS, but they arent that explanative as times.
    Genius has to have a starting point

  • #14
    Regular Coder
    Join Date
    Jun 2002
    Location
    Ames, IA, USA
    Posts
    373
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In that case, Index Dot's CSS Guide might be more helpful.
    Need more emoticons?
    Visit Catman's Private Stock


  •  

    Posting Permissions

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