Handout-Advanced CSS Topics

Lists

• Already familiar with <ol>, <ul>, and <dl>

• Have already seen effect of list-style-type: none; to remove bullets from the list

  • We combined this with display: inline; to get a horizontal navigation bar from unordered list

• We can also give lists a different bullet image than the customary by using list-style-image: url(whatEver.gif);

  • Will generate the image for each item in list

    • Make certain images are sized appropriately; if the image is too large, it won't work. 35 x 35 pixels or smaller is around the correct size.

---

Lists continued

• List marker positions

  • List-style-position

    • Default is outside, but could specify inside

• Can also specify margins and padding

  • Can use these for indentation devices for most modern browsers

---

Generated content

• Content is created by the browser

  • Not represented in markup or content

  • Not a part of the DOM (Document Object Model)

  • Rely on :before and :after

    • a[href]:before { content: "(link)"; }

    • Will place the text (link) in front of each link on the page

      Google Link , for example (**View in Firefox if your browser has issues).

  • Might be helpful to identify the type of content you are linking to (for example: PDF file)

  • Can also be helpful to actually include link

---

Generated Content-links

• Consider that I want to use media="print" in my CSS

  • a: link: after {
    content: " (" attr(href) " ) ";
    }
    

  • This will add information regarding the actual location of the file on the printed version of the link

    • Do a print preview; if you have trouble in your browser, try Firefox, but most newer browsers should support this
      If you print my handouts, the link locations will display. I have the following in my print stylesheet:
      a:link:after, a:visited:after {
      content: " (" attr(href) ") ";
      font-size: 90%;
      }
      
      Here's an example link

---

Generated Content (continued)

• When you include content, you can't use HTML as part of the content

  • To go to new line use \A

  • Can have problems in older browsers

• Note that we used attr(href) to actually insert the value of the attribute

• If the attribute doesn't exist, an empty string is inserted

---

Counters

• counter-reset

  • To reset the starting point for a counter

    • h2#ch3 {counter-reset: chapter 3; }

• counter-increment

  • Every level of nesting provides new scope for counters also

    For example, I have given the list below an id of counter, and placed the following code in my css:
    #counter {counter-reset: item 3;}
    #counter li:before {counter-increment: item;
    content: counter(item) ".";
    }
    

    *note, may need to view in Firefox, it should have both bullets and numbers.

    • This should be item 4
    • This is 5
    • This is 6

---

User Interface Styles

• You can use CSS to make the visitor's experience more enjoyable or more confusing

• Consider these font keywords:

  • Caption, icon, menu, message-box, small-caption, status-bar

    Example: body {font: icon;}

  • These are keywords that basically say, "make my font look like the icon font on the user system" and "make my font look like font on the user system menu". Used to style the web page so it is more like the desktop. So, the above style will set the font in the body to look like the font under the system icons.

  • Can also style other parts of browser to match the style on the users desktop

---

Changing the cursor

• Use cursor property

  • Values include: pointer, crosshair, move, text, wait, help, progress

    Can also change to a customized cursor. For example:
    body {cursor: url(globe.gif), pointer}

---

Outlines

• Similar to a border

  • But they do not participate in the flow of the document

  • They can be non-rectangular (meaning, if applied to an inline element, the outline may not be a box but may look like two offset stacked boxes).

  • Properties include outline-style, outline-width, outline-color

    For example, p {outline-style: dotted; outline-width: 10px; outline-color: #ff0000;}

    This is an example of a paragraph outline.

---

Non-screen media

• Can designate styles for specific media. Can be done by creating a stylesheet partiularly for that media (for example, in a linked style sheet, you would use the media= property: <link... media="print" or projection or screen or more)

---

Media="print"

• Can designate rules for a page:

  • @page { size 7.5in 10in; margin: 0.5in; }

  • @page { size: landscape; }

  • Page-break-before or page-break-after;

  • Consider h2 {page-break-before: always; }

    • Really don't understand why more authors don't employ these features on their pages

    • Older browsers may not support this

  • Also support for widows and orphans

---

Media="projection"

• Can go full screen mode and make "slides" just like PowerPoint

  • Many browsers need an extension or addon to accomplish

---

Media="aural"

• Limited support at this time

• speak: spell-out; as an example

• speak-punctuation: code;

• speak-header: always;

  • For table headers

• speech-rate: slow;

• volume: soft;

• voice-family: male (need XML file, etc.)

• pitch: high;