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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Dec 2009
    Location
    Hong Kong
    Posts
    119
    Thanks
    8
    Thanked 0 Times in 0 Posts

    CSS: can I use X instead of P?

    A silly beginners CSS question:

    Can I use X instead of P? To give an example:

    <style>
    x {
    font-size:0.8em ;
    font-family:arial;
    }
    y {
    font-size:0.85em ;
    font-family:arial;
    }
    </style>

    And then use <x>Whatever Text...</x>

    'P' will interfere with some line breaks that I use.

    The method works, but is it "good coding"?
    Last edited by fail; 12-28-2009 at 06:23 AM.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by fail View Post
    Ne method works, but is it "good coding"?
    Simply put, no.

    I'd expect you to be able to get away with it in any browser except maybe Internet Explorer, but that would technically be a violation of every HTML spec (I don't know if the draft version 5 allows that when using the XML serialization (XHTML 5) though). Basically, there's a set of conforming elements and you're restricted to those if you want to write a document that conforms to an HTML spec.

    You could do that (correctly) with XHTML 1.0/1.1, but you'd have to drop or amend the DTD and put the x element in a different namespace. You could also do it with generic XML.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Regular Coder
    Join Date
    Dec 2009
    Location
    Hong Kong
    Posts
    119
    Thanks
    8
    Thanked 0 Times in 0 Posts
    ok, but then what can I use? If I use h1, h2 etc. the text goes unwantingly bold.

    How about then p1, p2 etc.....? Or what about <div style="xxxxxxx:0000"> ?

    I like to use something that really just do what it is supposed to do inside the brackets.
    Last edited by fail; 12-28-2009 at 06:30 AM.

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by fail View Post
    ok, but then what can I use? If I use h1, h2 etc. the text goes unwantingly bold.

    How about then p1, p2 etc.....? Or what about <div style="xxxxxxx:0000"> ?

    I like to use something that really just do what it is supposed to do inside the brackets.
    h1 .. h6 are headers tags, p is paragraph. I don't think you can use a paragraph where you need a header, right? There is some semantics behind this (x)html markup.
    If you want to style in a different way same type of element, p or h1 ... h6, you can use css selectors.

    http://reference.sitepoint.com/css/selectorref

    Code:
    .small { font-size: 0.8em; }
    .large { font-size: 0.85em; }
    Code:
    <p class="small">...</p>
    <p class="large">...</p>
    or you can change style inline but using the correct syntax for css.

    Code:
    <p style="font-size: 0.8em;">.....</p>
    <p style="font-size: 0.85em;">....</p>
    best regards

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by fail View Post
    ok, but then what can I use? If I use h1, h2 etc. the text goes unwantingly bold.

    How about then p1, p2 etc.....? Or what about <div style="xxxxxxx:0000"> ?

    I like to use something that really just do what it is supposed to do inside the brackets.
    • Normal text could just be surrounded by <p></p> tags and styled from your CSS as p {color:#fff;font-size:0.8em;}
    • If you had a sentence that you wanted to style differently, you could use a class like this <p class="bold"></p> and style it like .bold {font-size:1em;color:#f00;}
    • If you have a single word or two that you want to style differently but you don't want other p stylings to be applied, try a span. Like this - <p>This is just a <span class="bold">demonstration</span> sentence.</p> This span would take on the styling for the class .bold that we already made in the previous example.


    Have a look at some more text styling at http://webdesign.about.com/od/css/a/aa112000c.htm
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    fail (01-16-2010)

  • #6
    Regular Coder
    Join Date
    Dec 2009
    Location
    Hong Kong
    Posts
    119
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thanks a lot! SPAN is the one I was looking for.

    I guess I don't need to stick to .small .large etc. and I can do my own creations, such as .invoice or .bankdetail

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by fail View Post
    ok, but then what can I use? If I use h1, h2 etc. the text goes unwantingly bold.
    You can override browser default styles. In this case (for h1, h2, etc), the default style is font-weight: bold (or maybe font-weight: bolder or font-weight: 400). You can return the font weight to normal with h1, h2, h3, h4, h5, h6 { font-weight: normal; }.

    The important thing is that you should use a meaningful element for the content then style it appropriately afterward.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    or work with parent/child

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,789
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    Quote Originally Posted by fail View Post
    Thanks a lot! SPAN is the one I was looking for.

    I guess I don't need to stick to .small .large etc. and I can do my own creations, such as .invoice or .bankdetail
    CSS is styling HTML elements. A simple CSS rule consists of a selector, a property, and a value:
    Code:
    selector {property: value;}
    The selector in its most basic form is always referring to an HTML element, so since there are no HTML elements like <x> or <p1> you can’t just use them in CSS.
    Code:
    <p>text</p>
    <a>text</a>
    <span>text</span>
    <h1>first level heading</h1>
    <h2>second leve heading</h2>
    <h3>third level heading</h3>
    <ul>
    	<li>text</li>
    </ul>
    <div id="whatever">text</div>
    <strong class="someclassname"></strong>
    Code:
    p {color: red;}
    a {color: blue;}
    span {color: green;}
    h1 {color: maroon;}
    h2, h3 {color: aqua;}
    ul {background: yellow;}
    li {color: lime;}
    #whatever {color: gray;}
    .someclassname {color fuchsia;}
    You can only use such CSS element selectors that exist as HTML elements. Of course, there are more advanced selectors that use class, ID, attributes etc. (see the last two examples) but those you can learn about in various sources on the internet, among which we have http://www.w3.org/TR/CSS2/selector.html from the entity that has invented them.
    Last edited by VIPStephan; 12-28-2009 at 06:15 PM.


  •  

    Posting Permissions

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