CSS, External Style sheets

LAHOEFKENS · #1 (**permalink**) March 30th, 2007, 02:54 PM

I am reading Beginning Web Programming with HTMl,Xhtml and CSS. By Jon Duckett.
I am particularly Interested is CSS. (CHAPTER 9 in the above book) It mentions the advantages of External CSS Style sheets and the link element that is used to attach a style sheet to a document. At this stage I have become completely lost as I cannot find a way to attach an external style sheet to a document and produce the required page or Site.
in the book pages 267 to 270. A basic example, I have not been able to produce the figure 9-3 on page 269.
Can anybody help me?
Tony Hoefkens

joefawcett · #2 (**permalink**) March 31st, 2007, 01:48 AM

Can you show some code? You just create a "link" element with a "rel" attribute of "stylesheet", a "type" attribute of "text/css" and an "href" attribute pointing to the external file. This URL is relative to the page containing the link so if you just put "styles.css" then it must be in the same folder as the web page. If that's all done correctly then perhaps your CSS file is mal-formed.

--

Joe (Microsoft MVP - XML)

LAHOEFKENS · #3 (**permalink**) March 31st, 2007, 03:28 AM

Thank you Joe, I think this is the code you asked to see.<?xml vervion="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"HTTP//WWW.W3.ORG/tr/XHTML11/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
  <title>CSS Example</title>
  <link rel="stylesheet" type="text/css" href="ch09_eg01.CSS" />

/* Style sheet for ch09_eg01.html */

body {
   color:#000000;
   background-color:#ffffff;
   font-family:arial, verdana, sans-serif; }

h1 {font-size:18pt;}

p {font-size:12pt;}

table {
   background-color:#efefef;
   border-style:solid;
   border-width:1px;
   border-color:#999999;}

th {
   background-color:#cccccc;
   font-weight:bold;
   padding:5px;}

td {padding:5px;}

td.code {
   font-family:courier, courier-new, serif;
   font-weight:bold;}
</head>

<body>

<h1>Basic CSS Font Properties</h1>

<p>The following table shows you the basic CSS font properties that allow you to change the appearance of text in your documents.</p>

<table>
  <tr>
    <th>Property</th>
    <th>Purpose</th>
  </tr>
  <tr>
    <td class="code">font-family</td>

    <td>Specifies the font used.</td>
  </tr>
  <tr>
    <td class="code">font-size</td>
    <td>Specifies the size of the font used.</td>
  </tr>
  <tr>

    <td class="code">font-style</td>
    <td>Specifies whether the font should be normal, italic or oblique.</td>
  </tr>
  <tr>
    <td class="code">font-weight</td>
    <td>Specifies whether the font should be normal, bold, bolder, or lighter</td>
  </tr>

</table>

</body>
</html>

Regards Tony

porov · #4 (**permalink**) May 1st, 2007, 04:39 PM

Very simple:

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

Also as the book says this practice has much more advantages to inline css.

_____________________________
http://freehosting1.net

W.Vleeshhouwer · #5 (**permalink**) March 2nd, 2009, 03:52 PM

Where can I find the stilesheets that are mentioned in the book? I can find the HTML code, but not the CSS's. Also, the chapternr.s in my book are different HowCome?

jminatel · #6 (**permalink**) March 3rd, 2009, 07:36 AM

Regarding the different chapter numbers in the book, is it possible that you have the 2nd edition:
http://www.wrox.com/WileyCDA/WroxTit...470259310.html
You're in the forum for the first edition. The 2nd edition forum if that's what you need is here:
http://p2p.wrox.com/book-beginning-w...0-25931-3-399/
and the code is here:
http://www.wrox.com/WileyCDA/WroxTit...-DOWNLOAD.html
If this isn't the issue let us know and we'll keep trying to help.

andypandyrox456 · #7 (**permalink**) April 7th, 2010, 01:04 PM

It should look like this:

Code:

<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="yourcssfile.css" />
</head>
<body>
Make sure that you specify where the stylesheet is located. For example:If your HTML code is located in a folder called Codes, and in Codes is another folder called CSS, where this style sheet is located, and the name of the style sheet is CSSstyle, the href will look like this: href="Codes/CSSstyle.css

Need to download code?

Navigation