Forum Moderators: not2easy
I was wondering where the best place is to get the VERY BASICS (I am not a very techy person) on CSS and incorporating into HTML.
Thank you so much,
Steen.
Thank you,
Steen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML 4 Strict</title>
<style type="text/css">
/*
* { border: 1px solid purple; }
*/
</style>
</head>
<body>
</body>
</html>
/* ... *//**/*Hope I'm not not being presumptuous, drbrain
ul { border-color: red } to see how an unordered list is affecting layout.
I mostly use this for diagnosing pixel (em) precise positioning problems. (I've mostly switched over to a .05em border because it scales well, the 1px is a relic.)
then everything (that's what the single * indicates) will have a thin purple border
One problem with the 'drbrain purple border technique' is that it adds 2px to the width of all of the boxes. This can spell box-model death for a carefully manicured layout in compliant browsers (IE Quirks will simply pack it into the width but NS, Moz & Opera will add it to the outside).
A box-checking technique that avoids this (but also, sadly, requires more work) is to set glaringly spastic background colors, one on each box. This gives you a clear vision of where one box ends and another begins. Then, once the layout is right, go in and switch to your more carefully selected color scheme.
As for a response to the original post...
the online MSDN reference library has a great listing of CSS properties, definitions and examples of use that are far more accessible to the non-techie than the W3C listings (which you really ought to work toward being able to read and decipher).
Another suggestion is to find a site with some aspect that you like, then download it's .css files and pick through them. Look up selector syntax and properties that you're unfamiliar with in the MSDN library [msdn.microsoft.com], W3C specs [w3.org] or any texts you can find. This will quickly build an applicable understanding of what certain things do.
If you are really new to CSS, the website has very good interactive "lessons" for CSS (all free, no registration), it also has toturials on HTML and other web related technologies.
On most of the examples a split window with sample code on the right and what the code produces on the left... And, you can experiment by editting the code in the left frame and seeing the results on the right.
good luck!
