CSS: Beyond the Code. Karen Perone Rodman Public Library.

Size: px

Start display at page:

Download "CSS: Beyond the Code. Karen Perone Rodman Public Library."

Kristina Harvey
5 years ago
Views:

1 CSS: Beyond the Code Karen Perone Rodman Public Library

2 HTML vs. CSS vs. Javascript HTML for content (text, images, sound) CSS for presentation (layout, color) Javascript for behavior (cursor in the box, form field validation)

3 Why CSS? Keep presentation separate from the content Leaner, meaner web pages Ease of maintenance Easier means of reusing web pages for other purposes (RSS, text-to-speech) Separate style sheets for media types

4 The Cascade The C in CSS Least specific to most specific Depends on type of origin User agent (browser defaults) Author (web page creator) User (user styles in browser)

5 User Agent Mozilla/5.0 (Windows; U; Windows NT 5.1; en-us; rv: ) Gecko/ Firefox/ Built-in style sheet in all web browsers Varies from Firefox to IE6 to IE7 to Opera, etc.

6 Author Styles Created by the web site/page author Can be (least specific to most specific): Linked (external) Style element (embedded) Element attribute (in-line)

7 WebPAC Style Sheets ProStyles.css -or- iiistyles.css (default values; cannot be modified) styles.css (main author style sheet) ie_styles.css (specifically for IE browsers) printver.css (specifically for print version)

8 The Document Tree Helpful in determining containing elements Establishes: Ancestor Descendent Parent Child Sibling Determines inheritance of CSS rules

10 Relationships

11 Class vs. ID ID Can be used only once on a page Identifies a specific section Example: toplogo, content, side navigation, footer Use in style sheet: div#nav Use in HTML: <div id= nav >

12 ID in styles.css Selector specified div#main {margin: 0 20px 5px 5%;} Implied universal selector #main div {padding-top:.2em} Can be combined with class #main.tabs a:hover { text-decoration: underline; }

13 Class vs. ID Class Can be used multiple times Styles a type of content Example: boldface, paragraph alignment, font Use in style sheet: p.bold Use in HTML: <p class= bold >

14 Class in styles.css Implied universal selector used extensively.navigationrow { margin: -3px; } Could be used as a div or p or ul div class= navigationrow p class= navigationrow ul class= navigationrow

15 Pseudo-classes Most common :link :visited :hover :active Always use in this order: L V H A (LoVe HA!)

16 Pseudo-classes Less often used :focus input:focus { background-color: Red; } BEFORE AFTER

17 Fun with Pseudo-classes :first-child table.bibitems tr.bibitemsentry td:first-child { font-weight: bold ; color: Green ; font-size: 200% ; background-color: red ; }

18 How We Got There From briefcit.html: table.bibitems tr.bibitemsentry td:first-child... span class="briefcititems" table class="bibitems" tbody tr class="bibitemsheader" tr class="bibitemsentry" th class="bibitemsheader" th class="bibitemsheader" th class="bibitemsheader" td td td a a

19 Specificity Represented by four comma-separated values Calculated based on counting elements in the selector The highest value wins In case of a tie, the last declaration wins

20 Figuring the Specificity 1. In-line style 2. Ids 3. Classes, Attributes, and Pseudo-classes 4. Element Types and Pseudo-elements

21 Consider This Example <style type= text/css > </style> p { color: black; background-color: blue; font-size: 3em; } div.warning p { color: red; } div#caution p { color: yellow; } body#home div p { color: white; } <body id="home"> <div id="caution"> <p>what color am I?</p> </div> </body> What color will the paragraph text be?

22 Add Up the Scores p { color: black; background-color: blue; font-size: 3em; } 0,0,0,1 div.warning p { color: red; } 0,0,1,2 div#caution p { color: yellow; } 0,1,0,2 body#home div p { color: white; } 0,1,0,3 <body id="home"> <div id="caution"> <p>what color am I?</p> </div> </body>

23 And the Winner Is

24 Inheritance of Style In the absence of a specific declaration for the element Value of element will inherit its characteristics from its parent

25 Specificity High to Low

28 Why Is My Text So Small? Container size has nothing to do with it Size property is inherited from parent Nesting the elements will cause cumulative size Relative font size the culprit

29 Container Elements Box elements that can contain other elements Examples of box elements: body div p h1 ul

30 Example div.a { font-size: 85% ; } div.b { font-size: 85% ; } div.c { font-size: 85% ; } <div class= a > text in div.a <div class= b > text in div.b <div class= c > text in div.c </div> </div> </div>

31 Hard to tell from here why text gets smaller

32 But add in borders and widths and it becomes apparent

33 Mathematically Speaking div.a - 85% of body default font size 85% x 100% = 85% div.b - 85% of div.a font size 85% x 85% = 72.25% div.c - 85% of div.b font size 85% x 72.25% = 61.41%

34 Options that Work div.a { font-size: 18pt ; width: 85% ; border: 2px solid red ;} div.b { font-size: 18pt ; width: 85% ; border: 2px dashed blue ;} div.c { font-size: 18pt ; width: 85% ; border: 2px dotted green ; } ================== div.a { font-size: 85% ; width: 85% ; border: 2px solid red ;} div.b { font-size: 1em ; width: 85% ; border: 2px dashed blue ;} div.c { font-size: 1em ; width: 85% ; border: 2px dotted green ; }

35 Check Your Work HTML Validator CSS Validator

36 Check in Various Browsers

37 CSS Editor TopStyle Lite or Pro Lite is free Pro is $79.95 and WORTH it

38 Develop Your Skills Take an Online Course Discounts available to International Webmasters Association members ($49 annually) (free)

39 For More Information General CSS: Olsson, Tommy & Paul O Brien. The Ultimate CSS Reference. Sitepoint, Specificity: O Brien, Paul. Get Specific with Your CSS Styles.

40 CSS Cookbooks Andrew, Rachel. The CSS Anthology: 101 Essential Tips, Tricks & Hacks. Sitepoint, Schmitt, Christopher. CSS Cookbook. O Reilly, 2007.

Styles, Style Sheets, the Box Model and Liquid Layout

Styles, Style Sheets, the Box Model and Liquid Layout This session will guide you through examples of how styles and Cascading Style Sheets (CSS) may be used in your Web pages to simplify maintenance of