www.webdeveloper.com
Results 1 to 12 of 12

Thread: Can inline styles be used with classes?

  1. #1
    Join Date
    Feb 2008
    Posts
    22

    Can inline styles be used with classes?

    While I'm learning and testing CSS examples I find it a big nuisance to constantly scroll back and forth between content and styling. It looks like inline styles only work with elements but I'm hoping there is a way to make them work with classes.

  2. #2
    Join Date
    Aug 2007
    Location
    New Jersey, US
    Posts
    1,779
    huh?

    inline styles work with classes:

    <style type="text/css">
    .className {...}
    </style>

    or <div class="className" style="...">

    anything in .className or the style=".." will overwrite your external styles.

  3. #3
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    0sync0, that's why most people put styles in a separate file, you can then just switch between two open windows, or depending on your editor, two open tabs.
    Every fight is a food fight when you’re a cannibal.

  4. #4
    Join Date
    Feb 2008
    Posts
    22
    Quote Originally Posted by dtm32236
    huh?

    inline styles work with classes:

    <style type="text/css">
    .className {...}
    </style>

    or <div class="className" style="...">

    anything in .className or the style=".." will overwrite your external styles.
    I had already tried that. I guess there is something else wrong.
    Last edited by 0sync0; 02-19-2008 at 11:31 AM.

  5. #5
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    270
    Sync,

    If you want to do the styling inline, it is no use and maybe even counterproductive to give elements (= everything in the <body> except scripts) a className. Just use <div style="">, <p style="">, etc.

    But I would strongly recommend to use style blocks or external style sheets. With a proper editor (www.htmlkit.com, build 292 is good and free) you can indeed easily switch between tabs, as David suggested.

    And when you use a style block, you can jump to the top of the code file with Ctrl + Home, and to the bottom with Ctrl + End.
    Last edited by Frank62; 02-19-2008 at 01:01 PM.
    .
    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  6. #6
    Join Date
    Feb 2008
    Posts
    22
    Quote Originally Posted by Frank62
    Sync,

    If you want to do the styling inline, it is no use and maybe even counterproductive to give elements (= everything in the <body> except scripts) a className. Just use <div style="">, <p style="">, etc.

    But I would strongly recommend to use style blocks or external style sheets.
    I realized that using the class didn't make sense with an inline style. Removing the class solved the problem.

    The site already uses external style sheets.

    Right now I'm working on a test page converting a header within a table to CSS. When I'm done it will become a server side include. In a situation where you have a SSI header, is using inline styles so horrible?

    The code below shows what I'm doing to get a graphic to display acroos the screen. Is the method used ok or is there a better way?

    HTML Code:
    <div style="background-image: url(images/g_molding.jpg);
    	background-repeat: repeat-x;
    	height: 17px;">
    </div>

  7. #7
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    270
    Is the method used ok or is there a better way?
    That's quite alright. As long as you don't use the old FrontPage method, which declares styles in every tag. Also if the tag is a repetitive one, such as <p>s. Changing such a page is a horrible task. That's why I emphasized the strongly so strongly... :-)
    .
    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  8. #8
    Join Date
    Feb 2008
    Posts
    22
    Quote Originally Posted by Frank62
    Changing such a page is a horrible task. That's why I emphasized the strongly so strongly... :-)
    I will be for 'real' content. But I don't see the point for a header that consists of empty DIVs.

  9. #9
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    270
    Empty divs should be deleted, but furthermore your thought isn't that peculiar. Unless the inline style declaration consists of a number of property-value combinations. Then it will be more difficult to see errors than it is when you have them neatly arranged in a style block.
    .
    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  10. #10
    Join Date
    Feb 2008
    Posts
    22
    Quote Originally Posted by Frank62
    Empty divs should be deleted
    HTML Code:
    <div style="background-image: url(images/g_molding.jpg); background-repeat: repeat-x; height: 17px;"> </div>
    In this code example, which I posted earlier, if I take out the styling it will be an empty DIV except for the class.

  11. #11
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    270
    Sync,

    An empty div is a div without content, so without anything between <div> and </div>.
    .
    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  12. #12
    Join Date
    Aug 2007
    Location
    New Jersey, US
    Posts
    1,779
    some browsers don't like empty divs and will treat them improperly...

    it's suggestible to put a comment or something inside of it

    <div class="emptyDiv"><!-- empty --></div>

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