Week 1 Review qestions for CSS class

• Many tags do not have to be closed such as the <p> tag and the <li> tag.  Why is it important to have an opening and a closing tag when using STYLES?
  
  
• The most basic answer is that the closing tags give a clear indication of where the style should stop being applied. Consider the example shown below in which the justification of the image is left up to the browser rather than controlled by the author when the author fails to include a closing tag.
  
  
  
  This is especially true for descendant selectors where the application of CSS to the HTML document relies on the structure of that HTML document – in particular the parent-child relationship of elements. (p. 46 CSS: The Definitive Guide (3rd edition, Eric Meyer)
  
  
• What is an inline style? Please provide an example.
  
  
• The inline style is the most local type of style and is also given the highest order precedence. The style is applied to a single tag using the style attribute of that tag.
  
  For example <div style="background-color: #cc0000; width: 100px; height: 100px;" > </div>
  
  
  
  
  
• What is a document level style? Please provide an example.
  
  
• A document-level style is next most local type of style and is given the second highest order of precedence. The style is applied to a single file and is written in the head of the html file between and open and close style tag.
  
  For example the current doucment has the following class selectors as part of its document-level style. It allows one to make a distinction between a list item that poses a question and a list item that provides an answer.
  
  

  li.ques
  {
   	font-family: Verdana, Arial, Helvetica, sans-serif;
  	font-size: large;  
  	font-weight: bold
  }
  li.ans
  {
   	font-family: Verdana, Arial, Helvetica, sans-serif;
  	font-size: medium;   
  	font-weight: normal;
  	margin-left: 3em;
  }
          

• What is a linked style? Please provide an example.
  
  
• A linked style is a non-local type of style and is given the lowest order of precedence. The style is external to the HTML file to which it is applied (written as a separate file) and thus may be applied to any number of files.
  
  For example, Lab 1.2 contained the tag in the head of the HTML. <link rel="stylesheet" type="text/css" href="Lab_1_2.css" /> which linked the HTML file to the following external CSS file
  
  
• In the CSS code h1 { font-family: helvetica, arial, sans-serif; }, which font value is given first priority?
  
  
  1. helvetica
     
  2. arial
     
  3. sans-serif
     
  4. all have equal priority
     
     
• Answer: helvetica. The fonts are given a left-to-right priority, meaning that it tries to satisfy the request on the left before proceeding to the next in the list.  This is why the right-most font should be a generic font.
  
  
• What does the cascade refer to in Cascading Style Sheets?
  
  
• As discussed above CSS allows for a hierarchy of styles where in-line takes precedence over document-level takes precedence over linked so that any "conflict" in style is resolved. Moreover, CSS allows for a hierarchy of linked CSS files so that an author may append or even alter his/her CSS for select pages or indeed a reader may add a style for purposes of accessibility (e.g. changing colors for a colorblind reader or font size for the nearsighted) or simply for purposes of a preferred style choice. (p. 6 CSS: The Definitive Guide (3rd edition, Eric Meyer)
  
  
• All class names begin with 
  
  
  1. a comma (,).
  2. a pound sign (#).
  3. a period (.).
  4. a quotation mark (").
     
     
• The definition of a class selector uses a period as shown below
  
  

  li.ques
  {
   	font-family: Verdana, Arial, Helvetica, sans-serif;
  	font-size: large;  
  	font-weight: bold
  }
  li.ans
  {
   	font-family: Verdana, Arial, Helvetica, sans-serif;
  	font-size: medium;   
  	font-weight: normal;
  	margin-left: 3em;
  }
  

  I don't think I would say that the period is the beginning of the class's name. Rather I would call the period a delimiter that separates the class name from the name of the element to which the class relates.
  
  
• Convert the following statement using CSS.
  <font color="#008000" face="Arial">This text is green and in Arial font</font>
  
  
• <span style="background-color:Transparent; color: #008000; font-family: Arial, Sans-Serif;">This text is green and in Arial font</span>
  
  This text is green and in Arial font
  
  (Though if the client did not have the Arial font on his/her system it would display in the client's default sans-serif font.)