|
These notes were originally written for my own use when first experimenting
with CSS.
My background is that of the Windows XP programmer and systems designer so I am
by no means a technophobe. Just the same, coming to grips with CSS proved somewhat challenging.
Part of the reason is that many Web tutorials start at too high a level or
attempt introducing far too many new concepts at once. They're great for building
more sophisticated skills but often difficult to get started with. This document verges on the simplistic
just to get you going. By writing this while
still a rank beginner it's unlikely any very confusing or arcane concepts will
be tossed at you. This is the simplest of reviews, to set the stage for
the excellent tutorial link later on.
It is
necessary for you to be using and have a reasonable working knowledge of Expression Web (hereafter referred to as "EW") for
this introduction to be useful because Front Page does not support CSS. From now
on you will
also want to have open on the right side of the EW window the CSS Apply/Manage
Styles pane (which some of us have been avoiding or ignoring).
Another general assumption is that you design your web sites for a
consistent appearance where most (if not all) pages will use the same text
fonts, borders, headers etc. or - that your site comprises distinctive groups of
pages each having a consistent appearance within each group. This is just common
sense and the way documents of any type are typically designed. If yours is the
bizarre requirement that every page on your site look radically different from
every other, CSS will probably be no help to you. The whole point of CSS
is to relieve the tedium and improve the reliability of modifying the appearance of groups of web pages
having similar structures and appearance.
Unless you web site (planned or existing) is of the simplest design and very
small, you should learn something about CSS. Otherwise, you will be left in the
dust.
Gird up your loins, such as they may be. CSS comes with a steep but short learning curve.
It's worth it. The nice thing is, you don't have to learn everything at once and
knowing just a few fundamentals can already make you more productive while you
come up to speed. You can
acquire the skills incrementally and use CSS as much or as little as you feel
comfortable with because a mix of the old and the new ways is perfectly
workable. A useful beginner's expertise can be acquired within an hour or so by
using the tutorial link you will find later.
By now you have some idea of why CSS was developed. To summarize:
- To minimize and organize the effort required to manage style/appearance changes
to a Web site. Mass changes to document appearance can be
made in one place and apply immediately to all pages without making any
changes whatsoever to the pages themselves. True, we have had page
templates but these are really nothing like the powerful and comprehensive
CSS concept.
- To separate document appearance from content.
What this means in practice is that almost all style markup
now resides in an external style sheet while the HTML file representing a Web page
contains almost nothing except text, simple links to styles in the external
sheet and links to other content such as
images. The source view of a fully CSS based Web page is remarkably free of clutter and
distractions. Similarly, the style sheet has no content other than the style
markup sections. This makes it much easier to edit either one when working
directly with the code.
While there are numerous fine Web tutorials and guides, many err in assuming the visitor already
knows quite a bit about the subject. The assumption here is that the reader may
not even be certain what CSS is.
- HTML (HyperText Markup Language) is what you see when
you choose the source or code view of a web page. It's a collection of
plain-text instructions telling the browser what to display when you load a
web page. When you build a web page using a WYSIWYG editor like Expression
Web, the editor creates the HTML for you. Later, you can either use the
editor to change the page or modify the HTML directly with any ordinary text
editor.
- CSS stands for "Cascading
Style Sheets". CSS is a software technology designed mainly for the purpose of making
it possible to apply appearance changes to a large number of similar web pages by
making the changes in only one place - inside an External Style Sheet (which
is just a .css extension text file usually kept somewhere inside your web). For example, in the
old way if you wanted to change the appearance and/or color of all your page
borders you had to go to each page and make the changes manually, although
DWT templates were a help with this. CSS
now supplements templates and you change styling attributes just once - in the style sheet - and they
automatically apply to all the pages in your web that link to that style sheet.
Furthermore, the changes are applied dynamically by a visitor's browser when
he visits your site. That means you do not have to load/re-save all your
pages or re-publish your site just to have modifications applied.
- By "Style" is meant the
appearance of Web page content, such as a block of text, a table or a
heading. A style might include font, color, border widths and
background color. In
traditional HTML, style items are hard-coded right where the page content
is defined and you might see there a string of styling elements such as
cellspacing='4px'. In the new world of CSS, style items can still be
coded inside the HTML for the page (Inline Style), in a block at the top of
the page and indirectly referenced (Embedded Style) or, in an External Style Sheet
(usually the best way to exploit this new technology) which is
also indirectly referenced. All three styling methods will co-exist for the
same page. Stick with External sheets as
much as possible, using styles internal to a page only for local appearance
customization (that is, not shared by any other pages).
- A Style Sheet is a simple .css extension text file into which all (or most) styles for a group of
similar appearing pages are collected either
by removing them from existing web page HTML or putting them there in the first
place while preparing a new page. EW supports the familiar drag-and-drop
paradigm (using the "Apply Styles" menu on the right side of
your screen) for moving styles from within a page out into the external style
sheet and it automatically generates the links for locating the styles
there.
- By Cascading is meant the following: When
a visitor's
Browser loads a page it applies a style to each page element by looking
first in the External Style CSS Sheet, next in the block of Embedded styles at
the top of your page HTML and, finally, in the HTML itself which defines the
page content to be styled. The last styling element(s) it finds by
working down in this order take(s) precedence and any missing
but required styling elements are filled in from the last place they are
found higher up. If missing altogether, a system default is used. In this way you can easily over-ride styles in your CSS external
sheet should a localized need arise. Just type the changes into the page (or
use the WYSIWYG tools of EW) and
those are the ones that will be used while all other page content continues
receiving styling from higher in the styling hierarchy. It's a very powerful
and flexible concept. The term "cascading" is
a slightly misleading. It might have been more meaningful to use "Hierarchical
Style Structure" because that's what it really is. The idea of "cascading"
becomes more descriptive if you link a page to more than one .css style
sheet in which case the additional sheet(s) take their place in the
hierarchy of style selection as described above, with those higher up having
lower priority. Using multiple style sheets in this way is for more complex
styling than what's considered here.
In summary, what you do in CSS is allocate a .css extension Style Sheet for your web and then, inside your HTML for each page place a
link to
that sheet (EW will do this for you with the "Attach Style Sheet" control,
as well as allocate the .css file itself). This
Style Sheet will often be in the same folder as your web pages, where it
usually makes most
sense to put it, but you can place it anywhere within your site. You might
prefer having a centralized collection of sheets in their own folder with a
sheet for each group of pages
with a shared distinctive appearance - but for most smaller webs dealing
with related subjects there will only be one .css sheet or, at most, two
or three. This is really a matter of personal preference and styling philosophy
or need.
After that you prepare your pages pretty much as usual, just making sure to
link each one to that .css Style Sheet. As you specify attributes for sections
of content using EW you see the styles appearing with useless names such as "Style1" in the
Styles display on
the right of your screen. These styles are Embedded and at any time you
can rename them to something meaningful - like "SectionHeader" (in the
"Styles" pane to the right), for example - and drag them into the
External Style Sheet where they usually belong, as illustrated in the tutorial. You can
also edit a style. EW does a great job tracking all this activity and
automatically does live updates to your page and the CSS sheet no matter how you
make the changes. When a web page is displayed, it is styled by means of the browser following a
link (placed ahead of the content) which locates the named group of
styling elements residing in the CSS sheet.
Of course, once you have tucked away a style you want to use with similar
page content on other pages (or the one you are working on) you can now
highlight new page content and simply click on the style you want in the
"Styles"
menu on the right. You are already saving time! Once you get the hang of it this it
is very addictive.
At any time after your web is up and running and you decide you want to
change any number of styles you simply load up the CSS sheet in EW and work with
"Modify Style" from that right-side "Styles" pane or ... you can edit the styles
directly in the CSS sheet or ... you can make changes in the CSS properties pane
on the left of the screen. There is a sometimes confusing array of choices for
doing the same thing but you soon get used to this.
I'm not going to do a step-by-step here because there is already an
excellent beginner's tutorial on the Web. Click
here to load and view but first, read to the end of this article to
complete the overview.
- Allocate a practice Web on your local machine
and use this for initial learning. This gives you total freedom to
experiment and you will learn faster than if working with a "real" site
while worrying about doing some damage. If you must work live on your remote site, backup your existing,
working
pages either en masse or one at a time as you work on them. I usually work live
and simply allocate a backup folder inside the web for the copies.
- Even if you are a WYSIWYGer like me, open the split view with HTML code
and also your CSS file. Watch what happens as you build your test pages.
This is an extremely valuable exercise and you will learn something. You may even find
how convenient it sometimes is to modify text directly in the CSS file or
inside your HTML. EW notices all this and keeps all files in perfect
synchronization - in real time. You can slip back and forth between WYSIWYG
and direct coding without concern over anything breaking. EW is amazing.
- When things look good, make backup copies of the CSS file and your
new pages. Nothing is more depressing than ruining a complicated
piece of work with a "finger
problem" and then having to recreate it.
- Practice and experiment. Try everything.
- Maintain a file of notes and ideas. That's
how this review got its start. When
something works, document it and what you did to overcome a problem or
misconception. You will gradually build up a nice record of your own tips
and tricks. This can prove exceptionally useful if you are away from EW/CSS
for awhile and return to find you have forgotten a few things.
- This isn't really a CSS tip but CSS can help you manage this issue. Many
of us suffer visual impairment of various sorts. Behavioral
psychologists inform us (and I can attest to this from experience) that light text
on a dark background is far less fatiguing and more visible than the traditional
dark on white (which became the standard mainly because paper is naturally
light toned). A massive light background generates flare inside the eye,
reducing contrast and causing other problems. Of course, this approach will
simply be impossible for some types of content or presentation goal but many
of us would appreciate your bearing it in mind just the same. CSS makes it
much more convenient and less time consuming than formerly to experiment
with web appearance and optimize visibility for a variety or purposes.
- A table layout for this page keeps text lines comfortably short. Beyond
a certain line length the eye has trouble skipping to the beginning of the
next line. Too many web sites have text going to 100% side to side. It's
especially problematic with extra wide hi-def monitors.
Click Here for some ideas
concerning how to convert an existing legacy (Front Page designed) web site to
the CSS standard. Again - just an introduction.
This page was prepared using CSS by copying an existing .css Style Sheet,
renaming it and
then copying an existing web page from my site and replacing the text content.
All I did was delete the old content and type in the new text. I'm lazy. If you examine
the HTML
text you will see a few Inline and Embedded styles which we generally want to
minimize in CSS. These
are the inevitable over-rides needed to make local style modifications and
demonstrate the flexibility of CSS.
If you check around the Internet you will find considerable discussion
concerning how well browsers support CSS. It would seem all browsers
have some weak spots such as recognizing certain types of styling markup when
in-line only (as opposed to being in the style sheet, for example). CSS is new
and these problems will eventually disappear. In the meantime, if something
doesn't work despite your best efforts, Google the problem to find if it's
browser related. You may just have to live with a few of these glitches for
awhile.
Now's a good time to take that
tutorial.
Back to top
of page
|