Help | Site Map
Connecting Tech Pros Worldwide
 
 
LinkBack Thread Tools
  #1  
Old July 20th, 2005, 09:32 PM
lorelei@ozconnect.net.au
Guest
 
Posts: n/a
Default Ok, still not getting it....

Hey all!!

Well, I've decided to take the dive and attempt my very own HTML coded
website rather than use a page-editor thingy.

Anyway, I'm attempting to write a style sheet, and have read various
sources describing how to do them and set them out. Whether I'm
completely stupid or whether it's simply because I haven't been able
to ask someone about it, I'm still not sure how the hell a style sheet
should look. I'm attempting to create a sheet to use externally,
mainly to set out my background and text.

The design I'm trying to create is bascially a plain colored
background, with a box in the center of it, bordered by a darker shade
of color and filled with a tiled background image. I'm also attempting
to insert font/text definitions (white verdana font, basically).

So, spefically, I'm wondering a few things. The first is, when I've
looked at the link command used to attach an external sheet, the
instructions say to place the link in the <head> section, thusly:
<link rel="stylesheet" type="text/css" href="filename.css">
I get the HREF tag, but as in this example the TYPE tag is "text/css",
does this mean there are other types of... well, types? What exactly
does this specify? Is it telling the computer to expect a stylesheet
written in a text form or what? I'm also assuming the LINK REL is
telling the computer to expect/read the file as a stylesheet.

The other thing I'm wondering is exactly how a stylesheet should be
laid out when being written. I've looked at a few sheets, and have
seen it done in varying ways that confuse me. My most recent attempt
contained the fields BODY (containing specs for background color, text
color, font family), .BOX (containing specs for box alignment, box
height & width, border color/width/style, margin, and background
pattern). All the definitions were contained with the braces brackets
{ }, as I've seen exampled and implemented in others' sheets. What am
I missing? Is there anything else I should be specifying? If not, then
why the hell didn't it work when I wrote HTML for my front page and
stuck the link ref in the header?!?!?! :-)

Sorry if this has been answered time and again, and apologies for
length, but I'm so totally lost and can't seem to find answers
anywhere!!! Please, feel free to laugh at my stupidity on the
condition you answer my questions!!! :-)

Thanks!
~L
  #2  
Old July 20th, 2005, 09:32 PM
Philipp Lenssen
Guest
 
Posts: n/a
Default Re: Ok, still not getting it....

lorelei@ozconnect.net.au wrote:
[color=blue]
>
> Anyway, I'm attempting to write a style sheet, and have read various
> sources describing how to do them and set them out. Whether I'm
> completely stupid or whether it's simply because I haven't been able
> to ask someone about it, I'm still not sure how the hell a style sheet
> should look. I'm attempting to create a sheet to use externally,
> mainly to set out my background and text.
>[/color]

You can open e.g. the W3C page in source view, and find the stylesheet,
then download and open it:
http://www.w3.org

Also, above contains all the references you need.
Additionally, enter things you want to know in Google. Like "css
tutorial" should be a good start.


--
Google Blogoscoped
http://blog.outer-court.com
  #3  
Old July 20th, 2005, 09:32 PM
Peter Foti
Guest
 
Posts: n/a
Default Re: Ok, still not getting it....

<lorelei@ozconnect.net.au> wrote in message
news:jluaovoje2ot89hnmoi1kdhttudo6r1omd@4ax.com...[color=blue]
> So, spefically, I'm wondering a few things. The first is, when I've
> looked at the link command used to attach an external sheet, the
> instructions say to place the link in the <head> section, thusly:
> <link rel="stylesheet" type="text/css" href="filename.css">
> I get the HREF tag, but as in this example the TYPE tag is "text/css",
> does this mean there are other types of... well, types? What exactly
> does this specify? Is it telling the computer to expect a stylesheet
> written in a text form or what? I'm also assuming the LINK REL is
> telling the computer to expect/read the file as a stylesheet.[/color]

Read this portion of the spec:
http://www.w3.org/TR/html4/struct/links.html#h-12.3
(quicker than trying to explain it here). :)

[color=blue]
>
> The other thing I'm wondering is exactly how a stylesheet should be
> laid out when being written. I've looked at a few sheets, and have
> seen it done in varying ways that confuse me. My most recent attempt
> contained the fields BODY (containing specs for background color, text
> color, font family), .BOX (containing specs for box alignment, box
> height & width, border color/width/style, margin, and background
> pattern). All the definitions were contained with the braces brackets
> { }, as I've seen exampled and implemented in others' sheets. What am
> I missing? Is there anything else I should be specifying? If not, then
> why the hell didn't it work when I wrote HTML for my front page and
> stuck the link ref in the header?!?!?! :-)[/color]

It's hard to say without seeing the code. Can you provide a link to the
code in question?

Regards,
Peter Foti


  #4  
Old July 20th, 2005, 09:33 PM
Jane Withnolastname
Guest
 
