Let's go back to the basics. I'm horrified to see so much websites poorly coded at work, even if there's only 0.1% chance someone will read this, I hope it will be helpful and contribute to better coding practices ! Note: I'm talking about XHTML here, not HTML. They are the same, yet very different. I like how XHTML codes are better formed than HTML and usually cleaner because of the rules I'm going to mention.
- Elements must be in lowercase
- Elements must be properly nested
- All elements have to be closed, empty elements such as img, br, hr, etc. too.
- Attributes values must be between quotation marks
Your elements and attributes must be in lowercase:
Bad:
<IMG SRC="image.jpg" ALT="An image" />
Good:
<img src="image.jpg" alt="An image" />
The elements have to be properly nested, or symmetrical if you want. The last element opened should be the first closed. Let's say you enter first in an elevator, it stops at several floors, it's only logic that you get pushed to the back and leaves the elevator last, no? It's the same here.
Bad:
<div><p>Hello</div></p>
Good:
<div><p>Hello</p></div>
All elements must be closed.
Bad:
<p>Hello world
Good:
<p>Hello world</p>
Empty elements have to be closed too. They're called empty because they don't need anything "in-between" them. They're "standalone" elements.
Bad:
<br><hr><img src="closeme.jpg" alt="Close it">
Good:
<br /><hr /><img src="closeme.jpg" alt="Close it" />
One can argue that even if it's poorly coded, as long as the page shows up correctly, it's fine. Urgh, it's not. Besides, if you want to change your websites in the future, it's going to be a pain. I had to add changes to a lot of poorly coded websites and it's just... a big mess. And time-consuming.
CSS Syntax
CSS is simplier. A CSS rule always has to look like this:
selector { declaration }
It's very simple, the selector basically is the X/HTML element that you want to style. The declaration consists of the properties and values you assign to this element.
selector { property: value; property: value; }
You can have multiple properties and values. For exemple, I want all my paragraphs to have a blue background and a green text (don't ever do that !)
p { background-color: blue; color: green; }
You can of course use only one line but inserting line breaks between the properties makes the code easier to read.
p {
background-color: blue;
color: green;
}
Never forget the semi-colon. A stylesheet consists of CSS rules, so you just have to go on with the other elements you want to style.
