Copyright © Osmosys O S M O S Y SO S M O S Y S D e p l o y i n g E x p e r i e n c e & E x p e r t i s e™ CSS Training
Copyright © Osmosys Introduction - Full form - Role of CSS - Presentation - Adding a CSS file to your HTML - Inline CSS is bad. Check Zen Garden. - Adding comments to CSS Important Note - Refer to MDN for reference and doubts clearing - Read documentation properly and completely.
Copyright © Osmosys CSS Syntax
Copyright © Osmosys Selectors header.class #id.class #id.class#id.header p Important Note - Avoid using global styles.
Copyright © Osmosys Block and Inline Elements - What are they? - Differences - inline-block - The display property Controlling dimensions of CSS elements - Empty elements have no height. - Inline elements cant be given height or width - Inline Block can have height and width
Copyright © Osmosys CSS Units - Percentage - % - Pixels - px - Em - em Margins - Margin does not affect the width of the element Overriding CSS and Inheritance - The point system - Using multiple classes for the same element
Copyright © Osmosys Padding - Adding padding increases the width of the element - Same units as margins apply. CSS Reseter What and Why? - Using CSS Reseter. - Always use hexcode for color in CSS (#929292)
Copyright © Osmosys Working with Text - color - letter-spacing - line-spacing - text-align - text-decoration - word-spacing Working with fonts - family - size - style - weight - What are web safe fonts? - How to add more fonts?
Copyright © Osmosys Anchor Pseudo classes Elements Pseudo selectors - a:link {color: #009900;} // Normal - a:visited {color: #999999;} // Already Visited - a:hover {color: #333333;} // Hovered - a:focus {color: #333333;} // Focused - a:active {color: #009900;} // Active - :hover - :focus - :active
Copyright © Osmosys Working with backgrounds Working with borders - color - image - position - repeat - color - style > dashed, dotted, double, groove, hidden, inset, none, outset, ridge, solid - width - top, bottom, right, left
Copyright © Osmosys Styling lists Floats Media Queries - list-style - list-style-image - list-style-type - Working with floats - left and right - Using clear
Copyright © Osmosys Positioning CSS elements - static - relative - absolute - fixed - z-index Other CSS properties - cursor - opacity - overflow - box shadow
Copyright © Osmosys Designing Forms - Two column form with label on top and control below - One column form with label on side and control next to it. - Two column layout with labels on side and controls next to it. - Errors below controls and on top of the form. Designing Tables - Add classes to table to design them. - Alternate row colors. - Designing headers and footers seperately.