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

FireFox browser FireBug Chrome browser Tools We’re going to use

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

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

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

HTML Anatomy & Terminology HTML STUFF... First heading My first paragraph. another paragraph...HTML STUFF Elements Tags …… Attributes Nesting Parent, child, sibling, descendent

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

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. The Box Model Content Padding Border Margin

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 Selectors HTML STUFF... First heading My first paragraph. paragraph...HTML STUFF

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

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

Most commonly requested and used CSS trick in the HUG discussions. Easy to do. #Element2{ display:none; } Hiding elements Element 1 Element 2 Element 3 Element 4 Element 1 Element 3 Element 4

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

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore VERITATIS ET QUASI ARCHITECTO dicta sunt explicabo. Overriding existing CSS Font (font-family) Size (font-size) Bold (font-weight) Spacing (line-height) Case (text-transform) Color (color) Tweaking elements Use !important to override inline CSS style.

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?

Resources & tools CSS & HTML fundamentals learn.shayhowe.com/html-css/ learn.shayhowe.com/html-css/ Mozilla CSS school JSFiddle to test out CSS Create CSS buttons FireBug Other HL sites Use FireBug-like tools to see under the hood of other websites HUG Me (Justin Prevatte) or Message me on HUG if you have a question and I’ll do my best to help out.

Justin Prevatte Contact Info HUG Profile Link