Grow your CSS skills. Land your dream job.

Coding types and Whys?

  • # December 3, 2008 at 3:35 pm

    Hi have some questions. I code xhtml and css valid, BUT I had some questions I never asked.

    1- When some times when I code, I code <div class="example"> BUT I saw Chris do: <div id="example"> But when it came to a <p> it had the class inside. Why? how about <span> when do we use them? is there an order? When to or not to?

    2- When I code my CSS I do it like this:

    <link href="http://mywebsite.com/sample.css&quot; rel="stylesheet" type="text/css" />

    But I see people coding:

    <link rel="stylesheet" type="text/css" href="http://mywebsite.com/sample.css"&gt;

    I think the latter one is wrong, but I do not know why? Although I noticed that it may produce some errors, but I do not know how to articulate them.

    3 I noticed in some javascripts:

    <script src="http://mywebsite.com/sample.js&quot; type="text/javascript" charset="utf-8"></script>

    charset="utf-8" why? what does that do?

    4 I know that there is a way to call all CSS styles from one Stylesheet. Is there one for Javascripts?

    5 flash video question: If i leave the video code with the &, my video does not validates, but if I replase the & with: &amp; then it validates, and it plays without a problem. Why?

    Not valid:

    <param name="flashvars" value="&file=http://www.mywebsite.com/flvideo/video-resume.flv&height=164&image=http://mywebsite.com/images/businesscard.gif&width=216&location=http://www.mywebsite.com/player/player.swf&link=http://www.mywebsite.com&linktarget=_blank"/>

    Valid:

    <param name="flashvars" value="&amp;file=http://www.mywebsite.com/flvideo/video-resume.flv&amp;height=164&amp;image=http://mywebsite.com/images/businesscard.gif&amp;width=216&amp;location=http://www.mywebsite.com/player/player.swf&amp;link=http://www.mywebsite.com&amp;linktarget=_blank"/>

    Thanks,

    # December 3, 2008 at 6:40 pm

    1) an id is supposed to be unique, so you use that for elements you are only going to use once in your code(like a wrapper or a header). A class can be used multiple times.

    2) if you use xhtml you will have to close every tag. You close it by using /> but others don’t close it. It doesn’t matter much but it will generate warnings.

    3) it tells the browser that its including a javascript file with an utf8 characterset. 99% of the time you don’t need this so i wouldnt pay too much attention to it.

    4) Not that i know

    5) if you use xhtml it wants to receive special characters as an entity .. don’t know how to explain it but it just likes it that way so just do it :ugeek:

    # December 5, 2008 at 10:31 am

    Thanks for the answers.

    But question #2 was miss understood:

    <link href="http://mywebsite.com/sample.css&quot; rel="stylesheet" type="text/css" />

    What I meant was, I noticed that it seems that if this is out of order: rel="stylesheet" type="text/css" seems that if this is in the front, it could be a mistake prone. Why? I do not not, but I saw in the color coding that it did look mistaken-ish? if know what I mean.

    <link rel="stylesheet" type="text/css" href="http://mywebsite.com/sample.css&quot; />

    See the diference?

    Thank you. Is good to ask this questions. :D

    # December 5, 2008 at 10:44 am
    "mevaser" wrote:
    Thanks for the answers.

    But question #2 was miss understood:

    <link href="http://mywebsite.com/sample.css&quot; rel="stylesheet" type="text/css" />

    What I meant was, I noticed that it seems that if this is out of order: rel="stylesheet" type="text/css" seems that if this is in the front, it could be a mistake prone. Why? I do not not, but I saw in the color coding that it did look mistaken-ish? if know what I mean.

    <link rel="stylesheet" type="text/css" href="http://mywebsite.com/sample.css&quot; />

    See the diference?

    Thank you. Is good to ask this questions. :D

    I don’t think the order matters. On W3.org they have samples showing how to use the link element and they swap the order of rel and type. Check out the last two examples in section 12.3.3. One’s written in the order of media, title, type, rel, href; the other is rel, title, type, href.

    I’ve always written mine in the order of rel, type, href and never noticed a problem with that.

    # December 5, 2008 at 11:10 am
    Quote:
    1- When some times when I code, I code <div class="example"> BUT I saw Chris do: <div id="example"> But when it came to a <p> it had the class inside. Why? how about <span> when do we use them? is there an order? When to or not to?

    There’s no difference between a class and an ID, other than that an ID can only be used once on a page. So generally when you set up the structure of a page, you use IDs (since you’re only going to have one header, content area, footer, etc.), but then you use classes on elements that occur multiple times (like paragraphs). It just makes it easier to keep track of things.

    Also, if you want to target something with JavaScript, you have to use an ID – there’s no way to get an element by its class name.

    You technically could use all classes and no IDs, and the page would look exactly the same – there’s no inherent style information in either.

    As for <span>…that’s used when you want to apply particular styles to an inline element – for example, a section of text within a paragraph:

    Code:

    This text is black, followed by this text in grey, followed by more black text.

    # December 8, 2008 at 9:43 am

    Thank you guys. Some times we just have to ask Questions.

    Thank you

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".