Code 1# Declare the Correct DocType
When I was younger, I participated quite a bit in CSS forums. Whenever a user had an issue, before we would look at their situation, they HAD to perform two things first:
- Validate the CSS file. Fix any necessary errors.
- Add a doctype
.
"The DOCTYPE goes before the opening html tag at the top of the page and tells the browser whether the page contains HTML, XHTML, or a mix of both, so that it can correctly interpret the markup."
Most of us choose between four different doctypes when creating new websites.
http://www.w3.org/TR/html4/strict.dtd"> http://www.w3.org/TR/html4/loose.dtd"> http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Code 2# Always Close Your Tags:
wrong code:
- Your Some text here.
- Your Some new text here.
- Your You get the idea.Better Code:
- Your Some text here.
- Your Some new text here.
- Your You get the idea.
Code 3# Never Use Inline Styles
<p style="color: red;">I'm going to make this text red so that it really stands out and makes people take notice!</p>
When creating your markup, don’t even think about the styling yet. You only begin adding styles once the page has been completely coded.
Better
#someElement > p {
color: red;
}
Code 4# All External CSS Files Within the Head Tag:
While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively.
– ySlow Team
<head> <title>My Favorites Kinds of Corn</title> <link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" /> <link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" /> </head>
Code 5# Javascript Files at the Bottom:
Better:
<p>And now you know my favorite kinds of corn. </p> <script type="text/javascript" src="path/to/file.js"></script> <script type="text/javascript" src="path/to/anotherFile.js"></script> </body> </html>