CSS Basics for onMessage

2. CSS Basics for onMessage Going beyond the Basic Tab

3. Agenda • What is CSS? • CSS Syntax • Write CSS in onMessage • CSS Resources

4. onMessage Styles

5. Moving Past the Basic Tab

6. What is CSS? • CSS stands for Cascading Style Sheets • The Cascade determines which style get applied to an HTML element • CSS tells the browser how to display an HTML element

7. HTML <div id="home_news" class="content news"> <h2>School News</h2> <imgsrc=”placeholder.png"> <h4><a href="?pk=0”>News headline</a></h4> <a class="button readmore" href="?pk=0”>Read More</a> </div>

8. With CSS Without CSS

9. CSS Syntax Declaration Block Selector a {color: red; font-weight: bold;}

10. Selectors Selector • A selector determine which HTML element(s) the declaration get applied to. • Selectors can be HTML tags, classes, ID’s and more • One selector can change several or even all elements on a site, or only 1 element. a {color: red; font-weight: bold;}

11. CSS in onMessage Selector In onMessage Styles the selector is set for you when you select an item font-size: 32px; H2 {font-size: 32px;} Declaration

12. Selectors The only place you need a selector in onMessage, is Custom CSS – recommended for advanced CSS users only

13. CSS Syntax Declaration Declaration a {color: red; font-weight: bold;} color: red; ; Property Value :

14. Comments • A comment in CSS is written as: /* comment here */ • The browser ignores everything inside the comment • A comment can be used to remove some CSS from a declaration block without deleting it • A comment can also be used to insert text explaining why a style is there

15. Example Styles

16. Text Formatting • text-decoration: none; • text-transform: uppercase; • text-indent: 10px; • text-shadow: 2px 2px 3px #000000; Y-axis + bottom - top blur color X-axis + right - left

17. Text Formatting • font-family: ‘Open Sans’, Arial, sans-serif; • font-size: 14px; • font-weight: bold; • font-style: italic; • line-height: 22px;

18. Container Formatting • margin-bottom: 20px; • width: 50%; • border-bottom: 5px solid #000000; • box-shadow: 1px 1px 10px 5px #dddddd; • -webkit-box-shadow: 1px 1px 10px 5px #dddddd; • -moz-box-shadow: 1px 1px 10px 5px #dddddd;

19. Shorthand Declaration • margin: 20px;All 4 sides have a 20px margin • padding: 20px 10px;Top and bottom 20px, left & right 10px of padding • padding: 10px 5px 20px;Top 10px, left & right 5px, bottom 20px • margin: 5px 10px 20px 0px;Top 5, right 10px, bottom 20px, left 0px 1 4 2 3

20. A Few Intermediate CSS Slides

21. The Box Model margin border padding The box height width

22. The Display Property inline element inline element inline element inline-block element inline-block element inline-block element block element

23. The Float Property float: left; float: right;

24. The Float Property Use with Caution This example shows what happens when you have more items than will fit (they wrap), and one of the items is taller than some others – the wrapping item hits the tall item, rather than the left edge of the container

25. Resources W3Schools CSS Tricks General Reference http://css-tricks.com/almanac/properties/ • http://www.w3schools.com/css/ Box Shadow Gradients Code Generators http://box-shadow.info/ http://colorzilla.com/gradient-editor/