Presentation is loading. Please wait.

Presentation is loading. Please wait.

Mike Hamilton V.P. Product Management MadCap Software Cascading Style Sheets (Part 3): Images and Text.

Published byJacob Corbett Modified over 11 years ago

Similar presentations

Presentation on theme: "Mike Hamilton V.P. Product Management MadCap Software Cascading Style Sheets (Part 3): Images and Text."— Presentation transcript:

1 Mike Hamilton V.P. Product Management MadCap Software mhamilton@madcapsoftware.com Cascading Style Sheets (Part 3): Images and Text

2 Agenda Short CSS review Images as background properties Images as elements Controlling text flow around images

3 Presenter Information Mike Hamilton –MadCap V.P. of Product Management Mike Hamilton is the Vice President of Product Management at MadCap Software where he is working on the next generation authoring tool, Flare. Before joining MadCap Software, he was the Product Manager for the RoboHelp product line since the days of Blue Sky Software, eHelp, and Macromedia. Mr. Hamilton joined the RoboHelp team in the mid 90s as a founding member of the Training Solutions Program team, where he co-authored the certified training materials supporting the RoboHelp family. Mike has over 20 years of experience in training, technical communication, multimedia development, and software development at several organizations including Macromedia, eHelp/Blue Sky Software, Cymer, a leading supplier of laser illumination sources in the semiconductor industry, National Steel and Shipbuilding, and the US Navy.

4 We also have with us… Sharon Burton –MadCap Product manager Answering your questions during the webinar –Shell do her best to answer them Type questions in the Question and Answer area of the GoToWebinar bar

5 Short CSS Review

6 What Are Cascading Style Sheets? A Cascading style sheet (CSS) document is a simple text file. A CSS file contains a collection of style rules used to control the look and feel of documents. A CSS style rule has two parts, a Selector and a Declaration

7 Cascading Style Sheets (CSS) Style Rules SelectorDeclaration ValueProperty H1 {font-weight: bold} H1 {font-weight: bold; color: black; }

8 CLASS attribute Class Syntax: –In a style sheet: P.myclass { color:blue; margin- left:3px; } –In a page: Text

9 Images Overview

10 Images Unlike word processors or desktop publishing applications, in an XML or XHTML world images can NOT be embedded in documents Images are always external to the documents and are included by reference

