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

Made with Slides.com