#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    2
    Rep Power
    0

    CSS Text rendering


    First of all I just updated my Dreamweaver from 2004 MX to CS4. I have not used CSS before.

    I now want to update my sites to XHTML 1.0 Transitional and thought I would start using CSS.

    I am having trouble with the text losing or changing color and size once it gets posted. It looks fine in browser preview.

    So first some general questions. What is the difference between assigning properties to heading or class? Do I or should I use both the heading and class on a bit of text? Do I attach the style sheet to the template or to just the pages? All my pages are made from one template.

    I have several books, that tell how to create style sheets, but not what to do with this problem!


    Thanks, Jill
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, Jill.

    I now want to update my sites to XHTML 1.0 Transitional and thought I would start using CSS.
    Do you have a particular reason for wanting to use XHTML 1.0 Transitional? What are you using now?

    To make proper web pages, CSS should be used, so it's good to start learning it.

    What is the difference between assigning properties to heading or class? Do I or should I use both the heading and class on a bit of text?
    What do you mean by "heading"? I'm not familiar with the terms DW uses for things like that. (Perhaps a screenshot would be helpful here.)

    Do I attach the style sheet to the template or to just the pages? All my pages are made from one template.
    I've never used DW myself, but from what I've heard, attaching it to the template should work fine.

    I have several books, that tell how to create style sheets
    Out of curiosity, which books do you have that cover HTML and/or CSS?

    P.S. I should let you know that new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    2
    Rep Power
    0
    I was using 4.0 html Transitional through the 7 year old Dreamweaver, and the newest Microsoft Browsers has some conflict with the older code and causes spacing and fonts to act weird. So I decided to upgrade.

    Headings in DW are the <h1>, <h2>, etc.

    The books I am using are Dreamweaver CS4, the Missing Manual and TEach Yourself Visually Dreamweaver CS4, which I am finding a bit to simplistic.

    I also have a Dummies book coming in the mail.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Do you mean this?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    Or this?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    The former does not tell browsers to use "standards mode". Browsers handle things differently enough in "standards mode" when pages are not in it is just extra trouble. I would recommend you use HTML 4.01 Strict instead of XHTML 1.0 Transitional.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    Originally Posted by jtimm
    Headings in DW are the <h1>, <h2>, etc.
    Ah, so you did mean the same thing I would mean with that term. So to answer your question, it depends on the context. For an <h1>, ask yourself if the text is the most important heading on the page -- typically the page's title. <h2>s are for sub-sections, <h3> for sub-sub-sections, etc. Headings should be used in order -- don't skip levels.

    I don't always give a class or an ID to headings, but it can definitely be useful if you want to give them special styles or use some JavaScript with them.

    I suggest you learn how semantics apply to [X]HTML. Semantics is really a very important subject when it comes to [X]HTML.

    Here are some other good articles to read:
    Class and ID Selectors
    When should I use a class and when should I use an ID?
    Use class with semantics in mind
    The Meaning of Semantics Take II: Naming Conventions for Class and ID in CSS
    Using Firefox to Wage a Class War

    Multiple elements may belong to the same class and an element may belong to multiple classes. The [X]HTML class attribute's value may be a space separated list of classes.

    Originally Posted by jtimm
    The books I am using are Dreamweaver CS4, the Missing Manual and TEach Yourself Visually Dreamweaver CS4 [...]. I also have a Dummies book coming in the mail.
    I haven't heard anything good about books specifically about DW. If you're interested in reading any others, I recommend Eric Meyer's books on CSS and SitePoint's Books (be sure to check out the free sample chapters SitePoint offers). I don't agree with everything Dan Cederholm says in his books, but overall they may be worth reading too. You may want to see if your local public library has any of them. Also used books are often good, but be careful that you don't get an old edition of a given title by mistake.
    Last edited by Kravvitz; January 24th, 2011 at 10:43 PM.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo