Jan 282013

Last week we introduced and discussed CSS.  Specifically, we talked about the following:

  1. CSS stands for Cascading Style Sheets

    This means that the last (or most specific) item processed takes precedence.  So, an external stylesheet gets processed first, then embedded styles (using the <style></style> tags in HTML) get processed next, and finally inline styles (set as attributes on an HTML tag) get processed last.  These last items will override any earlier styles.

  2. CSS syntax

    Inasmuch as CSS is a different language than HTML, it has it’s own syntax.  Instead of referring to elements as tags (as in HTML), we refer to them as “Selectors” (because we are selecting specific elements to style).  Once you identify a selector, you change value of specific properties.  This is done inside of curly brackets.  So, a template looks like the following:

    selector { property: value; }

  3. The Box Model

    Each element* has several parts to it: content, padding, border, and margin.  This is what is commonly referred to as the Box Model (see http://www.w3schools.com/css/css_boxmodel.asp for a visual).  The width of an element is the width of its content (except in Internet Explorer 7 and earlier, which counted all the way up to the border).

Click to download the files we created.

 Posted by at 2:39 pm

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>