CSS Essential Training Notes

Images and Pixel Density

• Images should be twice of the required size to be shown perfectly on high pixel density displays like Apple Retina.
• Background images should be in between of 1400px and 2000px width.

CSS Syntax

• Selector
• Declaration Block
  • Declaration [property: value;]

Cascade

• Order matters, from top to bottom.
• !important Keyword overrides source order and specificity.

Pseudo-classes

• :link :visited :hover :active :focus

Inline block and display

• For inline elements, adding width and height has no effect.
• Adding display: block to an inline element will make it display like block elements.
• Setting display: inline to a block element will give it the characteristics of inline elements.
• There is one more value that you’ll probably use more often, which is inline-block. This will apply the characteristics of both.
  • The width and height values will be applied, just like block elements, but the items are displayed side by side, just like inline elements, and they only wrap when there’s no longer any space in the container.
  • This is a good example of separating content from style.
  • You may want your elements to display on a new line, or on the same line, but instead of picking an HTML element that looks a particular way, choose the most semantic element for the content, and then change the display with CSS.

Creating a Content Wrapper

Create a container for just the content.

<section class="work">  
  <div class="content-wrap">  
    <!/-- new content wrap div -->  
    <h2>Work Experience</h2>  
  </div>  
  <!-- close content-wrap div -->  
</section>  

.content-wrap {  
  width: 950px;  
  margin: 0 auto;  
}  
  
.work {  
  background: blue;  
}  

Checking Browser Support

• Can I use is a great reference for checking browser support.
• Just do a search for any CSS property, and the search results will show you the browser support.
• There is also additional information, such as known issues or any additional resources.