Good Coding Practices
←... CSS Multiple Declarations
Practice Makes Perfect...
So far, our code has been pretty simple and there hasn't been much of it. But, as your website grows into the masterpiece that I know it will, the amount of code needed will grow too.
Using good coding practices will help to keep you from getting lost in a mountain of jumbled up code.
HTML Indentations...
For clarity's sake, most programmers indent their code. Whether it's HTML, Java or most any other language, indenting is a great way to make it easier for you (and others) to read your code.
Essentially, indenting just provides you with visual cues that greatly help when trying to find a certain location in the code. As you've realized, indenting doesn't effect the appearance of the page as browsers ignore extraneous spaces in the code... usually (more about that later).
Notice how most of the opening and corresponding closing tags line up with each other. The <html> tag is first so it's farthest left. Because the <head> tag is inside of the <html></html> tags, it's tabbed over. Everything inside of the <head></head> tags is tabbed over yet again and so on, and so on... You get the idea.
Standard practice is to indent three spaces. I use two spaces because I just like it better. How ever many spaces you choose to indent is a personal preference and is completely up to you.
CSS Indentations...
Up until now we haven't been indenting our CSS and that's because I thought it would be easier for you to see what was going on that way. However, you'll eventually be adding LOTS of CSS declarations and if you don't indent them, you'll end up with horizontal lines of code a mile long.
Standard CSS indentation is different from HTML because CSS doesn't have opening and closing "tags", just the curly brackets.
As we'll be indenting our CSS from now on, change the CSS part of your code to look like this...
<head>
<title>ChangRox.com</title>
<style type="text/css">
body {
background-color: silver;
font-family: Arial;
}
.crrt {
color: red;
}
.dingleberries {
color: red;
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<p class="crrt">Hello World!</p>
<p>Welcome to <span class="dingleberries">ChangRox.com!</span></p>
<p>The site for extolling the virtues of Chang.</p>
</body>
</html>
This is the standard way. Each declaration on it's own line with a blank line between each group of declarations. I know it looks a little more confusing for right now, but trust me, you'll appreciate it later on.
Commenting Your Code...
A code "comment" is simply a note. Usually it's a note to yourself, but if you were working on a group coding project or were planning on distributing your code, it could be a note to someone else.
Add this to your code...
<head>
<title>ChangRox.com</title>
<style type="text/css">
body {
font-family: Arial;
}
.crrt {
color: red;
}
.dingleberries {
color: red;
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<!-- This is the beginning of the body of my page. -->
<p class="crrt">Hello World!</p>
<p>Welcome to <span class="dingleberries">ChangRox.com!</span></p>
<p>The site for extolling the virtues of Chang.</p>
</body>
</html>
Save/refresh and you'll see nothing's changed. That's because the browser ignores everything between
<!-- and -->. The most common use of comments is to define different sections of the code. Imagine if you hand coded a TGP with a hundred rows of thumbnails. You would have a LOT of lines of nearly identical code. Using comments to define where each section is would greatly help if you had to, say, find a particular thumb/link to change or find the start of some advertising code that you inserted.
A CSS comment works just the same, but it looks different in that it uses a forward slash/asterisk combination like this...
<head>
<title>ChangRox.com</title>
<style type="text/css">
/* My Style Blocks Start Here */
body {
font-family: Arial;
}
.crrt {
color: red;
}
.dingleberries {
color: red;
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<!-- This is the beginning of the body of my page. -->
<p class="crrt">Hello World!</p>
<p>Welcome to <span class="dingleberries">ChangRox.com!</span></p>
<p>The site for extolling the virtues of Chang.</p>
</body>
</html>
Save/refresh to see the (lack of) result. See that? /* Everything Between These Symbols is Ignored */
Naming Conventions...
So far we've used some kind of silly names for our CSS classes. In practice, you should make the names something meaningful because you don't want to have to keep referring to the stylesheet every time you try to implement something. It's a lot easier to remember what a class called "boldredtext" does rather than one called "dingleberries." However, early in my own learning, sensible names confused me at first, in that it took me awhile to realize that a name like "boldredtext" had nothing to do with the output, so I told you to use dingleberries just to make it clear to you. We'll be using more sensible names in the future.
Let's Get Ready to Rumble...
You now have a good enough understanding of how this stuff works that you're pretty much done with the basic stuff. So now it's time to get a little more advanced, because CSS is about to pull out a giant can of whoop-ass on HTML...
External Style Sheets Tutorial... →
© 2008 - 2011 fapmaster.com