cascading style sheets mike’s favorite techniques
DESCRIPTION
Cascading Style Sheets Mike’s Favorite Techniques. Mike Hamilton V.P. MadCap Software [email protected] @ MadCapMike. Agenda. List handling Indent control Captions “Keep With Next” in CSS Positioned content Borders Fonts. List Handling. Lists. Two types of lists - PowerPoint PPT PresentationTRANSCRIPT
Cascading Style Sheets Mike’s Favorite Techniques
Mike HamiltonV.P. MadCap Software
[email protected]@MadCapMike
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) <ol> <li>Item 1</li> <li>Item 2</li> </ol>
ListsNested List Construction<ol> <li>Item 1</li> <ol> <li>Sub-item A</li> <ol> <li>Sub-sub-item I</li> <li>Sub-sub-item II</li> </ol> <li>Sub-item B</li> </ol> <li>Item 2</li></ol>
Lists
Nested List In Browser
1. Item 11. Sub-item A
1. Sub-sub-item I2. Sub-sub-item II
2. Sub-item B2. 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 Stylesol.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 1A. Sub-item a
I. Sub-sub-item III. Sub-sub-item II
B. Sub-item b2. Item 2
Lists
Automatic Styling• The “Complex” or contextual selector– UL UL– OL OL– UL OL– OL UL
Lists
New Stylesol ol{list-style-type: upper-alpha;}
ol ol ol{list-style-type: upper-roman;}
Lists
Nested List In Browser
1. Item 1A. Sub-item a
I. Sub-sub-item III. Sub-sub-item II
B. Sub-item b2. Item 2
Lists
Quick Reviewof the
Box Model
The Box Model
• This page contains three elements
• Each element has in invisible box around it
Heading 1 TextThis is paragraph 1This 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 TextThis is paragraph 1This 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!
TIP:
Indent Control
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
<body> <h1>DivDemo</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 2a</p> <p>Paragraph 2b</p> <p>Paragraph 3</p> <p>Paragraph 4</p> </body>
Indent Control
DivDemoParagraph 1Paragraph 2Paragraph 2aParagraph 2bParagraph 3Paragraph 4
Indent Control
In Style Sheet:div.myindent{ margin-left: 18pt;}
Indent Control<body> <h1>DivDemo</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> <div class="myindent"> <p>Paragraph 2a</p> <p>Paragraph 2b</p> </div> <p>Paragraph 3</p> <p>Paragraph 4</p> </body>
Indent Control
DivDemoParagraph 1Paragraph 2 Paragraph 2a Paragraph 2bParagraph 3Paragraph 4
Captions
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
<div><p><img src=“image.jpg" /></p><p>Caption Text</p></div>
image.jpg
Caption Text
Keep With Next
Keep With Next
In CSSKeep With Next
Doesn’tExist!
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
<div class=“nobreak"><h2>Paragraphs - Heading 2 </h2><p>Urna nullam at in vulputate, rutrum non tristique, tortor eu nisl nulla non mauris sit, nonummy adipiscing phasellus, integer ac interdum vel. Maecenas.</p> <ol> <li>Sem id donec libero quis elementum, pulvinar, est.</li> <ol> <li>Velit in vitae dolores ac. Porttitor massa quisque, et quis. </li> <li>Hymenaeos mauris sit erat massa feugiat. </li> <li>Id urna velit aliquam, proin ac per etiam nibh tristique. </li> <li>Enim ante ac aliquam, vitae nunc odio proin mollis. </li> </ol> <li>Neque euismod sed leo magna nisl. </li> </ol><p>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. </p>
</div>
Positioned Content
Positioned Content
Example: Nav Box
Positioned Content• Create the content you want in the
positioned box• For this example it will be 2 links
<h1>This is a Heading</h1><p><a href="http://www.google.com/">Link1</a></p><p><a href="http://www.yahoo.com/">Link2</a></p><p>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.</p>
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
<h1>This is a Heading</h1><div class=“floatright"><p><a href="http://www.google.com/">Link1</a></p><p><a href="http://www.yahoo.com/">Link2</a></p> </div><p>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.</p>
Positioned Content
When rendered in a browser:
Positioned Content
When rendered in a browser:
CSS3 Borders
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 SupportIE9+, Firefox1+, Chrome5+, Safari5+ Important NoteIf browsers don’t support border-radius it “fails gracefully” with square corners
CSS3 Fonts
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
The @font-face 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
Syntax@font-face{font-family: myCoolFont;src: url(‘myCoolFont.ttf'), url(‘myCoolFont.eot'); } Browser Support All (if both .eot and .ttf used)Important NoteSee next slide…
CSS3 Text Overflow
Important NoteFont foundaries such as www.fontspring.com and others are available that can provide (for a fee) packages containing both .eot and .ttf fonts, along with licenses for web use.
CSS TechniquesSummary• 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
