CSS Essential Training Notes

CSS Essential Training Notes¶

Referencing CSS file not exists

¶

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;]

CSS Values and Units file not exists

¶

CSS Selectors file not exists

¶

CSS colors file not exists

¶

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.

CSS Box Model file not exists

¶

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;  
}  

CSS Typography file not exists

¶

CSS Layouts Float and Position file not exists

¶

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.

CSS Layouts Flexbox and Grid file not exists

¶

CSS Responsive Web Design file not exists

¶

Comments

Comments