0   wk 1  wk 2   wk 3   wk 4  wk 5   wk 6   wk 7   wk 8   Assignments

Cascading Style Sheets (CSS)
IST:541. Term 5
Professor Miguel Lara, Ph.D.

Week 2 Objectives:

Cascading Style Sheets (CSS)
List of Content
Procedural Job Aid.  "How to Buy from a Vending Machine Tutorial"

Week 2.  Assignments.

Procedural Job Aid.
​How to Buy from a Vending Machine Tutorial
http://itcdland.csumb.edu/~dpayne/jobaid/index.html

Lab 2. 

Week 2 Topic.  CSS Rules-

1. Body-  
   The first CSS Rule is the Body.
   body  {
   background:  #000000;    /* background color * /
   color:  #444;                        /* text color for whole document * /
   font - size:  12px;
   font- family; Verdana, Geneva, Sans-Serif;
   }
   
   "H1" and "H2" heading elements.
   h1,  h2  {
        text - align: center;     /*  centers h1 and h2 content   * /
   }
   
   
2. Wrapper-
   #wrapper   {
   width:  900px;
   margin:  0 auto;  /* centers wrapper  */
   border:  solid 0px black;
   }
   
   To avoid having web pages with long lines of text, it is convenient to wrap the whole content of a web page within a div container and restrict its width.  
   
   To add a "wrapper" div container, add the following line right below to the >body> tag:
   <div id-"wrapper">
   
   Notice that id="wrapper" does not have the hash tag, however the CSS rule does.
   
   Close the wrapper container with the following line right before the closing </body>tag:
   <div>  <!--closing the wrapper -->
   
   Save the file and jobaid.css file and refresh / reload the index.html file in your browser to see the latest changes.  Explore changing the width of the #wapper and also the width of the border.
   
   
3. .stepTitle-
   It has some padding, the text alignment is to the left, the font size is little larger (16px) and the font weight is bolder.  The dot is used when the CSS rule is applied to a class and the hash tag is used when it is applied to an id.  
   
   An id is used to distinguish unique HTML elements, use it when you want  to apply a specific style to just one element in the entire document.   A class is used when the same style is going to be applied multiple times.
   
   .stepTitle  {
   padding:4px;
   padding-top:10px;
   text-align:left;
   font-size:16px;
   font-weight:bold;
   border-top-left-radius:  10px;
   
   Another style that we are applying to the ".stepTitle" class is the "border-radius" to round the corners.  As seen in jobaid.html.
   
   
4. .stepDescription and the .stepImage-
   They are class rules.  An important CSS rule in both of them is the "float:left".  In Web design a webpage with multiple columns must be surrounded by a div and each div must be floated, preferable to the left.
   
   Note:  When having floating elements, it is necessary to "clear" the floating after there are no more columns to be floated.  In the "index.html" document, the floating is cleared with the following line:
   
   <br style="clear:both">
   
   
5.  Section 4:  Add the remaining steps
   
   Copy and past the stepTitle and stepContent div containers and be sure to include them within the closing </wrapper>. 

Reference:  Tutorials/Job Aid (Lara, 2016)