Adding Style with CSS Helen Zeng | Developer Evangelist Christopher Harrison | Content Developer
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
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
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
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: 20480 - HTML5, CSS & JavaScript
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 http://aka.ms/MVA-Voucher Enter this code: PowerJump1 (expires 8/15/2013)
01 | Getting started with CSS Helen Zeng | Developer Evangelist Christopher Harrison | Content Developer
Module Overview What is CSS? Basic element selection Applying CSS to pages CSS inheritance
What is CSS?
What is CSS? Cascading style sheets A style language for formatting documents
Why use CSS? Separation of concern Document structure and semantics HTML Logic JavaScript Formatting and display CSS
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?
Basic element selection
Basic element selection Class ID
Element Applies to element Simply use the name of the element h2 { font-family: verdana, sans-serif; font-weight: bold; color: blue; }
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!
ID Applies to element with ID IDs must be unique #header { font-family: verdana, sans-serif; font-weight: bold; color: blue; }
Basic element selection
Applying CSS to pages and elements
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>
CSS inheritance
CSS inheritance Conflicts Style application Element conflicts
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
Style application Closest to the element takes precedence Style attribute Style section External style sheet (sometimes called "last write wins")
Style application
Element conflicts Multiple selectors can apply to one element Closest description takes precedence ID Class Element
Element conflicts