Transcription
Insert Cover Image HereLeveraging CSS & HTML5 to Enhance YourMadCap Flare Output: Part 1Mike KelleySr. Information Developer
What is CSS?Cascading Style Sheets2
Multiple stylesheets3
Style priority1. Media type declarations Such as @media screen, @media print, or @media pdf2. Order of precedence (low-to-high priority):1.2.3.4.5.User agent declarations (browser)User normal declarations (user-imported stylesheet – usually via scripting)Author normal declarations (us)Author important declarations (us)User important declarations (user-imported stylesheet – usually via scripting)4
Style priority3. Specificity p vs. div phtml body div ul li vs. ul li4. Order specified If two declarations have the same weight, origin, and specificity, the latter specifiedwins.5
CSS syntaxh1 {h2, h3, h4 {h1,selectorArial; }property: value;{ font-family:}Values8px;areendtheofsettingyou youwantwantto applyto a aproperty.Theattributea selectorto change.Things ty-valuepairwithsemi-colon HTMLcolor element ( p ,font-weight:bold; img , table , h1 ) Elementfont-sizeclass/ID ( p class “big” , img id “small” )border-bottom:1px solid black; border } background-color6
{bodyh2 pproperty: value;}CSS – ulaaimgap
Class vs. IDClasses (barcode) The same class can be used multiple times.Every HTML element can have multiple classes.IDs (serial number) A unique ID can exist only once per HTML document.Each HTML element can have only one ID.They must both be declared in yourHTML markup and your CSS code.8
Classes and IDs in HTMLUse them as attributes of a given HTML element: p class “isCompliant” such as Chrome or Firefox. /p p id “notCompliant” You should use a standards-compliant browser. /p 9
Class and ID selectors in CSSClass:p.isCompliant{ background-color: awesome;ID:p#notCompliant{ background-color: ugly; }}10
Style InheritanceChild elements can inherit some property valuesof their parents.11
CSS box model12
CSS box modelmargin – moves content in relation to other contentpadding – moves content in relation to its container13
CSS pseudos Pseudo-classesPseudo-elementsApseudo-class is aallowkeywordthatallowsyoupartsto stylePseudo-elementsyou tostylecertainof anelementelement.when it has a special state. a:hoverto linksonly contentwhen theyarean::after – ApplyAllowsthisyoustyleto addand styleafterhovered.element. h2:first-childApplythisandstyleonlycontentto H2s beforethat::before – Allows –youto addstylearethe first child of their parent.an element. body:not(p) – Applythis styleto every::first-letter– Selectsthe firstletter of the firstdescendantof the body that isn’t a paragraph.line of a block. :not(*) – This is a useless selector. It matches anyelement that is not an element.14
CSS resourcesThe W3C http://www.w3.org/TR/css-2010/ http://www.webplatform.org/Mozilla Developer Network (MDN): https://developer.mozilla.org/en-US/docs/Web/CSS eferencestackoverflow: http://stackoverflow.com/Browser-specific developer tools Right-click an element in a page and click “Inspect element”CSS Zen Garden: http://csszengarden.com/15
CSS Getting ials16
Full Conference Schedule Now AvailableREGISTER BY OCTOBER 30TH TO SAVE: 200 Off Conference Packages 200 Off Advanced Training Workshopwww.MadWorldConference.com
THANK YOU FOR ATTENDING TODAY’SWEBINAR!As a webinar attendee, receive 100 OFF our nextadvanced training course. Just 499 per student!MadCap Flare Single Sourcing TrainingNovember 9-10, 2015 (web-based)MadCap Flare CSS TrainingNovember 12-13, 2015 (web-based)*Offer valid through October 30, 2015.Note: Courses subject to change. Availability based on student registration.
MadCap Flare Single Sourcing Training . November 9 -10, 2015 (web -based) MadCap Flare CSS Training . November 12- 13, 2015 (web -based) *Offer valid through October 30, 2015. Note: Courses subject to change. Availability base
