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 7 of 7
  1. #1
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts

    CSS [when it is an external file]

    I have in my HTML document this code
    Code:
    <p class="bold"
    but I want to add a class called "one", so there are two classes, how can I do this?

  • #2
    New to the CF scene
    Join Date
    Feb 2004
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If I'm reading you right, your external stylesheet should include something like this:

    .bold {font-size: 14px; font-weight: bold; color: blue;}

    .one {font-size: 12px; color: green;}

    Of course, change the attributes as-needed.

    This is a very basic CSS technique, which leads me to think that you may find a basic CSS tutorial very useful and, in the end, time saving. There are many such tutorials on the web.

    Best wishes,

    Mike Wilkinson
    Last edited by mwaw; 02-04-2004 at 08:24 PM.

  • #3
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Originally posted by mwaw
    If I'm reading you right, your external stylesheet should include something like this:

    .bold {font-size: 14px; font-weight: bold; color: blue;}

    .one {font-size: 12px; color: green;}

    Of course, chang the attributes as-needed.

    This is a very basic CSS technique, which leads me to think that you may find a basic CSS tutorial very useful and, in the end, time saving. There are many such tutorials on the web.

    Best wishes,

    Mike Wilkinson
    i have the lines in the stylesheet, but this does not answer how.

  • #4
    New Coder
    Join Date
    Nov 2003
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Do you want 2 classes for the same element?

    If so, then you'll have to do something like this:

    Code:
    <div class="one"><p class="bold">Stuff</p></div>
    And the css would be something like this:

    Code:
    div.one p.bold {
    color: black;
    background-color: white;
    }
    You can't have 2 classes in one element. You have to use ancestries...I guess.
    A wise man can see more from the bottom of a well than a fool can see from the top of a mountain.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Boberto, RTFM before posting

    You can apply as many classes to an element as you want:

    <p class="bold red underlined">Some text</p>

    where CSS declarations are:

    .bold
    { font-weight: bold;
    }
    .red
    { color: red;
    }
    .underlined
    { text-decoration: underline;
    }
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #6
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Wrong. You can have multiple classes in an element, just separate them with a space. <p class='white on black'> is an element with three classes, 'white', 'on', and 'black'.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #7
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Having worked out I can do it so all of <p> if affected I only need the one class in the end.


  •  

    Posting Permissions

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