CSS 1

• How to find out the html version supported by the client browser and based on that return that CSS?
•  
• Headfirst HTML CSS  
• CSS: the definitive guide
• CSS Pocket Reference
•  
• Well, if you think about it, this gives you a lot of leverage when you use a  <div>, because you can wrap a section of content in a <div> and then apply styles to the <div> rather than each individual element. Of course, keep in mind that not all properties are inherited by default, so this won’t work for all properties.
  <div> lets you divide your page into logical sections or groupings. p.specials child elements inherit the properties of parent. But this property can also be overridden
• there are two kind of elements. block level and inline
• block level have line break at the beginning and at the end where as there is no line break with inline elements
• each element is put in a box.  so css has a box model
• One difference between padding and margins is that the element’s background color (or background image) will extend under the padding, but not the margin
• 25px is good margin for paragraph as it makes it more readable
• properties for a paragraph:
• border-color:     black;      
• border-width:     1px;      
• border-style:     solid;      
• background-color: #a7cece;      
• padding:          25px;      
• margin:           30px; 
•  you can add a background image to any element using the background-image property.
•  background-image: url(images/background.gif);
•  background-repeat:   no-repeat;      
• background-position: top left; 
• How do you add padding only on the left? For padding, margins, and even borders, CSS has a property for every direction: top, right, bottom, and left.  To add padding on the left side, use the padding-left property, like this:
•  .guarantee { 
• line-height:         1.9em; 
• font-style:          italic; 
• font-family:         Georgia, “Times New Roman”, Times, serif; 
• color:               #444444;      
• border-color:        black;      
• border-width:        1px;      
• border-style:        solid;      
• background-color:    #a7cece;      
• padding:             25px;      
• padding-left:        80px;      
• margin:              30px;      
• background-image:    url(images/background.gif);      
• background-repeat:   no-repeat;      
• background-position: top left; } 
• We’re using the padding-left property to increase the padding on the left.. Notice that we first set the padding on all sides to 25 pixels, and then we specify a property for the left side. Order matters here - if you switch the order, then you’ll set the padding for the left side first, and then the general padding property will set all sides back to 25 pixels, including the left side!
• margin:              30px;      
• margin-right:        250px;
• border-top-color 
• border-top-style 
• border-top-width
• border-bottom-color 
• border-bottom-style 
• border-bottom-width
• border-right-color 
• border-right-style 
• border-right-width
• border-left-color 
• border-left-style 
• border-left-width
•  border-style: dashed;
•  border-color: white;
• Browsers can have different default sizes for the keywords thin, medium, and thick, so if the size of your border is really important to you, consider using pixel sizes instead.
• use id for header,footer and navigation-bar
•  you use a class when you might want to use a style with more than one element
• Giving an element an id is similar to adding an element to a class. The only differences are that the attribute is called “id”, not “class”, an element can’t have multiple ids, and you can’t have more than one element on a page with the same id.
• An element can have an id and also belong to a class. Think about it this way: an id is just a unique identifier for an element, but that doesn’t prevent it from belonging to one or more classes 
• p.specials-> This selects only paragraphs that are in the specials class.
• p#footer ->   This selects a <p> element if it has the id “footer”
•  <link type=“text/css” href=“corporate.css” rel=“stylesheet” />      
•  <link type=“text/css” href=“beverage-division.css” rel=“stylesheet” />      
•  <link type=“text/css” href=“lounge-seattle.css” rel=“stylesheet”  /> 
• Order matters! A style sheet can override the styles in the style sheets linked above it.
•  media=”screen” // screen means computer screens
• The media attribute allows you to specify the type of device this style sheet is for
• media="print" //for print
• media="handheld" // for small mobile devices
• media values
• tv
• projection
• aural
• braille
• tty (for teletypes and terminals)
• Not all browsers support media attribute
• Padding, border, and margin are all optional.
• An element’s background will show under the  n content and the padding, but not under the margin
• If two style sheets have conflicting property  n definitions, the style sheet that is last in the XHTML file will receive preference. 
• Some builders say “measure twice, cut once.” I say “plan, div, and span
• pseudo-classes, which are going to allow you to create some very interesting selectors
• <p> can’t contain other block elements, and the headings and paragraphs are obviously block elements
• <div> lets you divide your page into logical sections or groupings. 
• The width property specifies the width for the content area only.
• You specify the width of the content area, the padding, the border, and the margin.  All of that added together is the width of the entire element.
•  Say you set the content area width to be 300 pixels using the width property  in a CSS rule. And let’s say you’ve set the margins to 20 pixels, the padding to 10 pixels, and you have a 1 pixel border. What’s the width of your element’s box? Well, it’s the width of the content area added to the width of the left and right margins, the left and right padding, and the left and right border width
• Q: If I don’t set the width of an element, then where does the width come from? 
• A: The default width for a block element is “auto”, which means that it will expand to fill whatever space is available. If you think about any of the Web pages we’ve been building, each block element can expand to the entire width of the browser, and that’s exactly what it does
•   In general, the height of an element is left at the default, which is auto, and the browser expands the content area vertically so all of the content is visible. Take a look at the elixirs section after we set the width to 200 pixels and you’ll see the <div> got a lot taller. You can explicitly set a height, but you risk cutting off the bottom of your content if your height isn’t big enough to contain it. In general, leave your element heights unspecified so they default to auto.  We’re going to talk about this more in the next chapter as well.
• The default padding on a <div> is 0 pixels
•  Just remember that text-align, despite its name, works on any kind of inline element. One other thing to keep in mind: the text-align property should be set on block elements only.  It has no effect if it’s used directly on inline elements (like <img>).
•  Well, if you think about it, this gives you a lot of leverage when you use a  <div>, because you can wrap a section of content in a <div> and then apply styles to the <div> rather than each individual element. Of course, keep in mind that not all properties are inherited by default, so this won’t work for all properties.
• descendant selector
• select an <h2> element, but only if it’s inside an elixirs <div>”. 
•  #elixirs h2 {    color: black; }
•  This rule says to select any <h2> that is a descendant of an element with the id “elixirs”.
• this means child, grand child etc ie any descendant
• Well, is there a way to select a direct child? 
•  Yes.  For example, you could use  “#elixirs > h2”, to select <h2> only if it is the direct child of an element with an id of “elixirs”. 
•  What if I need something more complex, like an <h2> that is the child of a <blockquote> that is in elixirs?
• #elixirs blockquote h2 {    color: blue; }
• This selects any <h2> elements that descend from <blockquote>s that descend from an element with an id of “elixirs”.
•  When you use just a number, you’re telling each element in the elixirs <div> to have a line-height of 1 times its own font-size
• The line-height property defines the amount of space above and below inline elements. That is, elements that are set to display: inline or display: inline-block . This property is most often used to set the leading for lines of text
•  padding: 0px 20px 30px 10px; (top right bottom left)
• margin: 0px 20px 30px 10px; (top right bottom left)
•  margin-right:  20px; 
• margin-bottom: 0px; 
• margin-left:   20px;
• margin: 0px 20px; 
• the above can also be written as :
• margin: 0px 20px
• If the top and bottom, as well as the right and left margins are the same, then you can use a shorthand.

