Cascading Style Sheets Basics
page has cascading style sheets basics; what they are and how
to get the most out of them with the least effort.
The Template Tutorial
goes through the process of creating style rules and linking to them in
a lot more detail.
the name Cascading Style Sheets (CSS) put me off using them for a while
because they sound complicated, but they're really not that hard to
I'm glad I did take the plunge because style sheets have a lot of
- You get more control
over style than
with plain HTML
- Your website is easier to update
keep your entire site uniform
- They simplify and
coding your pages
What Are Cascading
Style sheets are a separate file in your website or
code in a web page that defines how different elements (such as
headings) look on the web page. You can specify what fonts to use, font
colors, size, weight, background colors, borders and a whole heap more.
term cascading just means that there are a number of ways of defining
style when you're building a web page, and they have a hierarchy that
determines which one is used.
styles are lowest in the hierarchy
- External style
can apply styles site-wide have priority over the default styles.
style sheets that apply styles to a whole page come next.
styles that apply a style to a single word, or a part of a page, have
the highest priority.
That all makes a
lot of sense,
because you can have an external style sheet giving a site-wide style,
but if you want to change a style on a page for some reason, you can do
How To Use Style Sheets
going to concentrate on external style sheets because that's what
you'll use site wide. They let you specify the styles for your entire
website, and they let you change the style of any element on every page
by making changes to just one page.
are the basics of using external style sheets.
you make a page with your styles on it and save it with a .css
extension e.g. stylepage.css
Next, every page that
uses that style sheet has to link to it with a special “link” tag as
of course is the filename I chose, and you need to put your own css
page filename there.
The link goes in the header
section of the source code on your web page. Put it in your template,
and then every page you build will link to the style page.
page editors will have an “attach style sheet” tool. Click on that,
choose your style sheet, and the web page you're building will link to
the style sheet without you having to edit the source code directly.
External Style Sheets
You don't have to hand code a
style sheet. Most website editors have support for style sheets and
it's just a matter of finding where. If it's not obvious where the CSS
editor is, have a look at the Help.
KompoZer and Nvu, click on Tools
at the top of the page, then click on CSS Editor. You'll
get a dialog box as shown but without the entries in the left hand pane.
make an external style sheet click on the Link elt button. The right
hand pane will change so that you can enter a URL for the new CSS file.
Just type in your filename with a .css extension e.g.
CSS editor. I've already created an external stylesheet and modified
If the file doesn't exist
it will be created for you. There's a line for a title if you want to
one, and a line for a media list. If you don't fill that out it
defaults to “all” when you create the style sheet by clicking the
Create Stylesheet button.
After you've created the
stylesheet you can create or modify styles. Click on the Rule button.
The right hand pane changes again, and you can choose the type of
style. I use the style
applied to all elements of type option. You can
use that to modify existing styles such as the h1 heading tag, or you
can create an entirely new style.
Say you want to
change the h1 tag. Type h1 in the space provided, and click the Create
Style Rule button. The right hand pane changes to say Style Rule
top of the CSS editor is a row
of tabs. Click the Text tab to get all the options to define how you
want the text to look. You can change font, font size, weight and style
and color, the
case (upper, lower, capitalize, and no change, and alignment, plus
underline, overline, line-through, and (if you've got really bad taste)
options in the Nvu
Other tabs let you change backgrounds,
borders, and even more.
Do a bit of experimenting to
see what happens with different style options.
notice that you can do more and you have more control with cascading
style sheets than if you just use the default HTML styles.
Your Own Style
You're not restricted to changing existing
styles. I made up a style just before, using Nvu, that I called
“bigred”. Guess what that one does! In case you're having
trouble (joke) it makes the text big and red.
it I have to go into the source code and put <bigred> in
front of the text I want to change, and </bigred> after
Internal Style Sheets Basics
style sheets specify the styles on one page only. The code is placed in
between the <head> and </head> tags at the
top of the HTML source code for the page.
page editor should have a CSS editor that lets you do his too. In Nvu,
instead of clicking on the Link
elt button as above, click on the Style
elt button. Then making the styles is similar to the
sheets explained above.
inline style is one that styles a piece of text on one page, e.g.
making a word bold. Highlight the word or words and use the status bar
at the top of the page to make changes such as making it bold,
underlined, change the font or font color etc.
also make changes in the source code directly if the status bar doesn't
have the style you need.
Other Web Page
Every web page editor does things differently, so
you'll have to find out exactly how to use yours. I find the Help pages
often leave a lot to be desired, but it's probably your only option
unless you know someone who's good with your program.
Site Build It web page builder doesn't give you the option of using
Cascading Style Sheets because you don't need them. It's even easier.
You choose one of their templates and then you get to modify it if you
want to. I only made a very small mod with the template I'm using for
this site. Of course, you don't have to use the built in web page
editor if you don't want to, but I used it for about 95% of my last
site because it's so easy.
While this page goes through style sheets basics, the template tutorial
gives more detail, with step by step examples including centering tables
with CSS, putting a border around your page, styling header and body
text, and styling the navbar.
from Style Sheets Basics
To Build Web Pages
Return to Building A Website