Your SlideShare is downloading. ×
Style With Kyle - Kyle Smith
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Style With Kyle - Kyle Smith

205

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 …

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. INTRO TO CSS Presented by Kyle Smith WordCamp 2012
    • 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. STRUCTURE:
    • 4. BOX MODEL
    • 5. HOW DO WE WRITE IT? #content { width: 300px; height: 250px; background-color: #353535; padding: 10px 15px 20px 10px; margin: 0; color: red; }
    • 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. 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. 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. 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. DEMO!

    ×