padding-top:    20px; 

padding-right:  20px; 

padding-bottom: 20px; 

padding-left:   20px;

• The above can also be written like :
• padding: 20px;
• border-width:      thin; 
• border-style:      solid; 
• border-color:      #007e7e;
• the above can also be written as follows:
• border: thin solid #007e7e;
• background-color:  white; background-image:  url(images/cocktail.gif); background-repeat: repeat-x;
   
•   the above can also be written as 
•  background: white url(images/cocktail.gif) repeat-x; 
• font: font-style font-variant font-weight font-size/line-height font-family
•  These values are all optional. You can specify any combination of them, but they need to come before font-size.
• You must specify font size.
• The line-height is optional. If you want to specify one, just put a / right after the font-size and add your line height
• Use Commas between your font family names
• Never use shorthand in CSS files as they make debugging difficult. Long form is more readable and easy to debug. they may take more size. so what?
•  There’s another element like <div> that is for inline elements.  It’s called a <span>. 
•  a <span> gives you a way to create a grouping of inline characters and elements
• <li><span class=”cd”>Buddha Bar</span>, <span class=”artist”>Claude Challe</span></li>
•  em vs strong vs span
• if you are emphasizing words, use <em>; if you’re trying to make a big point, use <strong>.  But, if what you really want is to change the style of certain words, say, the names of albums or music artists on a fan site Web page, then you should use a <span> and put your <span> elements into appropriate classes to group them and style them.
• about image width
•  : if you set the width of an image using either the width attribute in the <img> element or the width property in CSS, the browser scales the image to fit the width you specify.  This can sometimes be handy if you can’t edit the image yourself to change the dimensions, and you want the image to appear bigger or smaller on the page.  But remember, if you rely on the browser to scale your image, you may be downloading more data than you need (if the image is larger than you need).
•   if you add a margin on all sides of an inline element, you’ll only see space added to the left and right.  You can add padding to the top and bottom of an inline element, but the padding doesn’t affect the
  spacing of the other inline elements around it, so the padding will overlap other inline elements
