There is more than one way to add a Cascading Style Sheet
(CSS) to your HTML document. In this short tutorial I will explain the
strengths and weaknesses of the four main methods.
Linking to a separate CSS file
This is the most common method of attaching CSS rules to an
HTML document. With this method all of your style rules are contained in a
single text file that is saved with the .CSS extension. This file is saved on
your server and you link to it directly from each HTML file. The link is just a
simple line of HTML that you put in the <head> section of your HTML
document, it looks like this:
<link rel="stylesheet"
type="text/css" href="mystyles.css"
media="screen" />
Make sure you include the correct path to your CSS file in
the href. If the CSS file is in the same folder as your HTML file then no path
is required (like the example above) but if it's saved in a folder, then
specify it like this href="foldername/mystyles.css". The media
parameter specifies when the CSS rules are to be used. "screen"
indicates for use on the computer screen. If you specify "print" then
the rules will only be followed when the page is printed. You can include
multiple CSS files if required.
Embedding CSS into
the HTML
You can also embed CSS rules directly into any HTML page. To
do this you need to add the following code to the <head> of your HTML
document:
<style media="screen"
type="text/css">
Add style rules here
</style>
All of your CSS rules go between the style tags. As before,
the media can be "screen" for your computer screen or
"print" for printing.
The disadvantage with this approach is the styles must be
downloaded every time someone visits the page, this can cause a slightly slower
browsing experience. However there are a few advantages. Because the CSS is
part of the HTML document, the whole page exists as just one file. This can be
useful if you are sending the page to someone via email or if it will be used
as a template such as a blogger template. I use this method on my liquid-layout
demos so when people view the source of the page they can see the HTML and the
CSS code together. Another advantage of using this method is with dynamic
content. If you are using a database to generate the page content you can also
generate dynamic styles at the same time. Blogger does this - it dynamically
inserts the colours for headings and other elements into the CSS rules embedded
in the page. This allows users to change these colours from an admin page
without actually editing the CSS in their blog templates.
Adding Inline CSS to
HTML tags
Style rules can also be added directly to any HTML element.
To do this you simply add a style parameter to the element and enter your style
rules as the value. Here is an example of a heading with red text and a black
background:
<h2 style="color:red;background:black;">This
is a red heading with a black background</h2>
This is not a good method to use because it will bloat your
HTML and make website maintenance a real headache. However it can be useful in
some situations. One example could be if you are using a system where you don't
have access to the CSS file - simply add your style rules directly to the
elements instead.
Importing a CSS file
from within CSS
Another interesting way to add CSS to a HTML page is with
the import rule. This lets us attach a new CSS file from within CSS itself.
Let's look at an example of how this is done then I will show a practical
example of when you might use this method. To import a new CSS file from within
CSS simply use the following rule:
@import "newstyles.css";
Just change "newstyles" to the name of your CSS
file and be sure to include the correct path to the file too. Remember the path
is relative to the current CSS file that we are in, if the CSS is embedded into
the HTML page then the path is relative to the HTML file.
Let's imagine we have a 1000 page website and we link to a
CSS file from every page on the site. Now let's imagine we want to add a second
CSS file to all of those pages. We could edit all 1000 HTML files and add a
second CSS link or a much better way would be to import the second CSS file
from within the first file. We just saved ourselves many hours of work!
For more details on our products and services, please feel
free to visit us at Best Online
Marketing Company New Delhi, Internet Marketing
Company New Delhi, Online Marketing
Companies, Online Marketing
Companies India&Search engine
marketing New Delhi
No comments:
Post a Comment