Style With Kyle - Kyle Smith

305 views
262 views

Published on

This is the slide deck portion of "Style With Kyle", there is also a live demo where I will be coding some css in a basic page. Those files will be run off my laptop. Please let me know if you would like to see those before the presentation.

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

  • Be the first to like this

No Downloads
Views
Total views
305
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Style With Kyle - Kyle Smith

    1. 1. INTRO TO CSS Presented by Kyle Smith WordCamp 2012
    2. 2. WHAT IS CSS? CSS or Cascading Style Sheets is a programinglanguage designed to give HTML Markup dynamicstyle and help arrange the content in a more usable and appealing manner.
    3. 3. STRUCTURE:
    4. 4. BOX MODEL
    5. 5. HOW DO WE WRITE IT? #content { width: 300px; height: 250px; background-color: #353535; padding: 10px 15px 20px 10px; margin: 0; color: red; }
    6. 6. TARGETING ELEMENTSWe can target specific content (or “elements”) in three different ways.These can also be combined to be more specific in how we target them.Element - This selects all of the instances of thiselement within the document.ID - This selects specific elements so that style onlyeffects a single instance. IDs select ONE item.Classes - This selects more than one instance, likeelements, but more specifically. Classes selectMULTIPLE items.
    7. 7. CONCEPTSFloating - The floating attribute takes elements out of theflow of the document and moves them to the left or right.Absolute Positioning - The Absolute attribute will takealso take items out of the flow of the document andallow you to exactly place them.Display - The Display attribute allows elements to takeon fixed shapes as well as hide them entirely.Z-Index - The Z-Index attribute allows you to placeelements on top of each-other like papers in a stack.
    8. 8. BASIC ATTRIBUTESWidth: sets the width of an itemHeight: sets the height of an itemColor: sets the color of textFont-family: sets the font to be displayedPadding: Sets the space between the content and the borderMargin: Sets the space outside of the border of the contentFloat: Moves an element to the left or to the rightClear: Removes the float inherited from the element aboveAbsolute: Removes the element from the flow to allow for exactplacementDisplay: Defines how a certain element should be displayedBackground: Sets the background of an element, can be a color,image or even transparent
    9. 9. SOME THINGS TO REMEMBERIf something doesn’t appear properly, check your css!If something doesn’t appear at all, double check howyou are selecting it. IDs and Classes are not the same!Keep your CSS organized! It will help you later if yourun in to a problem.
    10. 10. DEMO!

    ×