• for the links->
•  a:link {     color: green; } a:visited {     color: red; } a:hover {     color: yellow; }
• <did not get it>
• Q: Can’t my links be in multiple states at the same time? For instance, my link could be visited, have the mouse hovering over it, and the user could be actively clicking on it all at once.
• A: They sure can. You determine which style is applied by the ordering of your rules. So, the right ordering is generally considered to be: link, visited, focus, hover, and then active. If you use that ordering, you’ll get the results you expect. 
• </did not get it>
•  
•  A requirement for any floating element is that it have a width
• pseudo -class
• you can style pseudo-classes, but no one ever types them into their XHTML. 
•  reader style sheets?
• 1. The user agent is the application (usually a browser, such as Chrome or Firefox) that you are viewing the website with. User agents have a default stylesheet. You can inspect its properties with a tool like Chrome's Developer Tools feature.
     The "reader" is the web surfer viewing your site. Your site's visitors can optionally set their own stylesheets or custom rules (such as system colours or font preferences). They might do this out of personal preference, or because they have accessibility requirements.
     The author's stylesheet is the one explicitly linked to in the HTML of the website itself. I.e., it's the one that you created.
  2. Normally, for good reason, the author stylesheet takes precedence over user agent and reader stylesheets. However, readers have the option to set styles that authors can't override. This is also for good reason, as people with visual impairments or other accessibility issues will need certain styles to be set across all pages.
     whats-difference-between-authors-style-readers-style-agents-style-or-aut
     
     

• When the browser needs to determine which style to apply to an element, it uses all these style sheets. Priority is given first to the author’s styles (that is, your styles), then to the reader’s styles, and then finally to the browser’s default styles. 
• Pseudo- element
•  !Important->
•  It means, essentially, what it says; that 'this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!' In normal use a rule defined in an external stylesheet is overruled by a style defined in the head of the document, which, in turn, is overruled by an in-line style within the element itself (assuming equal specificity of the selectors). Defining a rule with the !important 'attribute' (?) discards the normal concerns as regards the 'later' rule overriding the 'earlier' ones.
  what-does-important-in-css-mean  
  
