external style sheets

[David K]

I am trying to understand external style sheets. How does the

<link rel="stylesheet"
type="text/css"
href="externalStyle.css">

connect to the first style sheet html document? How can it tell the other
html documents what to do?

Thanks,
Dave

 

[Michael Wilcox]

connect to the first style sheet html document?

Could you explain this a little more?

How can it tell the
other html documents what to do?

One statement alone in a document doesn't tell any other documents what to
do. Each document must have some sort of declaration to tell it what style
sheet to use.

 

[David K]

Michael,

That makes sense to me, but when you name the external styles sheet with a
..css extension, how does it make the changes to the other html page. I'm
learning from a book called

PHP/MYSQL Programming for the absolute beginner.

Some of the explanation seems to miss something, or it's just me. I know
that the .css file and the html file have to be in the same folder, but just
can't understand how the Link rel connects the two documents.

Thanks
Dave

 

[Beauregard T. Shagnasty]

David K pounced upon this pigeonhole and pronounced:

[top-posting fixed]

Michael,

That makes sense to me, but when you name the external styles sheet with a
.css extension, how does it make the changes to the other html page.

The browser reads the css file and applies the styles to the HTML.

I'm learning from a book called

PHP/MYSQL Programming for the absolute beginner.

Since it's not an HTML/CSS book, it probably already assumes the reader
knows those subjects.

Some of the explanation seems to miss something, or it's just me. I know
that the .css file and the html file have to be in the same folder, but just
can't understand how the Link rel connects the two documents.

The css file can be anywhere on your site. One common method of site
structure would be to group HTML documents by subject in appropriate
subdirectories. Stylesheets would also be in a subdirectory; /style is a
good choice.

Then all HTML documents link to it via relative links, such as:

<style type="text/css" media="screen, projection">@import
"../style/mainstyles.css"; </style>
<link type="text/css" rel="stylesheet" href="../style/printstyles.css"
media="print" />

 

[Richard]

I am trying to understand external style sheets. How does the

<link rel="stylesheet"
type="text/css"
href="externalStyle.css">

connect to the first style sheet html document? How can it tell the
other
html documents what to do?

Thanks,
Dave

It boils down to a shortcut. lengthy stylesheets can cut down on the clutter
in the main body more.
What this says is, "use the coding based on this file".
link--begin here
type--how should I use this information?
href--ok. where is it?
have code will travel.

just be sure you put no html coding in the CSS.

 

[Big Bill]

Michael,

That makes sense to me, but when you name the external styles sheet with a
.css extension, how does it make the changes to the other html page. I'm
learning from a book called

PHP/MYSQL Programming for the absolute beginner.

Some of the explanation seems to miss something, or it's just me. I know
that the .css file and the html file have to be in the same folder, but just
can't understand how the Link rel connects the two documents.

Thanks
Dave

Try doing a search for CSS tutorials. There are several of different
quality around but find one that suits you and you'll be away.

BB

 

[Owen Jacobson]

That makes sense to me, but when you name the external styles sheet
with a .css extension, how does it make the changes to the other html
page.

There may be some misunderstanding here. CSS Style sheets don't change
the HTML at all, they just tell the user agent (your browser) how to
draw the elements that are there.

If you have

<h1>My Heading</h1>

in your HTML document, in your stylesheet you might have

h1 {
font-size: 300%;
font-weight: bold;
}

which tells the browser that headings should be 3x normal size and
bold. The HTML document is intact throughout the process.

Some of the explanation seems to miss something, or it's just me. I
know that the .css file and the html file have to be in the same
folder, but just can't understand how the Link rel connects the two
documents.

They don't actually have to be in the same folder; they can be in
different folders so long as both are 'visible' so that the user agent
can fetch them as needed. For example, if your documents are served
from C:\My Web Pages\Site\ then putting your stylesheet in C:\ won't
help you but putting them in C:\My Web Pages\Site\Style\ would.

The LINK element's href attribute tells the user agent where to get the
stylesheet from; once the browser has the sheet the styles it contains
are applied to the displayed document.