Your SlideShare is downloading. ×
0
Intro to
CSS
Randy Oest
Manager of Digital Design
Williams Randall Marketing
!
@amazingrando
Why Learn CSS?
1. Running a blog on a CMS and
want to tweak things
2. Working with a developer and
want to understand how ...
What We’ll Learn
1. What is CSS
2. How to speak CSS
3. How to apply it
4. Where to find out
more info
If HTML
is the
Skeleton
of Web
pages…
CSS is
the
muscle
and
skin.
CSS Needs HTML
CSS is used to style
elements, giving
them form.
HTML Elements
<p>Paragraph …</p>	
  
<div	
  class=“nav”>…</div>	
  
<h1	
  id=“title”>Headline</h1>	
  
CSS Needs HTML
Selectors
are used
to target
styles.
Examples of Selectors
<p>Paragraph …</p>	
  
p	
  {	
  …	
  }	
  
Examples of Selectors
<div	
  class=“nav”>…</div>	
  
.nav	
  {	
  …	
  }	
  
Classes
Class names always
start with a period.
.class
IDs
IDs always start 

with a hash.
There can only be one on a page.
#id
Think of classes as your name
and nicknames, e.g. Randy,
Amazing Rando, Hey You…
Think of IDs as your unique
social securi...
Multiple Selectors
<h1	
  id=“title”>Headline</h1>	
  
h1#title	
  {	
  …	
  }	
  
No spaces!
Specificity
When there is a style
conflict, IDs trump
classes, and classes
trump HTML elements
Nested Elements
<div	
  id=“feature”>	
  
	
   <img	
  src=“…”	
  />	
  
	
   Some Text …
</div>
Nested Elements
<div	
  id=“feature”>	
  
	
   <img	
  src=“…”	
  />
#feature	
  img	
  {	
  …	
  }
Now there is a space.
.class	
  {	
  
	
   color:	
  #fff;	
  
	
   padding:	
  10px;	
  
}
Properties & Values
Property
Value
PX: Pixels
%: Percentage
EM: Relative unit, equal to
the current font size
Common Size Units
EMs, being relative
units, can get
complicated quickly
when you nest them.
Warning about EMs
1. External File
2. Internal, using the
<style> tag
3. Inline styles
Getting CSS into the HTML
Put this inside the <head>
<link	
  rel="stylesheet"	
  
href="file.css">
External File
Put this inside the <head>
<style	
  type="text/css">	
  
	
   …	
  your	
  styles	
  …	
  
</style>
Internal
<h1	
  style=“color:#fff;”>	
  
	
   Headline	
  
</h1>
Inline HTML
<interlude>
Obligatory
Baby Pictures
</interlude>
Box
Model
Elements of the Box
An element’s size is equal to:
Width (or Height)
+ Padding 

+ Border
+ Margin
= Total Size
The Box Model is Tricky
.box	
  {	
  
	
  width:	
  200px;	
  
	
  padding:	
  10px;	
  
	
  border:	
  5px;	
  
	
  margin:	
  15px;	
  
}
So if we plug in values:
Width (200px)
+ Padding (10px * 2 sides)

+ Border (5px * 2 sides)
+ Margin (15 px * 2 sides)
= T...
There is a
Better Way
Use a
Different 