•  do not use !Important as it is maintenance nightmare
• css selectors
•  double-colon-vs-single-colon-at-css-syntax
•  Browser Detection + Apply Classes to HTML Element

  // jQBrowser v0.2: http://davecardwell.co.uk/javascript/jquery/plugins/jquery-browserdetect/
  eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(c/a))+String.fromCharCode(c%a+161)};while(c--){if(k[c]){p=p.replace(new RegExp(e(c),'g'),k[c])}}return p}('Ö ¡(){® Ø={\'¥\':¡(){¢ £.¥},\'©\':{\'±\':¡(){¢ £.©.±},\'¯\':¡(){¢ £.©.¯}},\'¬\':¡(){¢ £.¬},\'¶\':¡(){¢ £.¶},\'º\':¡(){¢ £.º},\'Á\':¡(){¢ £.Á},\'À\':¡(){¢ £.À},\'½\':¡(){¢ £.½},\'¾\':¡(){¢ £.¾},\'¼\':¡(){¢ £.¼},\'·\':¡(){¢ £.·},\'Â\':¡(){¢ £.Â},\'³\':¡(){¢ £.³},\'Ä\':¡(){¢ £.Ä},\'Ã\':¡(){¢ £.Ã},\'Å\':¡(){¢ £.Å},\'¸\':¡(){¢ £.¸}};$.¥=Ø;® £={\'¥\':\'¿\',\'©\':{\'±\':²,\'¯\':\'¿\'},\'¬\':\'¿\',\'¶\':§,\'º\':§,\'Á\':§,\'À\':§,\'½\':§,\'¾\':§,\'¼\':§,\'·\':§,\'Â\':§,\'³\':§,\'Ä\':§,\'Ã\':§,\'Å\':§,\'¸\':§};Î(® i=0,«=».ì,°=».í,¦=[{\'¤\':\'Ý\',\'¥\':¡(){¢/Ù/.¨(°)}},{\'¤\':\'Ú\',\'¥\':¡(){¢ Û.³!=²}},{\'¤\':\'È\',\'¥\':¡(){¢/È/.¨(°)}},{\'¤\':\'Ü\',\'¥\':¡(){¢/Þ/.¨(°)}},{\'ª\':\'¶\',\'¤\':\'ß Ñ\',\'¥\':¡(){¢/à á â/.¨(«)},\'©\':¡(){¢ «.¹(https://cdn.css-tricks.com/ã(\\d+(?:\\.\\d+)+)/)}},{\'¤\':\'Ì\',\'¥\':¡(){¢/Ì/.¨(«)}},{\'¤\':\'Í\',\'¥\':¡(){¢/Í/.¨(°)}},{\'¤\':\'Ï\',\'¥\':¡(){¢/Ï/.¨(«)}},{\'¤\':\'Ð\',\'¥\':¡(){¢/Ð/.¨(«)}},{\'ª\':\'·\',\'¤\':\'å Ñ\',\'¥\':¡(){¢/Ò/.¨(«)},\'©\':¡(){¢ «.¹(https://cdn.css-tricks.com/Ò (\\d+(?:\\.\\d+)+(?:b\\d*)?)/)}},{\'¤\':\'Ó\',\'¥\':¡(){¢/æ|Ó/.¨(«)},\'©\':¡(){¢ «.¹(https://cdn.css-tricks.com/è:(\\d+(?:\\.\\d+)+)/)}}];i<¦.Ë;i++){µ(¦[i].¥()){® ª=¦[i].ª?¦[i].ª:¦[i].¤.Õ();£[ª]=É;£.¥=¦[i].¤;® ­;µ(¦[i].©!=²&&(­=¦[i].©())){£.©.¯=­[1];£.©.±=Ê(­[1])}ê{® Ç=Ö ë(¦[i].¤+\'(?:\\\\s|\\\\/)(\\\\d+(?:\\\\.\\\\d+)+(?:(?:a|b)\\\\d*)?)\');­=«.¹(Ç);µ(­!=²){£.©.¯=­[1];£.©.±=Ê(­[1])}}×}};Î(® i=0,´=».ä,¦=[{\'ª\':\'¸\',\'¤\':\'ç\',\'¬\':¡(){¢/é/.¨(´)}},{\'¤\':\'Ô\',\'¬\':¡(){¢/Ô/.¨(´)}},{\'¤\':\'Æ\',\'¬\':¡(){¢/Æ/.¨(´)}}];i<¦.Ë;i++){µ(¦[i].¬()){® ª=¦[i].ª?¦[i].ª:¦[i].¤.Õ();£[ª]=É;£.¬=¦[i].¤;×}}}();',77,77,'function|return|Private|name|browser|data|false|test|version|identifier|ua|OS|result|var|string|ve|number|undefined|opera|pl|if|aol|msie|win|match|camino|navigator|mozilla|icab|konqueror|Unknown|flock|firefox|netscape|linux|safari|mac|Linux|re|iCab|true|parseFloat|length|Flock|Camino|for|Firefox|Netscape|Explorer|MSIE|Mozilla|Mac|toLowerCase|new|break|Public|Apple|Opera|window|Konqueror|Safari|KDE|AOL|America|Online|Browser|rev|platform|Internet|Gecko|Windows|rv|Win|else|RegExp|userAgent|vendor'.split('|')))
  
  /* ----------------------------------------------------------------- */
  
  var aol       = $.browser.aol();       // AOL Explorer
  var camino    = $.browser.camino();    // Camino
  var firefox   = $.browser.firefox();   // Firefox
  var flock     = $.browser.flock();     // Flock
  var icab      = $.browser.icab();      // iCab
  var konqueror = $.browser.konqueror(); // Konqueror
  var mozilla   = $.browser.mozilla();   // Mozilla
  var msie      = $.browser.msie();      // Internet Explorer Win / Mac
  var netscape  = $.browser.netscape();  // Netscape
  var opera     = $.browser.opera();     // Opera
  var safari    = $.browser.safari();    // Safari
     
  var userbrowser     = $.browser.browser(); //detected user browser
  
  //operating systems
  
  var linux = $.browser.linux(); // Linux
  var mac   = $.browser.mac();   // Mac OS
  var win   = $.browser.win();   // Microsoft Windows
  
  //version
  
  var userversion    = $.browser.version.number();
  
  /* ----------------------------------------------------------------- */
     
  if (mac == true) { 
   
   $("html").addClass("mac"); 
     
   
  } else if (linux == true) {
   
   $("html").addClass("linux"); 
   
  } else if (win == true) {
   
   $("html").addClass("windows");
   
  }
  
  /* ----------------------------------------------------------------- */   
  
  if (userbrowser == "Safari") {
   
   $("html").addClass("safari"); 
   
  } else if (userbrowser == "Firefox") {
  
   $("html").addClass("firefox"); 
  
  } else if (userbrowser == "Camino") {
  
   $("html").addClass("camino"); 
  
  } else if (userbrowser == "AOL Explorer") {
  
   $("html").addClass("aol"); 
  
  } else if (userbrowser == "Flock") {
  
   $("html").addClass("flock"); 
  
  } else if (userbrowser == "iCab") {
  
   $("html").addClass("icab"); 
  
  } else if (userbrowser == "Konqueror") {
  
   $("html").addClass("konqueror"); 
  
  } else if (userbrowser == "Mozilla") {
  
   $("html").addClass("mozilla"); 
  
  } else if (userbrowser == "Netscape") {
  
   $("html").addClass("netscape"); 
  
  } else if (userbrowser == "Opera") {
  
   $("html").addClass("opera"); 
  
  } else if (userbrowser == "Internet Explorer") {
   
   $("html").addClass("ie");
   
  } else {}
  
  $("html").addClass("" + userversion + "");

  ======================================================================

  •  p.center {
        text-align: center;
        color: red;}

   In the example above, only <p> elements with class="center" will be center-aligned:

  •  Headfirst HTML CSS book-> 501- 506 page (did not understand)