Copyright © Osmosys

O S M O S Y SD 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

- http://meyerweb.com/eric/tools/css/reset/- 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.