CSS Learnup for Live Chat
- 1. CSS in Live Chat by Jacklyn Stachurski
- 2. CSS in Live Chat • Business/VIP/Enterprise Users only • Helps with consistency • Guidelines in FG (http://fieldguide.automattic.com/guide-to-live- chat/supporting-css-in-live-chat/)
- 4. CSS Basics - Selectors • HTML - all specified HTML tags (ie: a, h1, p) • Class - marked with a period (.) and are not unique. Can be used more than once on a page and elements can have more than one class • ID - marked with a hashtag (#) and are unique. Can only be used once on a page and only one id per element • Universal - marked by an asterisk (*) affects all HTML elements on the page
- 5. CSS Basics - Selectors Order: Grouping and Combinatory Grouping: If you want two or more selectors to have the same declarations, you can group them together using commas to separate them: p, .site-info, h1 { font-family: Helvetica,Arial,sans-serif; }
- 6. CSS Basics - Selectors Order: Grouping and Combinatory Combinatory: If you want a specific style for one element you can give a very specific set of selectors, separated by a space: p strong em { color: #d2d2d2; }
- 7. CSS Declarations Made up of properties and values
- 8. Try it out! - Theme: Demand
- 11. Copyright • Can be added to Footer on WordPress.com • Difficult sometimes because of floats, grids, centering • Basic starts with selector and pseudo element: .site-info::after { or .site-info::before {
- 12. Copyright • Add Declaration .site-info::before { content: ‘c 2015’; } • Problem: Doesn’t line up! Solution: Combinatory Selectors! or MOAR declarations (ie: display: inline/block; float: left/right; text-align: center; )
- 13. Copyright Practice 1. Fortune 2. Mirror 3. Edin Go over these themes to add copyright