PRESENTED BY Cascading Style Sheets Fundamentals & Techniques That Every Writer Should Know Mike Hamilton V.P. Product Evangelism at MadCap Software

AGENDA List handling Indent control Captions “Keep With Next” in CSS Positioned content Borders

LIST HANDLING

LISTS Two types of lists »Ordered Lists (OL) Think numbers/letters »Unordered Lists (UL) Think bullets Both types contain List Items (LI) Item 1 Item 2

LISTS Nested List Construction Item 1 Sub-item A Sub-sub-item I Sub-sub-item II Sub-item B Item 2

LISTS Nested List In Browser 1.Item 1 1.Sub-item A 1.Sub-sub-item I 2.Sub-sub-item II 2.Sub-item B 2.Item 2

LISTS Styling “Nested Lists” (Lists inside Lists) »Manual method »Automatic method

LISTS Manual Styling »Create UL or OL styles for your various lists and sub-lists »Apply them manually to the list elements

LISTS New Styles ol.Level1 {list-style-type: decimal;} ol.Level2 {list-style-type: upper-alpha;} ol.Level3 {list-style-type: upper-roman;}

LISTS Nested List In Browser 1.Item 1 A.Sub-item A I.Sub-sub-item I II.Sub-sub-item II B.Sub-item B 2.Item 2

LISTS Automatic Styling The “Complex” or contextual selector » UL UL » OL OL » UL OL » OL UL

LISTS New Styles ol {list-style-type: upper-alpha;} ol ol ol {list-style-type: upper-roman;}

LISTS Nested List In Browser 1.Item 1 A.Sub-item A I.Sub-sub-item I II.Sub-sub-item II B.Sub-item B 2.Item 2

QUICK REVIEW OF THE BOX MODEL

THE BOX MODEL This page contains three elements Each element has an invisible box around it Heading 1 Text This is paragraph 1 This is paragraph 2

Heading 1 Text This is paragraph 1 This is paragraph 2 THE BOX MODEL There are three primary attributes to the box model »Border »Margin »Padding Each can be set in total, or by top, bottom, right, or left

Heading 1 Text This is list item 1 This is list item 2 THE BOX MODEL Lists have a complex box model The UL element is a big box The LI elements are the small boxes All are subject to Box Model rules This is list item 3

LISTS TIP: Make the borders visible before adjusting margins or padding!

INDENT CONTROL

In a CSS world there is no support for “Tab” To compensate, indents must be handled with style settings HOWEVER: Don’t go style crazy! It is possible to have multiple levels of indent using 1 style

INTRODUCING THE DIV ELEMENT DIV is one of the most important elements for CSS control A DIV element is a container element which can wrap or contain other elements A DIV can be styled Can drastically reduce the number of styles needed

INDENT CONTROL DivDemo Paragraph 1 Paragraph 2 Paragraph 2a Paragraph 2b Paragraph 3 Paragraph 4

INDENT CONTROL DivDemo Paragraph 1 Paragraph 2 Paragraph 2a Paragraph 2b Paragraph 3 Paragraph 4

INDENT CONTROL In Style Sheet: div.myindent { margin-left: 18pt; }

INDENT CONTROL DivDemo Paragraph 1 Paragraph 2 Paragraph 2a Paragraph 2b Paragraph 3 Paragraph 4

INDENT CONTROL DivDemo Paragraph 1 Paragraph 2 Paragraph 2a Paragraph 2b Paragraph 3 Paragraph 4

CAPTIONS

Many authors struggle with captions The key to getting captions to “stick” to the image, figure, table, etc. is our friend the DIV again Wrap the image and caption paragraph with a DIV

Caption Text div CAPTIONS image.jpg Caption Text

KEEP WITH NEXT

In CSS Keep With Next Doesn’t Exist! However…

KEEP WITH NEXT CSS includes something even better! An attribute called: page-break-inside: avoid;

KEEP WITH NEXT Example: Given the page. When printed we don’t want a page break here

KEEP WITH NEXT Create a DIV class called “nobreak” Assign div.nobreak the attribute page-break-inside: avoid; Wrap the content with the new div.nobreak element

KEEP WITH NEXT In Style Sheet: div.nobreak { page-break-inside: avoid; }

KEEP WITH NEXT Paragraphs - Heading 2 Urna nullam at in vulputate, rutrum non tristique, tortor eu nisl nulla non mauris sit, nonummy adipiscing phasellus, integer ac interdum vel. Maecenas. Sem id donec libero quis elementum, pulvinar, est. Velit in vitae dolores ac. Porttitor massa quisque, et quis. Hymenaeos mauris sit erat massa feugiat. Id urna velit aliquam, proin ac per etiam nibh tristique. Enim ante ac aliquam, vitae nunc odio proin mollis. Neque euismod sed leo magna nisl. Eget velit consectetuer vitae vitae sit lectus, elit sem at wisi, magnis vestibulum integer quis parturient tortor sem. Tempus lacus tincidunt vestibulum amet pharetra, suscipit diam posuere nascetur elementum convallis et.

POSITIONED CONTENT

Example: Nav Box

POSITIONED CONTENT Create the content you want in the positioned box For this example it will be 2 links This is a Heading Link1 Link2 Volutpat ac ac mauris curabitur purus suspendisse, lacinia a in, egestas metus, in nulla condimentum mauris molestie duis nam, est tempus orci sit. Eget tellus sem augue. Risus tortor, lacinia.

POSITIONED CONTENT When rendered in a browser:

POSITIONED CONTENT Introducing the Float attribute Positions content horizontally AND enables the rest of the page content to flow around the floated element

POSITIONED CONTENT Create a new DIV element with the class name “floatright” Define the div.floatright attributes Apply the new div around the links

POSITIONED CONTENT In Style Sheet: div.floatright { padding: 1em; margin: 1em; float: right; border: solid 1px #000000; }

POSITIONED CONTENT This is a Heading Link1 Link2 Volutpat ac ac mauris curabitur purus suspendisse, lacinia a in, egestas metus, in nulla condimentum mauris molestie duis nam, est tempus orci sit. Eget tellus sem augue. Risus tortor, lacinia odio tempor a nam eu. Vitae erat non. Congue porta tortor felis libero eleifend et,

POSITIONED CONTENT When rendered in a browser:

POSITIONED CONTENT When rendered in a browser:

CSS3 BORDERS

The big news is CURVES! Use “border-radius: 50px;” And you get rounded corners!

CSS3 BORDERS Syntax -moz-border-radius: 50px; border-radius: 50px; Browser Support IE9+, Firefox1+, Chrome5+, Safari5+ Important Note: If browsers don’t support border-radius it “fails gracefully” with square corners

CSS TECHNIQUES Summary »The existing CSS2 provides a lot of power that few authors are currently exploiting »The DIV element is our friend »Positioning content using the Float, Position, and Overflow attributes is the key to advanced layout

QUESTIONS Mike Hamilton V.P. Product Evangelism at MadCap Software