Monday, November 21, 2005
Putting CSS on your webpage
Putting CSS on your page
is placed into the <BODY> section along with the tags immediately before its desired effect on text. It is good for overriding the “main” SS in specific parts of the web page, BUT not good in terms of separating presentation from content or SEO, also the style attribute is depreciated in XHTML 1.1 and is completely gone from the current Working Draft of XHTML 2.0, … so use sparingly or better yet use ‘class’ (later in lessons) for deviating from your “main” CSS. Also it only works once on the tag, so has to be rewritten every time, greatly increasing the file size/download time of your webpage.
This may be what is already on your page, so you have been using CSS without realizing it, BUT what you want to do is isolate it from the HTML or content.
<body>
<h1 style="font: 10em">A big h1 heading for just this heading</h1>
<h1>back to normal h1 heading</h1>
<p>content</p>
</body>
Embedded
or internal, is placed in the <HEAD> section and applies to that one page only. It is placed between <style> and </style>tags – see below for an example of wording required. It can be used if you have a one page website, or if a particular page has a look different to the rest of your web pages.
Also it can be used if starting out with CSS then you can change CSS codes on the page and see it’s effects immediately without perhaps opening a CSS editor etc and tabbing between windows, later on when you are satisfied with the outcome and overall look to the page, change to external SS and so applying it to all pages to give a corporate/uniform look to all webpages.
<html>
<head>
<!—
body { color : red ; background : yellow; }
p { font-family: "new century schoolbook”, courier, serif }
-->
</style>
<body>
<p>content</p>
</body>
</html>
The <!—and --> are optional and hide the CSS code from older, non CSS compliant browsers.
In p above the 1st choice for font is NCS, 2nd is courier if NCS not available on users computer, final choice (if 1&2 unavailable) is a generic font which will be selected by users computer e.g. Times if available. It is good to finish with a generic font.
is stored in a text file on the server and called upon when the page/s downloads. Its beauty is that all pages can link to it and act upon it’s instructions, so even in a thousand page site one little change in external CSS will change all pages in your site. It is best to use a relative URL linking to a CSS file on your server so the file downloads quickly and sets the page out quickly. The CSS file you link to doesn’t have to be on your server, with a full URL you can link to anyone’s CSS style sheet (with their permission!) but it’s not recommended.
<html>
<head>
<body>
<p>content</p>
</body>
</html>
If made in Notepad it is “saved as” filename with a “.css” extension instead of “.txt” so that the computer knows how to handle the file (like changing a file to a “.html” extension so the computer knows it is web page and uses a browser to open and read it), and uploaded as normal (on the root directory in the above example) to your server via FTP or a web interface etc.
It is then accessed by your webpage through the link command above and applied to your page before being displayed accordingly on the users computer screen.
p { font-family: “comic sans”, serif; text-indent: 1em; line-height: 1.33em;}
h1, h2, h3, h4, h5 {text-align: center; text-decoration: underline; letter-spacing: 6px; color: black;}
What the C in CSS means
h3 {color: red; text-align: centre; font-size: 1.2em}
h3 {text-align: right; font-size: 1.5em}
color: red only defined in external SS
text-align: right internal SS overrides external as rendered on page
font-size: 2em inline SS overrides embedded as acted upon last
