www.webdeveloper.com
Results 1 to 6 of 6

Thread: Where does Style (CSS) go?

  1. #1
    Join Date
    Nov 2004
    Location
    Canada
    Posts
    330

    Where does Style (CSS) go?

    I"m really confused about the actual meaning of "style" (or CSS) in terms of its functions. I think I've caught on that I'm not really going to understand till I play with the stuff. I had this vision of a framework, a template, that I could use like a coloring book :-)

    So, I'd have this external style sheet, which I'd tune up from time to time, and just plug my photos (and text) into it. so to speak, though perhaps it's the other way around, and I'd smoosh (very technical term) the style sheet down on top of slightly disordered photos and text, to shape the stuff up nicely. (Maybe "squish" is more accurate, and I also visualize the possible messes caused by overflow squished-stuff leaking out at edges.)

    Reading the w3schools tutorials (great stuff!) I still don't really know how to apply it, but I have a funny feeling that one day the light is just going to dawn suddenly, as in a Big Bang. Actually, I'm a True Believer that learning occurs, even in the elderly (me), but unfortunately, for now, I'm stuck beating around the bush even to try to find a way to ask my question.

    I'm trying, really! Where do you put CSS? I mean, I can have a bunch of cool-looking code and save it in carol.css. But then what do I do with it? Oh, plug it into my HTML document (till I learn to do XHTML and DHTML and all that fancy stuff) - and I can do that by copying and pasting a line of code somebody else wrote - hey! it's a link! - and I only recently learned what a link is!

    Somewhere, I read that CSS code belongs in the <head>[HERE!]</head> area - but then I see it stuck into <div style ....></div> in the <body></body> area, so suddenly, I understand (in a way) what Joe Burns of HTML-Goodies means by who wins. That is, a <body></body> bit of code is nearer the element than code in the <head></head> area (I guess?) and code in the <head></head> area is nearer the element (if the element is in the body> than code in an external style sheet linked in a statement in the head area.

    And if any of that makes any sense, I've learned tons in the last couple of weeks! That is, something about words and their meanings.

    Did I just maybe answer my own question? I really don't know! All comments and assistance welcome.

    Sun, 05 Dec 2004 14:42:36 (PST)
    My site is my home-and-playground
    http://www.coherentdog.org/
    Carol W

  2. #2
    Join Date
    Dec 2003
    Location
    A series of tubes known as the "internets"
    Posts
    2,166
    there are a few ways to use css. you can use any of the following:
    PHP Code:
    <style type="text/css" media="screen">@import "layout3.css";</style
    and put the css into the file 'layout3.css'

    PHP Code:
    <div style="font-weight:bold; text-decoration:underline">anything you can do in a stylesheet you can do in the page</div
    or

    PHP Code:
    spans are for a short amount of content<span style="font-weight:bold; text-decoration:underline">within</spana sentence
    "Outside of a dog, a book is a man's best friend. Inside a dog, it is too dark to read." - Mark Twain

  3. #3
    Join Date
    Nov 2004
    Location
    Canada
    Posts
    330
    Wow, rhsunderground; thanks for the reply! I can actually follow it! That doesn't mean I can do it yet, but I understood it pretty well! I think, haha! THANKS!

    Sun, 05 Dec 2004 16:41:25 (PST)
    My site is my home-and-playground
    http://www.coherentdog.org/
    Carol W

  4. #4
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    You can also import a style sheet using the LINK tag:
    PHP Code:
    <link rel="stylesheet" type="text/css" href="path/to/stylesheet.css" /> 
    The tag above would be placed somewhere between the <head> and </head> tags. The way the tag is written above will allow all browsers 4.0 and newer to download the stylesheet.
    PHP Code:
    <link rel="stylesheet" type="text/css" media="all" href="path/to/stylesheet.css" /> 
    The above tag would allow all browsers 4.0 and newer to download the style sheet, except Netscape 4.x. Adding the media attribute causes that browser to not download the style sheet. The style sheet would then be used by all media, be it a handheld browser, a printer, or a desktop computer browser like Internet Explorer or Firefox.
    PHP Code:
    <link rel="stylesheet" type="text/css" media="print" href="path/to/stylesheet.css" /> 
    The above tag causes IE6+ (Windows), IE5+ (Mac), and Standards browsers to download the stylesheet, but only use it for the print media. To see a print style sheet in action, go to http://www.cm-life.com/vnews/display.../41b3f5eb2ca2b and do a print preview.
    PHP Code:
    <link rel="stylesheet" type="text/css" media="handheld" href="path/to/stylesheet.css" /> 
    Only handheld browsers will get this style sheet, though very few handheld browsers actually follow Web standards Opera makes one. In fact, download Opera, view a page and hit Shift + F11 to see the page rendered in its handheld browser right on your desktop browser.

    Imported Style Sheets
    No HTML is allowed in style sheets imported using the @import method and the <link /> tag. Just straight CSS. You can also use the @import method to import other style sheets, at the top of imported style sheets. It's really handy. You can see that in code here: http://media.cm-life.com/css/default...icleLayout.css

    Embedded Style Sheets
    Lastly, you can embed an entire style sheet in an HTML file.
    PHP Code:
    <style type="text/css" media="all | screen | print | handheld">
    <!--
    /* FULL CSS IS ALLOWED HERE, NO HTML */
    -->
    </
    style
    The CSS styles are encapsulated in an HTML comment so non-CSS browsers don't render your CSS as text. If XHTML is your preferred flavor of HTML, then you can encapsulate your CSS using the CDATA tag.
    PHP Code:
    <style type="text/css" media="all | screen | print | handheld">
    <![
    CDATA[
    /* FULL CSS IS ALLOWED HERE, NO HTML */
    colorred; }
    ]]>
    </
    style
    And you can combine the @import method with an embedded style sheet.
    PHP Code:
    <style type="text/css" media="all | screen | print | handheld">
    <![
    CDATA[
    @
    import "path/to/global/stylesheet.css";

    /* FULL CSS IS ALLOWED HERE, NO HTML */
    colorred; }
    ]]>
    </
    style
    Additional style sheets must be @import'ed at the top of the embedded or imported style sheet.

    On a side note, if you have bad close up eyesite, the Opera browser has a page zoom tool so that you can literally zoom in on a page. It makes both text and images larger. Hope all this helps out
    Last edited by toicontien; 12-06-2004 at 01:29 AM.

  5. #5
    Join Date
    Nov 2004
    Location
    Canada
    Posts
    330
    Dear toicontien,

    What a reply! I'm saving it. I'm using Opera right now; I love, love, love it! Using the zoom , too; my eyesight isn't that hot!

    Thanks for that long list of stuff about CSS! I finally have a sort of set of pages up on my site that actually work, but I have soooooo much work to do on them, and though I do have an external style sheet linked to some of the pages, there's something wrong with my style sheet; it's not written correctly at all. So I have more to do <haha!>

    I'll report back in a while. I'm so grateful for all the help!

    Mon, 06 Dec 2004 10:49:11 (PST)
    My site is my home-and-playground
    http://www.coherentdog.org/
    Carol W

  6. #6
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773

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