1 / 18

CSS Basics

CSS Basics. Hide, Move, or Tweak (Almost) Anything in Your Community Sites. Tools We’re going to use. FireFox browser FireBug Chrome browser. Objectives. What is CSS & how it works Live examples Introduction to helpful tools Your questions and real-life examples. Methodology. YES

gwylan
Download Presentation

CSS Basics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS Basics Hide, Move, or Tweak (Almost) Anything in Your Community Sites

  2. Tools We’re going to use • FireFox browser • FireBug • Chrome browser

  3. Objectives • What is CSS & how it works • Live examples • Introduction to helpful tools • Your questions and real-life examples

  4. Methodology YES • Getting things done • Good enough • Fundamentals and building blocks NO • Reinventing the wheel • Pixel-perfect across every browser ever invented • Definitive resource for all CSS

  5. What is CSS? • #Logo{ • display:none; • } • .breadcrumb{ • float:left; • } • .MPContentAreaHome #PrinterFriendly{ • display:none; • } • .HLLandingControlulli{ • border-bottom: none;list-style-type: disc;margin-bottom: 0px;padding-bottom: 0px; • } Cascading Style Sheets What does CSS do? Tells the web browser how the web page should look.

  6. HTML Anatomy & Terminology HTML STUFF... <body> <h1>First heading</h1> <p class=“okay”>My first paragraph.</p> <div> <p id=“best”>another paragraph</p> <p class=“okay”> another paragraph </p> <p> another paragraph </p> <p> another paragraph </p> </div> </body> ...HTML STUFF • Elements<body> <p> <div> <h1> • Tags<p>……</p> • Attributes<p id=“best”> • NestingParent, child, sibling, descendent

  7. CSS Anatomy & Terminology • div{ • Padding:10px 5px; • } • p{ • Color: #f00; • font-size: 16px; • } • .HLLandingControlulli { • border-bottom: none;list-style-type: disc;margin-bottom: 0px;padding-bottom: 0px; • }

  8. The Box Model Margin • Every HTML element on the web is a rectangular box. • Components of a box: • Content • Padding • Border • Margin • Different elements have different default box styles. • CSS let’s us control the characteristics of each box. Border Padding Content

  9. Selectors From general to specific • Tags – p – selects all elements with this tag. • Class– .className – selects all elements with this class. • ID – #idName – selects element with this ID. Combine the items above to select descendents HTML STUFF... <body> <h1>First heading</h1> <p class=“ok”>My first paragraph.</p> <div> <p id=“best” class=“ok”>paragraph</p> <p class=“ok”>paragraph </p> <p>paragraph </p> <p>paragraph </p> </div> </body> ...HTML STUFF

  10. Tools to help you get things done • FireFox • FireBug • Chrome • Notepad (or text editor or choice) • JSFiddle

  11. Keeping things organized • /*=== GENERAL === */ • #Logo{ • display:none; • } • .breadcrumb{ • float:left; • } • /*=== REMOVE PRINT FROM HOMEPAGE === */ • .MPContentAreaHome #PrinterFriendly{ • display:none; • } • /*=== REMOVE HOEMPAGE LIST FORMAT=== */ • .HLLandingControlulli{ • border-bottom: none;list-style-type: disc;margin-bottom: 0px;padding-bottom: 0px; • } • Comment everything Not messing up your site • Make a backup of your site and CSS for some trial and error.

  12. Hiding elements <p> Element 1 </p> • Most commonly requested and used CSS trick in the HUG discussions. • Easy to do. #Element2{ display:none; } <p id=“Element2”> Element 2 </p> <p> Element 3 </p> <p> Element 4 </p> <p> Element 1 </p> <p> Element 3 </p> <p> Element 4 </p>

  13. Moving elementson the page 20px • Increasing the padding or margin between itemsto nudge elements. • Set the CSS Position property and then specify the elements new location. • P{ • position:relative; • left:20px; • top:20px; • } 20px

  14. Overriding existing CSS Tweaking elements • Font (font-family) • Size (font-size) • Bold (font-weight) • Spacing (line-height) • Case (text-transform) • Color (color) Sedutperspiciatisundeomnisistenatus error sit voluptatemaccusantiumdoloremquelaudantium, totamremaperiam, eaqueipsa quae abilloinventoreVERITATIS ET QUASI ARCHITECTO dicta suntexplicabo. • Use!important to override inline CSS style.

  15. Q&A and real-life examples • More examples? • What would you like to learn more about? • Is there something specific on your site you’d like to change?

  16. Resources & tools • CSS & HTML fundamentalslearn.shayhowe.com/html-css/ • Mozilla CSS schoolhttps://developer.mozilla.org/en-US/learn/css • JSFiddle to test out CSSwww.jsfiddle.net • Create CSS buttonswww.cssbuttongenerator.com • FireBughttp://getfirebug.com/ • Other HL sitesUse FireBug-like tools to see under the hood of other websites • HUGhttp://hug.higherlogic.com/Home/ • Me (Justin Prevatte)Email or Message me on HUG if you have a question and I’ll do my best to help out.

  17. Justin Prevatte jnprevatte@gmail.com Contact Info HUG Profile Link

More Related