CSS Fundamentals
What is CSS? <ul><li>Cascading Style Sheets </li></ul><ul><li>Rules that define how HTML elements should look </li></ul><u...
Types of Style Sheets <ul><li>Browser -Applies some styles by default </li></ul><ul><li>User -Some browsers allow you to c...
<ul><li>selectors select elements to be styled </li></ul><ul><li>declaration tells browser how to style </li></ul><ul><li>...
Where does CSS go <ul><li>Inline  style=&quot;&quot; attribute - Only good for one tag </li></ul><ul><li>Embedded  <style>...
<ul><li>When you need to share code </li></ul><ul><li>Only affects a specific tag </li></ul>Inline <em style=&quot;color:r...
<ul><li>Uses the <style> tag </li></ul><ul><li>Affects the current page </li></ul><ul><li>Uses selectors to specify which ...
<ul><li>Can affect a multitude of documents </li></ul><ul><li>Uses a separate file that must be linked to </li></ul><ul><l...
HTML Color Modes <ul><li>Can use Color Names like Black, Red, Blue </li></ul><ul><li>Can use Red, Green and Blue values fr...
<ul><li>Children inherit styles from parent </li></ul><ul><li>BODY is the big daddy </li></ul>Inheritance body { font-fami...
SPECIFICITY <ul><li>Which rules take over when there's more than one  </li></ul><ul><li>Browsers always deal with multiple...
Common Selectors <ul><li>Type Selectors:  em {color: blue; } </li></ul><ul><li>Class Selectors:  .wrapper {background-colo...
Advanced Selectors <ul><li>Child Selectors:  div>em {color:red;} </li></ul><ul><li>Universal Selector:  * {color:red;} </l...
Clean HTML is Crucial <ul><li>DOM (Document Object Model)  </li></ul><ul><li>The Order of Things </li></ul>
Pseudo Elements <ul><li>Pseudo Classes:  :hover,:first-child </li></ul><ul><li>Pseudo Elements:  :first-line, :first-lette...
Multiple Class Selectors <ul><li>You can combine multiple classes by separating them by spaces &quot;wrapper mod&quot; </l...
Class Shortcuts <ul><li>Font </li></ul><ul><li>Background </li></ul><ul><li>Border </li></ul>
The generic Tags <ul><li>Span-Inline </li></ul><ul><li>DIV-Block Level </li></ul>
The Box Model <ul><li>Inline vs Block </li></ul><ul><li>Margin </li></ul><ul><li>Border </li></ul><ul><li>Padding </li></ul>
Floating <ul><li>To the Right or to the Left </li></ul><ul><li>The container problem </li></ul><ul><li>Fixing it with the ...
Positioning <ul><li>Static-Normal positioning of objects </li></ul><ul><li>Fixed-Fixed to the browser window </li></ul><ul...
The End
Upcoming SlideShare
Loading in...5
×

CSS Fundamentals

5,157

Published on

Fundamentals of CSS covering the different types of tags and

Published in: Technology, Education
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,157
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
196
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide
  • The link tag establishes relationships between the current document and other documents. It is almost always used to specify external style sheets. The rel attribute defines the type of relationship. The type attribute specifies the MIME type (the format of the text file) and the href attribute, the location of the file.
  • DOM (Document Object Model)
  • CSS Fundamentals

    1. 1. CSS Fundamentals
    2. 2. What is CSS? <ul><li>Cascading Style Sheets </li></ul><ul><li>Rules that define how HTML elements should look </li></ul><ul><li>body {background:black;} </li></ul><ul><li>Cascades part determines the order the rules are applied in </li></ul>
    3. 3. Types of Style Sheets <ul><li>Browser -Applies some styles by default </li></ul><ul><li>User -Some browsers allow you to create your own styles. </li></ul><ul><li>Author -Websites can also have style sheets...these are the ones you'll be doing. </li></ul>
    4. 4. <ul><li>selectors select elements to be styled </li></ul><ul><li>declaration tells browser how to style </li></ul><ul><li>property is what you want to modify </li></ul><ul><li>value is the option you want for the property </li></ul>What does it look like? <ul><ul><li><style> </li></ul></ul><ul><ul><ul><li>em { color:red; font-weight:bold; } </li></ul></ul></ul><ul><ul><li></style> </li></ul></ul><ul><ul><li>declaration </li></ul></ul><ul><ul><li>selector </li></ul></ul><ul><ul><li>property </li></ul></ul><ul><ul><li>value </li></ul></ul>
    5. 5. Where does CSS go <ul><li>Inline style=&quot;&quot; attribute - Only good for one tag </li></ul><ul><li>Embedded <style> - Good for the whole page </li></ul><ul><li>External <link rel=&quot;stylesheet&quot; href=&quot;&quot; /> - Many Pages </li></ul>
    6. 6. <ul><li>When you need to share code </li></ul><ul><li>Only affects a specific tag </li></ul>Inline <em style=&quot;color:red;&quot;>dog</em>
    7. 7. <ul><li>Uses the <style> tag </li></ul><ul><li>Affects the current page </li></ul><ul><li>Uses selectors to specify which tags to affect </li></ul>Embedded <ul><ul><li><style> em { color: green; font-size:18px;} </style> </li></ul></ul>
    8. 8. <ul><li>Can affect a multitude of documents </li></ul><ul><li>Uses a separate file that must be linked to </li></ul><ul><li>The CSS file does NOT need <STYLE> tag </li></ul>External <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;my.css&quot; />
    9. 9. HTML Color Modes <ul><li>Can use Color Names like Black, Red, Blue </li></ul><ul><li>Can use Red, Green and Blue values from Photoshop </li></ul><ul><li>To be more specific, use Hexadecimal codes #FFCC00 </li></ul><ul><li>Can be shortened to three letters if they're the same #FC0 </li></ul><ul><li>Newer browsers can use rgba(0,0,0,0.5); </li></ul>
    10. 10. <ul><li>Children inherit styles from parent </li></ul><ul><li>BODY is the big daddy </li></ul>Inheritance body { font-family:verdana; } p { font-size:10px;}
    11. 11. SPECIFICITY <ul><li>Which rules take over when there's more than one </li></ul><ul><li>Browsers always deal with multiple style sheets </li></ul><ul><li>Browser/User/Author style sheet/External/embedded/inline </li></ul><ul><li>If two rules conflict, generally the later rule wins </li></ul><style>em { color: red; }</style> <p>The quick <em style=&quot;color:green;&quot;>fox</em>.</p>
    12. 12. Common Selectors <ul><li>Type Selectors: em {color: blue; } </li></ul><ul><li>Class Selectors: .wrapper {background-color: #CFC;} </li></ul><ul><li>ID Selectors: #content {width:960px;} </li></ul><ul><li>Descendant Selectors: p em {color:red;} </li></ul>
    13. 13. Advanced Selectors <ul><li>Child Selectors: div>em {color:red;} </li></ul><ul><li>Universal Selector: * {color:red;} </li></ul><ul><li>Adjacent Sibling: h1+h3 {color:red;} </li></ul><ul><li>Attribute Selectors: a[href=&quot;&quot;],img[alt] {color:red;} </li></ul>
    14. 14. Clean HTML is Crucial <ul><li>DOM (Document Object Model) </li></ul><ul><li>The Order of Things </li></ul>
    15. 15. Pseudo Elements <ul><li>Pseudo Classes: :hover,:first-child </li></ul><ul><li>Pseudo Elements: :first-line, :first-letter </li></ul><ul><li>Insertion Elements: :before, :after </li></ul>
    16. 16. Multiple Class Selectors <ul><li>You can combine multiple classes by separating them by spaces &quot;wrapper mod&quot; </li></ul>
    17. 17. Class Shortcuts <ul><li>Font </li></ul><ul><li>Background </li></ul><ul><li>Border </li></ul>
    18. 18. The generic Tags <ul><li>Span-Inline </li></ul><ul><li>DIV-Block Level </li></ul>
    19. 19. The Box Model <ul><li>Inline vs Block </li></ul><ul><li>Margin </li></ul><ul><li>Border </li></ul><ul><li>Padding </li></ul>
    20. 20. Floating <ul><li>To the Right or to the Left </li></ul><ul><li>The container problem </li></ul><ul><li>Fixing it with the mod class in html5reset </li></ul>
    21. 21. Positioning <ul><li>Static-Normal positioning of objects </li></ul><ul><li>Fixed-Fixed to the browser window </li></ul><ul><li>Relative-Relative to it's current position, but can be moved </li></ul><ul><li>Absolute-Relative to the last relatively positioned object, if one is not present, then works like Fixed...relative to the window. </li></ul><ul><li>Z-index </li></ul>
    22. 22. The End
    1. A particular slide catching your eye?

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

    ×