CSS Learnup for Live Chat
-
Upload
jacklyn-stachurski -
Category
Design
-
view
100 -
download
0
Transcript of CSS Learnup for Live Chat
CSS in Live Chatby Jacklyn Stachurski
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/)
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
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; }
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;}
CSS Declarations
Made up of properties and values
Try it out! - Theme: Demand
Theme Quirksthemequirks.wordpress.com
FireFox
Safari
Chrome
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 {
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; )
Copyright Practice
1. Fortune
2. Mirror
3. Edin
Go over these themes to add copyright