Cascading Style Sheets Mike’s Favorite Techniques Mike Hamilton V.P. MadCap

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

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

Lists Quick Review of the Box Model

The Box Model This page contains three elements Each element has in invisible box around it 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 paragraph 1 This is paragraph 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 Heading 1 Text This is list item 1 This is list item 2 This is list item 3

Lists 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

div Captions Caption Text 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 odio tempor a nam eu. Vitae erat non. Congue porta tortor felis libero eleifend et, et tellus, facilisis elit adipiscing ut massa donec ultricies, ultrices sit arcu turpis pulvinar. Nam nisl nascetur urna malesuada ligula montes, in ultricies. Luctus egestas convallis numquam phasellus elit facilisi, eu integer, cum metus, enim turpis sit eget, facilisis vestibulum nec ut ullamcorper elit.

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

Keep With Next 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, et tellus, facilisis elit adipiscing ut massa donec ultricies, ultrices sit arcu turpis pulvinar. Nam nisl nascetur urna malesuada ligula montes, in ultricies. Luctus egestas convallis numquam phasellus elit facilisi, eu integer, cum metus, enim turpis sit eget, facilisis vestibulum nec ut ullamcorper elit.

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

CSS3 Fonts

Imagine not having to worry about browser font substitution if the font you specified isn’t on the viewers device. That day is here (somewhat)

CSS3 Fonts attribute makes it possible for you to provide the fonts necessary to render your pages. However, there are several hurdles…

CSS3 Fonts IE only supports.eot type fonts. FF, Chrome, Safari support.ttf and.otf fonts (but not.eot) You must have the legal rights to distribute the fonts you use Your fonts must be available from your web server However, there are several hurdles…

CSS3 Text Overflow {font-family: myCoolFont; src: url(‘myCoolFont.ttf'), url(‘myCoolFont.eot'); } Browser Support All (if both.eot and.ttf used) Important Note See next slide…

CSS3 Text Overflow Important Note Font foundaries such as and others are available that can provide (for a fee) packages containing both.eot and.ttf fonts, along with licenses for web use.

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 CSS3 adds new capabilities when paired with newer browsers

Questions Mike Hamilton V.P. MadCap