MSSE SENG 5199

Course Materials for the MSSE Web Application Development Course

HTML and CSS Overview

Mike Calvo

mike@citronellasoftware.com


HTML


XML Syntax


Basic Document Structure

<!DOCTYPE html>
<html>
  <head>
    <!-- This is a comment -->
    <!-- The stuff in the head is meta data -->
  </head>
  <body>
    <!-- Stuff you want to display has to go here -->
  </body>
</html>

HTML Document Structure


HTML Escaping


HTML Forms: User Input


HTML Rendering Engines


HTML 5


HTML 5 Support


HTML Tables


When To Use Tables


HTML Formatting


CSS


Stylesheet


Example Stylesheet

div: {
  color: black;
}

CSS Selectors


Class attribute


Decendent Selectors


More Specific Decendents


Attribute Selectors


Pseudo selectors


Pseudo Examples


More Pseudo Examples


Pseudo Element Examples


Non-Stylesheets


Adding CSS Reference To HTML


Style Elements


Cascade?


Debugging Styles


Force a Style

div {
  color: red !important;
}

What Can I Style


CSS Positioning


CSS Position Property


CSS Units


Shorthand Properties

div {
  border: 1px black solid; /* sets 12 properties */
  padding: 5px; /* sets top right, bottom, left */
  margin: 1px 5px 1px 0; /* top, right, bottom, left */
  background: white url(foo.gif) no-repeat top right; /* sets 4 properties */
  font: italic bold .8em 1.2 Arial;
}

CSS3


Media Queries


Media Query Example

@media (max-width: 600px) {
  .sidebar {
    display: none;
  }
}

@media (min-width: 700px) and (orientation: landscape) {

}

@media screen and (min-aspect-ratio: 1/1) {

}