Posts: n/a
Default Re: Ok, still not getting it....

On Fri, 10 Oct 2003 01:33:55 +1000, lorelei@ozconnect.net.au wrote:
[color=blue]
>The other thing I'm wondering is exactly how a stylesheet should be
>laid out when being written. I've looked at a few sheets, and have
>seen it done in varying ways that confuse me. My most recent attempt
>contained the fields BODY (containing specs for background color, text
>color, font family), .BOX (containing specs for box alignment, box
>height & width, border color/width/style, margin, and background
>pattern). All the definitions were contained with the braces brackets
>{ }, as I've seen exampled and implemented in others' sheets. What am
>I missing? Is there anything else I should be specifying? If not, then
>why the hell didn't it work when I wrote HTML for my front page and
>stuck the link ref in the header?!?!?! :-)[/color]

I think your mistake might be that you expect the browser to define
your box based on the definitions you provide in .BOX.
But .BOX is a class, and you must further define which part of your
page falls into that class.
ie <div class="box"> this is a box </div>
Or else I completely misunderstand your question :)
  #5  
Old July 20th, 2005, 09:35 PM
Alison Stewart
Guest
 
Posts: n/a
Default Re: Ok, still not getting it....

On Fri, 10 Oct 2003 01:33:55 +1000, lorelei@ozconnect.net.au wrote:
[color=blue]
> <link rel="stylesheet" type="text/css" href="filename.css"> does this
> mean there are other types of... well, types?[/color]

Yup. This is the MIME type, telling the browser what kind of file to
expect from the server. If you've ever messed around with what program
opens what types of files in Windows (setting Winamp to open .wav files,
for example) you've dealt with MIME types.

Possible types are "text/html", "image/png", "image/gif", "video/mpeg",
"text/css", and "audio/basic", among others.
[color=blue]
> I'm also assuming the LINK REL is telling the computer to expect/read
> the file as a stylesheet.[/color]

REL is an attribute of LINK (and less commonly A). It states the
relationship of the linked object to the page you're on (forward, back,
stylesheet, etc.). The full explanation would be pretty long; visit
http://www.w3.org/TR/html401/types.html#type-links if you're interested in
details.
[color=blue]
> The other thing I'm wondering is exactly how a stylesheet should be laid
> out when being written.[/color]

There are rules, and then there are conventions. Conventions are things
like capitalizing HTML elements like BODY and P, making classes and ids
lowercase (.class or #id), and putting excessive whitespace, tabs, or
newlines in to make it more readable. That sort of stuff is optional.

A basic sheet like you described should run something like:

BODY { background-color: #ffffff; /* or #fff, or white */
color: #000000;
font-family: sans-serif;
}

..BOX { position: relative;
height: 10em; /* units in em, px, or % */
width: 30em;
border: 1px solid #0000ff;
margin: 0 1em 0 1em; /* or define margin-left, -right, etc. */
background-image: url(path);
}

Do _not_ forget those semicolons between properties -- very common
mistake. Just to clarify fully, comments are put /* between these markers
*/ and are ignored totally; handy when you want to do a quick subtraction
from the code to test something.

The page it fits into would be, in brief:
<HTML>
<HEAD><TITLE>Inside the box</TITLE>
<LINK rel="stylesheet" type="text/css" href="style.css"></HEAD>
<BODY>
<DIV class="BOX">This goes in the box, with or without P tags.</DIV>
</BODY>
</HTML>

Personally, I'd try plunking your styles between <STYLE> tags in the
webpage itself to make sure whether the stuff works before putting it in
an external file. It's easier to edit when it's right up there in the
HEAD portion, and you don't run into the occasional problem with servers
not having the correct settings to serve up stylesheets.

If you feel up to posting your sample code, either here or in an obscure
corner of a server that you can link to, we can look it over and tell you
more specifically what might be wrong. Or check out
http://jigsaw.w3.org/css-validator/ , which allows you to run your code by
a machine (guaranteed not to snicker).

Alison
-----------
http://www.painters-wing.com
  #6  
Old July 20th, 2005, 09:35 PM
Barry Pearson
Guest
 
Posts: n/a
Default Re: Ok, still not getting it....

Alison Stewart wrote:
[snip][color=blue]
> There are rules, and then there are conventions. Conventions are
> things like capitalizing HTML elements like BODY and P, making
> classes and ids lowercase (.class or #id), and putting excessive
> whitespace, tabs, or newlines in to make it more readable. That sort
> of stuff is optional.[/color]
[snip]

I accept that you talk about this as a convention, not a rule. But is
capitalisation even a good convention?

I assume that it is a good principle for the case used in the CSS
corresponding to HTML elements such as "body" to match the HTML. But I thought
that the trend in future standards was to be towards lower-case for the
latter.

(I also estimate that there is more lower case than upper case "out there").

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/


 

Bookmarks

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are Off
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over network members.
Post your question now . . .
It's fast and it's free

Popular Articles