|
|
New Page 1
Using CSS stylesheets to enhance your website
CSS stylesheets. Um, what? CSS stands for
"cascading style sheets". Sounds pretty, doesn't it? In a
nutshell, stylesheets accomplish pretty much the same goal as
includes, except that instead of including
content, stylesheets allow you to include "styles".
Example:
Say on this website, imnotcartman.com, I wanted to change the font that I
use across the site. Currently, it's 10pt Arial ...but maybe I find
a more distinguished font that I'd like to use. As with
includes, normally I'd have to change every
single page to reflect the "new" font.
OR ....
I can use what's called a stylesheet, and call it on every page of the
website so that the formatting of text, tables and more is actually
"imported" than actually displayed.
Stylesheets can get quite complicated, and are a little more difficult
than basic includes to conquer, as there are
syntax requirements that normal HTML might let you get away with ...well,
if your CSS isn't correct, it won't work. The good news is that if
your syntax is wrong, it will just be ignored. In the case of
changing the default font, the page that tried to call the stylesheet will
just display the system font, which is Times New Roman (because the syntax
was wrong, it did not import the part where I wanted to change it to
JazzyFont.ttf, etc.
There are several different ways you can use stylesheets. The
primary two are internal, and external. Internal is handy when you
have a particular page that needs to be formatted VASTLY different than
the rest of your site. In that case, the CSS is actually coded into
the <head></head> tags of your page. Personally, I don't like this
method, but many programmers use it exclusively.
My preferred method is just like with PHP
includes ...call the file from an external source (usually a
/root/styles/ directory to keep things organized and tidy).
Here's an example of the basic CSS I use to manipulate the text on this
site:
/* Comments go here and remain
invisible..ie: all-font change, etc. */
body
{
font-family:Arial
font-size: 9pt;
}
There are even different ways to display this CSS and still make it work.
I just prefer the "line-by-line" method. I'm a Capricorn, and it's
easier for me to keep up with!
Now, every page on my site that I want the fonts to be "controlled" by the
CSS, I place this code somewhere inside the <head></head> tags:
<link
rel="stylesheet"
href="../styles/cartman.css"
type="text/css">
The <link
rel=
says to use a stylesheet for text formatting. The
href=
points to the location of the CSS file (in this case, in my /styles
directory, and the name of the CSS file is cartman.css).
Pretty simple, eh? Give it a try! I hope this tutorial was
helpful to you :)
Go back to Site Design index page
|
