HTML & CSS
Best Practices
best prac·tice
commercial or professional procedures that are accepted as being correct or most effective.
Tags
<li>Some text here.
<li>Some new text here.
<li>You get the idea.<ul>
<li>Some text here. </li>
<li>Some new text here. </li>
<li>You get the idea. </li>
</ul><div>
<p>Here's an interesting fact about corn. </p>
</div><DIV>
<P>Here's an interesting fact about corn. </P>
</DIV>Tags
Img Tags
<IMG src="pizza-image.jpg" /><img src="icon-page.jpg" alt="A pizza I ate." />Classes
<p class="red">Error! Please try again.</p><p class="alert">Error! Please try again.</p>.Red_Box { ... }.alert-message { ... }Div
<div class="container">
<div class="article">
<div class="headline">Headlines Across the World</div>
</div>
</div><div class="container">
<article>
<h1>Headlines Across the World</h1>
</article>
</div>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>Organize Code with Comments
header { ... }
article { ... }
.btn { ... }/* Primary header */
header { ... }
/* Featured article */
article { ... }
/* Buttons */
.btn { ... }CSS Selectors
a,.btn{
background:#aaa;color:#f60;font-size:18px;padding:6px;
}a,
.btn {
background: #aaa;
color: #f60;
font-size: 18px;
padding: 6px;
}CSS Selectors
img {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 9px;
margin-left: 0px;
}
button {
padding: 0px 0px 0px 20px;
}img {
margin: 5px 10px 9px 0;
}
button {
padding-left: 20px;
}Linking External CSS Files
<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>Linking External JS File
<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>Validate Continuously
Use a CSS Reset
html,body,div,span,applet,object,iframe,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,label,legend,p,blockquote,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}body{line-height:1;color:black;background:white;}:focus{outline:0;}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}abbr,acronym{border:0;}The End
deck
By Teagan Wrest
