2005 WebGUI Users Conference

Size: px

Start display at page:

Download "2005 WebGUI Users Conference"

Lionel O’Connor’
6 years ago
Views:

1 Cascading Style Sheets 2005 WebGUI Users Conference

2 Style Sheet Types

3 3 Options Inline Embedded Linked

4 Inline Use an inline style sheet to modify a single element one time in a page. <p style= color: red; font-style: italic; > Content here... </p>

5 Embedded Use an embedded style sheet to control styles on an entire page. <style type= text/css > p { color: navy; font-weight: bold; font-size: 10px; background-color: white; } </style>

6 Linked Use a linked style sheet to control styles on multiple pages. <link rel= stylesheet type= text/css href= stylesheet.css />

7 CSS Basics

8 CSS Rules Every style contains one or more rules, each rule containing two parts: Selector: defines the HTML element to which the rule applies. Declarations: Contains at least one property and value selector { property: value; }

9 Selector Properties Values h1 { color: red; font-size: large; }

10 Classes & IDs

11 Class Selector Create your own selectors based on classes or unique names you define. Class selectors are indicated by a period.

12 Class Selector CSS.recipeName { font-family: Arial; color: red; } CSS Applied <p class= recipename > Chicken Pasta </p> <p class= recipename > Pizza </p>

13 Class Selector

14 Id Selector Similar to the class it can be set on nearly any tag and can be used as a CSS selector. You can only used an id selector once on a given page.

16 id Selector

17 <div> & <span>

18 <div> & <span> <div> is short for division (within a document), and is a container, a block level element that has a variety of uses. <span> is an inline element.

19 <div> & <span> CSS.tips{ color: black; background-color: #e8e8e8; font-family: Arial; } #footer{ color: green; background-color: #white; font-family: Times; font-style: italic; } CSS Applied <span class= tips > <p>useful TIPS FOR YOU</p> <ul> <li>tip 1</li> <li>tip 2</li> <li>tip 3</li> <li>tip 4</li> </ul> </span> <hr> <div id= footer >Your Footer Here</div>

20 <div> & <span>

21 Controlling Font Display

22 Controlling Font Display p { font-family: Arial; font-style: italic; font-variant: small-caps; font-weight: 500; font-size: 12px; color: blue; } Allows you to specify what font you want to display. Toggles between normal and italic fonts. Allows you to select between normal and small caps. Choose from normal, bold, lighter, bolder, or (in increments of 100). Options range from in, mm, cm, pt, pc, px, ex, em, #% Choose color by using color names, hexidecimal values, or RGB values

23 Spacing & Alignment

24 Spacing & Alignment h1 { word-spacing: 2px; letter-spacing: 3px; text-decoration: underline; } vertical-align: top; text-transform: capitalize; text-align: right; Specify space between words (default is normal). Specify space between letters (default is normal). Add values of underline, overline, line-through, blink (default is none). Values include baseline, sub, super, top, text-top, middle, bottom, text-bottom, & %. Capitalize text, or change text to uppercase or lowercase. Values include left, right, center & justify.

25 Background Properties

26 Background Properties body { background-color: black; background-image: url(image.gif); background-repeat: repeat-y; background-attachment: fixed; background-position: top right; } Allows you to set a background color for any element. Allows you to set a background image for any element. Values are repeat, repeat-x, repeat-y, or no-repeat. Controls the scrolling of your background. Values are fixed or scroll. Values are top/center/bottom & left/center/right.

27 The Box Model margins borders padding CONTENT padding borders margins

28 margin-top(left, bottom, right) specify margins in measurements or percentages body { background-color: black; background-image: url(image.gif); background-repeat: repeat-y; background-attachment: fixed; background-position: top right; margin-left: 15px; }

29 padding-top(left, bottom, right) similar to cell padding of tables. You can add padding to any element. p { padding-top: 15px; padding-left: 15px; }

30 border(top, left, bottom, right) used to draw a border around your element. Border styles include solid, dashed, dotted. p { padding-top: 15px; padding-left: 15px; border: 2px solid red; }

31 Creating a simple 3 Column Layout

32 Create your container #container { width: 90%; margin: 10px auto; } The width of 90% allows your site to scale to 90% of your browser width allowing for some padding around your site. Setting left and right margins to auto centers the container.

33 Add some style to your container #container { width: 90%; margin: 10px auto; background-color: #fff; color: #333; border: 1px solid gray; line-height: 19px; } Add background colors / images appropriate for your site. Adding line-height increases readability.

34 Styling the top banner #top { padding:.5em; background-color: #ddd; border-bottom: 1px solid gray; }

35 Remove margins and padding from your h1 #top h1 { padding: 0; margin: 0; } Using a descendant selector you can modify the h1 tag inside of your top banner.

36 Create your left column #leftnav { float: left; width: 160px; margin: 0; padding: 1em; } Floating the column to the left and applying a width of 160 px allows us to define the size and placement of our column.

37 Create your right column #rightnav { float: right; width: 160px; margin: 0; padding: 1em; } Floating the column to the right and applying a width of 160 px allows us to define the size and placement of our column.

38 Set margins on the content div #content{ margin-left: 200px; border-left: 1px solid gray; margin-right: 200px; border-right: 1px solid gray; padding: 10px; } Apply margin-left and marginright of 200px to prevent text from wrapping underneath the left and right columns. A 1px border is also applied to the left and right of the content div.

39 Styling the footer #footer{ clear: both; margin: 0; padding: 5px; color: #333; background-color: #ddd; border-top: 1px solid gray; } Setting the footer to clear: both pushes the footer below any floated elements above it.

40 The HTML <div id="container"> <div id="top"> <h1>header</h1> </div> <div id="leftnav"> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p> </div> <div id="rightnav"> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p> </div> <div id="content"> <h2>subheading</h2> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p> <p>ut wisi enim ad minim veniam, quis nostrud exerci tation...</p> </div> <div id="footer"> Footer </div> </div>

41 The Final Product

42 Resources

43 Questions

Appendix D CSS Properties and Values

HTML Appendix D CSS Properties and Values This appendix provides a brief review of Cascading Style Sheets (CSS) concepts and terminology, and lists CSS level 1 and 2 properties and values supported by