1. Adding Style with CSS Helen Zeng | Developer Evangelist
Christopher Harrison | Content Developer

2. Meet Helen Zeng| ‏@hwz Developer Evangelist for Startups
Works with top tier startups out of the bay area
Focused on Azure and apps
Spreads the word of Bizspark
Web development nerd
Volunteer CS teacher
MEAN Stack Advocate
Borderline-obsessive about Game of Thrones/ASoIF

3. Meet Christopher Harrison | ‏@geektrainer
Content Developer
Focused on ASP.NET and Office 365 development
Microsoft Certified Trainer
Misses his Commodore 64
Long time geek
Regular presenter at conferences
Periodic blogger
Certification advocate
Marathoner, husband, father of one four legged child

4. Course Topics Adding Style with CSS Jump Start
01 | Getting started with CSS
04 | Media queries
02 | CSS selectors
05 | Transformations and transitions
03 | Page layouts
06 | CSS preprocessors

5. Setting Expectations Target Audience
Web developers with HTML experience
Developers with CSS experience looking to fill gaps
Suggested Prerequisites/Supporting Material
MVA: HTML5 & CSS3 Fundamentals
MOC: HTML5, CSS & JavaScript

6. Join the MVA Community! Microsoft Virtual Academy
Free online learning tailored for IT Pros and Developers
Over 2.5M registered users
Up-to-date, relevant training on variety of Microsoft products
“Earn while you learn!”
Get 50 MVA Points for this event!
Visit
Enter this code: PowerJump1 (expires 8/15/2013)

7. 01 | Getting started with CSS
Helen Zeng | Developer Evangelist
Christopher Harrison | Content Developer

8. Module Overview What is CSS? Basic element selection
Applying CSS to pages
CSS inheritance

9. What is CSS?

10. What is CSS? Cascading style sheets
A style language for formatting documents

11. Why use CSS? Separation of concern Document structure and semantics
HTML
Logic
JavaScript
Formatting and display
CSS

12. How do you want them to look and where do you want them to appear?
CSS syntax basics
What elements, or types of elements, do you want to apply the style to?
selector { }
property: value;
How do you want them to look and where do you want them to appear?

13. Basic element selection

14. Basic element selection
Class ID

15. Element Applies to element Simply use the name of the element h2 {
font-family: verdana, sans-serif;
font-weight: bold;
color: blue; }

16. Class Applies to all elements with a matching class
By default classes are available to all elements
Limit to specific elements by preceding class with element
/* CSS */
.title {
color:red; }
<!-- HTML -->
<div class='title'>
Hello, CSS!
</div>
Output
Hello, CSS!
/* CSS */
div.title {
color:red; }
<!-- HTML -->
<div class='title'>
Hello, div!
</div>
<span class='title'>
Hello, span!
</span>
Output
Hello, div!
Hello, span!

17. ID Applies to element with ID IDs must be unique #header {
font-family: verdana, sans-serif;
font-weight: bold;
color: blue; }

18. Basic element selection

19. Applying CSS to pages and elements

20. Applying CSS to pages and elements
Link to external file
<link rel='stylesheet' type='text/css' href='site.css' />
Add <style> section to page
<style>
/* standard CSS syntax */
</style>
Use the style attribute
<div style='property:value;property:value;'>Hello!</div>

21. CSS inheritance

22. CSS inheritance
Conflicts
Style application
Element conflicts

23. Conflicts Cascading – it's right there in the name!
Conflicts are expected
Conflicts only arise when the same property has two different values
Different properties are simply combined

24. Style application Closest to the element takes precedence
Style attribute
Style section
External style sheet
(sometimes called "last write wins")

25. Style application

26. Element conflicts Multiple selectors can apply to one element
Closest description takes precedence ID
Class
Element

27. Element conflicts