A CSS (cascading style sheet) file allows you to separate your
web sites (X)HTML content from its style. As always you use your (X)HTML file
to arrange the content, but all of the presentation (fonts, colors, background,
borders, text formatting, link effects & so on...) are accomplished within
a CSS.
At this point you have some choices of how to use the CSS,
either internally or externally.
Internal Stylesheet
First we will explore the internal
method. This way you are simply placing the CSS code within the
<head></head> tags of each (X)HTML file you want to style with the
CSS. The format for this is shown in the example below.
With this method each (X)HTML file contains the CSS code needed
to style the page. Meaning that any changes you want to make to one page, will
have to be made to all. This method can be good if you need to style only one
page, or if you want different pages to have varying styles.
External Stylesheet
Next we will explore the external method. An external CSS file
can be created with any text or HTML editor such as "Notepad" or "Dreamweaver".
A CSS file contains no (X)HTML, only CSS. You simply save it with the .css file
extension. You can link to the file externally by placing one of the following
links in the head section of every (X)HTML file you want to style with the CSS
file. Or you can also use the @import method as shown below
<head>
<title><title>
<style
type="text/css">
CSS Content Goes Here
</style>
</head>
<body>
<link
rel="stylesheet" type="text/css" href="Path To stylesheet.css" />
Either of these methods are
achieved by placing one or the other in the head section as shown in example
below.
By using an external style sheet,
all of your (X)HTML files link to one CSS file in order to style the pages.
This means, that if you need to alter the design of all your pages, you only
need to edit one .css file to make global changes to your entire website.
Here are a few reasons this is better.
·
Easier Maintenance
·
Reduced File Size
·
Reduced Bandwidth
·
Improved Flexibility
Are you getting the idea? It's really cool.
Cascading Order
In the previous paragraphs, I have explained how to link to a
css file either internally or externally. If you understood, than I am doing a
good job. If not don't fret, there is a long way to go before we are finished.
Assuming you have caught on already, you are probably asking,
well can I do both? The answer is yes. You can have both internal, external,
and now wait a minute a third way? Yes inline styles also.
Inline Styles
I have not mentioned them until now because in a way they defeat
the purpose of using CSS in the first place. Inline styles are defined right in
the (X)HTML file along side the element you want to style. See example below.
<style type="text/css">@import url(Path To stylesheet.css)</style>
<head>
<title><title>
<link
rel="stylesheet" type="text/css"href="style.css"
/>
</head>
<body>
or
<head>
<title><title>
<style
type="text/css"> @import url(Path To stylesheet.css)
</style>
</head>
<body>
<p style="color:
#ff0000;">Some red text</p>
Some red text
Inline styles will NOT allow the
user to change styles of elements or text formatted this way
So, which is better?
So with all these various ways of inserting CSS into your
(X)HTML files, you may now be asking well which is better, and if I use more
than one method, in what order do these different ways load into my browser?
All the various methods will cascade into a new
"pseudo" stylesheet in the following order:
1. Inline Style (inside (X)HTML element)
2. Internal Style Sheet (inside the <head> tag)
3. External Style Sheet
As far as which way is better, it
depends on what you want to do. If you have only one file to style then placing
it within the <head></head> tags (internal) will work fine. Though
if you are planning on styling multiple files then the external file method is
the way to go.
Choosing between the <link
related=> & the @import methods are completely up to you. I will mention
that the @import method may take a second longer to read the CSS file in
Internet Explorer than the <link related=> option.
Users with Disabilities
The use of external style sheets
also can benefit users that suffer from disabilities. For instance, a user can
turn off your stylesheet or substitute one of these own to increase text size,
change colors and so on. For more information on making your website accessible
to all users please read Dive into accessibility
Power Users
Swapping style sheets is beneficial
not only for users with disabilities, but also power users who are particular
about how they read Web documents.
Browser Issues
You will discover as you delve
farther into the world of CSS that all browsers are not created equally, to say
the least. CSS can and will render differently in various browsers causing
numerous headaches.
No comments:
Post a Comment