PRESENTED BY Cascading Style Sheets Fundamentals & Techniques That Every Writer Should Know Mike...
If you can't read please download the document
PRESENTED BY Cascading Style Sheets Fundamentals & Techniques That Every Writer Should Know Mike Hamilton V.P. Product Evangelism at MadCap Software [email protected]
PRESENTED BY Cascading Style Sheets Fundamentals &
Techniques That Every Writer Should Know Mike Hamilton V.P. Product
Evangelism at MadCap Software [email protected]
Slide 2
AGENDA List handling Indent control Captions Keep With Next in
CSS Positioned content Borders
Slide 3
LIST HANDLING
Slide 4
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
Slide 5
LISTS Nested List Construction Item 1 Sub-item A Sub-sub-item I
Sub-sub-item II Sub-item B Item 2
Slide 6
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 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
Slide 11
LISTS Automatic Styling The Complex or contextual selector UL
UL OL OL UL OL OL UL
Slide 12
LISTS New Styles ol {list-style-type: upper-alpha;} ol ol ol
{list-style-type: upper-roman;}
Slide 13
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
Slide 14
QUICK REVIEW OF THE BOX MODEL
Slide 15
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
Slide 16
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
Slide 17
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
Slide 18
LISTS TIP: Make the borders visible before adjusting margins or
padding!
Slide 19
INDENT CONTROL
Slide 20
In a CSS world there is no support for Tab To compensate,
indents must be handled with style settings HOWEVER: Dont go style
crazy! It is possible to have multiple levels of indent using 1
style
Slide 21
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
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
Slide 29
Caption Text div CAPTIONS image.jpg Caption Text
Slide 30
KEEP WITH NEXT
Slide 31
In CSS Keep With Next Doesnt Exist! However
Slide 32
KEEP WITH NEXT CSS includes something even better! An attribute
called: page-break-inside: avoid;
Slide 33
KEEP WITH NEXT Example: Given the page. When printed we dont
want a page break here
Slide 34
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
Slide 35
KEEP WITH NEXT In Style Sheet: div.nobreak { page-break-inside:
avoid; }
Slide 36
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.
Slide 37
POSITIONED CONTENT
Slide 38
Example: Nav Box
Slide 39
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.
Slide 40
POSITIONED CONTENT When rendered in a browser:
Slide 41
POSITIONED CONTENT Introducing the Float attribute Positions
content horizontally AND enables the rest of the page content to
flow around the floated element
Slide 42
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 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,
Slide 45
POSITIONED CONTENT When rendered in a browser:
Slide 46
POSITIONED CONTENT When rendered in a browser:
Slide 47
CSS3 BORDERS
Slide 48
The big news is CURVES! Use border-radius: 50px; And you get
rounded corners!
Slide 49
CSS3 BORDERS Syntax -moz-border-radius: 50px; border-radius:
50px; Browser Support IE9+, Firefox1+, Chrome5+, Safari5+ Important
Note: If browsers dont support border-radius it fails gracefully
with square corners
Slide 50
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
Slide 51
QUESTIONS Mike Hamilton V.P. Product Evangelism at MadCap
Software [email protected]
