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 11 of 11
  1. #1
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,758
    Thanks
    41
    Thanked 191 Times in 190 Posts

    Font clarification...

    I am sort of new to html/xhtml/csss...

    I am trying to manipulate my text... i inadvertently had it working using <font> tag... ie <font= "2"> text </text>

    As I was reading through my literature the author calls out that the <font> tag is no longer valid according to w3... Viewing this issue on w3schools it is a valid tag...

    he calls out that you should instead use the following <font-size= x%> or <font-style: italic > or <font-weight= "bold" (or x%) > etc....

    these seem to be conflicting and I was wondering what the final verdict is... is <font> gone???
    my code does not really answer this for me because- within the same code- I used <font= "2"> and it was supported, but <b> was not... in that same code I used <font-weight= "bold">... but then <font-family> did not work.... why does this all seem so inconsistent?

    any clarification would be awesome! thanx

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by alykins View Post
    I am sort of new to html/xhtml/csss...

    I am trying to manipulate my text... i inadvertently had it working using <font> tag... ie <font= "2"> text </text>

    As I was reading through my literature the author calls out that the <font> tag is no longer valid according to w3... Viewing this issue on w3schools it is a valid tag...

    he calls out that you should instead use the following <font-size= x%> or <font-style: italic > or <font-weight= "bold" (or x%) > etc....

    these seem to be conflicting and I was wondering what the final verdict is... is <font> gone???
    my code does not really answer this for me because- within the same code- I used <font= "2"> and it was supported, but <b> was not... in that same code I used <font-weight= "bold">... but then <font-family> did not work.... why does this all seem so inconsistent?

    any clarification would be awesome! thanx
    http://w3fools.com/

    best regards

  • Users who have thanked oesxyl for this post:

    alykins (04-22-2011)

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by alykins View Post
    I am sort of new to html/xhtml/csss...

    I am trying to manipulate my text... i inadvertently had it working using <font> tag... ie <font= "2"> text </text>

    As I was reading through my literature the author calls out that the <font> tag is no longer valid according to w3... Viewing this issue on w3schools it is a valid tag...

    he calls out that you should instead use the following <font-size= x%> or <font-style: italic > or <font-weight= "bold" (or x%) > etc....

    these seem to be conflicting and I was wondering what the final verdict is... is <font> gone???
    my code does not really answer this for me because- within the same code- I used <font= "2"> and it was supported, but <b> was not... in that same code I used <font-weight= "bold">... but then <font-family> did not work.... why does this all seem so inconsistent?

    any clarification would be awesome! thanx
    The fact is, the html standards have been and will continue to go in the direction of completely separating content from style. Instead, CSS standards are now ideally used to style ALL page elements separately from the pages content. The font tag is simply a way to style font, so therefore has been deprecated for some time. Obvioulsy, as we have all learned, that just because something has been deprecated, doesn't mean it wont work or be of use for YEARS to come.

    I like to design with the newest standards when I can, provided they are widely accepted and supported by all major browsers, in lieu of older deprecated code just to err on the side of caution.

    But as oesxyl pointed out, w3schools has MANY outdated tutorials and just plain WRONG information at times. When in doubt, I would trust w3c with whats current and correct.
    Teed

  • Users who have thanked teedoff for this post:

    alykins (04-22-2011)

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,758
    Thanks
    41
    Thanked 191 Times in 190 Posts
    ok... thanks for info, been using w3 for tag reference (large library)... but still does not answer question entirely....

    going along the lines of w3 is crap and believe the author (bc hes published and copyrighted)... i am still having conflicting issues...

    using his code structure <font-size= x%> (I set this up in a class attribute) my text does not behave properly....

    some clarification of how I am attempting to implement that attribute:

    <div id= "foot">
    A <a href= "www.invalidsite.com">invalidname™</a> text <br />
    <span class= "font_size_75%">
    sample text to fill in space <span class = "ftype_bold">
    text shows up bold</span> more text does not show up bold </span>
    </div>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    the above text shows up bold, but not size adjusted... the following (similar code) works on both size and bold levels

    .ftype_bold{ font-weight: "bold"}
    ...........
    ...........
    <div id= "foot">
    <a href ---> text </a><br />
    <font size= "2">
    blah blah blah blah blah <span class= "ftype_bold"> bold font </span> text
    </font>
    </div>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    "<font>" tag should not work here and it does... furthermore it is supposed to work in first ex but does not... any insight?

  • #5
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,297
    Thanks
    10
    Thanked 282 Times in 281 Posts
    Your first example is failing because of this:
    Code:
    <span class= "font_size_75%">
    You might show us the corresponding class definition for this, but you can't have a percent size in the name of the class.

    Your second example uses the <font> tag, which you say "...should not work". That's not correct. <font> is "deprecated", meaning "we recommend you don't use it", but it still works.

    Personally I wouldn't be so hard on w3schools as some others are. It's a fantastic resource, and like many others, has some errors in it. The actual spec at w3c is always "the" source, but sometimes is hard to wade through.

    Dave

  • #6
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,758
    Thanks
    41
    Thanked 191 Times in 190 Posts
    sorry, forgot to supply that class type...

    .font_size_75 {font-size: 75%;}

    ** after reading latest reply modified
    .font_size_75% {font-size: 75%;} ==> to .font_size_75 {font-size: 75%;}

    still does not work correctly

    as for w3schools... i will still continue to use as source as a library, it is nice though to know that when code errors occur to look into them more via outside source... For what I am doing I do not want to go outside w3 compliance; so using outdated, or unsupported formats (as set by w3.org regulations) eg <font> is not an option.
    Last edited by alykins; 04-22-2011 at 10:30 PM.

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,701
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    The actual problem with w3schools is that especially the unexperienced take the info there for granted as they may wrongly associate w3schools with the W3C (World Wide Web Consortium) when it’s completely unrelated and not endorsed by the latter.

    Now, alykins, you should also read up on semantic HTML which ideally includes class names and element IDs that reflect the purpose or meaning of the element or its contents, not its alleged look. I. e. rather than class="font_size_75" you should use something like class="secondary", for example, denoting text/content of secondary importance. This is especially useful if you or someone else decides later on that text of secondary importance doesn’t have a size of 75% anymore but rather is of lighter color than the rest. Likewise it’s meaningless to name a class “green” to make text green in the stylesheet since you can change the color to anything else on elements with that class.

    That said, you should also learn to make proper use of CSS selectors. For example you don’t need a class for everything, you can be much more general with element selectors:

    Code:
    <div id="foot">
    A <a href="http://example.com">invalidname™</a> text <br />
    <span>sample text to fill in space <span class="important">text shows up bold</span> more text does not show up bold </span>
    </div>
    Code:
    #foot span {font-size: 75%;} /* addresses all spans that are inside the element with ID “foot” */
    #foot span span {font-size 100%;} /* addresses all spans that are inside other spans that are inside the footer */
    #foot .important {font-weight: bold;} /* addresses any element in the footer that has a class “important” (in this case the span) */

  • #8
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,758
    Thanks
    41
    Thanked 191 Times in 190 Posts
    I understand what you are getting at, but sometimes text can be modified for just aesthetic value...
    For example... if I coded a page and it had various "meaning" layers and then at the bottom or right or anywhere i wanted to add text saying

    Created by <a href= "www.newbcoder.com"> My Name ! </a><br />
    New to programming but Not engineering!

    Where the prior two sentences have absolutely nothing to do with the rest of the site, and no meaning to the site what-so-ever; then the element has no real emphasis or meaning... just a how-it-should-look to the user (in this case alleged look is all that is important)...

    I'm also wondering if I am getting caught up in another error.. I was reading you #foot span span section....

    From my background (EE and heavily math based) < and > translate into ( this and ) .... is that an incorrect view?
    -- to help clarify... to me, the #font span span section is not need since all elements within a span will work within their parent span... Kind of like () in math- always collapse first... so in
    <span class= "whatever"> AAAAAA <span class=
    "thesewillallshowupwingdings"> QQQQQQ </span> AAAAA </span>

    it should look (to me anyways)
    AAAAAAAAwingdingscharsetAAAAAAAA

    because the inner span collapsed within the inner and then is within an outer... sort of like
    {xyz+3-15q/ (Fx=somefunctionX') +2} the differential will happen before the initial variables resolve... is this an inaccurate assumption from a coding stand point? ie won't elements resolve within their parent's before interacting/affecting other elements or do you need to have something like "#foot span span" to handle an embedded span element

  • #9
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,758
    Thanks
    41
    Thanked 191 Times in 190 Posts
    Quote Originally Posted by alykins View Post
    I understand what you are getting at, but

    because the inner span collapsed within the inner and then is within an outer... sort of like
    {xyz+3-15q/ (Fx=somefunctionX') +2} the differential will happen before the initial variables resolve... is this an inaccurate assumption from a coding stand point? ie won't elements resolve within their parent's before interacting/affecting other elements or do you need to have something like "#foot span span" to handle an embedded span element
    I hope this is not confusing... I am tryin to show how I am thinking about the way the code is read... So if you would look at above as {A/Q/A} Q would resolve before interacting with the A sections

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,701
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    I’m sorry but this is really confusing. I think you’re thinking way more complicated than you need to. CSS is called cascading stylesheets, and the emphasis is on the cascading. This means you always style elements and their children. Some properties like font size and color are inherited, i. e. passed on from the parent elements to the children as long as they are not specifically overridden.

    For example:
    Code:
    body {color: black}
    div {color: green;}
    div span {color: red;}
    First, the color of the body element is set to black. Since the color is inherited by all children of the body every element will show black text. Now, the second rule overrides/clears the inheritance for all div elements. It will make all divs green and all children of div elements will be green, too, since that color is inherited. The third rule will override the inheritance again and color all span elements inside divisions red. However, note that it doesn’t affect spans in paragraphs or lists, for example, only spans in div elements.

    So, to get back to the example in my previous post:
    #foot span {font-size: 75%;} sets the font size of all spans inside the #foot element to 75%, regardless of how deeply they are nested. However: Since the font size is inherited by children, too, it would make the size of spans inside other spans in #footer 75% of the 75%, understand? So, direct child spans of #foot will be 75% and child spans that are nested inside these spans will be 75% of their parent. That’s why we have to reset the size back to 100% (of 75%) for lower level spans with the #foot span span {…} rule.

  • Users who have thanked VIPStephan for this post:

    alykins (04-23-2011)

  • #11
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,758
    Thanks
    41
    Thanked 191 Times in 190 Posts
    Quote Originally Posted by VIPStephan View Post
    I’m sorry but this is really confusing. I think you’re thinking way more complicated than you need to. CSS is called cascading stylesheets, and the emphasis is on the cascading. This means you always style elements and their children. Some properties like font size and color are inherited, i. e. passed on from the parent elements to the children as long as they are not specifically overridden.

    For example:
    Code:
    body {color: black}
    div {color: green;}
    div span {color: red;}
    First, the color of the body element is set to black. Since the color is inherited by all children of the body every element will show black text. Now, the second rule overrides/clears the inheritance for all div elements. It will make all divs green and all children of div elements will be green, too, since that color is inherited. The third rule will override the inheritance again and color all span elements inside divisions red. However, note that it doesn’t affect spans in paragraphs or lists, for example, only spans in div elements.

    So, to get back to the example in my previous post:
    #foot span {font-size: 75%;} sets the font size of all spans inside the #foot element to 75%, regardless of how deeply they are nested. However: Since the font size is inherited by children, too, it would make the size of spans inside other spans in #footer 75% of the 75%, understand? So, direct child spans of #foot will be 75% and child spans that are nested inside these spans will be 75% of their parent. That’s why we have to reset the size back to 100% (of 75%) for lower level spans with the #foot span span {…} rule.
    ok that all makes sense- thanx
    btw I do overthink things... All. The. Time.


  •  

    Tags for this Thread

    Posting Permissions

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