Page is a not externally linkable
SuzyUK - 8:59 pm on Sep 9, 2004 (gmt 0)
I apologise if there's stuff in here that's been mentioned already but I started writing before most of the replies were in ... feel free to point out errors.. Part 1 1. Validate Validate Validate In order to Validate you will of course need a valid <!Doctype> [w3.org] and you should be aware of the <!Doctype> switch [msdn.microsoft.com] that switches on "standards compliant" mode in IE6. periodically validate your CSS [jigsaw.w3.org] this will help find things like those missing semi-colons. 2. Get It Right First! 3. CSS Syntax /* CSS Comments look like this */ Comments should be used. They are useful for seperating/sectioning group areas of code. They are especially useful if using filters/hacks/workarounds as they will remind you (or others following you) what the workaround was for and why. selector {property: value;} semi-colons should always be used at the end of a rule, it's good habit and it avoids errors when adding more rules after the last one. CSS2 property index [w3.org] Selectors [w3.org] .classname {} is a Class selector any elements with the class attribute = to that classname will be matched #idname {} is an ID selector any elements with the ID attribute = to that id name will be matched. Note: That an ID should only be assigned to a unique element within a page i.e. once. It should IDentify an area of a page as opposed to classes which can apply to multiple occurences of an style within a page. ID should also be used as a "bookmark" anchor because "name" is deprecated. (see more in the section on Styling Links/ Link States in later section) Selectors can and should be grouped for elements that have similar properties.. rather than declaring the style multiple times in seperate rules.. e.g. you want all your headings to be the same font-family but different from the one you already specified in your main body text. Grouped selectors should be seperated by commas. 4. Terminology This refers to a <div> element it is made up of an opening <div> tag and a closing </div> tag, so referring to whether a "tag" is closed or not is not correct, it should be is the element closed. This become especially more focused when talking about e.g. an <img> element ~ it doesn't have a closing tag, but in XHTML the <img /> element needs to be closed. Just good practice and all that.. inline styles embedded stylesheet <head> Using embedded stylesheets is an advisable way to work when building/tweaking a CSS design, it allows for quick changes and tweaks and avoids caching problems that may occur because a previous external stylesheet is being held in your cache thus you may not be seeing what you hope to see. The Stylesheet can then be put into an external document (.css extension) and imported once it is finalised. external stylesheet e.g. external stylesheets can then be imported into your document via a statement within the <head> element of your document.... more to follow... [edited by: SuzyUK at 10:08 pm (utc) on Sep. 9, 2004]
OK.. here's part 1 (I'm at four pages and counting.. ), you encouraged me (great thread topic) to drag some of this stuff out of my head, cos that's the only place it resides (in it's entirety that is) at the minute, and write it down. There's even stuff in some of the questions that you've asked that is not written anywhere yet.. and even if it is it's changing almost daily lol...
Make sure the HTML document you are working on is valid. [validator.w3.org]. It needn't necessarily be 100% valid as per W3C specs, but at the very least it will tell you about any unclosed, improperly nested elements, which in turn could cause CSS problems.
Design in a CSS Compliant browser first, e.g. Moz, Opera, Safari. Then go back and test in IE. It's easier to "dumb down" your CSS using hacks/filters/workarounds for IE. Much more difficult the other way around, and it lets you see how stuff should work before IE shatters your CSS illusions ;)
CSS2.1 property index [w3.org]
some common examples:
h1 {} h1 is a Type selector it will match any element of that type within the document.
Example:
body {font-family: verdana, arial, sans-serif;}
h1, h2, h3, h4, h5, h6 {font-family: georgia, serif;}
One thing, pet peeve if you like,
<div></div>
This refers to when the styles are actually in the HTML itself.
example: <p style="color: red;">some text</p>
This refers to a style sheet that is embedded within the <head> element of the HTML page.
<title>....etc..
<style type="text/css" media="screen">
p {color: red;}
</style>
</head>
This usually has a dot css extension (though dynamic ones can be built) it's a plain text file incorporating nothing more than than the syntax explained above (i.e. NO HTML)
/* this is my general paragraph text color */
p {color: red;}