Is learning to write CSS a better use of time than finding and using a
package that produces complete web pages?
I've moved to a new platform (Macintosh), taking with me about 400
personal web pages, some dating back so far I probably wrote them in vi.
About 4 years ago (thanks in part to hints found in this group) I
converted about 80 pages to CSS, and was fairly happy with the result,
plain though they are. Since then I've forgotten most of what little I
learnt about CSS, since I didn't revise the CSS. Skimming various Eric
Meyer books has only helped a little so far in bringing me up to date on
CSS.
I am wondering whether writing CSS (and HTML) is still a reasonable
approach to updating old web pages, and writing new ones? Perhaps it is
time to change to a program that does everything for the web site
creator? That is, if anything like that exists in the price range I
would consider. My tests so far have eliminated a dozen or so HTML
editors from the 30 I've downloaded so far. Also, I am rapidly coming
to the conclusion that looking at HTML editors is entirely the wrong
approach to making web sites.
CSS now seems to me even more confusing than it was four years ago, in
terms of making decisions about what to use. I have a very simple valid
HTML test page with my test CSS in the document up at
http://www.ericlindsay/sheltersrus/index.html Even that raises many
questions I can't answer (entirely apart from whether it will work in
anything except Safari and Opera).
Is it reasonable to use HTML 4.01 Strict, or should I look at XHTML? I
seem to be seeing posts here and elsewhere implying more browser support
problems if I go XHTML. I did find a page that gave support for
sticking with HTML on http://www.spartanicus.utvinternet.ie/
Is charset=ISO-8859-1 still reasonable, or should something Unicodey be
used?
Should you really put link rel="icon" href="favicon.ico"
type="image/x-icon" in your header, or leave it out entirely? Don't all
browsers pick up a favicon in your web base directory anyway? I guess
that isn't a stylesheet question.
I used to use <base target="_top"> in the head to jump non-Javascript
browsers out of external framesets imposed on your site, but a validator
will complain about that. Do you ignore the validators, or is there
some other way?
Is * { etc } a reasonable way to include your main CSS styles, or is it
better to have a div id=document around your entire page and style that
instead? Or should you maybe style the html tag with your main CSS
styles? I found a discussion that seemed to indicate the * { approach
was a problem.
text-shadow: 5px 5px 10px #11aaaa; works just fine in Safari, and
doesn't show in Opera (either result is fine by me), but is that sort of
thing likely to break some other browser entirely?
float: right; makes my heading keep out of the way of my logo image
(unless someone makes the page very narrow in their browser), but is
using float for positioning likely to break things in lots of browsers?
And if float isn't a good idea, what is?
color: red; background-color: transparent; If I put in a color the
validator warns about not having a background-color, but it won't accept
transparent. I thought transparent was both allowed, and the default.
http://www.w3.org/TR/REC-CSS2/colors.html I eventually found a thread
on validation about a week ago (my newsgroup reading started from mid
July, the oldest posts available to me via my usual reader). That at
least explained how using transparent could leave problems with some
combinations of colours, so I can see a warning is justified. I guess I
might as well leave out the transparent, since it is the default.
..image { border: none; margin-top: 20px; padding-top: 20px; }
img { border: none; float: right; padding-left: 15px; }
This seems very messy. I wanted each picture to stay to the right of
each associated paragraph, which would be easy if I used a table.
Instead I've added a div class="image" to each paragraph, so I am headed
back to tag soup. If you make the browser window sufficiently wide the
pictures will align away from the right margin anyhow. I have the
border: none; (probably only needed in img) because I am pretty sure IE
will try to put a border around both the picture and the padding. I
thought the default was not to show a border?
In the past I've avoided using images (modem bandwidth and lack of host
site space), but I now I would like to add lots of images. However it
seems that instead of IMG I should use OBJECT. Except browser support
may not be there. Luckily this topic was covered in
http://www.spartanicus.utvinternet.ie/embed.htm
#logo { border: none; position: absolute; top: 0px; left: 10px; width:
100px; }
I wanted the logo (when I get time to draw it) to be displayed in the
traditional top left corner. But I wanted the first stuff in the
document body to be the h1 and first paragraph, to make things work
better with search engines. I will always place material for search
engines ahead of graphics or html or scripts or anything else in my page.
But position absolute means I have to make other things like the
sidebar1 start lower on the page. If someone makes their browser
magnification high enough that will break. Plus so far I'm not sure I
am not headed for more problems by doing an absolute position.
This bit of stuff styling the footer is just a total disaster, and so
far I have no idea where I am going with it.
#footer p {margin-top: 0; margin-bottom: 0; }
#footer h3 {margin-top: 0; margin-bottom: 0; }
#footer {width: 75%; float: right; }
..business { color: #dddddd; background-color: transparent; }
h3.business {font-size: 1.5em; }
p.business {font-size: .8em; }
Shouldn't I be able to do #footer h3 p
So far I don't understand why that isn't operating on h3 and p
Obviously something I've missed entirely, but I don't even know what to
search for. Probably it operates only on the p that is a child of h3,
but so far I have absolutely no mental image of inheritance. I keep
hoping to find a diagram like the box model ones that explained the
content inside padding inside border inside margin stuff.
Then there is the h3.business and p.business which both work, but
contrast that to these from the #sidebar1
..sb ul {margin-top: 0; padding-top: 0px; }
where I could only get the sidebar looking reasonable by adding that .sb
class, which seems to me like another piece of tag soup.
I don't want to even think how messy CSS might get when I finally get at
IE on a Windows PC to check what breaks. Plus so far I haven't even
looked at menus and link styling.
So, anyone feel like commenting on whether I should persist with CSS, or
put the same effort into trying to find a program that will make web
pages for me (probably not in CSS).
--
http://www.ericlindsay.com