Page 123 - DCAP408_WEB_PROGRAMMING
P. 123
Unit 4: Cascading Style Sheets
<h6>All standard disclaimers apply. Your life depends on NOT copying this document in any Notes
way. This tape will <a HREF=”http://www.mysite.com/selfdestruct.html” CLASS=”case1">self
destruct</a> in 10 seconds...</h6>
</body>
</html>
4.5.3 External Style Sheets/Linked CSS
The true power of this CSS specification mechanism is separating presentation from content.
External Style Sheets are the tool for doing exactly this by putting all your CSS rules into a
separate .css file (a simple text file) you can reuse them for all your pages without rewriting.
Notes All your styles are in a centralized place making it easy to maintain and change the
look of your website.
This is the most powerful of all the CSS attachment methods, as it allows a single style sheet to
control the rendering of multiple documents. These results in a timesaving for the author, a
savings of space for the web server, and less download time for the user. In addition, this
method can be used in both HTML and XML.
An External Style Sheet is a file containing only CSS syntax (no document content or elements)
and should carry a MIME type of “text/css”. The style information is not explicitly tied directly
to the document’s elements, so Selector syntax is used to specify what styles attach to which
portions of the document tree. The full range of CSS syntax is allowed in this method.
Syntax:
<link REL=”STYLESHEET” TYPE=”text/css” HREF=”[Style sheet URL]”>
LINK Attribute Description
type: This is the MIME content-type and should always be set to text/css for
stylesheets.
rel: This attribute describes the relationship between the actual document
and the one you're linking to. In this case, it's always stylesheet.
media: You might want to provide more than one stylesheet for different
presentations of your website. For example a normal one, a high-contrast
one for people with reading difficulties, a printer-friendly one for printing
and so on. If the client supports this, it will use the appropriate stylesheet.
If you just have a single stylesheet for everything, you can omit this
attribute or use all.
href: This is the link to your stylesheet.
Usage Guidelines:
1. Use as much as possible: Try to put all your CSS styles into stylesheets and minimize your
inline CSS and internal CSS.
2. Use a logical structure: As a CSS beginner you probably won’t care much about the order
in which you write your CSS rules, because your stylesheets will be relatively small. As
they get bigger, though, it can help having a logical structure in your stylesheet. For
example you could group general selectors such as <BODY>, <A>, <P>, <IMG>, <H1>, ... at
the beginning and then follow with contextual selector rules. Or group CSS styles together,
which belong to a certain layout part of the page such as the header, sidebar, footer and so
on.
LOVELY PROFESSIONAL UNIVERSITY 117