11 Sample Page body {color: #000000; background: #F1F2EC; font-size: 8pt; font-family: Verdana, Arial,Helvetica, Sans Serif;} h1 {color: #0D10E5; font-size: 12pt;} h2 {color: #040677; font-size: 10pt;} p {margin-bottom: 16px;} heading 1 Text "It is a far, far better thing that I do, than I have ever done; it is a far, far better rest that I go to than I have ever known." Closing paragraph

12 Sample Page With Image body {color: #000000; background: #F1F2EC; font-size: 8pt; font-family: Verdana, Arial,Helvetica, Sans Serif;} h1 {color: #0D10E5; font-size: 12pt;} h2 {color: #040677; font-size: 10pt;} p {margin-bottom: 16px;} heading 1 Text "It is a far, far better thing that I do, than I have ever done; it is a far, far better rest that I go to than I have ever known." Closing paragraph

13 Images as Background Properties

14 Images Any element can use an image as a background For small elements this can focus attention For large elements (such as Body) this can act as a watermark

15 Background-Image Single Element body {color: #000000; background: #F1F2EC; font-size: 8pt; font-family: Verdana, Arial,Helvetica, Sans Serif;} h1 {color: #0D10E5; font-size: 12pt;} h2 {color: #040677; font-size: 10pt;} p {margin-bottom: 16px;} heading 1 Text "It is a far, far better thing that I do, than I have ever done; it is a far, far better rest that I go to than I have ever known." Closing paragraph

16 Background – Image Single Element body {color: #000000; background: #F1F2EC; font-size: 8pt; font-family: Verdana, Arial,Helvetica, Sans Serif;} h1 {color: #0D10E5; font-size: 12pt; background-image: url(image2.jpg); } h2 {color: #040677; font-size: 10pt;} p {margin-bottom: 16px;} heading 1 Text "It is a far, far better thing that I do, than I have ever done; it is a far, far better rest that I go to than I have ever known." Closing paragraph

17 Background-Image Full Page body {color: #000000; background: #F1F2EC; background-image: url(image3.jpg); font-size: 8pt; font-family: Verdana, Arial,Helvetica, Sans Serif;} h1 {color: #0D10E5; font-size: 12pt;} h2 {color: #040677; font-size: 10pt;} p {margin-bottom: 16px;} heading 1 Text "It is a far, far better thing that I do, than I have ever done; it is a far, far better rest that I go to than I have ever known." Closing paragraph

18 Background-Image Control The Background-Image: attribute allows you to choose the image Additional control is available using –Background-repeat –Background-attachment –Background-position

19 Background - Repeat The Background-repeat: attribute controls how the image is applied Options: o Repeat Tiles the image to cover the entire page o No-repeat Shows the image once o Repeat-x Tiles the image horizontally o Repeat-y Tiles the image vertically

20 Repeat body {color: #000000; background: #F1F2EC; background-image: url(image3.jpg); background-repeat: repeat; font-size: 8pt; font-family: Verdana, Arial,Helvetica, Sans Serif;} h1 {color: #0D10E5; font-size: 12pt;} h2 {color: #040677; font-size: 10pt;} p {margin-bottom: 16px;} heading 1 Text "It is a far, far better thing that I do, than I have ever done; it is a far, far better rest that I go to than I have ever known." Closing paragraph

21 No-repeat body {color: #000000; background: #F1F2EC; background-image: url(image3.jpg); background-repeat: no-repeat; font-size: 8pt; font-family: Verdana, Arial,Helvetica, Sans Serif;} h1 {color: #0D10E5; font-size: 12pt;} h2 {color: #040677; font-size: 10pt;} p {margin-bottom: 16px;} heading 1 Text "It is a far, far better thing that I do, than I have ever done; it is a far, far better rest that I go to than I have ever known." Closing paragraph

22 Repeat-x body {color: #000000; background: #F1F2EC; background-image: url(image3.jpg); background-repeat: repeat-x; font-size: 8pt; font-family: Verdana, Arial,Helvetica, Sans Serif;} h1 {color: #0D10E5; font-size: 12pt;} h2 {color: #040677; font-size: 10pt;} p {margin-bottom: 16px;} heading 1 Text "It is a far, far better thing that I do, than I have ever done; it is a far, far better rest that I go to than I have ever known." Closing paragraph

23 Repeat-y body {color: #000000; background: #F1F2EC; background-image: url(image3.jpg); background-repeat: repeat-y; font-size: 8pt; font-family: Verdana, Arial,Helvetica, Sans Serif;} h1 {color: #0D10E5; font-size: 12pt;} h2 {color: #040677; font-size: 10pt;} p {margin-bottom: 16px;} heading 1 Text "It is a far, far better thing that I do, than I have ever done; it is a far, far better rest that I go to than I have ever known." Closing paragraph

24 Background - Attachment The Background-attachment: attribute determines how the image reacts to the browser scroll bar Options: o Scroll The background image scrolls with the page content o Fixed The background image is fixed and the page content scrolls over it

25 Background - Attachment Background-attachment: scroll Background-attachment: fixed

26 Background - Position The Background-position: attribute determines where the background image is located on the page The format is: background-position: x y; Where o X is the distance from the left side of the page to the image o Y is the distance from the top of the page to the image

27 Background - Position X and Y values can be percentages, fixed values (inch, cm, etc), or named values (top, center, etc.) For this example we will use background-position: 75% 75%;

28 Background-Position body {color: #000000; background: #F1F2EC; background-image: url(image3.jpg); background-repeat: no-repeat; background-position: 75% 75%; font-size: 8pt; font-family: Verdana, Arial,Helvetica, Sans Serif;} h1 {color: #0D10E5; font-size: 12pt;} h2 {color: #040677; font-size: 10pt;} p {margin-bottom: 16px;} heading 1 Text "It is a far, far better thing that I do, than I have ever done; it is a far, far better rest that I go to than I have ever known." Closing paragraph

29 Background Image Review Background-image: attribute allows you to choose the image Background-repeat: attribute controls how the image tiles Background-attachment: controls the scroll behavior of the image Background-position: controls where the image is located

30 Images as Elements

31 Sample Page With Image body {color: #000000; background: #F1F2EC; font-size: 8pt; font-family: Verdana, Arial,Helvetica, Sans Serif;} h1 {color: #0D10E5; font-size: 12pt;} h2 {color: #040677; font-size: 10pt;} p {margin-bottom: 16px;} heading 1 Text "It is a far, far better thing that I do, than I have ever done; it is a far, far better rest that I go to than I have ever known." heading 2 Text Closing paragraph

32 Controlling Text Flow Around Images

33 Text Flow Around Images Images are block level elements and flow in a document just like paragraphs. Often this is not the behavior that you want. To allow text or other content to flow around images the Float property is used.

34 Float The Float attribute has three possible values: None – Content will be above or below the image Right – The image moves to the right and the content flows around it Left – The image moves to the left and content flows around it

35 Sample Page With Image body {color: #000000; background: #F1F2EC; font-size: 8pt; font-family: Verdana, Arial,Helvetica, Sans Serif;} h1 {color: #0D10E5; font-size: 12pt;} h2 {color: #040677; font-size: 10pt;} p {margin-bottom: 16px;} heading 1 Text "It is a far, far better thing that I do, than I have ever done; it is a far, far better rest that I go to than I have ever known." heading 2 Text Closing paragraph

36 Using Float Right body {color: #000000; background: #F1F2EC; font-size: 8pt; font-family: Verdana, Arial,Helvetica, Sans Serif;} h1 {color: #0D10E5; font-size: 12pt;} h2 {color: #040677; font-size: 10pt;} p {margin-bottom: 16px;} img.right {float: right;} heading 1 Text "It is a far, far better thing that I do, than I have ever done; it is a far, far better rest that I go to than I have ever known." heading 2 Text Closing paragraph

37 Using Float Left body {color: #000000; background: #F1F2EC; font-size: 8pt; font-family: Verdana, Arial,Helvetica, Sans Serif;} h1 {color: #0D10E5; font-size: 12pt;} h2 {color: #040677; font-size: 10pt;} p {margin-bottom: 16px;} img.right {float: left;} heading 1 Text "It is a far, far better thing that I do, than I have ever done; it is a far, far better rest that I go to than I have ever known." heading 2 Text Closing paragraph

38 Clear The Clear property can be used to override an element with a Float applied (like the H2 in our previous example) Clear values determine the sides on which floated elements are prohibited: Left Right Both None

39 Using Clear body {color: #000000; background: #F1F2EC; font-size: 8pt; font-family: Verdana, Arial,Helvetica, Sans Serif;} h1 {color: #0D10E5; font-size: 12pt;} h2 {color: #040677; font-size: 10pt;} p {margin-bottom: 16px;} img.right {float: left;} heading 1 Text "It is a far, far better thing that I do, than I have ever done; it is a far, far better rest that I go to than I have ever known." heading 2 Text Closing paragraph

40 Using Clear body {color: #000000; background: #F1F2EC; font-size: 8pt; font-family: Verdana, Arial,Helvetica, Sans Serif;} h1 {color: #0D10E5; font-size: 12pt;} h2 {color: #040677; clear: both; font-size: 10pt;} p {margin-bottom: 16px;} img.right {float: left;} heading 1 Text "It is a far, far better thing that I do, than I have ever done; it is a far, far better rest that I go to than I have ever known." heading 2 Text Closing paragraph

41 Image Text Flow Review Images added by reference The Float property allows content to flow around an image –Float: right – image goes right and content flows around its left side –Float: left – image goes left and content flows around its right side The Clear property is used to override the Float when necessary

42 Images Summary Images as background properties –Special effects –Watermarks –Positioning and attributes Images as content elements –Controlling text flow using Float –Overriding Float using Clear

43 Suggested Reading List HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide) by Elizabeth Castro ISBN-13: 978-0-321-43084-7 CSS To The Point by Scott DeLoach ISBN-13: 978-0-615-21213-5 Cascading Style Sheets: Designing for the Web (3rd Edition) (Paperback) by Hakon Wium Lie and Bert Bos ISBN-13: 978-0321193124 CSS: The Definitive Guide, Third Edition by Eric Meyer ISBN-13: 978-0596527334

44 Questions? Mike Hamilton V.P. Product Management MadCap Software mhamilton@madcapsoftware.com

45 Thank You! Mike Hamilton V.P. Product Management MadCap Software mhamilton@madcapsoftware.com

Download ppt "Mike Hamilton V.P. Product Management MadCap Software Cascading Style Sheets (Part 3): Images and Text."

Similar presentations

MadCap Flare – Controlling Document Look and Feel with CSS

MadCap Flare – Controlling Document Look and Feel with CSS
Wordpress Training with Sarah Sibert. How To... Removing elements from your theme – search bar/dates on posts/comments Change the styling of headings.

Wordpress Training with Sarah Sibert. How To... Removing elements from your theme – search bar/dates on posts/comments Change the styling of headings.
Copyright © 2003 Pearson Education, Inc. Slide 3-1 Created by Cheryl M. Hughes The Web Wizards Guide to XML by Cheryl M. Hughes.

Copyright © 2003 Pearson Education, Inc. Slide 3-1 Created by Cheryl M. Hughes The Web Wizards Guide to XML by Cheryl M. Hughes.
Copyright © 2003 Pearson Education, Inc. Slide 4-1 Created by Cheryl M. Hughes, Harvard University Extension School Cambridge, MA The Web Wizards Guide.

Copyright © 2003 Pearson Education, Inc. Slide 4-1 Created by Cheryl M. Hughes, Harvard University Extension School Cambridge, MA The Web Wizards Guide.
Copenhagen, 6 December 2004 Modern CSS Principles Miruna Bădescu Finsiel Romania.

Copenhagen, 6 December 2004 Modern CSS Principles Miruna Bădescu Finsiel Romania.
Cascading Style Sheets

Cascading Style Sheets
1 © Netskills Quality Internet Training, University of Newcastle Introducing Cascading Style Sheets © Netskills, Quality Internet.

1 © Netskills Quality Internet Training, University of Newcastle Introducing Cascading Style Sheets © Netskills, Quality Internet.
September 2000 1 Public Library Web Managers Workshop 2000 Cascading Style Sheets Manjula Patel UKOLN University of Bath Bath, BA2 7AY UKOLN is funded.

September Public Library Web Managers Workshop 2000 Cascading Style Sheets Manjula Patel UKOLN University of Bath Bath, BA2 7AY UKOLN is funded.
The University of Adelaide HTML Basics: Getting your code to work Peter Murdoch March 2014 PREPARING GOOD LOOKING DOCUMENTS.

The University of Adelaide HTML Basics: Getting your code to work Peter Murdoch March 2014 PREPARING GOOD LOOKING DOCUMENTS.
HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.

HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.
HIGH LEVEL OVERVIEW: CSS CSS SYNTAX CONSISTS OF A SET OF RULES THAT HAVE 3 PARTS: A SELECTOR, A PROPERTY, AND A VALUE. IT’S NOT NECESSARY TO REMEMBER THIS.

HIGH LEVEL OVERVIEW: CSS CSS SYNTAX CONSISTS OF A SET OF RULES THAT HAVE 3 PARTS: A SELECTOR, A PROPERTY, AND A VALUE. IT’S NOT NECESSARY TO REMEMBER THIS.
CSS-Formatting Review Cascading Style Sheets addstyle to your HTML web pages.

CSS-Formatting Review Cascading Style Sheets addstyle to your HTML web pages.
Intro To Cascading Style Sheets By Mario Yannakakis.

Intro To Cascading Style Sheets By Mario Yannakakis.
CSS Basics Style and format your web site using CSS.

CSS Basics Style and format your web site using CSS.
CSS Cascading Style Sheets. What is CSS? CSS stands for Cascading Style Sheets (the page—or sheet—helps you create a style that will cascade across all.

CSS Cascading Style Sheets. What is CSS? CSS stands for Cascading Style Sheets (the page—or sheet—helps you create a style that will cascade across all.
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.

CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
CSS. CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style.

CSS. CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style.
Web Engineering 1 Ishaq Khan Shinwari MCS City University Peshawar.

Web Engineering 1 Ishaq Khan Shinwari MCS City University Peshawar.
1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.

1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.
CSS Internet Engineering Spring 2014 Bahador Bakhshi CE & IT Department, Amirkabir University of Technology.

CSS Internet Engineering Spring 2014 Bahador Bakhshi CE & IT Department, Amirkabir University of Technology.

Similar presentations

Ads by Google