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)there are a few ways to use css. you can use any of the following:
<style type="text/css" media="screen">@import "layout3.css";</style>
and put the css into the file 'layout3.css'
<div style="font-weight:bold; text-decoration:underline">anything you can do in a stylesheet you can do in the page</div>
or
spans are for a short amount of content<span style="font-weight:bold; text-decoration:underline">within</span> a sentence.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)You can also import a style sheet using the LINK tag:
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"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.
<link rel="stylesheet" type="text/css" media="all" href=http://www.webdeveloper.com/forum/archive/index.php/"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.
<link rel="stylesheet" type="text/css" media="print" href=http://www.webdeveloper.com/forum/archive/index.php/"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 <!-- m --><a class="postlink" href="http://www.cm-life.com/vnews/display.v/ART/2004/12/06/41b3f5eb2ca2b">http://www.cm-life.com/vnews/display.v/ ... 3f5eb2ca2b</a><!-- m --> and do a print preview.
<link rel="stylesheet" type="text/css" media="handheld" href=http://www.webdeveloper.com/forum/archive/index.php/"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 (<!-- m --><a class="postlink" href="http://www.opera.com/Download">http://www.opera.com/Download</a><!-- m --> /), 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: <!-- m --><a class="postlink" href="http://media.cm-life.com/css/default/screen/default/articleLayout.css">http://media.cm-life.com/css/default/sc ... Layout.css</a><!-- m -->
Embedded Style Sheets
Lastly, you can embed an entire style sheet in an HTML file.
<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.
<style type="text/css" media="all | screen | print | handheld">
<![CDATA[
/* FULL CSS IS ALLOWED HERE, NO HTML */
p { color: red; }
]]>
</style>
And you can combine the @import method with an embedded style sheet.
<style type="text/css" media="all | screen | print | handheld">
<![CDATA[
@import "path/to/global/stylesheet.css";
/* FULL CSS IS ALLOWED HERE, NO HTML */
p { color: red; }
]]>
</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 outDear 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)Any time
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)there are a few ways to use css. you can use any of the following:
<style type="text/css" media="screen">@import "layout3.css";</style>
and put the css into the file 'layout3.css'
<div style="font-weight:bold; text-decoration:underline">anything you can do in a stylesheet you can do in the page</div>
or
spans are for a short amount of content<span style="font-weight:bold; text-decoration:underline">within</span> a sentence.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)You can also import a style sheet using the LINK tag:
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"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.
<link rel="stylesheet" type="text/css" media="all" href=http://www.webdeveloper.com/forum/archive/index.php/"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.
<link rel="stylesheet" type="text/css" media="print" href=http://www.webdeveloper.com/forum/archive/index.php/"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 <!-- m --><a class="postlink" href="http://www.cm-life.com/vnews/display.v/ART/2004/12/06/41b3f5eb2ca2b">http://www.cm-life.com/vnews/display.v/ ... 3f5eb2ca2b</a><!-- m --> and do a print preview.
<link rel="stylesheet" type="text/css" media="handheld" href=http://www.webdeveloper.com/forum/archive/index.php/"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 (<!-- m --><a class="postlink" href="http://www.opera.com/Download">http://www.opera.com/Download</a><!-- m --> /), 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: <!-- m --><a class="postlink" href="http://media.cm-life.com/css/default/screen/default/articleLayout.css">http://media.cm-life.com/css/default/sc ... Layout.css</a><!-- m -->
Embedded Style Sheets
Lastly, you can embed an entire style sheet in an HTML file.
<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.
<style type="text/css" media="all | screen | print | handheld">
<![CDATA[
/* FULL CSS IS ALLOWED HERE, NO HTML */
p { color: red; }
]]>
</style>
And you can combine the @import method with an embedded style sheet.
<style type="text/css" media="all | screen | print | handheld">
<![CDATA[
@import "path/to/global/stylesheet.css";
/* FULL CSS IS ALLOWED HERE, NO HTML */
p { color: red; }
]]>
</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
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)Any time