Box Model
*,	
  *:before,	
  *:after	
  {	
  
-­‐webkit-­‐box-­‐sizing:	
  border-­‐box;	
  
-­‐moz-­‐box-­‐sizing:	
  border-­‐box;...
selector	
  {	
  
-­‐webkit-­‐box-­‐sizing:	
  border-­‐box;	
  
-­‐moz-­‐box-­‐sizing:	
  border-­‐box;	
  
box-­‐sizing:...
An element’s size
is equal to the
width size.
Border Box is NOT Tricky
Content-Box
(Default)
Border-Box
(Good!)
padding-­‐top:	
  10px;	
  
padding-­‐right:	
  5px;	
  
padding-­‐bottom:	
  10px;	
  
padding-­‐left:	
  5px;	
  
OR
pad...
Starts at NOON 

and goes clockwise.
padding:	
  top	
  right	
  bottom	
  left;
Shorthand
padding:	
  top+bottom	
  right+left;	
  
padding:	
  10px	
  5px;
Even More Shorthand
The Display Property
Block:
<h1>,	
  <p>,	
  <div>	
  
Inline:
<a>,	
  <span>,	
  <b>,	
  <strong>
The Display Property
a	
  {	
  
	
  display:	
  block;	
  
}	
  
The Display Property
There are many more
exotic display types, such
as inline-­‐block, none, etc.
The Display Property
Flow
Floats
img	
  {	
  
	
  float:	
  left;	
  
}	
  
The Display Property
Positioning can
change an element
in the flow.
Positioning
Parent
Element
position:	
  static
img	
  {	
  
	
  position:	
  static;	
  
}	
  
Positioning
This is the default, no need to write it
Positioning
Parent
Element
position:	
  fixed
Fixed in relation
to the browser.
img	
  {	
  
	
  position:	
  fixed;	
  
	
  top:	
  0px;	
  	
  
	
  left:	
  0px;	
  
}	
  
Positioning
top:	
  0px;	
  	
  
right:	
  0px;	
  
bottom:	
  0px;	
  
left:	
  0px;	
  
Positioning
Positioning
Parent
Element
position:	
  relative
img	
  {	
  
	
  position:	
  relative;	
  
	
  top:	
  -­‐10px;	
  	
  
	
  left:	
  -­‐200px;	
  
}	
  
Positioning
Positioning
Parent
Element
position:	
  absolute
position:	
  static
img	
  {	
  
	
  position:	
  absolute;	
  
	
  top:	
  0px;	
  	
  
	
  left:	
  0px;	
  
}	
  
Positioning
Absolute positioning
looks for the parent
with a position other
than static.
Positioning
Positioning
Parent
Element
position:	
  absolute
position:	
  relative
img	
  {	
  
	
  position:	
  absolute;	
  
	
  top:	
  0px;	
  	
  
	
  left:	
  0px;	
  
}	
  
Positioning
A Quick Note
About Mobile
Most CSS that you
write for mobile is
just CSS.
Percentages and
relative units, like EMs
are better than pixels,
which are static width.
@media	
  all	
  and	
  (max-­‐width:	
  699px){	
  
	
   …	
  styles	
  
}
Media Query
Further Learning
RandyOest.com/CSS
Intro to CSS
Intro to CSS
Intro to CSS
Upcoming SlideShare
Loading in...5
×

Intro to CSS

272

Published on

Slides from my Intro to CSS class. More info at http://randyoest.com.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
272
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Intro to CSS"

  1. 1. Intro to CSS
  2. 2. Randy Oest Manager of Digital Design Williams Randall Marketing ! @amazingrando
  3. 3. Why Learn CSS? 1. Running a blog on a CMS and want to tweak things 2. Working with a developer and want to understand how to talk with them 3. Web designer looking to understand how things get built
  4. 4. What We’ll Learn 1. What is CSS 2. How to speak CSS 3. How to apply it 4. Where to find out more info
  5. 5. If HTML is the Skeleton of Web pages…
  6. 6. CSS is the muscle and skin.
  7. 7. CSS Needs HTML CSS is used to style elements, giving them form.
  8. 8. HTML Elements <p>Paragraph …</p>   <div  class=“nav”>…</div>   <h1  id=“title”>Headline</h1>  
  9. 9. CSS Needs HTML Selectors are used to target styles.
  10. 10. Examples of Selectors <p>Paragraph …</p>   p  {  …  }  
  11. 11. Examples of Selectors <div  class=“nav”>…</div>   .nav  {  …  }  
  12. 12. Classes Class names always start with a period. .class
  13. 13. IDs IDs always start 
 with a hash. There can only be one on a page. #id
  14. 14. Think of classes as your name and nicknames, e.g. Randy, Amazing Rando, Hey You… Think of IDs as your unique social security or credit card numbers.
  15. 15. Multiple Selectors <h1  id=“title”>Headline</h1>   h1#title  {  …  }   No spaces!
  16. 16. Specificity When there is a style conflict, IDs trump classes, and classes trump HTML elements
  17. 17. Nested Elements <div  id=“feature”>     <img  src=“…”  />     Some Text … </div>
  18. 18. Nested Elements <div  id=“feature”>     <img  src=“…”  /> #feature  img  {  …  } Now there is a space.
  19. 19. .class  {     color:  #fff;     padding:  10px;   } Properties & Values Property Value
  20. 20. PX: Pixels %: Percentage EM: Relative unit, equal to the current font size Common Size Units
  21. 21. EMs, being relative units, can get complicated quickly when you nest them. Warning about EMs
  22. 22. 1. External File 2. Internal, using the <style> tag 3. Inline styles Getting CSS into the HTML
  23. 23. Put this inside the <head> <link  rel="stylesheet"   href="file.css"> External File
  24. 24. Put this inside the <head> <style  type="text/css">     …  your  styles  …   </style> Internal
  25. 25. <h1  style=“color:#fff;”>     Headline   </h1> Inline HTML
  26. 26. <interlude>
  27. 27. Obligatory Baby Pictures
  28. 28. </interlude>
  29. 29. Box Model
  30. 30. Elements of the Box
  31. 31. An element’s size is equal to: Width (or Height) + Padding 
 + Border + Margin = Total Size The Box Model is Tricky
  32. 32. .box  {    width:  200px;    padding:  10px;    border:  5px;    margin:  15px;   }
  33. 33. So if we plug in values: Width (200px) + Padding (10px * 2 sides)
 + Border (5px * 2 sides) + Margin (15 px * 2 sides) = Total Size (260px) The Box Model is Tricky
  34. 34. There is a Better Way
  35. 35. Use a Different 
 Box Model
  36. 36. *,  *:before,  *:after  {   -­‐webkit-­‐box-­‐sizing:  border-­‐box;   -­‐moz-­‐box-­‐sizing:  border-­‐box;   box-­‐sizing:  border-­‐box;   } Magic Bullet
  37. 37. selector  {   -­‐webkit-­‐box-­‐sizing:  border-­‐box;   -­‐moz-­‐box-­‐sizing:  border-­‐box;   box-­‐sizing:  border-­‐box;   } Fixing A Single Item
  38. 38. An element’s size is equal to the width size. Border Box is NOT Tricky
  39. 39. Content-Box (Default) Border-Box (Good!)
  40. 40. padding-­‐top:  10px;   padding-­‐right:  5px;   padding-­‐bottom:  10px;   padding-­‐left:  5px;   OR padding:  10px  5px  10px  5px; Shorthand
  41. 41. Starts at NOON 
 and goes clockwise. padding:  top  right  bottom  left; Shorthand
  42. 42. padding:  top+bottom  right+left;   padding:  10px  5px; Even More Shorthand
  43. 43. The Display Property
  44. 44. Block: <h1>,  <p>,  <div>   Inline: <a>,  <span>,  <b>,  <strong> The Display Property
  45. 45. a  {    display:  block;   }   The Display Property
  46. 46. There are many more exotic display types, such as inline-­‐block, none, etc. The Display Property
  47. 47. Flow
  48. 48. Floats
  49. 49. img  {    float:  left;   }   The Display Property
  50. 50. Positioning can change an element in the flow.
  51. 51. Positioning Parent Element position:  static
  52. 52. img  {    position:  static;   }   Positioning This is the default, no need to write it
  53. 53. Positioning Parent Element position:  fixed Fixed in relation to the browser.
  54. 54. img  {    position:  fixed;    top:  0px;      left:  0px;   }   Positioning
  55. 55. top:  0px;     right:  0px;   bottom:  0px;   left:  0px;   Positioning
  56. 56. Positioning Parent Element position:  relative
  57. 57. img  {    position:  relative;    top:  -­‐10px;      left:  -­‐200px;   }   Positioning
  58. 58. Positioning Parent Element position:  absolute position:  static
  59. 59. img  {    position:  absolute;    top:  0px;      left:  0px;   }   Positioning
  60. 60. Absolute positioning looks for the parent with a position other than static.
  61. 61. Positioning
  62. 62. Positioning Parent Element position:  absolute position:  relative
  63. 63. img  {    position:  absolute;    top:  0px;      left:  0px;   }   Positioning
  64. 64. A Quick Note About Mobile
  65. 65. Most CSS that you write for mobile is just CSS.
  66. 66. Percentages and relative units, like EMs are better than pixels, which are static width.
  67. 67. @media  all  and  (max-­‐width:  699px){     …  styles   } Media Query
  68. 68. Further Learning RandyOest.com/CSS
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×