Your SlideShare is downloading. ×
0
CSS LJS, 21 October 2010
Overview <ul><li>The basics </li></ul><ul><li>Cascade and inheritance </li></ul><ul><li>Specificity </li></ul><ul><li>Comm...
 
 
 
 
 
 
The basics <ul><li>Terminology </li></ul><ul><ul><li>CSS syntax is made up of three parts: </li></ul></ul><ul><ul><ul><li>...
The basics <ul><li>selector  { property: value; } </li></ul><ul><li>A selector can be constructed from a combination of ID...
The basics <ul><li>selector  { property: value; } </li></ul><ul><li>A selector can be constructed from a combination of ID...
The basics <ul><li>selector  { property: value; } </li></ul><ul><li>A selector can be constructed from a combination of ID...
The basics <ul><li>Efficient CSS </li></ul><ul><ul><li>Any properties with a hyphen can usually be combined in shorthand, ...
Cascade and inheritance <ul><li>Properties that inherit include  font-family ,  color  and  text-align </li></ul><ul><li>O...
Cascade and inheritance <ul><li>The cascade is what take precedence when there is a conflict, according to the rules thus:...
Specificity <ul><li>Properties with the  !important  declaration </li></ul><ul><li>Inline styles </li></ul><ul><li>Element...
Specificity in Firebug
Specificity <ul><li>&quot;Some folks getting on board with CSS tend to get stuck on CSS specificity.  The descriptions of ...
What will be the colour of the main paragraph? <ul><li><style> </li></ul><ul><li>p { color: red; } </li></ul><ul><li>body ...
Common styling struggles <ul><li>Float </li></ul><ul><ul><li>Either left or right, not centre, sorry </li></ul></ul><ul><u...
Common styling struggles
Common styling struggles <ul><li>z-index </li></ul><ul><ul><li>Only works when element also has  position  defined ( relat...
Common styling struggles <ul><li>Internet Explorer hacks </li></ul><ul><ul><li>* html  #logo {}   (IE6) </li></ul></ul><ul...
toptable CSS
toptable CSS <ul><li>Reusable toptable classes </li></ul><ul><ul><li>float-left   (or right) </li></ul></ul><ul><ul><li>cl...
toptable CSS <ul><li>Naming conventions </li></ul><ul><ul><li>Prefix any class used for javascript instead of style with j...
The future – CSS3 <ul><li>Already in use (all modern browsers) </li></ul><ul><ul><li>Rounded corners </li></ul></ul><ul><u...
Upcoming SlideShare
Loading in...5
×

An Introduction to CSS

1,108

Published on

Pret Session overview given to developers.

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
1,108
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
55
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "An Introduction to CSS"

  1. 1. CSS LJS, 21 October 2010
  2. 2. Overview <ul><li>The basics </li></ul><ul><li>Cascade and inheritance </li></ul><ul><li>Specificity </li></ul><ul><li>Common problems </li></ul><ul><li>toptable CSS </li></ul><ul><li>The future – CSS3 </li></ul>
  3. 9. The basics <ul><li>Terminology </li></ul><ul><ul><li>CSS syntax is made up of three parts: </li></ul></ul><ul><ul><ul><li>Selector (the HTML element you wish to style, either defined generically, or by ID or class) </li></ul></ul></ul><ul><ul><ul><li>Property (the style you are defining e.g. background colour) </li></ul></ul></ul><ul><ul><ul><li>Value (e.g. the colour you want your background to be) </li></ul></ul></ul><ul><li>selector { property: value; } </li></ul>
  4. 10. The basics <ul><li>selector { property: value; } </li></ul><ul><li>A selector can be constructed from a combination of IDs, classes, elements, attributes, pseudo classes or pseudo elements </li></ul>#id {} .class {} p {} div, ul {} div ul {} #id p.class {}
  5. 11. The basics <ul><li>selector { property: value; } </li></ul><ul><li>A selector can be constructed from a combination of IDs, classes, elements, attributes, pseudo classes or pseudo elements </li></ul>* {} .class1.class2 {} div > p {} div + ul {}
  6. 12. The basics <ul><li>selector { property: value; } </li></ul><ul><li>A selector can be constructed from a combination of IDs, classes, elements, attributes, pseudo classes or pseudo elements </li></ul>a[target=_blank] {} :first-child {} :before {} :after {}
  7. 13. The basics <ul><li>Efficient CSS </li></ul><ul><ul><li>Any properties with a hyphen can usually be combined in shorthand, e.g. </li></ul></ul><ul><ul><ul><li>Background (-color, -image, -position, -repeat) </li></ul></ul></ul><ul><ul><ul><li>Border (-style, -width, -colour) </li></ul></ul></ul><ul><ul><ul><li>Font (-family, -size, -weight) </li></ul></ul></ul><ul><ul><li>Use more specific selectors in the “key selector” position </li></ul></ul><ul><ul><ul><li>#logo p a {} – bad </li></ul></ul></ul><ul><ul><ul><li>div div #container #logo {} – better </li></ul></ul></ul>
  8. 14. Cascade and inheritance <ul><li>Properties that inherit include font-family , color and text-align </li></ul><ul><li>Other properties can be inherited by the child in almost all cases with the value inherit , e.g. </li></ul><ul><ul><li>#login { height: inherit; } </li></ul></ul>
  9. 15. Cascade and inheritance <ul><li>The cascade is what take precedence when there is a conflict, according to the rules thus: </li></ul><ul><ul><li>Later properties override earlier properties </li></ul></ul><ul><ul><li>More specific selectors override less specific selectors </li></ul></ul><ul><ul><li>Specified properties override inherited properties </li></ul></ul>
  10. 16. Specificity <ul><li>Properties with the !important declaration </li></ul><ul><li>Inline styles </li></ul><ul><li>Elements with styles specifically applied, in the following order </li></ul><ul><ul><li>ID ( #content-body ) </li></ul></ul><ul><ul><li>Classes, attributes and pseudo-classes (.container, a[target], p:first-line) </li></ul></ul><ul><ul><li>Elements and pseudo-elements ( div, :hover ) </li></ul></ul><ul><li>Inherited styles, with the same order as above </li></ul>
  11. 17. Specificity in Firebug
  12. 18. Specificity <ul><li>&quot;Some folks getting on board with CSS tend to get stuck on CSS specificity. The descriptions of which rules override other rules tend to make more sense to programmers than designers, since programmers are used to the concepts of inheritance and overriding properties.&quot; </li></ul>
  13. 19. What will be the colour of the main paragraph? <ul><li><style> </li></ul><ul><li>p { color: red; } </li></ul><ul><li>body div { color: brown; } </li></ul><ul><li>div#pagewrapper { color: blue; } </li></ul><ul><li>#pagewrapper div.content { color: green; } </li></ul><ul><li></style> </li></ul><ul><li><body> </li></ul><ul><li><div id=&quot;pagewrapper&quot;> </li></ul><ul><li><div class=&quot;content&quot;> </li></ul><ul><li><p>This is the main paragraph.</p> </li></ul><ul><li></div> </li></ul><ul><li><div class=&quot;secondary&quot;> </li></ul><ul><li><p>This is the secondary paragraph.</p> </li></ul><ul><li></div> </li></ul><ul><li></div> </li></ul><ul><li></body> </li></ul>
  14. 20. Common styling struggles <ul><li>Float </li></ul><ul><ul><li>Either left or right, not centre, sorry </li></ul></ul><ul><ul><li>Floated elements are removed from the natural flow of the page </li></ul></ul><ul><ul><li>Block elements therefore behave as if they’re not there </li></ul></ul><ul><ul><li>Often leading to the ‘collapsed parent’ problem </li></ul></ul>
  15. 21. Common styling struggles
  16. 22. Common styling struggles <ul><li>z-index </li></ul><ul><ul><li>Only works when element also has position defined ( relative , absolute or fixed ) </li></ul></ul><ul><li>Internet Explorer </li></ul><ul><ul><li>IE6 (11.6% of our customers) interprets CSS1 in its own way, and doesn’t recognise almost all CSS2 selectors </li></ul></ul><ul><ul><ul><li>Child selectors (>), adjacent sibling selectors (+), combined selectors (#id.class) </li></ul></ul></ul><ul><ul><li>IE7 (21.9%) is also quirky </li></ul></ul>
  17. 23. Common styling struggles <ul><li>Internet Explorer hacks </li></ul><ul><ul><li>* html #logo {} (IE6) </li></ul></ul><ul><ul><li>*+html #logo {} (IE7) </li></ul></ul><ul><li>Embrace progressive enhancement </li></ul>
  18. 24. toptable CSS
  19. 25. toptable CSS <ul><li>Reusable toptable classes </li></ul><ul><ul><li>float-left (or right) </li></ul></ul><ul><ul><li>clear </li></ul></ul><ul><ul><li>inline </li></ul></ul><ul><ul><li>tac (text align centre, or tal, or tar) </li></ul></ul><ul><ul><li>strong </li></ul></ul><ul><ul><li>uppercase </li></ul></ul><ul><ul><li>invisible (or visible) </li></ul></ul><ul><ul><li>hide (or show) </li></ul></ul>
  20. 26. toptable CSS <ul><li>Naming conventions </li></ul><ul><ul><li>Prefix any class used for javascript instead of style with js- </li></ul></ul><ul><li>Formatting </li></ul><ul><li>.menu-tabs li { </li></ul><ul><li>display: inline; </li></ul><ul><li>float: left; </li></ul><ul><li>list-style: none; </li></ul><ul><li>margin: 0; </li></ul><ul><li>padding: 0; </li></ul><ul><li>} </li></ul>
  21. 27. The future – CSS3 <ul><li>Already in use (all modern browsers) </li></ul><ul><ul><li>Rounded corners </li></ul></ul><ul><ul><li>Multiple backgrounds </li></ul></ul><ul><ul><li>Enhanced transparency </li></ul></ul><ul><li>Limited support (not IE9) </li></ul><ul><ul><li>Transitions and transformations </li></ul></ul><ul><ul><li>Border image </li></ul></ul><ul><ul><li>Columns </li></ul></ul><ul><ul><li>Javascript-like animation | Coke can | Polariods </li></ul></ul>
  1. A particular slide catching your eye?

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

×