CSS Learnup for Live Chat
-
Upload
jacklyn-stachurski -
Category
Design
-
view
101 -
download
0
Transcript of CSS Learnup for Live Chat
![Page 1: CSS Learnup for Live Chat](https://reader035.fdocuments.net/reader035/viewer/2022070512/588a9e271a28ab904b8b72a7/html5/thumbnails/1.jpg)
CSS in Live Chatby Jacklyn Stachurski
![Page 2: CSS Learnup for Live Chat](https://reader035.fdocuments.net/reader035/viewer/2022070512/588a9e271a28ab904b8b72a7/html5/thumbnails/2.jpg)
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/)
![Page 3: CSS Learnup for Live Chat](https://reader035.fdocuments.net/reader035/viewer/2022070512/588a9e271a28ab904b8b72a7/html5/thumbnails/3.jpg)
![Page 4: CSS Learnup for Live Chat](https://reader035.fdocuments.net/reader035/viewer/2022070512/588a9e271a28ab904b8b72a7/html5/thumbnails/4.jpg)
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
![Page 5: CSS Learnup for Live Chat](https://reader035.fdocuments.net/reader035/viewer/2022070512/588a9e271a28ab904b8b72a7/html5/thumbnails/5.jpg)
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; }
![Page 6: CSS Learnup for Live Chat](https://reader035.fdocuments.net/reader035/viewer/2022070512/588a9e271a28ab904b8b72a7/html5/thumbnails/6.jpg)
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;}
![Page 7: CSS Learnup for Live Chat](https://reader035.fdocuments.net/reader035/viewer/2022070512/588a9e271a28ab904b8b72a7/html5/thumbnails/7.jpg)
CSS Declarations
Made up of properties and values
![Page 8: CSS Learnup for Live Chat](https://reader035.fdocuments.net/reader035/viewer/2022070512/588a9e271a28ab904b8b72a7/html5/thumbnails/8.jpg)
Try it out! - Theme: Demand
![Page 10: CSS Learnup for Live Chat](https://reader035.fdocuments.net/reader035/viewer/2022070512/588a9e271a28ab904b8b72a7/html5/thumbnails/10.jpg)
FireFox
Safari
Chrome
![Page 11: CSS Learnup for Live Chat](https://reader035.fdocuments.net/reader035/viewer/2022070512/588a9e271a28ab904b8b72a7/html5/thumbnails/11.jpg)
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 {
![Page 12: CSS Learnup for Live Chat](https://reader035.fdocuments.net/reader035/viewer/2022070512/588a9e271a28ab904b8b72a7/html5/thumbnails/12.jpg)
Copyright• Add Declaration
.site-info::before { content: ‘c 2015’;}• Problem: Doesn’t line up!
Solution: Combinatory Selectors! orMOAR declarations (ie: display: inline/block;float: left/right; text-align: center; )
![Page 13: CSS Learnup for Live Chat](https://reader035.fdocuments.net/reader035/viewer/2022070512/588a9e271a28ab904b8b72a7/html5/thumbnails/13.jpg)
Copyright Practice
1. Fortune
2. Mirror
3. Edin
Go over these themes to add copyright